@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

@@ -6,6 +6,8 @@ import Dropzone from "dropzone";
 Dropzone.autoDiscover = false;
 const ATTR_NAME = "data-dz-name";
 const ATTR_TYPE = "data-dz-type";
+const ATTR_SIZE = "data-dz-size";
+const ATTR_LINK = "data-dz-link";
 const ATTR_EXTENSION = "data-dz-extension";
 const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
 let uploadCounter = 0;
@@ -18,162 +20,41 @@ 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.downloadDisabled = false;
+    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") {
@@ -275,12 +156,12 @@ export class StzhUpload {
           file.previewTemplate = file.previewElement; // Backwards compatibility
           this.previewsContainer.appendChild(file.previewElement);
           if (file.size == 0) {
-            file.previewElement.classList.add('dz-empty');
+            file.previewElement.classList.add("dz-empty");
           }
-          for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
+          for (var node of file.previewElement.querySelectorAll(`[${ATTR_NAME}]`)) {
             node.textContent = file.name;
           }
-          for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
+          for (node of file.previewElement.querySelectorAll(`[${ATTR_SIZE}]`)) {
             node.innerHTML = this.filesize(file.size);
           }
           if (this.options.addRemoveLinks) {
@@ -318,6 +199,20 @@ export class StzhUpload {
         if (file.status === "error") {
           self.errorsElement.appendChild(file.previewElement);
         }
+        else {
+          if (!self.downloadDisabled) {
+            let fileHref = file.url || '';
+            if (file.upload) {
+              fileHref = URL.createObjectURL(file);
+            }
+            if (fileHref) {
+              for (var node of file.previewElement.querySelectorAll(`[${ATTR_LINK}]`)) {
+                node.setAttribute("href", fileHref);
+                node.setAttribute("download", file.name);
+              }
+            }
+          }
+        }
         if (file._removeLink) {
           file._removeLink.innerHTML = this.options.dictRemoveFile;
         }
@@ -367,44 +262,45 @@ export class StzhUpload {
       },
       previewTemplate: `
       <div class="stzh-upload__preview">
-        <div class="stzh-upload__inner">
-          <div class="stzh-upload__image">
-            <img data-dz-thumbnail />
-          </div>
+        <div class="stzh-upload__image">
+          <img data-dz-thumbnail />
+        </div>
 
-          <div class="stzh-upload__details">
-            <div class="stzh-upload__info-wrapper-processing">
-              <div class="stzh-upload__infos">
-                <div class="stzh-upload__subtitle">
-                  <span data-dz-name></span>
-                </div>
-                <div class="stzh-upload__progress-text">
-                  <span data-dz-progress-text></span>
-                </div>
+        <div class="stzh-upload__details">
+          <div class="stzh-upload__info-wrapper-processing">
+            <div class="stzh-upload__infos">
+              <div class="stzh-upload__subtitle">
+                <span ${ATTR_NAME}></span>
               </div>
-              <div class="stzh-upload__progress">
-                <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
+              <div class="stzh-upload__progress-text">
+                <span ${ATTR_PROGRESS_TEXT}></span>
               </div>
             </div>
-            <div class="stzh-upload__info-wrapper-complete">
-              <div class="stzh-upload__title">
-                <span data-dz-name></span>
-              </div>
-              <div class="stzh-upload__meta">
-                <span class="stzh-upload__extension" data-dz-extension></span>
-                <span class="stzh-upload__size" data-dz-size></span>
-              </div>
-              <div class="stzh-upload__error-message">
-                <span data-dz-errormessage></span>
-              </div>
+            <div class="stzh-upload__progress">
+              <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
+            </div>
+          </div>
+          <div class="stzh-upload__info-wrapper-complete">
+            <div class="stzh-upload__title">
+              <a class="stzh-upload__link" ${ATTR_NAME} ${ATTR_LINK}></a>
+            </div>
+            <div class="stzh-upload__meta">
+              <span class="stzh-upload__extension" ${ATTR_EXTENSION}></span>
+              <span class="stzh-upload__size" ${ATTR_SIZE}></span>
             </div>
-            <div class="stzh-upload__actions">
-              <button class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
-                <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
-                <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
-              </button>
+            <div class="stzh-upload__error-message">
+              <span data-dz-errormessage></span>
             </div>
           </div>
+          <div class="stzh-upload__actions">
+            <a class="stzh-upload__download" ${ATTR_LINK} aria-label="${this.localization.download}" title="${this.localization.download}">
+              <stzh-icon class="stzh-upload__download-icon" name="download"></stzh-icon>
+            </a>
+            <button class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
+              <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
+              <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
+            </button>
+          </div>
         </div>
       </div>
       `
@@ -686,6 +582,24 @@ export class StzhUpload {
         "reflect": true,
         "defaultValue": "false"
       },
+      "downloadDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether download functionality should be disabled."
+        },
+        "attribute": "download-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "error": {
         "type": "string",
         "mutable": false,
@@ -1038,7 +952,7 @@ export class StzhUpload {
         "mutable": false,
         "complexType": {
           "original": "StzhUploadLocalizedText",
-          "resolved": "StzhLocaleComponent & { description: string; button: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
+          "resolved": "StzhLocaleComponent & { description: string; button: string; download: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
           "references": {
             "StzhUploadLocalizedText": {
               "location": "import",

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

@@ -64,8 +64,8 @@ ExistingFiles.args = {
   description: 'To upload files drag & drop them in this area. Allowed file formats: [txt, pdf, docx] (max. 25 MB)',
   'accepted-files': '.txt,.pdf,.docs',
   'existing-files': `[
-    { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
-    { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
-    { "name": "Filename3.pdf", "size": 0, "id": "upload-3" }
+    { "name": "Filename.pdf", "url": "media/samples/document.pdf", "size": 12345, "id": "upload-1" },
+    { "name": "Filename2.pdf", "url": "media/samples/document.pdf", "size": 22345, "id": "upload-2" },
+    { "name": "Filename3.pdf", "url": "media/samples/document.pdf", "size": 0, "id": "upload-3" }
   ]`
 };

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() {
@@ -89,7 +87,7 @@ export class StzhVbzLinechip {
         "mutable": false,
         "complexType": {
           "original": "VBZ.Lines",
-          "resolved": "\"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
+          "resolved": "\"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"20\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"317\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
           "references": {
             "VBZ": {
               "location": "import",

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

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

@@ -4,23 +4,14 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhVspace {
   constructor() {
-    /** Type of curve */
     this.curve = "none";
-    /** Type of size */
     this.size = "inherit";
-    /** Type of size above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Type of size above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Type of size above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Type of size above ultra breakpoint  */
     this.sizeUltra = "inherit";
-    /** Alignment */
     this.justify = "start";
-    /** Apply spacing to slotted elements */
     this.around = false;
-    /** Add border */
     this.border = "none";
   }
   render() {

package/dist/collection/pages/meinkonto.stories.js

@@ -321,7 +321,7 @@ const TemplateMessages = (args) => (
                 <stzh-input label="Search" type="search"></stzh-input>
               </stzh-cell>
               <stzh-cell span-small="4">
-                <stzh-vspace size="xsmall" size-small="none"></stzh-vspace>
+                <stzh-vspace size-small="none"></stzh-vspace>
                 <stzh-dropdown
                   label="Type"
                   items='["all"]'
@@ -333,7 +333,7 @@ const TemplateMessages = (args) => (
                 ></stzh-dropdown>
               </stzh-cell>
               <stzh-cell span-small="4">
-                <stzh-vspace size="xsmall" size-small="none"></stzh-vspace>
+                <stzh-vspace size-small="none"></stzh-vspace>
                 <stzh-dropdown
                   label="Sort"
                   items='["date"]'

package/dist/components/index.d.ts

@@ -3,8 +3,10 @@ export { StzhAccordion as StzhAccordion } from '../types/components/stzh-accordi
 export { StzhAccordionItem as StzhAccordionItem } from '../types/components/stzh-accordion-item/stzh-accordion-item';
 export { StzhActions as StzhActions } from '../types/components/stzh-actions/stzh-actions';
 export { StzhActionset as StzhActionset } from '../types/components/stzh-actionset/stzh-actionset';
+export { StzhAnchornav as StzhAnchornav } from '../types/components/stzh-anchornav/stzh-anchornav';
 export { StzhAppnav as StzhAppnav } from '../types/components/stzh-appnav/stzh-appnav';
 export { StzhAppointments as StzhAppointments } from '../types/components/stzh-appointments/stzh-appointments';
+export { StzhAudio as StzhAudio } from '../types/components/stzh-audio/stzh-audio';
 export { StzhBadge as StzhBadge } from '../types/components/stzh-badge/stzh-badge';
 export { StzhButton as StzhButton } from '../types/components/stzh-button/stzh-button';
 export { StzhCalendar as StzhCalendar } from '../types/components/stzh-calendar/stzh-calendar';
@@ -15,6 +17,7 @@ export { StzhCheckbox as StzhCheckbox } from '../types/components/stzh-checkbox/
 export { StzhCheckboxgroup as StzhCheckboxgroup } from '../types/components/stzh-checkboxgroup/stzh-checkboxgroup';
 export { StzhChip as StzhChip } from '../types/components/stzh-chip/stzh-chip';
 export { StzhChipSelect as StzhChipSelect } from '../types/components/stzh-chip-select/stzh-chip-select';
+export { StzhClamp as StzhClamp } from '../types/components/stzh-clamp/stzh-clamp';
 export { StzhContainer as StzhContainer } from '../types/components/stzh-container/stzh-container';
 export { StzhCspace as StzhCspace } from '../types/components/stzh-cspace/stzh-cspace';
 export { StzhDatalist as StzhDatalist } from '../types/components/stzh-datalist/stzh-datalist';
@@ -45,8 +48,10 @@ export { StzhMenu as StzhMenu } from '../types/components/stzh-menu/stzh-menu';
 export { StzhMenuItem as StzhMenuItem } from '../types/components/stzh-menu-item/stzh-menu-item';
 export { StzhMessage as StzhMessage } from '../types/components/stzh-message/stzh-message';
 export { StzhMetanav as StzhMetanav } from '../types/components/stzh-metanav/stzh-metanav';
+export { StzhOlmap as StzhOlmap } from '../types/components/stzh-olmap/stzh-olmap';
 export { StzhOverlay as StzhOverlay } from '../types/components/stzh-overlay/stzh-overlay';
 export { StzhPageSkiplinks as StzhPageSkiplinks } from '../types/components/stzh-page-skiplinks/stzh-page-skiplinks';
+export { StzhPagebottom as StzhPagebottom } from '../types/components/stzh-pagebottom/stzh-pagebottom';
 export { StzhPagetitle as StzhPagetitle } from '../types/components/stzh-pagetitle/stzh-pagetitle';
 export { StzhPopover as StzhPopover } from '../types/components/stzh-popover/stzh-popover';
 export { StzhPortalMitwirken as StzhPortalMitwirken } from '../types/components/stzh-portal-mitwirken/stzh-portal-mitwirken';
@@ -59,9 +64,11 @@ export { StzhRichtext as StzhRichtext } from '../types/components/stzh-richtext/
 export { StzhRow as StzhRow } from '../types/components/stzh-row/stzh-row';
 export { StzhSaptcha as StzhSaptcha } from '../types/components/stzh-saptcha/stzh-saptcha';
 export { StzhSection as StzhSection } from '../types/components/stzh-section/stzh-section';
+export { StzhShare as StzhShare } from '../types/components/stzh-share/stzh-share';
 export { StzhSkiplink as StzhSkiplink } from '../types/components/stzh-skiplink/stzh-skiplink';
 export { StzhSortable as StzhSortable } from '../types/components/stzh-sortable/stzh-sortable';
 export { StzhStatus as StzhStatus } from '../types/components/stzh-status/stzh-status';
+export { StzhSticky as StzhSticky } from '../types/components/stzh-sticky/stzh-sticky';
 export { StzhTable as StzhTable } from '../types/components/stzh-table/stzh-table';
 export { StzhText as StzhText } from '../types/components/stzh-text/stzh-text';
 export { StzhToggle as StzhToggle } from '../types/components/stzh-toggle/stzh-toggle';

package/dist/components/index.js

@@ -3,8 +3,10 @@ export { StzhAccordion, defineCustomElement as defineCustomElementStzhAccordion
 export { StzhAccordionItem, defineCustomElement as defineCustomElementStzhAccordionItem } from './stzh-accordion-item.js';
 export { StzhActions, defineCustomElement as defineCustomElementStzhActions } from './stzh-actions.js';
 export { StzhActionset, defineCustomElement as defineCustomElementStzhActionset } from './stzh-actionset.js';
+export { StzhAnchornav, defineCustomElement as defineCustomElementStzhAnchornav } from './stzh-anchornav.js';
 export { StzhAppnav, defineCustomElement as defineCustomElementStzhAppnav } from './stzh-appnav.js';
 export { StzhAppointments, defineCustomElement as defineCustomElementStzhAppointments } from './stzh-appointments.js';
+export { StzhAudio, defineCustomElement as defineCustomElementStzhAudio } from './stzh-audio.js';
 export { StzhBadge, defineCustomElement as defineCustomElementStzhBadge } from './stzh-badge.js';
 export { StzhButton, defineCustomElement as defineCustomElementStzhButton } from './stzh-button.js';
 export { StzhCalendar, defineCustomElement as defineCustomElementStzhCalendar } from './stzh-calendar.js';
@@ -15,6 +17,7 @@ export { StzhCheckbox, defineCustomElement as defineCustomElementStzhCheckbox }
 export { StzhCheckboxgroup, defineCustomElement as defineCustomElementStzhCheckboxgroup } from './stzh-checkboxgroup.js';
 export { StzhChip, defineCustomElement as defineCustomElementStzhChip } from './stzh-chip.js';
 export { StzhChipSelect, defineCustomElement as defineCustomElementStzhChipSelect } from './stzh-chip-select.js';
+export { StzhClamp, defineCustomElement as defineCustomElementStzhClamp } from './stzh-clamp.js';
 export { StzhContainer, defineCustomElement as defineCustomElementStzhContainer } from './stzh-container.js';
 export { StzhCspace, defineCustomElement as defineCustomElementStzhCspace } from './stzh-cspace.js';
 export { StzhDatalist, defineCustomElement as defineCustomElementStzhDatalist } from './stzh-datalist.js';
@@ -45,8 +48,10 @@ export { StzhMenu, defineCustomElement as defineCustomElementStzhMenu } from './
 export { StzhMenuItem, defineCustomElement as defineCustomElementStzhMenuItem } from './stzh-menu-item.js';
 export { StzhMessage, defineCustomElement as defineCustomElementStzhMessage } from './stzh-message.js';
 export { StzhMetanav, defineCustomElement as defineCustomElementStzhMetanav } from './stzh-metanav.js';
+export { StzhOlmap, defineCustomElement as defineCustomElementStzhOlmap } from './stzh-olmap.js';
 export { StzhOverlay, defineCustomElement as defineCustomElementStzhOverlay } from './stzh-overlay.js';
 export { StzhPageSkiplinks, defineCustomElement as defineCustomElementStzhPageSkiplinks } from './stzh-page-skiplinks.js';
+export { StzhPagebottom, defineCustomElement as defineCustomElementStzhPagebottom } from './stzh-pagebottom.js';
 export { StzhPagetitle, defineCustomElement as defineCustomElementStzhPagetitle } from './stzh-pagetitle.js';
 export { StzhPopover, defineCustomElement as defineCustomElementStzhPopover } from './stzh-popover.js';
 export { StzhPortalMitwirken, defineCustomElement as defineCustomElementStzhPortalMitwirken } from './stzh-portal-mitwirken.js';
@@ -59,9 +64,11 @@ export { StzhRichtext, defineCustomElement as defineCustomElementStzhRichtext }
 export { StzhRow, defineCustomElement as defineCustomElementStzhRow } from './stzh-row.js';
 export { StzhSaptcha, defineCustomElement as defineCustomElementStzhSaptcha } from './stzh-saptcha.js';
 export { StzhSection, defineCustomElement as defineCustomElementStzhSection } from './stzh-section.js';
+export { StzhShare, defineCustomElement as defineCustomElementStzhShare } from './stzh-share.js';
 export { StzhSkiplink, defineCustomElement as defineCustomElementStzhSkiplink } from './stzh-skiplink.js';
 export { StzhSortable, defineCustomElement as defineCustomElementStzhSortable } from './stzh-sortable.js';
 export { StzhStatus, defineCustomElement as defineCustomElementStzhStatus } from './stzh-status.js';
+export { StzhSticky, defineCustomElement as defineCustomElementStzhSticky } from './stzh-sticky.js';
 export { StzhTable, defineCustomElement as defineCustomElementStzhTable } from './stzh-table.js';
 export { StzhText, defineCustomElement as defineCustomElementStzhText } from './stzh-text.js';
 export { StzhToggle, defineCustomElement as defineCustomElementStzhToggle } from './stzh-toggle.js';
@@ -74,7 +81,7 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 
 const name = "@oiz/stzh-components";
-const version = "2.0.0";
+const version = "2.1.0-beta";
 
 const packageName = name.substring(name.indexOf('/')+1);
 

package/dist/components/stzh-accordion-item.js

@@ -29,26 +29,6 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.stzhOpened = createEvent(this, "stzhOpened", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
     this.stzhClosed = createEvent(this, "stzhClosed", 7);
-    /** Whether fold is open */
-    this.open = false;
-    /** Whether fold disabled */
-    this.disabled = false;
-    /** Heading title */
-    this.heading = "";
-    /** Subtitle */
-    this.subtitle = "";
-    /** Description */
-    this.description = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Badge */
-    this.badge = "";
-    /** Whether badge should be displayed empty */
-    this.badgeEmpty = false;
-    /** Badge type */
-    this.badgeType = "default";
-    /** Heading level */
-    this.headingLevel = "3";
     this.toggledByMethod = false;
     this.handleHeaderClick = () => {
       this.toggle();
@@ -96,6 +76,16 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
         accordion.setItemFocus(this.element, action);
       }
     };
+    this.open = false;
+    this.disabled = false;
+    this.heading = "";
+    this.subtitle = "";
+    this.description = "";
+    this.icon = "";
+    this.badge = "";
+    this.badgeEmpty = false;
+    this.badgeType = "default";
+    this.headingLevel = "3";
   }
   async openWatcher(newValue) {
     if (newValue) {
@@ -108,7 +98,7 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.bodyElement.hidden = false;
       await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes, this.bodyElement.scrollHeight), ANIMATION_SHOW.options);
       this.bodyElement.style.height = "auto";
-      this.bodyElement.style.overflow = "auto";
+      this.bodyElement.style.overflow = "visible";
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
           component: "stzh-accordion-item"
@@ -171,7 +161,7 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   componentDidLoad() {
     this.bodyElement.hidden = !this.open;
     this.bodyElement.style.height = this.open ? "auto" : "0px";
-    this.bodyElement.style.overflow = this.open ? "auto" : "hidden";
+    this.bodyElement.style.overflow = this.open ? "visible" : "hidden";
   }
   render() {
     const Heading = `h${this.headingLevel}`;

package/dist/components/stzh-accordion.js

@@ -6,9 +6,7 @@ const StzhAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /** Whether folds are collapsible */
     this.collapsible = true;
-    /** Whether multiple folds can be opened at once */
     this.multiselectable = true;
   }
   openListener(event) {