@yoobic/yobi 8.2.0-26 → 8.2.0-27

package/dist/cjs/yoo-audio-player.cjs.entry.js

@@ -35,12 +35,12 @@ const YooAudioPlayerComponent = class {
     this.currentTime = 0;
     this.currentTimeDisplay = '00:00';
   }
-  onSrcChanged() {
-    return this.initPlayer(true);
-  }
   onVisibilityChanged() {
     this.pause();
   }
+  onSrcChanged() {
+    return this.initPlayer(true);
+  }
   async getAudio() {
     return this.audio;
   }
@@ -49,7 +49,7 @@ const YooAudioPlayerComponent = class {
     return (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
   }
   async componentWillLoad() {
-    return await this.initPlayer();
+    await this.initPlayer();
   }
   disconnectedCallback() {
     this.pause();
@@ -107,7 +107,7 @@ const YooAudioPlayerComponent = class {
       .map((v) => v.toString().padStart(2, '0'))
       .join(':');
   }
-  async togglePlay(ev) {
+  togglePlay(ev) {
     if (ev && this.audio) {
       ev.stopPropagation();
       const { paused, ended, currentTime } = this.audio;
@@ -121,7 +121,10 @@ const YooAudioPlayerComponent = class {
       }
     }
   }
-  render() {
+  renderPlayButton() {
+    return index.h("yoo-button", { disabled: this.disabled, animated: index$1.isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) }, index.h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" }));
+  }
+  renderRange() {
     const pausePlay = (ev) => {
       this.isDragging = !ev;
       this.pause();
@@ -131,16 +134,24 @@ const YooAudioPlayerComponent = class {
       this.currentTime = this.audio.currentTime = value !== null && value !== void 0 ? value : 0;
       this.audio.play();
     };
-    return (index.h(index.Host, null, [
-      index.h("yoo-button", { disabled: this.disabled, animated: index$1.isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) }, index.h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" })),
-      index.h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: (ev) => this.currentTimeDisplay = this.formateTime(ev === null || ev === void 0 ? void 0 : ev.detail), onKnobPressed: () => pausePlay(), onMouseDown: (ev) => pausePlay(ev), onKnobReleased: (ev) => resumePlay(ev === null || ev === void 0 ? void 0 : ev.detail) }),
-      index.h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly && index.h("span", null, index$1.translate('AUDIO')), index.h("span", null, this.currentTimeDisplay)])
+    return index.h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: ({ detail }) => this.currentTimeDisplay = this.formateTime(detail), onKnobPressed: () => pausePlay(), onKnobReleased: ({ detail }) => resumePlay(detail) });
+  }
+  renderInfo() {
+    return index.h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly &&
+        index.h("span", null, index$1.translate('AUDIO')), index.h("span", null, this.currentTimeDisplay)
+    ]);
+  }
+  render() {
+    return (index.h(index.Host, null, " ", [
+      this.renderPlayButton(),
+      this.renderRange(),
+      this.renderInfo()
     ]));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
-    "src": ["onSrcChanged"],
-    "isVisible": ["onVisibilityChanged"]
+    "isVisible": ["onVisibilityChanged"],
+    "src": ["onSrcChanged"]
   }; }
 };
 YooAudioPlayerComponent.style = audioPlayerCss;

package/dist/cjs/yoo-form-carousel.cjs.entry.js

@@ -244,7 +244,7 @@ const YooFormCarouselComponent = class {
       return this.renderVideo(src, index$2);
     }
     else if (type === 'audio') {
-      return index.h("yoo-audio-player", { class: "audio-player", src: src });
+      return index.h("yoo-audio-player", { onClick: ev => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), class: "audio-player", src: src });
     }
     else if (type === 'document') {
       return index.h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, extraClass: "feed", showDialog: true, showActionSheet: index$1.isNativeMobile() && index$1.isPdf(src), document: src });

package/dist/cjs/yoo-range.cjs.entry.js

