@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

package/dist/collection/components/stzh-cspace/stzh-cspace.css

@@ -111,25 +111,26 @@
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-  margin-bottom: var(--stzh-space-medium);
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xlarge);
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 1024px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-    margin-bottom: var(--stzh-space-large);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1260px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
+@media screen and (min-width: 1024px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
@@ -137,86 +138,34 @@
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
-:host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
 @media screen and (min-width: 1260px) {
   :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h2),
-:host ::slotted(stzh-heading[level="2"]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(h2),
-:host ::slotted(stzh-heading[level="2"]) {
-    margin-top: var(--stzh-space-xbig);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(stzh-heading[level="3"]),
 :host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h4),
-:host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(h4),
+  :host ::slotted(h3),
+:host ::slotted(stzh-heading[level="3"]),
+:host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(h4),
+  :host ::slotted(h3),
+:host ::slotted(stzh-heading[level="3"]),
+:host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(p),
@@ -238,6 +187,16 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(p),
+:host ::slotted(stzh-text),
+:host ::slotted(ul),
+:host ::slotted(ol),
+:host ::slotted(dl),
+:host ::slotted(stzh-list) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
@@ -248,48 +207,44 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
-:host ::slotted(stzh-text[curve=hero]),
-:host ::slotted(stzh-heading[curve=hero]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=hero]),
-:host ::slotted(stzh-heading[curve=hero]) {
+@media screen and (min-width: 1260px) {
+  :host ::slotted(p),
+:host ::slotted(stzh-text),
+:host ::slotted(ul),
+:host ::slotted(ol),
+:host ::slotted(dl),
+:host ::slotted(stzh-list) {
     margin-bottom: var(--stzh-space-large);
   }
 }
+:host ::slotted(stzh-text[curve=hero]),
+:host ::slotted(stzh-heading[curve=hero]) {
+  margin-bottom: var(--stzh-space-xlarge);
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=hero]),
 :host ::slotted(stzh-heading[curve=hero]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-text[curve=hero]),
 :host ::slotted(stzh-heading[curve=hero]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=h1]),
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]),
-:host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=h1]),
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -297,89 +252,51 @@
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
+:host ::slotted(stzh-heading[curve=h1]),
+:host ::slotted(stzh-text[curve=h2]),
+:host ::slotted(stzh-heading[curve=h2]) {
+  margin-top: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xxlarge);
+:host ::slotted(stzh-heading[curve=h1]),
+:host ::slotted(stzh-text[curve=h2]),
+:host ::slotted(stzh-heading[curve=h2]) {
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-    margin-top: var(--stzh-space-xbig);
-  }
-}
 :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(stzh-heading[curve=h3]),
 :host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h4]),
-:host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-text[curve=h4]),
+  :host ::slotted(stzh-text[curve=h3]),
+:host ::slotted(stzh-heading[curve=h3]),
+:host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h4]),
+  :host ::slotted(stzh-text[curve=h3]),
+:host ::slotted(stzh-heading[curve=h3]),
+:host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=p1]),
@@ -397,6 +314,14 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-text[curve=p1]),
+:host ::slotted(stzh-text[curve=p2]),
+:host ::slotted(stzh-heading[curve=p1]),
+:host ::slotted(stzh-heading[curve=p2]) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=p1]),
 :host ::slotted(stzh-text[curve=p2]),
@@ -405,6 +330,14 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-text[curve=p1]),
+:host ::slotted(stzh-text[curve=p2]),
+:host ::slotted(stzh-heading[curve=p1]),
+:host ::slotted(stzh-heading[curve=p2]) {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
 :host ::slotted(stzh-figure) {
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
@@ -413,23 +346,15 @@
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-  margin-top: var(--stzh-space-large);
-  margin-bottom: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-datalist),
-:host ::slotted(stzh-progressbar),
-:host ::slotted(stzh-section),
-:host ::slotted(stzh-hr) {
-    margin-top: var(--stzh-space-xlarge);
-  }
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -440,20 +365,12 @@
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-datalist),
-:host ::slotted(stzh-progressbar),
-:host ::slotted(stzh-section),
-:host ::slotted(stzh-hr) {
-    margin-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -467,7 +384,7 @@
 :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
   margin-top: var(--stzh-space-medium);
-  margin-bottom: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-table),
@@ -481,22 +398,16 @@
     margin-top: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-table),
