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

// src/components/map-marker/map-marker.ts
import { css } from "lit";
import { html, literal } from "lit/static-html.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { property } from "lit/decorators.js";
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
import cx from "classix";
var SdMapMarker = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.variant = "main";
    this.state = "default";
    this.animated = false;
    this.notInteractive = false;
    this.href = "";
    this.label = "";
    /** @internal */
    this.marker = {
      cluster: `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
        <circle cx="25" cy="25" opacity="1" r="20" />
      </svg>`,
      main: `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 75">
        <path d="M51 49A29 29 0 0 0 30 0 29 29 0 0 0 9 49l21 22 21-22Z"/>
      </svg> `,
      place: `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 75">
        <path fill-rule="evenodd" d="M51 49A29 29 0 0 0 30 0 29 29 0 0 0 9 49l21 22 21-22Z" clip-rule="evenodd" />
      </svg>`
    };
  }
  handleBlur() {
    this.emit("sd-blur");
  }
  handleFocus() {
    this.emit("sd-focus");
  }
  isLink() {
    return this.href ? true : false;
  }
  render() {
    const isLink = this.isLink();
    const tag = this.notInteractive ? literal`div` : isLink ? literal`a` : literal`button`;
    const marker = unsafeSVG(this.marker[this.variant]);
    const mask = `url("data:image/svg+xml;utf8,${encodeURIComponent(this.marker[this.variant]).replace(/#/g, "%23")}")`;
    return html`<${tag} part="base" class="${cx("relative flex justify-center", !this.notInteractive && "group focus-visible:focus-outline")}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" role="${ifDefined(this.notInteractive || isLink ? void 0 : "button")}" aria-label="${ifDefined(!this.notInteractive && this.label ? this.label : void 0)}" aria-labelledby="${ifDefined(!this.notInteractive && !this.label ? "content" : void 0)}"><div part="marker" class="${cx(
      "relative inline-flex",
      this.animated && (this.variant === "main" || this.variant === "place") && "animate-bounce-once",
      this.variant === "cluster" && this.state === "hover" && "scale-110",
      this.variant === "cluster" && !this.notInteractive && "transition-transform duration-fast ease-in-out hover:scale-110",
      {
        cluster: "sd-6-22-0-map-marker--cluster-color-text",
        main: "sd-color-fill-accent",
        place: "sd-6-22-0-map-marker--pin-color-text"
      }[this.variant]
    )}"><div id="motion-wrapper" part="motion-wrapper" class="${cx(
      "absolute inset-0 overflow-hidden pointer-events-none",
      {
        cluster: "sd-6-22-0-map-marker--cluster--default-color-background group-hover:sd-6-22-0-map-marker--cluster--hover-color-background",
        main: "sd-6-22-0-map-marker--main-color-background",
        place: "sd-6-22-0-map-marker--pin--default-color-background"
      }[this.variant]
    )}" style="mask-image:${mask};-webkit-mask-image:${mask}"><div class="${cx(
      "absolute inset-0 transition-transform ease-in-out duration-fast translate-y-full group-hover:translate-y-0 group-active:translate-y-0",
      ["hover", "active"].includes(this.state) && "!translate-y-0"
    )}"><div class="${cx(
      "min-w-full min-h-full skew-y-[-11deg]",
      {
        cluster: "",
        main: this.state === "active" ? "bg-accent-700" : this.state === "hover" ? "bg-accent-550" : "group-hover:bg-accent-550 group-active:bg-accent-700",
        place: this.state === "active" || this.state === "hover" ? "sd-6-22-0-map-marker--pin--hover-color-background" : "group-active:bg-primary-200"
      }[this.variant]
    )}"></div></div>${this.variant === "main" ? html`<div id="marker-circle" class="absolute rounded-full"></div>` : ""}</div>${marker} ${this.variant === "cluster" ? html`<div id="cluster-border" class="${cx(
      "absolute inset-0 sd-6-22-0-map-marker--cluster--default-color-background rounded-full opacity-30 hover:sd-6-22-0-map-marker--cluster--hover-color-background",
      this.state === "hover" && "sd-6-22-0-map-marker--cluster--hover-color-background"
    )}"></div>` : ""}</div><div id="content" part="content" class="${cx(
      "absolute self-center pointer-events-none",
      this.variant === "cluster" && "font-bold sd-6-22-0-map-marker--cluster-color-text",
      this.variant === "place" && "font-bold sd-6-22-0-map-marker--pin-color-text"
    )}"><slot></slot></div></${tag}>`;
  }
};
/**
 * Inherits global stylesheet including TailwindCSS
 */
SdMapMarker.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{display:block}#motion-wrapper{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem) * var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{margin-top:calc(var(--sd-spacing-2) * -1);font-size:calc(var(--sd-font-size-3xl,2rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=motion-wrapper]>div>div{background-color:rgba(var(--sd-map-marker--cluster--hover-color-background))}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow-size:drop-shadow(var(--sd-drop-shadow));--tw-drop-shadow:drop-shadow(var(--sd-drop-shadow));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:host([variant=main]) #marker-circle{width:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));height:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1))}#marker-circle{background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdMapMarker.prototype, "variant", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdMapMarker.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdMapMarker.prototype, "animated", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
], SdMapMarker.prototype, "notInteractive", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdMapMarker.prototype, "href", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdMapMarker.prototype, "target", 2);
__decorateClass([
  property({ reflect: true })
], SdMapMarker.prototype, "label", 2);
SdMapMarker = __decorateClass([
  customElement("sd-6-22-0-map-marker")
], SdMapMarker);

export {
  SdMapMarker
};
