import { r as registerInstance, h, c as getAssetPath, e as getElement } from './index-c04b9ed5.js';

const sparkleCharacterIntroCss = "sparkle-character-intro{--sparkle-character-background-color:#e7e7e7}sparkle-character-intro .character-phrase-block{display:flex;width:100%;min-height:200px;align-items:center;padding:20px}sparkle-character-intro .character-phrase-block.right{justify-content:flex-end}sparkle-character-intro .character-phrase-block.left{justify-content:flex-start}sparkle-character-intro .character-phrase-block.left .character-box{order:2}sparkle-character-intro .character-phrase-block.left .character-image-block{order:1}sparkle-character-intro .character-box{min-width:300px;border-radius:15px;background:var(--sparkle-character-background-color);color:var(--text-color);padding:20px;text-align:center;position:relative;box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04)}sparkle-character-intro .character-box.right:before{content:\"\";width:0px;height:0px;position:absolute;border-left:15px solid var(--sparkle-character-background-color);border-right:15px solid transparent;border-top:15px solid var(--sparkle-character-background-color);border-bottom:15px solid transparent;right:-16px;top:0px}sparkle-character-intro .character-box.left:before{content:\"\";width:0px;height:0px;position:absolute;border-left:15px solid transparent;border-right:15px solid var(--sparkle-character-background-color);border-top:15px solid var(--sparkle-character-background-color);border-bottom:15px solid transparent;left:-16px;top:0px}sparkle-character-intro img{max-width:100%;border:0}sparkle-character-intro .character-image-block{float:left;width:20%}sparkle-character-intro .character-image-block.right{transform:rotateY(180deg)}";

const SparkleCharacterIntro = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.character = 'jen';
    this.position = 'right';
  }
  componentDidLoad() {
    console.log(this.character);
  }
  render() {
    return (h("div", { class: `character-phrase-block ${this.position}` }, h("div", { class: `character-box ${this.position}` }, h("slot", null)), h("div", { class: `character-image-block ${this.position}` }, h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') }))));
  }
  static get assetsDirs() { return ["assets"]; }
  get el() { return getElement(this); }
};
SparkleCharacterIntro.style = sparkleCharacterIntroCss;

export { SparkleCharacterIntro as sparkle_character_intro };
