@oiz/stzh-components 2.0.0 → 2.1.0-alpha

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

@@ -7,22 +7,6 @@ import { createGlobalAdapter } from "../../utils/date-adapter";
  */
 export class StzhAppointments {
   constructor() {
-    /** Sort by */
-    this.sortBy = "start";
-    /** Initial selected values */
-    this.appointments = [];
-    /* Selected appointment by value */
-    this.value = "";
-    /* Name of radiogroup form element */
-    this.name = "appointment";
-    /** Nr of items shown */
-    this.showItems = 5;
-    /** Nr of items shown when more link is clicked */
-    this.stepItems = 5;
-    /** Overwrite default calendar title */
-    this.calendarTitle = "";
-    /** Overwrite default appointments title */
-    this.appointmentsTitle = "";
     this.showMoreLink = false;
     this.moreItemsLeft = 0;
     this.showCalendar = false;
@@ -77,6 +61,17 @@ export class StzhAppointments {
         value: this.value
       });
     };
+    this.localization = undefined;
+    this.sortBy = "start";
+    this.appointments = [];
+    this.currentDate = undefined;
+    this.value = "";
+    this.name = "appointment";
+    this.showItems = 5;
+    this.stepItems = 5;
+    this.calendarTitle = "";
+    this.appointmentsTitle = "";
+    this.dateAdapter = undefined;
   }
   currentDateWatcher(newValue) {
     if (!newValue) {

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

@@ -0,0 +1,319 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+.stzh-audio {
+  display: block;
+  contain: none;
+  /* Variants */
+}
+.stzh-audio__audio {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-audio__controls {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.stzh-audio__controls-top {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--stzh-space-small);
+}
+.stzh-audio__controls-bottom {
+  display: flex;
+  align-items: center;
+}
+.stzh-audio__controls, .stzh-audio__transcript {
+  border: 0.0625rem solid var(--stzh-color-grey25);
+  padding: var(--stzh-space-medium) var(--stzh-space-xlarge);
+}
+.stzh-audio__controls {
+  padding-bottom: var(--stzh-space-xsmall);
+}
+.stzh-audio__button {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: grid;
+  place-items: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--stzh-button-border-radius);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color;
+  color: var(--stzh-color-grey55);
+}
+.stzh-audio__button.is-play, .stzh-audio__button.is-mute, .stzh-audio__button.is-transcript {
+  margin-right: var(--stzh-space-xsmall);
+}
+.stzh-audio__button.is-active {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-audio__button:hover {
+  color: var(--stzh-color-white);
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-audio__transcript {
+  border-top: none;
+}
+.stzh-audio__loader-overlay {
+  display: grid;
+  place-items: center;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--stzh-color-white);
+  opacity: 0;
+  visibility: hidden;
+}
+.stzh-audio__time {
+  font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
+  line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
+  display: inline-flex;
+  margin-right: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-audio__time {
+    font-size: var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));
+    line-height: var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p2-medium-text-letter-spacing);
+  }
+}
+@media screen and (max-width: 599px) {
+  .stzh-audio__time {
+    margin-right: auto;
+  }
+}
+.stzh-audio__time-separator {
+  margin: 0 var(--stzh-space-xxsmall);
+}
+.stzh-audio__slider {
+  --height: 1.1875rem;
+  --thumb-width: 0.8125rem;
+  --track-height: 0.3125rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  border-radius: var(--stzh-button-border-radius);
+}
+.stzh-audio__slider.is-time {
+  flex-grow: 1;
+}
+.stzh-audio__slider.is-volume {
+  width: 20%;
+  min-width: 5rem;
+  max-width: 6.875rem;
+  display: none;
+}
+@media screen and (min-width: 600px) {
+  .stzh-audio__slider.is-volume {
+    display: flex;
+    margin-right: auto;
+  }
+}
+.stzh-audio__slider-track {
+  width: 100%;
+  height: var(--track-height);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 0;
+  transform: translateY(-50%);
+  border-radius: 0.25rem;
+  background-color: var(--stzh-color-grey25);
+}
+.stzh-audio__slider-track.is-fill {
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  transform-origin: left center;
+  transform: translateY(-50%);
+  width: calc(var(--vds-fill-rate) * 100%);
+  z-index: 1;
+}
+.stzh-audio__slider-thumb-container {
+  position: absolute;
+  top: 0;
+  left: var(--vds-fill-percent);
+  width: var(--thumb-width);
+  height: 100%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+.stzh-audio__slider[dragging] .stzh-audio__slider-thumb-container {
+  left: var(--vds-pointer-percent);
+}
+.stzh-audio__slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: var(--thumb-width);
+  height: var(--thumb-width);
+  border-radius: 50%;
+  background-color: var(--stzh-color-white);
+  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.25);
+  transform: translateY(-50%);
+}
+.stzh-audio__media-preview-container {
+  --width: 2.625rem;
+  --width-half: calc(var(--width) / 2);
+  --top: -1.5rem;
+  --left-clamp: max(var(--width-half), var(--vds-pointer-percent));
+  --right-clamp: calc(100% - var(--width-half));
+  --left: min(var(--left-clamp), var(--right-clamp));
+  display: grid;
+  place-items: center;
+  position: absolute;
+  width: var(--width);
+  top: var(--top);
+  left: var(--left);
+  width: var(--width);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+  transform: translateX(-50%);
+  z-index: var(--stzh-z-index-popover);
+  box-shadow: var(--stzh-box-shadow-popover);
+  border-radius: var(--stzh-tooltip-border-radius);
+  background-color: var(--stzh-color-white);
+}
+@supports (filter: var(--stzh-tooltip-drop-shadow)) {
+  .stzh-audio__media-preview-container {
+    box-shadow: none;
+    filter: var(--stzh-tooltip-drop-shadow);
+  }
+}
+.stzh-audio__slider[pointing] .stzh-audio__media-preview-container {
+  opacity: 1;
+}
+.stzh-audio__slider-text {
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
+}
+.stzh-audio[hide-ui] .stzh-audio__controls {
+  opacity: 0;
+  visibility: hidden;
+}
+.stzh-audio[autoplay-error] .stzh-audio__controls {
+  opacity: 1;
+}
+.stzh-audio:not([can-play]) .stzh-audio__loader-overlay, .stzh-audio[waiting] .stzh-audio__loader-overlay {
+  opacity: 0.8;
+  visibility: visible;
+}
+.stzh-audio[paused] .stzh-audio__paused {
+  display: none;
+}
+.stzh-audio:not([paused]) .stzh-audio__played {
+  display: none;
+}
+.stzh-audio[muted] .stzh-audio__muted {
+  display: none;
+}
+.stzh-audio:not([muted]) .stzh-audio__unmuted {
+  display: none;
+}

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

