@statistikzh/leu 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## [0.3.0](https://github.com/statistikZH/leu/compare/v0.2.0...v0.3.0) (2023-11-30)
+
+
+### Features
+
+* refactor component properties to include reflection ([#69](https://github.com/statistikZH/leu/issues/69)) ([cf2992b](https://github.com/statistikZH/leu/commit/cf2992b7c9af76a9e966cae7e4e35f288a155c89))
+
+
+### Bug Fixes
+
+* **checkbox:** remove tabIndex allocation because the property is not used by the component anymore ([4999754](https://github.com/statistikZH/leu/commit/4999754c363bfa996db9c00233845f1f3bab95e5))
+* **radio:** remove tabIndex allocation because the property is not used by the component anymore ([abc9c85](https://github.com/statistikZH/leu/commit/abc9c858e2575600bc3d71a74daf87b333ef509c))
+
+## [0.2.0](https://github.com/statistikZH/leu/compare/v0.1.0...v0.2.0) (2023-11-28)
+
+
+### Features
+
+* **accordion:** implement accordion component ([b962d2c](https://github.com/statistikZH/leu/commit/b962d2c51aa17dbb909e8cbcb9ed0436d1b4b84d))
+* **input:** move focus into the input field after clearing the value ([#55](https://github.com/statistikZH/leu/issues/55)) ([ec92026](https://github.com/statistikZH/leu/commit/ec9202689ba2997570531c272162be1da54dc156))
+* **select:** add a more specific label if no options are available ([#57](https://github.com/statistikZH/leu/issues/57)) ([9ed62bf](https://github.com/statistikZH/leu/commit/9ed62bf5eb847c0814a92ff6066313eedf32b44a))
+* **select:** close the select element if a click happens outside of the element ([#58](https://github.com/statistikZH/leu/issues/58)) ([b2df185](https://github.com/statistikZH/leu/commit/b2df18537acc294552984eb539706400305564bb))
+
+
+### Bug Fixes
+
+* **input:** delegate focus to the actual input field ([ee9b21d](https://github.com/statistikZH/leu/commit/ee9b21de69322b1ebc822ab3a2f3bfb1a0ba6572))
+* **menu:** enforce styles of the hr element with important as they are part of the light dom ([d6d7a3f](https://github.com/statistikZH/leu/commit/d6d7a3f1a2182854747908cf142678f352e1e014))
+* **select:** actually set the filter input ref and use the correct attribute ([ee9b21d](https://github.com/statistikZH/leu/commit/ee9b21de69322b1ebc822ab3a2f3bfb1a0ba6572))
+* **theme:** fix a typo inside the hex notation ([82a6961](https://github.com/statistikZH/leu/commit/82a6961ae44c93826f6d97924a845f4d418b8f3b))
+
 ## [0.1.0](https://github.com/statistikZH/leu/compare/v0.0.2...v0.1.0) (2023-11-15)
 
 

package/README.md

@@ -20,12 +20,37 @@ npm i @statistikzh/leu
 
 ## Usage
 
+In order for the components to work, you need to load the theme styles and the font definitions globally.
+The theme file is part of the package (`dist/theme.css`).
+The fonts on the other hand have to be licensed and are therefore not included in the package.
+
+If you have an environment that resolves bare module imports, you can use the library like this:
+
+```html
+<link rel="stylesheet" href="@statistikzh/leu/theme.css" />
+<script type="module">
+  import "@statistikzh/leu/leu-input.js"
+</script>
+
+<leu-input></leu-input>
+```
+
+### CDN
+
+Browsers can't resolve bare module imports without import maps. But we can use a CDN to resolve the imports for us.
+This is useful if you're just using plain HTML and JavaScript without any build or transformation steps.
+Also this is applicable in an environment like [Observable](https://observablehq.com).
+
 ```html
+<link
+  rel="stylesheet"
+  href="https://esm.run/@statistikzh/leu@0.1/dist/theme.css"
+/>
 <script type="module">
-  import "@statistikzh/leu/leu-radio.js"
+  import "https://esm.run/@statistikzh/leu@0.1/dist/leu-input.js"
 </script>
 
-<leu-radio></leu-radio>
+<leu-input></leu-input>
 ```
 
 ## Linting and formatting

package/dist/Button.js

@@ -368,40 +368,52 @@ _defineProperty(LeuButton, "shadowRootOptions", {
 });
 _defineProperty(LeuButton, "properties", {
   label: {
-    type: String
+    type: String,
+    reflect: true
   },
   icon: {
-    type: String
+    type: String,
+    reflect: true
   },
   iconAfter: {
-    type: String
+    type: String,
+    reflect: true
   },
   size: {
-    type: String
+    type: String,
+    reflect: true
   },
   variant: {
-    type: String
+    type: String,
+    reflect: true
   },
   type: {
-    type: String
+    type: String,
+    reflect: true
   },
   disabled: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   round: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   active: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   inverted: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   expanded: {
-    type: String
+    type: String,
+    reflect: true
   },
   fluid: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   }
 });
 function defineButtonElements() {

package/dist/Checkbox.js

@@ -10,7 +10,6 @@ class LeuCheckbox extends LitElement {
     super();
     this.checked = false;
     this.disabled = false;
-    this.tabIndex = 0;
     this.checkIcon = Icon("check");
   }
   handleChange(event) {
@@ -131,13 +130,16 @@ _defineProperty(LeuCheckbox, "properties", {
     reflect: true
   },
   identifier: {
-    type: String
+    type: String,
+    reflect: true
   },
   value: {
-    type: String
+    type: String,
+    reflect: true
   },
   name: {
-    type: String
+    type: String,
+    reflect: true
   }
 });
 function defineCheckboxElements() {

package/dist/CheckboxGroup.js

@@ -66,7 +66,8 @@ _defineProperty(LeuCheckboxGroup, "styles", css`
   `);
 _defineProperty(LeuCheckboxGroup, "properties", {
   orientation: {
-    type: String
+    type: String,
+    reflect: true
   }
 });
 function defineCheckboxGroupElements() {

package/dist/{Chip-389013ff.js → Chip-5f70d04f.js}

@@ -154,7 +154,8 @@ _defineProperty(LeuChipBase, "shadowRootOptions", {
 });
 _defineProperty(LeuChipBase, "properties", {
   inverted: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   }
 });
 

package/dist/ChipGroup.js

@@ -62,7 +62,8 @@ _defineProperty(LeuChipGroup, "styles", css_248z);
 _defineProperty(LeuChipGroup, "properties", {
   selectionMode: {
     type: String,
-    attribute: "selection-mode"
+    attribute: "selection-mode",
+    reflect: true
   }
 });
 function defineChipGroupElements() {

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
 import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-389013ff.js';
+import { L as LeuChipBase } from './Chip-5f70d04f.js';
 
 const SIZES = {
   regular: "regular",
@@ -31,7 +31,8 @@ _defineProperty(LeuChipLink, "properties", {
    * @type {keyof typeof SIZES}
    */
   size: {
-    type: String
+    type: String,
+    reflect: true
   },
   href: {
     type: String,

package/dist/ChipRemovable.js

@@ -1,6 +1,6 @@
 import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-389013ff.js';
+import { L as LeuChipBase } from './Chip-5f70d04f.js';
 import { I as Icon } from './icon-03e86700.js';
 
 /**

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
 import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { html } from 'lit';
-import { L as LeuChipBase } from './Chip-389013ff.js';
+import { L as LeuChipBase } from './Chip-5f70d04f.js';
 
 const SIZES = {
   small: "small",
@@ -62,7 +62,8 @@ _defineProperty(LeuChipSelectable, "properties", {
    * @default "regular"
    */
   size: {
-    type: String
+    type: String,
+    reflect: true
   },
   /**
    * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
@@ -73,14 +74,16 @@ _defineProperty(LeuChipSelectable, "properties", {
    * @default "default"
    */
   variant: {
-    type: String
+    type: String,
+    reflect: true
   },
   selected: {
     type: Boolean,
     reflect: true
   },
   value: {
-    type: String
+    type: String,
+    reflect: true
   }
 });
 function defineChipSelectableElements() {

package/dist/Dropdown.js

@@ -58,7 +58,8 @@ class LeuDropdown extends LitElement {
 _defineProperty(LeuDropdown, "styles", css_248z);
 _defineProperty(LeuDropdown, "properties", {
   label: {
-    type: String
+    type: String,
+    reflect: true
   },
   expanded: {
     type: Boolean,

package/dist/Input.js

@@ -443,6 +443,7 @@ class LeuInput extends LitElement {
    */
   clear() {
     this.value = "";
+    this._inputRef.value.focus();
     this.dispatchEvent(new CustomEvent("input", {
       bubbles: true,
       composed: true
@@ -602,6 +603,13 @@ class LeuInput extends LitElement {
   }
 }
 _defineProperty(LeuInput, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuInput, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
 _defineProperty(LeuInput, "properties", {
   disabled: {
     type: Boolean,
@@ -616,53 +624,68 @@ _defineProperty(LeuInput, "properties", {
     reflect: true
   },
   value: {
-    type: String
+    type: String,
+    reflect: true
   },
   name: {
-    type: String
+    type: String,
+    reflect: true
   },
   error: {
-    type: String
+    type: String,
+    reflect: true
   },
   label: {
-    type: String
+    type: String,
+    reflect: true
   },
   prefix: {
-    type: String
+    type: String,
+    reflect: true
   },
   suffix: {
-    type: String
+    type: String,
+    reflect: true
   },
   size: {
-    type: String
+    type: String,
+    reflect: true
   },
   icon: {
-    type: String
+    type: String,
+    reflect: true
   },
   /* Validation attributes */
   pattern: {
-    type: String
+    type: String,
+    reflect: true
   },
   type: {
-    type: String
+    type: String,
+    reflect: true
   },
   min: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   max: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   maxlength: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   minlength: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   validationMessages: {
     type: Object
   },
   novalidate: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   /** @type {ValidityState} */
   _validity: {

package/dist/Menu.js

@@ -10,10 +10,17 @@ var css_248z = css`:host,
   --menu-divider-color: var(--leu-color-black-transp-20);
 }
 
+/*
+ * Set styles with important as the hr element is part of the
+ * light dom and therefore is affected by the global styles.
+ */
+
 :host ::slotted(hr) {
-  border: 0;
-  border-top: 1px solid var(--menu-divider-color);
-  margin: 0.5rem 0;
+  border: 0 !important;
+  border-top: 1px solid var(--menu-divider-color) !important;
+  margin: 0.5rem 0 !important;
+  padding: 0 !important;
+  background: none !important;
 }
 `;
 

package/dist/MenuItem.js

@@ -141,7 +141,8 @@ _defineProperty(LeuMenuItem, "properties", {
    * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
    */
   before: {
-    type: String
+    type: String,
+    reflect: true
   },
   /**
    * Can be either an icon name or a text
@@ -149,7 +150,8 @@ _defineProperty(LeuMenuItem, "properties", {
    * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
    */
   after: {
-    type: String
+    type: String,
+    reflect: true
   },
   active: {
     type: Boolean,

package/dist/Pagination.js

@@ -175,10 +175,12 @@ _defineProperty(LeuPagination, "properties", {
     reflect: true
   },
   itemsOnAPage: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   dataLength: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   _minPage: {
     type: Number,

package/dist/Radio.js

@@ -102,7 +102,6 @@ class LeuRadio extends LitElement {
     super();
     this.checked = false;
     this.disabled = false;
-    this.tabIndex = 0;
   }
   handleChange(event) {
     this.checked = event.target.checked;
@@ -144,13 +143,16 @@ _defineProperty(LeuRadio, "properties", {
     reflect: true
   },
   identifier: {
-    type: String
+    type: String,
+    reflect: true
   },
   value: {
-    type: String
+    type: String,
+    reflect: true
   },
   name: {
-    type: String
+    type: String,
+    reflect: true
   }
 });
 function defineRadioElements() {

package/dist/RadioGroup.js

@@ -154,7 +154,8 @@ _defineProperty(LeuRadioGroup, "styles", css`
   `);
 _defineProperty(LeuRadioGroup, "properties", {
   orientation: {
-    type: String
+    type: String,
+    reflect: true
   }
 });
 function defineRadioGroupElements() {

package/dist/Select.js

@@ -325,7 +325,8 @@ class LeuSelect extends LitElement {
         attribute: "open"
       },
       label: {
-        type: String
+        type: String,
+        reflect: true
       },
       options: {
         type: Array
@@ -369,6 +370,16 @@ class LeuSelect extends LitElement {
   constructor() {
     super();
     _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after"]));
+    /**
+     * Handles clicks outside of the component to close the dropdown.
+     * @internal
+     * @param {MouseEvent} event
+     */
+    _defineProperty(this, "handleDocumentClick", event => {
+      if (!this.contains(event.target) && this.open) {
+        this.closeDropdown();
+      }
+    });
     /**
      * @internal
      * @param {KeyboardEvent} e
@@ -398,9 +409,17 @@ class LeuSelect extends LitElement {
     this.optionFilterRef = createRef();
     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();
@@ -446,11 +465,6 @@ 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;
@@ -525,7 +539,9 @@ 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>
     `;
   }
@@ -536,6 +552,7 @@ class LeuSelect extends LitElement {
         size="small"
         @input=${this.handleFilterInput}
         clearable
+        ref=${ref(this.optionFilterRef)}
         >Nach Stichwort filtern</leu-input
       >`;
     }

package/dist/Table.js

@@ -255,19 +255,24 @@ _defineProperty(LeuTable, "properties", {
     type: Array
   },
   firstColumnSticky: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   itemsOnAPage: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   sortIndex: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   sortOrderAsc: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   width: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   _shadowLeft: {
     type: Boolean,

package/dist/index.js

@@ -19,7 +19,7 @@ import './defineElement-ba770aed.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
-import './Chip-389013ff.js';
+import './Chip-5f70d04f.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/map.js';

package/dist/leu-chip-link.js

@@ -1,6 +1,6 @@
 import { defineChipLinkElements } from './ChipLink.js';
 import './defineElement-ba770aed.js';
 import 'lit';
-import './Chip-389013ff.js';
+import './Chip-5f70d04f.js';
 
 defineChipLinkElements();

package/dist/leu-chip-removable.js

@@ -1,7 +1,7 @@
 import { defineChipRemovableElements } from './ChipRemovable.js';
 import './defineElement-ba770aed.js';
 import 'lit';
-import './Chip-389013ff.js';
+import './Chip-5f70d04f.js';
 import './icon-03e86700.js';
 
 defineChipRemovableElements();

package/dist/leu-chip-selectable.js

@@ -1,6 +1,6 @@
 import { defineChipSelectableElements } from './ChipSelectable.js';
 import './defineElement-ba770aed.js';
 import 'lit';
-import './Chip-389013ff.js';
+import './Chip-5f70d04f.js';
 
 defineChipSelectableElements();

package/dist/theme.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;

package/package.json

@@ -3,10 +3,15 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/statistikzh/leu.git"
+  },
+  "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"src/**/*.js\"",
     "build": "rimraf dist && npm run build:js && npm run build:css",