'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-179a633e.cjs');
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
const state = require('../../state-d9fb972b.cjs');
const index = require('../../index-e9668573.cjs');
require('../lukso-icon/index.cjs');
require('../lukso-sanitize/index.cjs');
require('../../directive-8278ab14.cjs');
require('../../style-map-f36cc35f.cjs');

const style = ":host {\n    display: flex;\n    height: 100%\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
exports.LuksoTerms = class LuksoTerms extends shared_tailwindElement_index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.text = "";
    this.hasScrollButton = true;
    this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
    bg-gradient-to-b from-transparent to-neutral-100/80
    flex justify-center transition-opacity opacity-0`;
  }
  onScrollBottom() {
    const event = new CustomEvent("on-bottom-scroll", {
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(event);
  }
  handleScroll() {
    const scrollContainer = this.shadowRoot.getElementById("scroll-container");
    const scrollHeight = scrollContainer.scrollHeight - scrollContainer.offsetHeight;
    const scrollTop = scrollContainer.scrollTop;
    if (scrollTop >= scrollHeight) {
      this.onScrollBottom();
      this.hasScrollButton = false;
    } else {
      this.hasScrollButton = true;
    }
  }
  handleBottomScroll() {
    const scrollEnd = this.shadowRoot.getElementById("scroll-end");
    scrollEnd && scrollEnd.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start"
    });
  }
  render() {
    return shared_tailwindElement_index.x`<div
      id="scroll-container"
      class="border border-solid border-neutral-90 rounded-12 overflow-y-scroll relative scrollbar-none"
      @scroll=${this.handleScroll}
    >
      <div class="paragraph-inter-12-regular px-4 pt-3">
        <lukso-sanitize html-content=${this.text} is-pre></lukso-sanitize>
        <br />
        <br />
        <div id="scroll-end"></div>
      </div>
      <div
        class=${index.customClassMap({
      [this.defaultStyles]: true,
      "!opacity-100": this.hasScrollButton
    })}
      >
        <div
          data-testid="scroll-to-bottom"
          class="w-10 h-10 bg-neutral-100 rounded-full shadow-1xl flex items-center justify-center animate-bounce2 cursor-pointer"
          @click=${this.handleBottomScroll}
        >
          <lukso-icon name="arrow-down-lg"></lukso-icon>
        </div>
      </div>
    </div>`;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoTerms.prototype, "text", 2);
__decorateClass([
  state.t()
], exports.LuksoTerms.prototype, "hasScrollButton", 2);
exports.LuksoTerms = __decorateClass([
  queryAssignedElements.e("lukso-terms")
], exports.LuksoTerms);
