@oiz/stzh-components 2.0.0 → 2.1.0-beta

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 {};