@@ -257,7 +257,7 @@ const YooRangeComponent = class {
     const values = Array.from({ length: this.max - this.min + 1 }, (_, i) => this.min + i).filter(v => !(v % this.step));
     return (this.ticks || this.ticksLabels) && values.map(v => {
       const showTickLabel = filterPattern(v);
-      return (this.ticks || showTickLabel) && index.h("div", { class: { 'tick': true, 'hidden': !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
+      return (this.ticks || showTickLabel) && index.h("div", { class: { tick: true, hidden: !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
     });
   }
   renderBar(start, end) {

package/dist/collection/components/1.atoms/range/range.js

@@ -240,7 +240,7 @@ export class YooRangeComponent {
     const values = Array.from({ length: this.max - this.min + 1 }, (_, i) => this.min + i).filter(v => !(v % this.step));
     return (this.ticks || this.ticksLabels) && values.map(v => {
       const showTickLabel = filterPattern(v);
-      return (this.ticks || showTickLabel) && h("div", { class: { 'tick': true, 'hidden': !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
+      return (this.ticks || showTickLabel) && h("div", { class: { tick: true, hidden: !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
     });
   }
   renderBar(start, end) {

package/dist/collection/components/2.molecules/audio-player/audio-player.js

@@ -22,12 +22,12 @@ export class YooAudioPlayerComponent {
     this.currentTime = 0;
     this.currentTimeDisplay = '00:00';
   }
-  onSrcChanged() {
-    return this.initPlayer(true);
-  }
   onVisibilityChanged() {
     this.pause();
   }
+  onSrcChanged() {
+    return this.initPlayer(true);
+  }
   async getAudio() {
     return this.audio;
   }
@@ -36,7 +36,7 @@ export class YooAudioPlayerComponent {
     return (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
   }
   async componentWillLoad() {
-    return await this.initPlayer();
+    await this.initPlayer();
   }
   disconnectedCallback() {
     this.pause();
@@ -94,7 +94,7 @@ export class YooAudioPlayerComponent {
       .map((v) => v.toString().padStart(2, '0'))
       .join(':');
   }
-  async togglePlay(ev) {
+  togglePlay(ev) {
     if (ev && this.audio) {
       ev.stopPropagation();
       const { paused, ended, currentTime } = this.audio;
@@ -108,7 +108,11 @@ export class YooAudioPlayerComponent {
       }
     }
   }
-  render() {
+  renderPlayButton() {
+    return h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) },
+      h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" }));
+  }
+  renderRange() {
     const pausePlay = (ev) => {
       this.isDragging = !ev;
       this.pause();
@@ -118,12 +122,21 @@ export class YooAudioPlayerComponent {
       this.currentTime = this.audio.currentTime = value !== null && value !== void 0 ? value : 0;
       this.audio.play();
     };
-    return (h(Host, null, [
-      h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) },
-        h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" })),
-      h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: (ev) => this.currentTimeDisplay = this.formateTime(ev === null || ev === void 0 ? void 0 : ev.detail), onKnobPressed: () => pausePlay(), onMouseDown: (ev) => pausePlay(ev), onKnobReleased: (ev) => resumePlay(ev === null || ev === void 0 ? void 0 : ev.detail) }),
-      h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly && h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)])
-    ]));
+    return h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: ({ detail }) => this.currentTimeDisplay = this.formateTime(detail), onKnobPressed: () => pausePlay(), onKnobReleased: ({ detail }) => resumePlay(detail) });
+  }
+  renderInfo() {
+    return h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly &&
+        h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)
+    ]);
+  }
+  render() {
+    return (h(Host, null,
+      " ",
+      [
+        this.renderPlayButton(),
+        this.renderRange(),
+        this.renderInfo()
+      ]));
   }
   static get is() { return "yoo-audio-player"; }
   static get encapsulation() { return "shadow"; }
@@ -316,10 +329,10 @@ export class YooAudioPlayerComponent {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "src",
-      "methodName": "onSrcChanged"
-    }, {
       "propName": "isVisible",
       "methodName": "onVisibilityChanged"
+    }, {
+      "propName": "src",
+      "methodName": "onSrcChanged"
     }]; }
 }

package/dist/collection/components/form/form-carousel/form-carousel.js

@@ -229,7 +229,7 @@ export class YooFormCarouselComponent {
       return this.renderVideo(src, index);
     }
     else if (type === 'audio') {
-      return h("yoo-audio-player", { class: "audio-player", src: src });
+      return h("yoo-audio-player", { onClick: ev => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), class: "audio-player", src: src });
     }
     else if (type === 'document') {
       return h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, extraClass: "feed", showDialog: true, showActionSheet: isNativeMobile() && isPdf(src), document: src });

package/dist/design-system/yoo-audio-player.entry.js

@@ -31,12 +31,12 @@ const YooAudioPlayerComponent = class {
     this.currentTime = 0;
     this.currentTimeDisplay = '00:00';
   }
-  onSrcChanged() {
-    return this.initPlayer(true);
-  }
   onVisibilityChanged() {
     this.pause();
   }