-:host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-actions) {

package/dist/collection/components/stzh-datalist/stzh-datalist.js

@@ -3,25 +3,6 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhDatalist {
   constructor() {
-    /** Direction */
-    this.direction = "vertical";
-    /** Direction above small breakpoint */
-    this.directionSmall = "horizontal";
-    /** Direction above medium breakpoint  */
-    this.directionMedium = "inherit";
-    /** Direction above large breakpoint  */
-    this.directionLarge = "inherit";
-    /** Direction above ultra breakpoint  */
-    this.directionUltra = "inherit";
-    /** Hide border lines between items */
-    this.hideBorder = false;
-    /**
-     * Items in datalist
-     * Array of objects that must at least include `value` attribute.
-     * Can optionally contain `label`, `meta`, `icon`, `href` attribute:
-     * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2"}]`
-     */
-    this.items = [];
     this._items = [];
     this.actionClick = (originalEvent, item) => {
       this.stzhItemActionClick.emit({
@@ -30,6 +11,13 @@ export class StzhDatalist {
         item
       });
     };
+    this.direction = "vertical";
+    this.directionSmall = "horizontal";
+    this.directionMedium = "inherit";
+    this.directionLarge = "inherit";
+    this.directionUltra = "inherit";
+    this.hideBorder = false;
+    this.items = [];
   }
   itemsWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css

@@ -95,7 +95,7 @@
 }
 
 .stzh-datamessagelist-item {
-  padding-left: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-xlarge);
   padding-right: var(--stzh-space-medium);
   display: flex;
   position: relative;
@@ -103,19 +103,14 @@
   background-color: var(--stzh-color-white);
   /* Unread variant */
 }
-@media screen and (min-width: 600px) {
-  .stzh-datamessagelist-item {
-    padding-left: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-datamessagelist-item {
-    padding-left: var(--stzh-space-xlarge);
+    padding-left: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-datamessagelist-item {
-    padding-left: var(--stzh-space-xxlarge);
+    padding-left: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.js

@@ -4,16 +4,6 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhDatamessagelistItem {
   constructor() {
-    /** Heading */
-    this.heading = "";
-    /** Whether item should be displayed in unread state */
-    this.unread = false;
-    /** URL the item should link to */
-    this.href = "";
-    /** Description */
-    this.description = "";
-    /** External href */
-    this.externalHref = "";
     this.actionClick = (action, originalEvent) => {
       this.stzhActionClick.emit({
         component: "stzh-datamessagelist-item",
@@ -27,6 +17,16 @@ export class StzhDatamessagelistItem {
         originalEvent
       });
     };
+    this.localization = undefined;
+    this.heading = "";
+    this.unread = false;
+    this.href = "";
+    this.description = "";
+    this.externalHref = "";
+    this.loadingStatus = undefined;
+    this.meta = undefined;
+    this.actions = undefined;
+    this.tags = undefined;
   }
   loadingStatusWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/collection/components/stzh-datatable/stzh-datatable.css

@@ -131,6 +131,11 @@ stzh-datatable *::after {
     padding-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-datatable__header {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   .stzh-datatable__header {
     margin-bottom: var(--stzh-space-large);

package/dist/collection/components/stzh-datatable/stzh-datatable.js

@@ -6,26 +6,6 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhDatatable {
   constructor() {
-    /** Label */
-    this.label = "";
-    /** Sort by given column key */
-    this.sortBy = "";
-    /** Sort direction */
-    this.sortDirection = "asc";
-    /** Tokenize type */
-    this.tokenize = "forward";
-    /** ID field */
-    this.idField = "id";
-    /** Rows */
-    this.rows = [];
-    /** Columns */
-    this.columns = [];
-    this.query = "";
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateScrollStates = () => {
       if (!this.tableWrapper) {
         return;
@@ -68,6 +48,20 @@ export class StzhDatatable {
     this.onInputChange = () => {
       this.query = this.input.value;
     };
+    this.localization = undefined;
+    this.label = "";
+    this.sortBy = "";
+    this.sortDirection = "asc";
+    this.tokenize = "forward";
+    this.idField = "id";
+    this.rows = [];
+    this.columns = [];
+    this.query = "";
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   /** Toggle sort by a given column key like when clicking on a column header */
   async toggleSort(columnKey) {

package/dist/collection/components/stzh-datepicker/stzh-datepicker.js

@@ -7,41 +7,6 @@ import { createGlobalAdapter } from "../../utils/date-adapter";
  */
 export class StzhDatepicker {
   constructor() {
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.calendarMin = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.calendarMax = "";
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.calendarIsDateDisabled = () => false;
-    /** Name of the hidden date picker input. */
-    this.name = "";
-    /** Value of hidden date picker input (current selected date in ISO format). */
-    this.value = "";
-    /** Label for input field and popover */
-    this.label = "";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Size variant */
-    this.size = "default";
-    /** Show calendar inline */
-    this.inline = false;
     this.onInputChange = () => {
       const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
       if (this.input.value === "" || parsedDate) {
@@ -72,6 +37,25 @@ export class StzhDatepicker {
         this.popover.hide();
       }
     };
+    this.calendarMin = "";
+    this.calendarMax = "";
+    this.calendarIsDateDisabled = () => false;
+    this.name = "";
+    this.value = "";
+    this.label = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.inline = false;
+    this.dateAdapter = undefined;
+    this.localization = undefined;
+    this.buttonLabel = undefined;
   }
   createDateFormatters() {
     if (this.localization) {