@aqua-ds/web-components
Version:
AquaDS Web Components
146 lines (141 loc) • 6.57 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { L as Label } from './label.js';
import { d as defineCustomElement$6 } from './aq-audio-player2.js';
import { d as defineCustomElement$5 } from './aq-button2.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$3 } from './aq-label2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
const aqVoicePlayerCss = ".aq-voice-player{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-size-small)}.aq-voice-player__icon-error{color:var(--color-danger-base)}.aq-voice-player__player-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--spacing-size-minor)}";
const AqVoicePlayer$1 = /*@__PURE__*/ proxyCustomElement(class AqVoicePlayer extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.audioPlay = createEvent(this, "audioPlay", 7);
this.audioPause = createEvent(this, "audioPause", 7);
this.audioEnded = createEvent(this, "audioEnded", 7);
this.audioError = createEvent(this, "audioError", 7);
this.loadedAudio = createEvent(this, "loadedAudio", 7);
this.positionChange = createEvent(this, "positionChange", 7);
// Audio player props
this.audioSource = '';
this.format = ['mp3', 'wav', 'ogg'];
this.resetOnEnd = false;
this.showCurrentTime = true;
this.isAutoPlay = false;
// Label direct props
this.label = '';
this.name = '';
this.isRequired = false;
this.info = '';
this.tooltipWidth = '';
this.isError = false;
this.isDisabled = false;
this.helperText = '';
this.width = '100%';
this.labelHelper = Label(this);
}
onAudioPlay(ev) {
ev.stopPropagation();
this.audioPlay.emit({ currentTime: ev.detail.currentTime });
}
onAudioPause(ev) {
ev.stopPropagation();
this.audioPause.emit(ev.detail);
}
onAudioEnded(ev) {
ev.stopPropagation();
this.audioEnded.emit({ currentTime: ev.detail.currentTime });
}
onAudioError(ev) {
ev.stopPropagation();
this.audioError.emit({ error: ev.detail.error });
}
onLoadedMetadata(ev) {
ev.stopPropagation();
this.loadedAudio.emit({ duration: ev.detail.duration });
}
onPositionChange(ev) {
ev.stopPropagation();
this.positionChange.emit({ currentTime: ev.detail.currentTime });
}
// Component API
async audioPlayPause() {
await this.coreEl.audioPlayPause();
}
async getCurrentTime() {
const currentTime = await this.coreEl.getCurrentTime();
return currentTime;
}
async getDuration() {
const duration = await this.coreEl.getDuration();
return duration;
}
render() {
return (h("div", { key: '05d93029a90ee99f1d73be90a8c9828728aa8b6c', class: "aq-voice-player" }, this.labelHelper.isLabelVisible && (h("aq-label", { key: '952e3a5d89c8028538aa568004dbb1d4d817e3fc', for: this.name, ...this.labelHelper.bindsLabel }, h("span", { key: 'ebb8a274bf2780af68f579a3c8b6a3b4046252a8', slot: "text" }, this.label))), h("div", { key: '9f555701400d5df8e7931a28e3ec82396c8b9811', class: "aq-voice-player__player-container", style: { width: this.width } }, h("aq-audio-player", { key: '9b456473901bf5b9709251ffcf0ddc60110d6196', ref: el => (this.coreEl = el), audioSource: this.audioSource, format: this.format, resetOnEnd: this.resetOnEnd, showCurrentTime: this.showCurrentTime, isAutoPlay: this.isAutoPlay, isDisabled: this.isDisabled, onAudioPlay: (e) => this.onAudioPlay(e), onAudioPause: (e) => this.onAudioPause(e), onAudioEnded: (e) => this.onAudioEnded(e), onAudioError: (e) => this.onAudioError(e), onLoadedAudio: (e) => this.onLoadedMetadata(e), onPositionChange: (e) => this.onPositionChange(e) }), this.isError &&
h("span", { key: 'd66b99961921faf934049fb94e82d49841ad52f0', class: "aq-icon-alert-circle-fill aq-voice-player__icon-error" })), this.helperText &&
h("aq-helper-text", { key: '4c73348c4f990505a952f6ebb6bdf41e89d16891', isError: this.isError }, h("span", { key: 'a23f57e7c13312ff06624b5e6aa1b0716602c48e', slot: "text" }, this.helperText))));
}
get host() { return this; }
static get style() { return aqVoicePlayerCss; }
}, [256, "aq-voice-player", {
"audioSource": [1, "audio-source"],
"format": [16],
"resetOnEnd": [4, "reset-on-end"],
"showCurrentTime": [4, "show-current-time"],
"isAutoPlay": [4, "is-auto-play"],
"label": [1],
"name": [1],
"isRequired": [4, "is-required"],
"info": [1],
"tooltipWidth": [1, "tooltip-width"],
"isError": [4, "is-error"],
"isDisabled": [4, "is-disabled"],
"helperText": [1, "helper-text"],
"width": [1],
"audioPlayPause": [64],
"getCurrentTime": [64],
"getDuration": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-voice-player", "aq-audio-player", "aq-button", "aq-helper-text", "aq-label", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-voice-player":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqVoicePlayer$1);
}
break;
case "aq-audio-player":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqVoicePlayer = AqVoicePlayer$1;
const defineCustomElement = defineCustomElement$1;
export { AqVoicePlayer, defineCustomElement };