@statistikzh/leu 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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)
 
 

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

@@ -624,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/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

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/package.json

@@ -3,10 +3,15 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.2.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",

package/src/components/accordion/Accordion.js

@@ -24,10 +24,10 @@ export class LeuAccordion extends LitElement {
   }
 
   static properties = {
-    headingLevel: { type: Number, attribute: "heading-level" },
+    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
     open: { type: Boolean, reflect: true },
-    label: { type: String },
-    labelPrefix: { type: String, attribute: "label-prefix" },
+    label: { type: String, reflect: true },
+    labelPrefix: { type: String, attribute: "label-prefix", reflect: true },
   }
 
   constructor() {

package/src/components/button/Button.js

@@ -40,19 +40,19 @@ export class LeuButton extends LitElement {
   }
 
   static properties = {
-    label: { type: String },
-    icon: { type: String },
-    iconAfter: { type: String },
-    size: { type: String },
-    variant: { type: String },
-    type: { type: String },
-
-    disabled: { type: Boolean },
-    round: { type: Boolean },
-    active: { type: Boolean },
-    inverted: { type: Boolean },
-    expanded: { type: String },
-    fluid: { type: Boolean },
+    label: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
+    iconAfter: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+
+    disabled: { type: Boolean, reflect: true },
+    round: { type: Boolean, reflect: true },
+    active: { type: Boolean, reflect: true },
+    inverted: { type: Boolean, reflect: true },
+    expanded: { type: String, reflect: true },
+    fluid: { type: Boolean, reflect: true },
   }
 
   constructor() {

package/src/components/checkbox/Checkbox.js

@@ -93,16 +93,15 @@ export class LeuCheckbox extends LitElement {
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String },
-    value: { type: String },
-    name: { type: String },
+    identifier: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
-    this.tabIndex = 0
 
     this.checkIcon = Icon("check")
   }

package/src/components/checkbox/CheckboxGroup.js

@@ -39,7 +39,7 @@ export class LeuCheckboxGroup extends LitElement {
   `
 
   static properties = {
-    orientation: { type: String },
+    orientation: { type: String, reflect: true },
   }
 
   constructor() {

package/src/components/chip/Chip.js

@@ -13,7 +13,7 @@ export class LeuChipBase extends LitElement {
   }
 
   static properties = {
-    inverted: { type: Boolean },
+    inverted: { type: Boolean, reflect: true },
   }
 
   constructor() {

package/src/components/chip/ChipGroup.js

@@ -18,7 +18,7 @@ export class LeuChipGroup extends LitElement {
   static styles = styles
 
   static properties = {
-    selectionMode: { type: String, attribute: "selection-mode" },
+    selectionMode: { type: String, attribute: "selection-mode", reflect: true },
   }
 
   constructor() {

package/src/components/chip/ChipLink.js

@@ -20,8 +20,7 @@ export class LeuChipLink extends LeuChipBase {
      * The size of the chip
      * @type {keyof typeof SIZES}
      */
-    size: { type: String },
-
+    size: { type: String, reflect: true },
     href: { type: String, reflect: true },
   }
 

package/src/components/chip/ChipSelectable.js

@@ -27,7 +27,7 @@ export class LeuChipSelectable extends LeuChipBase {
      * @type {keyof typeof SIZES}
      * @default "regular"
      */
-    size: { type: String },
+    size: { type: String, reflect: true },
 
     /**
      * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
@@ -37,10 +37,10 @@ export class LeuChipSelectable extends LeuChipBase {
      * @type {keyof typeof VARIANTS}
      * @default "default"
      */
-    variant: { type: String },
+    variant: { type: String, reflect: true },
 
     selected: { type: Boolean, reflect: true },
-    value: { type: String },
+    value: { type: String, reflect: true },
   }
 
   constructor() {

package/src/components/dropdown/Dropdown.js

@@ -13,7 +13,7 @@ export class LeuDropdown extends LitElement {
   static styles = styles
 
   static properties = {
-    label: { type: String },
+    label: { type: String, reflect: true },
     expanded: { type: Boolean, reflect: true },
   }
 

package/src/components/input/Input.js

@@ -78,25 +78,25 @@ export class LeuInput extends LitElement {
     required: { type: Boolean, reflect: true },
     clearable: { type: Boolean, reflect: true },
 
-    value: { type: String },
-    name: { type: String },
-    error: { type: String },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    error: { type: String, reflect: true },
 
-    label: { type: String },
-    prefix: { type: String },
-    suffix: { type: String },
-    size: { type: String },
-    icon: { type: String },
+    label: { type: String, reflect: true },
+    prefix: { type: String, reflect: true },
+    suffix: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
 
     /* Validation attributes */
-    pattern: { type: String },
-    type: { type: String },
-    min: { type: Number },
-    max: { type: Number },
-    maxlength: { type: Number },
-    minlength: { type: Number },
+    pattern: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    min: { type: Number, reflect: true },
+    max: { type: Number, reflect: true },
+    maxlength: { type: Number, reflect: true },
+    minlength: { type: Number, reflect: true },
     validationMessages: { type: Object },
-    novalidate: { type: Boolean },
+    novalidate: { type: Boolean, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: true },

package/src/components/menu/MenuItem.js

@@ -25,13 +25,13 @@ export class LeuMenuItem extends LitElement {
      * If no icon with this value is found, it will be displayed as text.
      * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
      */
-    before: { type: String },
+    before: { type: String, reflect: true },
     /**
      * Can be either an icon name or a text
      * If no icon with this value is found, it will be displayed as text
      * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
      */
-    after: { type: String },
+    after: { type: String, reflect: true },
     active: { type: Boolean, reflect: true },
     highlighted: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },

package/src/components/pagination/Pagination.js

@@ -18,8 +18,8 @@ export class LeuPagination extends LitElement {
 
   static properties = {
     page: { type: Number, reflect: true },
-    itemsOnAPage: { type: Number },
-    dataLength: { type: Number },
+    itemsOnAPage: { type: Number, reflect: true },
+    dataLength: { type: Number, reflect: true },
 
     _minPage: { type: Number, state: true },
   }

package/src/components/radio/Radio.js

@@ -16,16 +16,15 @@ export class LeuRadio extends LitElement {
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String },
-    value: { type: String },
-    name: { type: String },
+    identifier: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
-    this.tabIndex = 0
   }
 
   handleChange(event) {

package/src/components/radio/RadioGroup.js

@@ -39,7 +39,7 @@ export class LeuRadioGroup extends LitElement {
   `
 
   static properties = {
-    orientation: { type: String },
+    orientation: { type: String, reflect: true },
   }
 
   constructor() {

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 },

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 },