@oiz/stzh-components 2.0.0 → 2.1.0-alpha

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+/**
+ *
+ */
+export class StzhSticky {
+  constructor() {
+    this.observe = ([entry]) => {
+      this.updateStuck(entry.target);
+    };
+    this.disableStickyTop = false;
+    this.disableStickyBottom = false;
+    this.isStuckTop = false;
+    this.isStuckBottom = false;
+  }
+  disableStickyWatcher() {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.updateStuck(this.element);
+      });
+    });
+  }
+  isStuckTopWatcher(newValue) {
+    this.stzhStuckTop.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  isStuckBottomWatcher(newValue) {
+    this.stzhStuckBottom.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  updateStuck(element) {
+    const topCss = parseInt(getComputedStyle(element).top, 10);
+    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
+    const rect = element.getBoundingClientRect();
+    if (topCss) {
+      this.isStuckTop = rect.top < 0;
+    }
+    else {
+      this.isStuckTop = false;
+    }
+    if (bottomCss) {
+      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;
+    }
+    else {
+      this.isStuckBottom = false;
+    }
+  }
+  connectedCallback() {
+    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+    this.observer.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-sticky": true,
+      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck-top": this.isStuckTop,
+      "stzh-sticky--is-stuck-bottom": this.isStuckBottom
+    };
+    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-sticky"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-sticky.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-sticky.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disableStickyTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable sticking to top"
+        },
+        "attribute": "disable-sticky-top",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disableStickyBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable sticking to bottom"
+        },
+        "attribute": "disable-sticky-bottom",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isStuckTop": {},
+      "isStuckBottom": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhStuckTop",
+        "name": "stzhStuckTop",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sticky stuck top event"
+        },
+        "complexType": {
+          "original": "StzhStickyStuckTopEvent",
+          "resolved": "{ component: \"stzh-sticky\"; sticky: boolean; }",
+          "references": {
+            "StzhStickyStuckTopEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhStuckBottom",
+        "name": "stzhStuckBottom",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sticky stuck bottom event"
+        },
+        "complexType": {
+          "original": "StzhStickyStuckBottomEvent",
+          "resolved": "{ component: \"stzh-sticky\"; sticky: boolean; }",
+          "references": {
+            "StzhStickyStuckBottomEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "disableStickyTop",
+        "methodName": "disableStickyWatcher"
+      }, {
+        "propName": "disableStickyBottom",
+        "methodName": "disableStickyWatcher"
+      }, {
+        "propName": "isStuckTop",
+        "methodName": "isStuckTopWatcher"
+      }, {
+        "propName": "isStuckBottom",
+        "methodName": "isStuckBottomWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-sticky/stzh-sticky.stories.js

@@ -0,0 +1,91 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+
+export default {
+  title: 'Components/Sticky',
+  component: 'stzh-sticky',
+  parameters: {
+    actions: {
+      handles: ['stzhStuckTop', 'stzhStuckBottom']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    }
+  }
+};
+
+const Template = (args) => (
+  <stzh-row>
+    <stzh-cell span-small="4">
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      </stzh-text>
+    </stzh-cell>
+
+    <stzh-cell span-small="8">
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+
+        <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+      </stzh-text>
+
+      <stzh-sticky {...args}>
+        <stzh-actions>
+          <stzh-button slot="primary" label="Label" effect="cta" icon="arrow-right-long" icon-position="right"></stzh-button>
+        </stzh-actions>
+      </stzh-sticky>
+
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+
+        <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+      </stzh-text>
+    </stzh-cell>
+  </stzh-row>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -14,15 +14,6 @@ const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
  */
 export class StzhTable {
   constructor() {
-    /** Columns that should be sticky on the left side (column indexes separated by comma) */
-    this.fixedLeft = null;
-    /** Columns that should be sticky on the right side (column indexes separated by comma) */
-    this.fixedRight = null;
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateCellClasses = () => {
       if (!this.tableWrapper) {
         return;
@@ -103,6 +94,13 @@ export class StzhTable {
       }
       this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
     };
+    this.fixedLeft = null;
+    this.fixedRight = null;
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   fixedCellWatcher() {
     this.updateCellClasses();

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

@@ -4,21 +4,13 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhText {
   constructor() {
-    /** Font used */
     this.font = "default";
-    /** Type of curve */
     this.curve = "default";
-    /** Whether if text is lead text */
     this.lead = false;
-    /** Manually overwrite font size applied by curve attribute */
     this.size = "inherit";
-    /** Manually overwrite font size applied by curve attribute above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Manually overwrite font size applied by curve attribute above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Manually overwrite font size applied by curve attribute above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Manually overwrite font size applied by curve attribute above ultra breakpoint  */
     this.sizeUltra = "inherit";
   }
   render() {

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

@@ -11,26 +11,6 @@ let toggleCounter = 0;
  */
 export class StzhToggle {
   constructor() {
-    /** Whether the toggle is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** 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;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Position of label */
-    this.labelPosition = "right";
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -64,6 +44,20 @@ export class StzhToggle {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.labelPosition = "right";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

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

@@ -29,28 +29,6 @@ let tooltipCounter = 0;
  */
 export class StzhTooltip {
   constructor() {
-    /** Whether tooltip should be open */
-    this.open = false;
-    /** Label of tooltip (used for screenreaders) */
-    this.label = "";
-    /** Content of tooltip (use instead of content slot) */
-    this.content = "";
-    /** Default placement of tooltip relative to trigger element */
-    this.placement = "bottom";
-    /** Position strategy */
-    this.strategy = "absolute";
-    /** Shifting of tooltip content */
-    this.skidding = 0;
-    /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
-    this.distance = 16;
-    /** Whether tooltip is interactive */
-    this.interactive = false;
-    /**
-     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-     * programmatically.
-     */
-    this.trigger = "hover focus";
     this.toggledByMethod = false;
     this.isHovering = false;
     this.onEscKey = (event) => {
@@ -147,6 +125,17 @@ export class StzhTooltip {
         }
       }
     };
+    this.open = false;
+    this.label = "";
+    this.content = "";
+    this.placement = "bottom";
+    this.strategy = "absolute";
+    this.skidding = 0;
+    this.distance = 16;
+    this.interactive = false;
+    this.trigger = "hover focus";
+    this.localization = undefined;
+    this.computedPlacement = undefined;
   }
   /** Show tooltip content */
   async show() {

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

@@ -18,162 +18,40 @@ let uploadCounter = 0;
  */
 export class StzhUpload {
   constructor() {
-    /**
-     * Initially pre existing files (e.g. already uploaded by the user).
-     * Array of objects that must at least include `name` and `size` attribute:
-     * `[{"name":"file1.txt", "size": 12345}, {"name":"file2.txt", "size": 12345}]`
-     */
-    this.existingFiles = [];
     this._existingFiles = [];
-    /** Label */
+    this.existingFiles = [];
     this.label = "";
-    /** Description */
     this.description = "";
-    /** Button text */
     this.button = "";
-    /**
-     * URL the files are processed to.
-     *
-     * You can also provide a function that will be called with `files` and
-     * `dataBlocks`  and must return the url as string.
-     */
     this.url = "";
-    /**
-     * Can be changed to `"put"` if necessary. You can also provide a function
-     * that will be called with `files` and must return the method.
-     */
     this.method = "post";
-    /**
-     * Will be set on the XHRequest.
-     */
     this.withCredentials = false;
-    /**
-     * Whether the upload is disabled or not.
-     */
     this.disabled = false;
-    /**
-     * Whether the upload is marked as invalid.
-     */
     this.invalid = false;
-    /**
-     * The default implementation of `accept` checks the file's mime type or
-     * extension against this list. This is a comma separated list of mime
-     * types or file extensions.
-     *
-     * Eg.: `image/*,application/pdf,.psd`
-     *
-     * This option will also be used as
-     * [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
-     * parameter on the hidden file input as well.
-     */
+    this.error = undefined;
     this.acceptedFiles = null;
-    /**
-     * If false, files will be added to the queue but the queue will not be
-     * processed automatically.
-     * This can be useful if you need some additional user input before sending
-     * files (or if you want want all files sent at once).
-     * If you're ready to send the file simply call `element.processQueue()`.
-     */
     this.autoProcessQueue = true;
-    /**
-     * If not `null` defines how many files this dropzone handles. If it exceeds,
-     * the event `stzhMaxfilesexceeded` will be called.
-     */
     this.maxFiles = null;
-    /**
-     * The maximum filesize (in MiB) that is allowed to be uploaded.
-     */
     this.maxFilesize = 25;
-    /**
-     * How many file uploads to process in parallel.
-     */
     this.parallelUploads = 2;
-    /**
-     * Whether to send multiple files in one request. If
-     * this it set to true, then the fallback file input element will
-     * have the `multiple` attribute as well. This option will
-     * also trigger additional events (like `stzhSuccessMultiple`). See the events
-     * documentation section for more information.
-     */
     this.uploadMultiple = false;
-    /**
-     * Whether you want files to be uploaded in chunks to your server. This can't be
-     * used in combination with `uploadMultiple`.
-     *
-     * See `chunksUploaded` prop for the callback to finalise an upload.
-     */
     this.chunking = false;
-    /**
-     * If `chunking` is enabled, this defines whether **every** file should be chunked,
-     * even if the file size is below chunkSize. This means, that the additional chunk
-     * form data will be submitted and the `chunksUploaded` callback will be invoked.
-     */
     this.forceChunking = false;
-    /**
-     * If `chunking` is `true`, then this defines the chunk size in bytes.
-     */
     this.chunkSize = 2 * 1024 * 1024;
-    /**
-     * If `true`, the individual chunks of a file are being uploaded simultaneously.
-     */
     this.parallelChunkUploads = false;
-    /**
-     * Whether a chunk should be retried if it fails.
-     */
     this.retryChunks = false;
-    /**
-     * If `retryChunks` is true, how many times should it be retried.
-     */
     this.retryChunksLimit = 3;
-    /**
-     * The base that is used to calculate the **displayed** filesize. You can
-     * change this to 1024 if you would rather display kibibytes, mebibytes,
-     * etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
-     * not `1 kilobyte`. You can change this to `1024` if you don't care about
-     * validity.
-     */
     this.filesizeBase = 1000;
-    /**
-     * An optional object to send additional headers to the server. Eg:
-     * `{ "My-Awesome-Header": "header value" }`
-     */
     this.headers = null;
-    /**
-     * Should the default headers be set or not?
-     * Accept: application/json <- for requesting json response
-     * Cache-Control: no-cache <- Request shouldnt be cached
-     * X-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest
-     */
     this.defaultHeaders = true;
-    /**
-     * A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
-     * and a `done` function as parameters.
-     *
-     * If the done function is invoked without arguments, the file is "accepted" and will
-     * be processed. If you pass an error message, the file is rejected, and the error
-     * message will be displayed.
-     * This function will not be called if the file is too big or doesn't match the mime types.
-     */
     this.accept = function (_file, done) {
       return done();
     };
-    /**
-     * The callback that will be invoked when all chunks have been uploaded for a file.
-     * It gets the file for which the chunks have been uploaded as the first parameter,
-     * and the `done` function as second. `done()` needs to be invoked when everything
-     * needed to finish the upload process is done.
-     */
     this.chunksUploaded = function (_file, done) {
       done();
     };
-    /**
-     * This is the element the hidden input field (which is used when clicking on the
-     * dropzone to trigger file selection) will be appended to. This might
-     * be important in case you use frameworks to switch the content of your page.
-     *
-     * Can be a selector string, or an element directly.
-     */
     this.hiddenInputContainer = "body";
+    this.localization = undefined;
   }
   existingFilesWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js

@@ -6,12 +6,6 @@ import LineColors from "./line-colors.json";
  */
 export class StzhVbzLinechip {
   constructor() {
-    /** Active */
-    this.active = false;
-    /** Show alert icon */
-    this.alert = false;
-    /** Whether it is a global disturbance */
-    this.global = false;
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -36,6 +30,10 @@ export class StzhVbzLinechip {
         originalEvent: event
       });
     };
+    this.line = undefined;
+    this.active = false;
+    this.alert = false;
+    this.global = false;
   }
   /** Focus menu item */
   async setFocus() {

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.js

@@ -12,20 +12,19 @@ const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
  */
 export class StzhVbzMajorticker {
   constructor() {
-    /** API URL(`{lang}` are replaced in the URL)  */
-    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
-    /** Data to pass in directly (alternative for API call) */
-    this.data = "";
-    /** More info link (`{lang}` and `{id}` are replaced in the URL) */
-    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
-    /** Whether ghettobox is shown (not closed before) */
-    this.ghettoboxShown = true;
     this.onGhettoboxOpen = () => {
       this.ghettoboxShown = true;
     };
     this.onGhettoboxClose = () => {
       this.ghettoboxShown = false;
     };
+    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
+    this.data = "";
+    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
+    this.dateAdapter = undefined;
+    this.localization = undefined;
+    this.ghettoboxCloseTimeKey = undefined;
+    this.ghettoboxShown = true;
   }
   async apiWatcher(newValue) {
     if (!newValue) {

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.js

@@ -16,12 +16,6 @@ const DISTURBANCE_BUS = "5";
  */
 export class StzhVbzTicker {
   constructor() {
-    /** API URL(`{lang}` are replaced in the URL)  */
-    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
-    /** Data to pass in directly (alternative for API call) */
-    this.data = "";
-    /** More info link (`{lang}` and `{id}` are replaced in the URL) */
-    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
     this.globalDisturbances = [];
     this.lines = [];
     this.counter = {
@@ -32,6 +26,11 @@ export class StzhVbzTicker {
       [`${DISTURBANCE_EVENT}`]: 0,
       [`${DISTURBANCE_BUS}`]: 0
     };
+    this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
+    this.data = "";
+    this.moreInfoLink = "https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";
+    this.dateAdapter = undefined;
+    this.localization = undefined;
   }
   localizationWatcher() {
     this.collator = new Intl.Collator(this.localization.$locale, {