@@ -0,0 +1,333 @@
+import { Host, h } from "@stencil/core";
+import "@vidstack/player/dist/prod/define/vds-media.js";
+import "@vidstack/player/dist/prod/define/vds-audio.js";
+import "@vidstack/player/dist/prod/define/vds-play-button.js";
+import "@vidstack/player/dist/prod/define/vds-mute-button.js";
+import "@vidstack/player/dist/prod/define/vds-time-slider.js";
+import "@vidstack/player/dist/prod/define/vds-volume-slider.js";
+import "@vidstack/player/dist/prod/define/vds-slider-value-text.js";
+import "@vidstack/player/dist/prod/define/vds-time.js";
+import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ * @slot transcript - Slot for transcript text
+ */
+export class StzhAudio {
+  constructor() {
+    this.localization = undefined;
+    this.src = "";
+    this.preload = "none";
+    this.transcript = "";
+    this.transcriptShown = false;
+  }
+  async play() {
+    this.vsdAudioElement.play();
+  }
+  async pause() {
+    this.vsdAudioElement.pause();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "audio");
+    }
+  }
+  render() {
+    const hasTranscript = !!this.transcript || hasSlot(this.element, "transcript");
+    const classes = {
+      "stzh-audio": true
+    };
+    return (h(Host, null, h("vds-media", { class: classes }, h("vds-audio", { class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, h("audio", { preload: this.preload, src: this.src }, h("slot", null))), h("div", { class: "stzh-audio__controls" }, h("div", { class: "stzh-audio__loader-overlay" }, h("stzh-loader", { class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { class: "stzh-audio__controls-top" }, h("vds-time-slider", { class: "stzh-audio__slider is-time" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { class: "stzh-audio__controls-bottom" }, h("stzh-tooltip", null, h("vds-play-button", { class: "stzh-audio__button is-play" }, h("stzh-icon", { class: "stzh-audio__played", name: "play" }), h("stzh-icon", { class: "stzh-audio__paused", name: "close" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__played" }, this.localization.play), h("span", { class: "stzh-audio__paused" }, this.localization.pause))), h("div", { class: "stzh-audio__time" }, h("vds-time", { type: "current" }), h("span", { class: "stzh-audio__time-separator" }, "/"), h("vds-time", { type: "duration" })), h("stzh-tooltip", null, h("vds-mute-button", { class: "stzh-audio__button is-mute" }, h("stzh-icon", { class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__muted" }, this.localization.mute), h("span", { class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { class: "stzh-audio__slider is-volume" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "percent" }))), hasTranscript &&
+      h("stzh-tooltip", { content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h("button", { class: {
+          "stzh-audio__button is-transcript": true,
+          "is-active": this.transcriptShown
+        }, onClick: () => this.transcriptShown = !this.transcriptShown }, h("stzh-icon", { name: "transcript" }))), h("stzh-tooltip", { content: this.localization.download }, h("a", { class: "stzh-audio__button is-download", href: this.src, download: "" }, h("stzh-icon", { name: "download" }))))), h("div", { class: "stzh-audio__transcript", hidden: !this.transcriptShown }, h("stzh-text", null, this.transcript ? this.transcript : h("slot", { name: "transcript" }))))));
+  }
+  static get is() { return "stzh-audio"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-audio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-audio.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhAudioLocalizedText",
+          "resolved": "StzhLocaleComponent & { loading: string; play: string; pause: string; mute: string; unmute: string; hideTranscript: string; showTranscript: string; download: string; }",
+          "references": {
+            "StzhAudioLocalizedText": {
+              "location": "import",
+              "path": "./stzh-audio.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Path to audio file"
+        },
+        "attribute": "src",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "preload": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"none\" | \"metadata\" | \"auto\"",
+          "resolved": "\"auto\" | \"metadata\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Preload strategy"
+        },
+        "attribute": "preload",
+        "reflect": false,
+        "defaultValue": "\"none\""
+      },
+      "transcript": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Transcript text (alternative for slot)"
+        },
+        "attribute": "transcript",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "transcriptShown": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether transcript should be shown"
+        },
+        "attribute": "transcript-shown",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhPlay",
+        "name": "stzhPlay",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when the paused property is changed from true to false, as a result of the play() method, or the autoplay attribute."
+        },
+        "complexType": {
+          "original": "StzhAudioPlayEvent",
+          "resolved": "{ component: \"stzh-audio\"; }",
+          "references": {
+            "StzhAudioPlayEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhPlaying",
+        "name": "stzhPlaying",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when playback is ready to start after having been paused or delayed due to lack of data."
+        },
+        "complexType": {
+          "original": "StzhAudioPlayingEvent",
+          "resolved": "{ component: \"stzh-audio\"; }",
+          "references": {
+            "StzhAudioPlayingEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhPause",
+        "name": "stzhPause",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the pause() method."
+        },
+        "complexType": {
+          "original": "StzhAudioPauseEvent",
+          "resolved": "{ component: \"stzh-audio\"; }",
+          "references": {
+            "StzhAudioPauseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhReplay",
+        "name": "stzhReplay",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when media playback starts again after being in an ended state. This is fired when the loop property is true and media loops, whereas the vds-play event is not."
+        },
+        "complexType": {
+          "original": "StzhAudioReplayEvent",
+          "resolved": "{ component: \"stzh-audio\"; }",
+          "references": {
+            "StzhAudioReplayEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhEnd",
+        "name": "stzhEnd",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired each time media playback has reached the end. This is fired even if the loop property is true, which is generally when you'd reach for this event over the MediaEndedEvent if you want to be notified of media looping."
+        },
+        "complexType": {
+          "original": "StzhAudioEndEvent",
+          "resolved": "{ component: \"stzh-audio\"; }",
+          "references": {
+            "StzhAudioEndEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhEnded",
+        "name": "stzhEnded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. This is not fired if playback will start from the beginning again due to the loop property being true (see MediaReplayEvent and MediaEndEvent)."
+        },
+        "complexType": {
+          "original": "StzhAudioEndedEvent",
+          "resolved": "{ component: \"stzh-audio\"; }",
+          "references": {
+            "StzhAudioEndedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhError",
+        "name": "stzhError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when media loading or playback has encountered any issues (for example, a network connectivity problem). The event detail contains a potential message containing more information about the error (empty string if nothing available), and a code that identifies the general type of error that occurred."
+        },
+        "complexType": {
+          "original": "StzhAudioErrorEvent",
+          "resolved": "{ component: \"stzh-audio\"; originalEvent: ErrorEvent; }",
+          "references": {
+            "StzhAudioErrorEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "play": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "pause": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/stzh-audio/stzh-audio.localization.js

@@ -0,0 +1 @@
+export {};