+  onSrcChanged() {
+    return this.initPlayer(true);
+  }
   async getAudio() {
     return this.audio;
   }
@@ -45,7 +45,7 @@ const YooAudioPlayerComponent = class {
     return (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
   }
   async componentWillLoad() {
-    return await this.initPlayer();
+    await this.initPlayer();
   }
   disconnectedCallback() {
     this.pause();
@@ -103,7 +103,7 @@ const YooAudioPlayerComponent = class {
       .map((v) => v.toString().padStart(2, '0'))
       .join(':');
   }
-  async togglePlay(ev) {
+  togglePlay(ev) {
     if (ev && this.audio) {
       ev.stopPropagation();
       const { paused, ended, currentTime } = this.audio;
@@ -117,7 +117,10 @@ const YooAudioPlayerComponent = class {
       }
     }
   }
-  render() {
+  renderPlayButton() {
+    return h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) }, h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" }));
+  }
+  renderRange() {
     const pausePlay = (ev) => {
       this.isDragging = !ev;
       this.pause();
@@ -127,16 +130,24 @@ const YooAudioPlayerComponent = class {
       this.currentTime = this.audio.currentTime = value !== null && value !== void 0 ? value : 0;
       this.audio.play();
     };
-    return (h(Host, null, [
-      h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) }, h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" })),
-      h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: (ev) => this.currentTimeDisplay = this.formateTime(ev === null || ev === void 0 ? void 0 : ev.detail), onKnobPressed: () => pausePlay(), onMouseDown: (ev) => pausePlay(ev), onKnobReleased: (ev) => resumePlay(ev === null || ev === void 0 ? void 0 : ev.detail) }),
-      h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly && h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)])
+    return h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: ({ detail }) => this.currentTimeDisplay = this.formateTime(detail), onKnobPressed: () => pausePlay(), onKnobReleased: ({ detail }) => resumePlay(detail) });
+  }
+  renderInfo() {
+    return h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly &&
+        h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)
+    ]);
+  }
+  render() {
+    return (h(Host, null, " ", [
+      this.renderPlayButton(),
+      this.renderRange(),
+      this.renderInfo()
     ]));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "src": ["onSrcChanged"],
-    "isVisible": ["onVisibilityChanged"]
+    "isVisible": ["onVisibilityChanged"],
+    "src": ["onSrcChanged"]
   }; }
 };
 YooAudioPlayerComponent.style = audioPlayerCss;

package/dist/design-system/yoo-form-carousel.entry.js

@@ -240,7 +240,7 @@ const YooFormCarouselComponent = class {
       return this.renderVideo(src, index);
     }
     else if (type === 'audio') {
-      return h("yoo-audio-player", { class: "audio-player", src: src });
+      return h("yoo-audio-player", { onClick: ev => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), class: "audio-player", src: src });
     }
     else if (type === 'document') {
       return h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, extraClass: "feed", showDialog: true, showActionSheet: isNativeMobile() && isPdf(src), document: src });

package/dist/design-system/yoo-range.entry.js

