import {
  LocalizeController
} from "./chunk.X3FE7OHE.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/scrollable/scrollable.ts
import { css, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { property, query, state } from "lit/decorators.js";
import cx from "classix";
var SdScrollable = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.orientation = "horizontal";
    this.scrollbars = false;
    this.buttons = false;
    this.shadows = false;
    this.inset = false;
    this.step = 150;
    this.canScroll = {
      left: false,
      right: false,
      up: false,
      down: false
    };
    this.isScrollHorizontalEnabled = false;
    this.isScrollVerticalEnabled = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.updateScrollEnabledFlags();
    this.resizeObserver = new ResizeObserver(() => {
      this.handleContainerScroll();
    });
    this.updateComplete.then(() => {
      if (this.container) {
        this.resizeObserver.observe(this.container);
      }
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    if (this.container) {
      this.resizeObserver.unobserve(this.container);
    }
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("orientation") || changedProperties.has("buttons") || changedProperties.has("shadows")) {
      this.updateScrollEnabledFlags();
      this.handleContainerScroll();
    }
  }
  updateScrollEnabledFlags() {
    const dir = this.orientation;
    this.isScrollHorizontalEnabled = dir === "horizontal" || dir === "auto";
    this.isScrollVerticalEnabled = dir === "vertical" || dir === "auto";
  }
  get scrollButtons() {
    return {
      left: this.leftButton,
      right: this.rightButton,
      up: this.upButton,
      down: this.downButton
    };
  }
  handleContainerScroll() {
    if (!this.container) {
      return;
    }
    const canScrollLeft = this.container.scrollLeft > 0;
    const canScrollRight = this.container.scrollLeft + this.container.clientWidth < this.container.scrollWidth - 1;
    const canScrollUp = this.container.scrollTop > 0;
    const canScrollDown = this.container.scrollTop + this.container.clientHeight < this.container.scrollHeight - 1;
    const previousScrollState = this.canScroll;
    const canScroll = {
      left: this.isScrollHorizontalEnabled && canScrollLeft,
      right: this.isScrollHorizontalEnabled && canScrollRight,
      up: this.isScrollVerticalEnabled && canScrollUp,
      down: this.isScrollVerticalEnabled && canScrollDown
    };
    const hasReachedLeft = previousScrollState.left && !canScroll.left;
    const hasReachedUp = previousScrollState.up && !canScroll.up;
    const hasReachedRight = previousScrollState.right && !canScroll.right;
    const hasReachedDown = previousScrollState.down && !canScroll.down;
    if (hasReachedLeft || hasReachedUp) {
      this.dispatchEvent(new CustomEvent("start"));
    }
    if (hasReachedRight || hasReachedDown) {
      this.dispatchEvent(new CustomEvent("end"));
    }
    this.canScroll = canScroll;
  }
  handleScroll(direction, e) {
    var _a, _b, _c;
    const amount = ["left", "up"].includes(direction) ? -this.step : this.step;
    const axis = ["left", "right"].includes(direction) ? "horizontal" : "vertical";
    const towards = ["left", "up"].includes(direction) ? "start" : "end";
    const isKeyboardTriggered = !["mouse", "touch"].includes((_a = e == null ? void 0 : e.pointerType) != null ? _a : "");
    const scrollKey = axis === "horizontal" ? "left" : "top";
    (_b = this.container) == null ? void 0 : _b.scrollBy({
      behavior: "smooth",
      [scrollKey]: amount
    });
    const eventName = `button-${direction}`;
    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
    const currentPosition = axis === "horizontal" ? this.container.scrollLeft : this.container.scrollTop;
    const updatedPosition = currentPosition + amount;
    const limit = axis === "horizontal" ? this.container.scrollWidth - this.container.clientWidth : this.container.scrollHeight - this.container.clientHeight;
    const reachedStart = towards === "start" && updatedPosition <= 0;
    const reachedEnd = towards === "end" && updatedPosition >= limit - 1;
    if (!(reachedStart || reachedEnd)) {
      const announcement = this.localize.term("scrolled");
      this.announcementContainer.textContent = this.announcementContainer.textContent === announcement ? `${announcement}\u200B` : announcement;
      return;
    }
    const clickedButton = this.scrollButtons[direction];
    const oppositeButton = {
      left: this.rightButton,
      right: this.leftButton,
      up: this.downButton,
      down: this.upButton
    }[direction];
    const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
    (_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-6-22-0-icon")) == null ? void 0 : _c.setAttribute("label", label);
    if (isKeyboardTriggered) {
      oppositeButton == null ? void 0 : oppositeButton.focus();
    } else {
      clickedButton == null ? void 0 : clickedButton.blur();
    }
  }
  handleButtonBlur(direction, e) {
    var _a;
    const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
    const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
    const button = e.target;
    (_a = button.querySelector("sd-6-22-0-icon")) == null ? void 0 : _a.setAttribute("label", label);
  }
  render() {
    const scrollButtonClasses = "relative p-0 border-0 bg-transparent cursor-pointer w-5 h-5 flex items-center justify-center sd-interactive rounded-md flex text-lg";
    const scrollShadowClasses = "scroll-shadow absolute z-10 pointer-events-none transition-opacity duration-medium ease-in-out";
    return html`<div part="base" class="${cx(
      "scroll-container flex overflow-hidden flex-1",
      this.scrollbars ? "show-scrollbars" : "hide-scrollbars",
      this.inset && "p-4",
      {
        horizontal: "scroll-horizontal flex-row whitespace-nowrap items-center overflow-x-scroll overflow-y-hidden",
        vertical: "scroll-vertical justify-items-center overflow-y-scroll overflow-x-hidden",
        auto: "scroll-auto overflow-auto"
      }[this.orientation]
    )}" @scroll="${this.handleContainerScroll}" tabindex="0"><div id="announcement-container" role="status" class="sr-only"></div><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`<div part="button-left" class="${cx(
      "absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8 transition-opacity duration-medium ease-in-out",
      !this.canScroll.left && "opacity-0 pointer-events-none"
    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-6-22-0-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-6-22-0-icon></slot></button></div><div part="button-right" class="${cx(
      "absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8 transition-opacity duration-medium ease-in-out",
      !this.canScroll.right && "opacity-0 pointer-events-none"
    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-6-22-0-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-6-22-0-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
      "absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
      !this.canScroll.up && "opacity-0 pointer-events-none"
    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-6-22-0-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-6-22-0-icon></slot></button></div><div part="button-bottom" class="${cx(
      "absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
      !this.canScroll.down && "opacity-0 pointer-events-none"
    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-6-22-0-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-6-22-0-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`<div part="shadow-left" class="${cx(
      "left top-0 left-0 w-[6px] h-full",
      scrollShadowClasses,
      this.canScroll.left ? "opacity-100" : "opacity-0"
    )}"></div><div part="shadow-right" class="${cx(
      "right top-0 right-0 w-[6px] h-full",
      scrollShadowClasses,
      this.canScroll.right ? "opacity-100" : "opacity-0"
    )}"></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="shadow-top" class="${cx(
      "top top-0 left-0 w-full h-[6px]",
      scrollShadowClasses,
      this.canScroll.up ? "opacity-100" : "opacity-0"
    )}"></div><div part="shadow-bottom" class="${cx(
      "bottom bottom-0 left-0 w-full h-[6px]",
      scrollShadowClasses,
      this.canScroll.down ? "opacity-100" : "opacity-0"
    )}"></div>` : null}` : null}`;
  }
};
SdScrollable.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{--gradient-color:transparent;--gradient:var(--gradient-color) 0%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 80%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 100%;position:relative;display:flex;overflow:hidden}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-radius-sm)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1);width:var(--sd-spacing-1)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,transparent 50%,rgba(24,24,24,.4) 100%)}.sd-6-22-0-icon--top{align-self:flex-start}.sd-6-22-0-icon--down{align-self:flex-end}`
];
__decorateClass([
  query('[part="button-right"] button')
], SdScrollable.prototype, "rightButton", 2);
__decorateClass([
  query('[part="button-left"] button')
], SdScrollable.prototype, "leftButton", 2);
__decorateClass([
  query('[part="button-bottom"] button')
], SdScrollable.prototype, "downButton", 2);
__decorateClass([
  query('[part="button-top"] button')
], SdScrollable.prototype, "upButton", 2);
__decorateClass([
  query(".scroll-container")
], SdScrollable.prototype, "container", 2);
__decorateClass([
  query("#announcement-container")
], SdScrollable.prototype, "announcementContainer", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdScrollable.prototype, "orientation", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdScrollable.prototype, "scrollbars", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdScrollable.prototype, "buttons", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdScrollable.prototype, "shadows", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdScrollable.prototype, "inset", 2);
__decorateClass([
  property({ type: Number, reflect: true })
], SdScrollable.prototype, "step", 2);
__decorateClass([
  state()
], SdScrollable.prototype, "canScroll", 2);
__decorateClass([
  state()
], SdScrollable.prototype, "isScrollHorizontalEnabled", 2);
__decorateClass([
  state()
], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
SdScrollable = __decorateClass([
  customElement("sd-6-22-0-scrollable")
], SdScrollable);

export {
  SdScrollable
};
