ranui/dist/dropdown-B6i_Wh9a.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as d, i as n, p as s } from "./factory-WDxu11V0.js";
import "./builder-EH76YCFS.js";
import { a as e, i as t, n as i, o as p, t as w } from "./utils-U-9uH7EX.js";
import { a as l, n as h } from "./ssr-BzykYefm.js";
import { addClassToElement as f, removeClassToElement as c } from "ranuts/utils";
var m = '@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}@keyframes ranui-dropdown-left-in{0%{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}to{transform:scaleX(1);transform-origin:100% 0%;opacity:1}}@keyframes ranui-dropdown-left-out{0%{transform:scaleX(1);transform-origin:100% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}}@keyframes ranui-dropdown-right-in{0%{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleX(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-right-out{0%{transform:scaleX(1);transform-origin:0% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-down-in var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-down-out var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-up-in var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-up-out var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-left-in{animation:ranui-dropdown-left-in var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-left-out{animation:ranui-dropdown-left-out var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-right-in{animation:ranui-dropdown-right-in var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}.ran-dropdown-right-out{animation:ranui-dropdown-right-out var(--ran-dropdown-animation-duration, .3s);animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:var(--ran-dropdown-host-z-index, var(--ran-z-dropdown, 1100))}:host([hidden]){display:none}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 0);color:var(--ran-dropdown-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-font-size, var(--ran-text-label-1, 14px));font-weight:var(--ran-dropdown-font-weight, var(--ran-text-label-weight, 500));list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, var(--ran-color-bg-elevated, #ffffff));border:var(--ran-dropdown-border, 1px solid var(--ran-color-border, #eaeaea));border-radius:var(--ran-dropdown-border-radius, var(--ran-radius-md, 12px));outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, var(--ran-shadow-menu, var(--ran-shadow-elevated, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05))));cursor:var(--ran-dropdown-cursor, auto);width:var(--ran-dropdown-width, 100%);height:var(--ran-dropdown-height, 100%);min-height:var(--ran-dropdown-min-height, 100%);min-width:var(--ran-dropdown-min-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, block);width:var(--ran-dropdown-container-width, 100%);height:var(--ran-dropdown-container-height, 100%);box-sizing:var(--ran-dropdown-container-box-sizing, border-box)}.ranui-dropdown-container .top{left:50%;transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px) / 2 + var(--ran-dropdown-arrow-anchor-offset, 0px))) translateY(calc(-1 * var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px)) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(0);top:0}.ranui-dropdown-container .bottom{left:50%;transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px) / 2 + var(--ran-dropdown-arrow-anchor-offset, 0px))) translateY(var(--ran-dropdown-arrow-overlap, 2px)) rotate(180deg);top:max(0px,calc(100% - calc(var(--ran-dropdown-arrow-width, 16px) / 4)))}.ranui-dropdown-container .left{transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px) + var(--ran-dropdown-arrow-overlap, 2px))) translateY(calc(var(--ran-dropdown-arrow-width, 16px) / 2 + var(--ran-dropdown-arrow-shape-offset, calc(var(--ran-dropdown-arrow-width, 16px) * -.301126)) + var(--ran-dropdown-arrow-anchor-offset-y, 0px))) rotate(270deg);top:max(0px,calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - var(--ran-dropdown-arrow-width, 16px)))}.ranui-dropdown-container .right{left:100%;transform:translate(calc(0px - var(--ran-dropdown-arrow-overlap, 2px))) translateY(calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2) + var(--ran-dropdown-arrow-shape-offset, calc(var(--ran-dropdown-arrow-width, 16px) * -.301126)) + var(--ran-dropdown-arrow-anchor-offset-y, 0px))) rotate(90deg);top:0}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);box-sizing:var(--ran-dropdown-arrow-box-sizing, border-box);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px));overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow svg{display:block;width:100%;height:100%;overflow:visible}.ranui-dropdown-arrow path{fill:var(--ran-dropdown-arrow-fill-background, var(--ran-dropdown-arrow-tip-background, var(--ran-color-bg-elevated, #fff)));filter:var(--ran-dropdown-arrow-shadow, drop-shadow(2px 2px 3px rgba(0, 0, 0, .05)))}@media(prefers-reduced-motion:reduce){.ran-dropdown-down-in,.ran-dropdown-down-out,.ran-dropdown-up-in,.ran-dropdown-up-out,.ran-dropdown-left-in,.ran-dropdown-left-out,.ran-dropdown-right-in,.ran-dropdown-right-out{animation:none}}', k = /* @__PURE__ */ (function(r) {
  return r.TOP = "top", r.BOTTOM = "bottom", r.LEFT = "left", r.RIGHT = "right", r;
})({}), v = class extends h {
  dropdown;
  _slot;
  _shadowDom;
  arrowIcon;
  container;
  static get observedAttributes() {
    return [
      "transit",
      "arrow",
      "sheet"
    ];
  }
  constructor() {
    super(), this._shadowDom = w(this, m);
    const r = d(), o = d(), a = n().class("ranui-dropdown-container").children(n().style("-webkit-tap-highlight-color", "transparent").style("outline", "0").class("ranui-dropdown").ref(r).part("dropdown").children(s().class("slot").ref(o))).build();
    this._shadowDom.appendChild(a), this.container = a, this.dropdown = e(r, "ranui dropdown"), this._slot = e(o, "slot");
  }
  get transit() {
    return i(this, "transit");
  }
  set transit(r) {
    t(this, "transit", r, { removeEmpty: !0 });
  }
  get arrow() {
    return i(this, "arrow");
  }
  set arrow(r) {
    t(this, "arrow", r, { removeEmpty: !0 });
  }
  get sheet() {
    return i(this, "sheet");
  }
  set sheet(r) {
    t(this, "sheet", r);
  }
  handlerExternalCss = () => {
    p(this, this._shadowDom, "sheet", null, this.sheet);
  };
  appliedTransit = "";
  handlerTransit = () => {
    this.dropdown && (this.appliedTransit && c(this.dropdown, this.appliedTransit), this.appliedTransit = this.transit, this.appliedTransit && f(this.dropdown, this.appliedTransit));
  };
  getAnimationTarget = () => this.dropdown;
  handlerArrow = () => {
    const r = (this.arrow || "").trim();
    if (!r) {
      this.arrowIcon && this.container.contains(this.arrowIcon) && this.container.removeChild(this.arrowIcon), this.arrowIcon = void 0;
      return;
    }
    !this.arrowIcon && this.container && (this.arrowIcon = n().class("ranui-dropdown-arrow").build(), this.arrowIcon.innerHTML = '<svg viewBox="0 0 16 16" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M 0 16 A 4 4 0 0 0 2.82842712474619 14.82842712474619 L 6.585786437626905 11.050252531694166 A 2 2 0 0 1 9.414213562373096 11.050252531694166 L 13.17157287525381 14.82842712474619 A 4 4 0 0 0 16 16 Z"/></svg>', this.container.appendChild(this.arrowIcon)), this.arrowIcon && (this.arrowIcon.className = `ranui-dropdown-arrow ${r}`);
  };
  stopPropagation = (r) => {
    r.stopPropagation();
  };
  connectedCallback() {
    this.handlerExternalCss(), this.handlerTransit(), this.handlerArrow();
  }
  disconnectedCallback() {
  }
  attributeChangedCallback(r, o, a) {
    r === "transit" && this.handlerTransit(), r === "arrow" && this.handlerArrow(), r === "sheet" && o !== a && this.handlerExternalCss();
  }
};
l("r-dropdown", v);
export {
  v as n,
  k as t
};