@@ -253,7 +253,7 @@ const YooRangeComponent = class {
     const values = Array.from({ length: this.max - this.min + 1 }, (_, i) => this.min + i).filter(v => !(v % this.step));
     return (this.ticks || this.ticksLabels) && values.map(v => {
       const showTickLabel = filterPattern(v);
-      return (this.ticks || showTickLabel) && h("div", { class: { 'tick': true, 'hidden': !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
+      return (this.ticks || showTickLabel) && h("div", { class: { tick: true, hidden: !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
     });
   }
   renderBar(start, end) {

package/dist/esm/yoo-audio-player.entry.js

@@ -31,12 +31,12 @@ const YooAudioPlayerComponent = class {
     this.currentTime = 0;
     this.currentTimeDisplay = '00:00';
   }
-  onSrcChanged() {
-    return this.initPlayer(true);
-  }
   onVisibilityChanged() {
     this.pause();
   }
+  onSrcChanged() {
+    return this.initPlayer(true);
+  }
   async getAudio() {
     return this.audio;
   }
@@ -45,7 +45,7 @@ const YooAudioPlayerComponent = class {
     return (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
   }
   async componentWillLoad() {
-    return await this.initPlayer();
+    await this.initPlayer();
   }
   disconnectedCallback() {
     this.pause();
@@ -103,7 +103,7 @@ const YooAudioPlayerComponent = class {
       .map((v) => v.toString().padStart(2, '0'))
       .join(':');
   }
-  async togglePlay(ev) {
+  togglePlay(ev) {
     if (ev && this.audio) {
       ev.stopPropagation();
       const { paused, ended, currentTime } = this.audio;
@@ -117,7 +117,10 @@ const YooAudioPlayerComponent = class {
       }
     }
   }
-  render() {
+  renderPlayButton() {
+    return h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) }, h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" }));
+  }
+  renderRange() {
     const pausePlay = (ev) => {
       this.isDragging = !ev;
       this.pause();
@@ -127,16 +130,24 @@ const YooAudioPlayerComponent = class {
       this.currentTime = this.audio.currentTime = value !== null && value !== void 0 ? value : 0;
       this.audio.play();
     };
-    return (h(Host, null, [
-      h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) }, h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" })),
-      h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: (ev) => this.currentTimeDisplay = this.formateTime(ev === null || ev === void 0 ? void 0 : ev.detail), onKnobPressed: () => pausePlay(), onMouseDown: (ev) => pausePlay(ev), onKnobReleased: (ev) => resumePlay(ev === null || ev === void 0 ? void 0 : ev.detail) }),
-      h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly && h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)])
+    return h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: ({ detail }) => this.currentTimeDisplay = this.formateTime(detail), onKnobPressed: () => pausePlay(), onKnobReleased: ({ detail }) => resumePlay(detail) });
+  }
+  renderInfo() {
+    return h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly &&
+        h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)
+    ]);
+  }
+  render() {
+    return (h(Host, null, " ", [
+      this.renderPlayButton(),
+      this.renderRange(),
+      this.renderInfo()
     ]));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "src": ["onSrcChanged"],
-    "isVisible": ["onVisibilityChanged"]
+    "isVisible": ["onVisibilityChanged"],
+    "src": ["onSrcChanged"]
   }; }
 };
 YooAudioPlayerComponent.style = audioPlayerCss;

package/dist/esm/yoo-form-carousel.entry.js

@@ -240,7 +240,7 @@ const YooFormCarouselComponent = class {
       return this.renderVideo(src, index);
     }
     else if (type === 'audio') {
-      return h("yoo-audio-player", { class: "audio-player", src: src });
+      return h("yoo-audio-player", { onClick: ev => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), class: "audio-player", src: src });
     }
     else if (type === 'document') {
       return h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, extraClass: "feed", showDialog: true, showActionSheet: isNativeMobile() && isPdf(src), document: src });

package/dist/esm/yoo-range.entry.js

@@ -253,7 +253,7 @@ const YooRangeComponent = class {
     const values = Array.from({ length: this.max - this.min + 1 }, (_, i) => this.min + i).filter(v => !(v % this.step));
     return (this.ticks || this.ticksLabels) && values.map(v => {
       const showTickLabel = filterPattern(v);
-      return (this.ticks || showTickLabel) && h("div", { class: { 'tick': true, 'hidden': !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
+      return (this.ticks || showTickLabel) && h("div", { class: { tick: true, hidden: !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
     });
   }
   renderBar(start, end) {

package/dist/types/components/2.molecules/audio-player/audio-player.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
 export declare class YooAudioPlayerComponent implements ComponentInterface {
   /**
@@ -20,10 +21,12 @@ export declare class YooAudioPlayerComponent implements ComponentInterface {
    * Reinit the player when being within in a slide
    */
   isVisible?: boolean;
+  onVisibilityChanged(): void;
   /**
    * Set the audio source url
    */
   src?: string;
+  onSrcChanged(): Promise<void>;
   inputChanged: EventEmitter<boolean>;
   validityChanged: EventEmitter<boolean>;
   currentTime: number;
@@ -32,8 +35,6 @@ export declare class YooAudioPlayerComponent implements ComponentInterface {
   host: HTMLYooAudioPlayerElement;
   private audio;
   private isDragging;
-  onSrcChanged(): Promise<void>;
-  onVisibilityChanged(): void;
   getAudio(): Promise<HTMLAudioElement>;
   pause(): Promise<void>;
   componentWillLoad(): Promise<void>;
@@ -44,5 +45,8 @@ export declare class YooAudioPlayerComponent implements ComponentInterface {
   private initPlayer;
   private formateTime;
   private togglePlay;
-  render(): any;
+  renderPlayButton(): JSX.Element;
+  renderRange(): JSX.Element;
+  renderInfo(): JSX.Element;
+  render(): JSX.Element;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "8.2.0-26",
+  "version": "8.2.0-27",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",