@ncds/ui-admin 1.3.0 → 1.4.1

package/dist/esm/assets/scripts/tag/Tag.js

@@ -0,0 +1,263 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { TAG_CLASS_NAMES, getTagSizeClassName, getTooltipPositionClassName } from './const/classNames';
+import { iconSize, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, MARGIN } from './const/sizes';
+// CSS 변수 값을 가져오는 유틸리티 함수
+var getCSSVariable = function (variableName, fallback) {
+  if (fallback === void 0) {
+    fallback = '';
+  }
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() || fallback;
+};
+// 위치 계산 로직
+var calculateOptimalPosition = function (triggerElement, tooltipElement) {
+  var triggerRect = triggerElement.getBoundingClientRect();
+  var tooltipRect = tooltipElement.getBoundingClientRect();
+  var viewportWidth = window.innerWidth,
+    viewportHeight = window.innerHeight;
+  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  var spaces = {
+    top: triggerRect.top,
+    bottom: viewportHeight - triggerRect.bottom,
+    left: triggerRect.left,
+    right: viewportWidth - triggerRect.right
+  };
+  // 위/아래 공간을 먼저 확인하고 우선순위 결정
+  var hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+  // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
+  var positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+    var position = positions_1[_i];
+    var isTop = position.includes('top');
+    var isRight = position.includes('right');
+    var hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+    var hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+    : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
+    if (hasVerticalSpace && hasHorizontalSpace) {
+      return position;
+    }
+  }
+  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+  return fallbackPosition;
+};
+var Tag = /** @class */function () {
+  function Tag(options) {
+    var _this = this;
+    this.isTooltipVisible = false;
+    this.calculatedPosition = 'top-right';
+    this.tooltipElement = null;
+    this.handleMouseEnter = function () {
+      if (!_this.shouldTruncate()) return;
+      _this.isTooltipVisible = true;
+      // 위치 계산
+      if (_this.tooltipElement) {
+        var optimalPosition = calculateOptimalPosition(_this.element, _this.tooltipElement);
+        _this.calculatedPosition = optimalPosition;
+      } else {
+        // 툴팁이 없으면 더미 요소로 계산
+        var dummyTooltipElement = document.createElement('div');
+        dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
+        dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
+        var optimalPosition = calculateOptimalPosition(_this.element, dummyTooltipElement);
+        _this.calculatedPosition = optimalPosition;
+      }
+      _this.createTooltip();
+    };
+    this.handleMouseLeave = function () {
+      _this.removeTooltip(); // removeTooltip에서 isTooltipVisible을 false로 설정
+    };
+    this.options = __assign({
+      size: 'sm',
+      maxLength: 20
+    }, options);
+    this.createElement();
+  }
+  Tag.prototype.createElement = function () {
+    // 메인 태그 요소 생성
+    this.element = document.createElement('span');
+    this.element.className = this.getTagClasses();
+    // 텍스트 길이 체크 및 말줄임 처리
+    var shouldTruncate = this.shouldTruncate();
+    var displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
+    // 아이콘 추가
+    if (this.options.icon) {
+      var iconElement = this.createSideSlot(this.options.icon);
+      if (iconElement) {
+        this.element.appendChild(iconElement);
+      }
+    }
+    // 텍스트 요소 생성
+    var textElement = document.createElement('span');
+    textElement.className = TAG_CLASS_NAMES.text;
+    textElement.textContent = displayText;
+    this.element.appendChild(textElement);
+    // 카운트 추가
+    if (this.options.count) {
+      var countElement = document.createElement('span');
+      countElement.className = TAG_CLASS_NAMES.count;
+      countElement.textContent = this.options.count;
+      this.element.appendChild(countElement);
+    }
+    // 닫기 버튼 추가
+    if (this.options.close) {
+      var closeButton = this.createCloseButton();
+      this.element.appendChild(closeButton);
+    }
+    // 툴팁 이벤트 리스너 추가 (텍스트가 잘린 경우에만)
+    if (shouldTruncate) {
+      this.element.addEventListener('mouseenter', this.handleMouseEnter);
+      this.element.addEventListener('mouseleave', this.handleMouseLeave);
+    }
+  };
+  Tag.prototype.getTagClasses = function () {
+    var classes = [TAG_CLASS_NAMES.tag, getTagSizeClassName(this.options.size)];
+    if (this.shouldTruncate()) {
+      classes.push(TAG_CLASS_NAMES.truncated);
+    }
+    return classes.join(' ');
+  };
+  Tag.prototype.shouldTruncate = function () {
+    return this.options.text.length > this.options.maxLength;
+  };
+  Tag.prototype.getTruncatedText = function () {
+    return "".concat(this.options.text.slice(0, this.options.maxLength - 2), "...");
+  };
+  Tag.prototype.createSideSlot = function (slot) {
+    if (slot.type === 'icon') {
+      // 아이콘 SVG 문자열을 DOM 요소로 변환 (DOMParser 사용)
+      var iconSVG = this.createIconSVG(slot.icon, iconSize[this.options.size], slot.color);
+      var parser = new DOMParser();
+      var doc = parser.parseFromString(iconSVG, 'image/svg+xml');
+      return doc.documentElement;
+    }
+    if (slot.type === 'dot') {
+      var dotElement = document.createElement('span');
+      dotElement.className = "ncua-dot ncua-dot--neutral ncua-dot--".concat(slot.size || 'sm');
+      if (slot.color) {
+        dotElement.style.backgroundColor = slot.color;
+      }
+      return dotElement;
+    }
+    // 커스텀 요소는 그대로 반환
+    return slot.children;
+  };
+  Tag.prototype.createIconSVG = function (iconName, size, color) {
+    var colorStyle = color ? " style=\"color: ".concat(color, "\"") : '';
+    // 현재는 arrow-left 아이콘만 지원
+    if (iconName === 'arrow-left') {
+      return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"").concat(colorStyle, ">\n        <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 12H5m0 0 7 7m-7-7 7-7\" />\n      </svg>");
+    }
+    // 기본 빈 SVG
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"").concat(colorStyle, "></svg>");
+  };
+  Tag.prototype.createCloseButton = function () {
+    // react와 동일한 구조로 직접 구현
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = TAG_CLASS_NAMES.close;
+    // React 버전과 동일한 SVG 생성 (문자열 방식)
+    var grayColor = getCSSVariable('--gray-300', '#a4a5a8');
+    var svgString = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(iconSize[this.options.size], "\" height=\"").concat(iconSize[this.options.size], "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" style=\"color: ").concat(grayColor, "\">\n      <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>");
+    // DOMParser로 SVG 문자열을 DOM 요소로 변환
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgString, 'image/svg+xml');
+    var svg = doc.documentElement;
+    button.appendChild(svg);
+    // 이벤트 리스너 추가
+    if (this.options.onButtonClick) {
+      button.addEventListener('click', this.options.onButtonClick);
+    }
+    return button;
+  };
+  Tag.prototype.createTooltip = function () {
+    if (this.tooltipElement || !this.isTooltipVisible) {
+      return; // 이미 생성됨 또는 표시하지 않음
+    }
+    this.tooltipElement = document.createElement('span');
+    this.tooltipElement.className = "".concat(TAG_CLASS_NAMES.tooltip, " ").concat(getTooltipPositionClassName(this.calculatedPosition));
+    var tooltipContent = document.createElement('span');
+    tooltipContent.className = TAG_CLASS_NAMES.tooltipContent;
+    tooltipContent.textContent = this.options.text;
+    this.tooltipElement.appendChild(tooltipContent);
+    this.element.appendChild(this.tooltipElement);
+  };
+  Tag.prototype.removeTooltip = function () {
+    if (this.tooltipElement) {
+      this.element.removeChild(this.tooltipElement);
+      this.tooltipElement = null;
+    }
+    this.isTooltipVisible = false;
+  };
+  Tag.prototype.getElement = function () {
+    return this.element;
+  };
+  Tag.prototype.isTooltipShown = function () {
+    return this.isTooltipVisible;
+  };
+  Tag.prototype.setText = function (text) {
+    this.options.text = text;
+    this.updateTextElement();
+  };
+  Tag.prototype.setCount = function (count) {
+    this.options.count = count;
+    this.updateCountElement();
+  };
+  Tag.prototype.updateTextElement = function () {
+    var textElement = this.element.querySelector(".".concat(TAG_CLASS_NAMES.text));
+    if (textElement) {
+      var shouldTruncate = this.shouldTruncate();
+      var displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
+      textElement.textContent = displayText;
+      // 클래스 업데이트
+      if (shouldTruncate) {
+        this.element.classList.add(TAG_CLASS_NAMES.truncated);
+      } else {
+        this.element.classList.remove(TAG_CLASS_NAMES.truncated);
+      }
+    }
+  };
+  Tag.prototype.updateCountElement = function () {
+    var existingCount = this.element.querySelector(".".concat(TAG_CLASS_NAMES.count));
+    if (this.options.count) {
+      if (existingCount) {
+        existingCount.textContent = this.options.count;
+      } else {
+        // 카운트 요소 새로 생성
+        var countElement = document.createElement('span');
+        countElement.className = TAG_CLASS_NAMES.count;
+        countElement.textContent = this.options.count;
+        // 닫기 버튼 앞에 삽입
+        var closeButton = this.element.querySelector(".".concat(TAG_CLASS_NAMES.close));
+        if (closeButton) {
+          this.element.insertBefore(countElement, closeButton);
+        } else {
+          this.element.appendChild(countElement);
+        }
+      }
+    } else {
+      // 카운트 제거
+      if (existingCount) {
+        this.element.removeChild(existingCount);
+      }
+    }
+  };
+  Tag.prototype.destroy = function () {
+    this.element.removeEventListener('mouseenter', this.handleMouseEnter);
+    this.element.removeEventListener('mouseleave', this.handleMouseLeave);
+    if (this.tooltipElement) {
+      this.removeTooltip();
+    }
+  };
+  return Tag;
+}();
+export { Tag };

package/dist/esm/assets/scripts/tag/const/classNames.js

@@ -0,0 +1,16 @@
+// Tag 관련 CSS 클래스명 상수
+export var TAG_CLASS_NAMES = {
+  tag: 'ncua-tag',
+  text: 'ncua-tag__text',
+  count: 'ncua-tag__count',
+  close: 'ncua-tag__close',
+  tooltip: 'ncua-tag__tooltip',
+  tooltipContent: 'ncua-tag__tooltip-content',
+  truncated: 'ncua-tag--truncated'
+};
+export var getTagSizeClassName = function (size) {
+  return "ncua-tag--".concat(size);
+};
+export var getTooltipPositionClassName = function (position) {
+  return "ncua-tag__tooltip--".concat(position);
+};

package/dist/esm/assets/scripts/tag/const/index.js

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './classNames';
+export * from './sizes';

package/dist/esm/assets/scripts/tag/const/sizes.js

@@ -0,0 +1,7 @@
+export var iconSize = {
+  sm: 14,
+  md: 16
+};
+export var MARGIN = 10;
+export var DEFAULT_TOOLTIP_WIDTH = 200;
+export var DEFAULT_TOOLTIP_HEIGHT = 60;

package/dist/esm/assets/scripts/tag/const/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/assets/scripts/tag/index.js

@@ -0,0 +1,9 @@
+import { Tag } from './Tag';
+export { Tag } from './Tag';
+export * from './const/types';
+export * from './const/classNames';
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Tag = Tag;
+}

package/dist/esm/assets/scripts/tooltip/Tooltip.js

@@ -0,0 +1,375 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { SVG_ICONS, CLASS_NAMES, TOOLTIP_DEFAULT_VALUE, ICON_SIZES, TOOLTIP_OFFSET, VIEWPORT_MARGIN, OFFSCREEN_POSITION, OPACITY, POSITION, EVENT_OPTIONS, CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG, Z_INDEX } from './const';
+import { ButtonCloseX } from '../shared/ButtonCloseX';
+import { MEDIA_QUERY } from '../../../src/constant/breakpoint';
+import { TooltipLayerManager } from './TooltipLayerManager';
+/**
+ * Tooltip 클래스
+ * 툴팁 패널 패턴을 사용하여 툴팁을 생성합니다.
+ * 툴팁 패널 패턴은 바깥 컨테이너(항상 pointer-events:none) + 실제 패널(클릭 허용) 패턴을 사용합니다.
+ * 레이어 1개 아래에 여러개의 패널과 툴팁이 생성되어 화면에 삽입됩니다.
+ * 자동 위치조정 ( 공간이 부족하다면 상하좌우를 조절하는 기능 - 기본값: top )을 사용합니다.
+ * Shadow DOM 지원
+ */
+var Tooltip = /** @class */function () {
+  function Tooltip(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var _this = this;
+    this.iconElement = null;
+    // 전역 레이어 매니저 사용
+    this.layerManager = TooltipLayerManager.getInstance();
+    this.panelId = null;
+    this.panel = null;
+    this.calculatedPosition = 'top';
+    this.isVisible = false;
+    this.isMeasuring = false;
+    this.isForceHidden = false;
+    // 이벤트 핸들러
+    this.boundMouseEnter = function () {
+      return _this.handleMouseEnter();
+    };
+    this.boundMouseLeave = function () {
+      return _this.handleMouseLeave();
+    };
+    this.boundResizeScroll = function () {
+      return _this.handleResizeScroll();
+    };
+    this.boundPanelClick = function (e) {
+      return _this.handlePanelClick(e);
+    };
+    /* ========== 핸들러 ========== */
+    this.handleMouseEnter = function () {
+      _this.showTooltip();
+      if (_this.options.type === 'long') {
+        // long은 X로 닫을 때까지 유지 → 재호버 방지
+        _this.disableMouseEvents();
+      }
+    };
+    this.handleMouseLeave = function () {
+      if (_this.options.type === 'short') {
+        _this.hideTooltip();
+      }
+    };
+    this.handleResizeScroll = function () {
+      if (_this.isVisible) _this.updateTooltipPosition();
+    };
+    this.handlePanelClick = function (e) {
+      var t = e.target;
+      if (t.closest(".".concat(CLASS_NAMES.TOOLTIP_CLOSE_BUTTON))) {
+        e.stopPropagation();
+        e.preventDefault();
+        _this.isForceHidden = true;
+        _this.hideTooltip();
+        // long 타입에서 닫았으면 다시 hover 가능
+        if (_this.options.type === 'long') _this.enableMouseEvents();
+      }
+    };
+    this.options = __assign(__assign({}, TOOLTIP_DEFAULT_VALUE), options);
+    this.element = this.createElement();
+    this.bindEvents();
+  }
+  /* ========== DOM 생성 ========== */
+  Tooltip.prototype.createElement = function () {
+    var _a, _b, _c;
+    var iconSize = ICON_SIZES[(_a = this.options.size) !== null && _a !== void 0 ? _a : 'sm'];
+    var key = this.options.iconType === 'stroke' ? 'help-circle-stroke' : 'help-circle-fill';
+    var iconSvg = (_c = (_b = SVG_ICONS[key]) === null || _b === void 0 ? void 0 : _b.call(SVG_ICONS, iconSize)) !== null && _c !== void 0 ? _c : FALLBACK_ICON_SVG(iconSize);
+    var wrapper = document.createElement('span');
+    wrapper.className = this.buildAnchorClassName();
+    wrapper.style.cssText = CSS_TEMPLATES.ANCHOR_WRAPPER;
+    wrapper.innerHTML = HTML_TEMPLATES.ICON_WRAPPER(CLASS_NAMES.TOOLTIP_ICON, iconSvg);
+    this.iconElement = wrapper.querySelector(".".concat(CLASS_NAMES.TOOLTIP_ICON));
+    // body에 레이어/패널 생성(패널 패턴)
+    this.createLayerAndPanel();
+    return wrapper;
+  };
+  // 앵커(아이콘 래퍼) 클래스
+  Tooltip.prototype.buildAnchorClassName = function () {
+    var classes = [CLASS_NAMES.TOOLTIP, "".concat(CLASS_NAMES.TOOLTIP, "--").concat(this.options.size), "".concat(CLASS_NAMES.TOOLTIP, "--").concat(this.options.type)];
+    if (this.options.hideArrow) classes.push(CLASS_NAMES.TOOLTIP_HIDDEN_ARROW);
+    if (this.options.iconType === 'stroke') classes.push(CLASS_NAMES.TOOLTIP_STROKE);
+    if (this.options.position === 'auto') classes.push(CLASS_NAMES.TOOLTIP_AUTO);
+    if (this.options.className) classes.push(this.options.className);
+    return classes.join(' ');
+  };
+  // 패널 클래스 (방향/테마 가짐)
+  Tooltip.prototype.buildPanelClassName = function () {
+    var finalPosition = this.options.position === 'auto' ? this.calculatedPosition : this.options.position;
+    var classes = [CLASS_NAMES.TOOLTIP_PANEL, CLASS_NAMES.TOOLTIP_BG, "".concat(CLASS_NAMES.TOOLTIP_BG, "--").concat(this.options.tooltipType), "".concat(CLASS_NAMES.TOOLTIP_BG, "--").concat(finalPosition)];
+    if (this.isVisible) classes.push(CLASS_NAMES.TOOLTIP_BG_VISIBLE);
+    if (this.isMeasuring) classes.push(CLASS_NAMES.TOOLTIP_BG_MEASURING);
+    if (this.isForceHidden) classes.push(CLASS_NAMES.TOOLTIP_BG_FORCE_HIDDEN);
+    return classes.join(' ');
+  };
+  Tooltip.prototype.renderContentHTML = function () {
+    if (!this.options.content) return '';
+    if (this.options.useShadowDOM) {
+      return HTML_TEMPLATES.TOOLTIP_CONTENT_SHADOW(CLASS_NAMES.TOOLTIP_CONTENT);
+    }
+    return HTML_TEMPLATES.TOOLTIP_CONTENT(CLASS_NAMES.TOOLTIP_CONTENT, this.options.content);
+  };
+  Tooltip.prototype.renderCloseButtonHTML = function () {
+    if (this.options.type !== 'long') return '';
+    var theme = this.options.tooltipType === 'white' ? 'dark' : 'light';
+    var isMobile = window.matchMedia(MEDIA_QUERY.mobile).matches;
+    var size = isMobile ? 'sm' : 'xs';
+    return ButtonCloseX(size, theme, CLASS_NAMES.TOOLTIP_CLOSE_BUTTON, '툴팁 닫기');
+  };
+  /** 전역 레이어에 패널 생성 */
+  Tooltip.prototype.createLayerAndPanel = function () {
+    var _a;
+    // 기존 패널 제거
+    if (this.panelId) {
+      this.layerManager.removePanel(this.panelId);
+    }
+    // 새 패널 생성 (zIndex 전달)
+    var zIndex = (_a = this.options.zIndex) !== null && _a !== void 0 ? _a : Z_INDEX.TOOLTIP_LAYER;
+    var _b = this.layerManager.createPanel(zIndex),
+      id = _b.id,
+      panel = _b.panel;
+    this.panelId = id;
+    this.panel = panel;
+    // 패널 설정
+    this.panel.className = this.buildPanelClassName();
+    // 패널 내용 구성
+    var titleHTML = this.options.title ? HTML_TEMPLATES.TOOLTIP_TITLE(CLASS_NAMES.TOOLTIP_TITLE, this.options.title) : '';
+    var contentHTML = this.renderContentHTML();
+    var closeButtonHTML = this.renderCloseButtonHTML();
+    this.panel.innerHTML = "".concat(titleHTML).concat(contentHTML).concat(closeButtonHTML);
+    if (this.options.useShadowDOM && this.options.content) {
+      this.setupShadowContent();
+    }
+    // 패널 클릭(닫기 버튼) 위임
+    this.panel.addEventListener('click', this.boundPanelClick);
+  };
+  Tooltip.prototype.setupShadowContent = function () {
+    if (!this.panel || !this.options.content) return;
+    var container = this.panel.querySelector('[data-shadow-content]');
+    if (!container) return;
+    var shadowRoot = container.attachShadow({
+      mode: 'open'
+    });
+    var style = document.createElement('style');
+    style.textContent = CSS_TEMPLATES.SHADOW_DOM_HOST;
+    shadowRoot.appendChild(style);
+    var temp = document.createElement('div');
+    temp.innerHTML = this.options.content;
+    while (temp.firstChild) shadowRoot.appendChild(temp.firstChild);
+  };
+  /* ========== 이벤트 바인딩/해제 ========== */
+  Tooltip.prototype.bindEvents = function () {
+    this.enableMouseEvents();
+    window.addEventListener('resize', this.boundResizeScroll, EVENT_OPTIONS.PASSIVE);
+    window.addEventListener('scroll', this.boundResizeScroll, EVENT_OPTIONS.PASSIVE);
+  };
+  // tooltip icon위에 마우스 올리면 툴팁 보이기
+  Tooltip.prototype.enableMouseEvents = function () {
+    var _a, _b;
+    (_a = this.iconElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.boundMouseEnter);
+    (_b = this.iconElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.boundMouseLeave);
+  };
+  Tooltip.prototype.disableMouseEvents = function () {
+    var _a, _b;
+    (_a = this.iconElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.boundMouseEnter);
+    (_b = this.iconElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.boundMouseLeave);
+  };
+  /* ========== 표시/숨김/위치 ========== */
+  Tooltip.prototype.showTooltip = function () {
+    if (!this.panel) return;
+    this.isVisible = true;
+    this.isForceHidden = false; // 강제 숨김 상태 리셋
+    this.updateTooltipPosition();
+    // 보이기
+    this.panel.style.opacity = OPACITY.VISIBLE;
+    this.updatePanelClass();
+  };
+  Tooltip.prototype.hideTooltip = function () {
+    if (!this.panel) return;
+    this.isVisible = false;
+    this.isForceHidden = false; // 강제 숨김 상태 리셋 (다시 표시 가능하도록)
+    this.panel.style.opacity = OPACITY.HIDDEN;
+    this.updatePanelClass();
+    // long 타입에서 hideTooltip()을 호출한 경우 마우스 이벤트 다시 활성화
+    if (this.options.type === 'long') {
+      this.enableMouseEvents();
+    }
+    // 전환 종료 후 완전히 오프스크린 이동 → 히트 테스트 0
+    var el = this.panel;
+    var onEnd = function () {
+      el.style.left = OFFSCREEN_POSITION;
+      el.style.top = OFFSCREEN_POSITION;
+      el.removeEventListener('transitionend', onEnd);
+    };
+    el.addEventListener('transitionend', onEnd, {
+      once: true
+    });
+  };
+  Tooltip.prototype.updateTooltipPosition = function () {
+    var _a;
+    if (!this.panel) return;
+    this.isMeasuring = true;
+    this.updatePanelClass();
+    // 먼저 눈에 보이도록 화면 안쪽으로 잠깐 이동해 사이즈 측정
+    // (opacity는 showTooltip에서만 1로)
+    if (this.panel.style.left === OFFSCREEN_POSITION) {
+      this.panel.style.left = POSITION.INITIAL;
+      this.panel.style.top = POSITION.INITIAL;
+    }
+    var tipRect = this.panel.getBoundingClientRect();
+    var anchor = (_a = this.iconElement) !== null && _a !== void 0 ? _a : this.element;
+    var rect = anchor.getBoundingClientRect();
+    var left = 0;
+    var top = 0;
+    var prefer = this.options.position;
+    if (prefer === 'auto') {
+      var enoughTop = rect.top - TOOLTIP_OFFSET - tipRect.height >= VIEWPORT_MARGIN;
+      prefer = enoughTop ? 'top' : 'bottom';
+    }
+    if (prefer === 'bottom') {
+      top = rect.bottom + TOOLTIP_OFFSET;
+      left = rect.left + rect.width / 2 - tipRect.width / 2;
+      this.calculatedPosition = 'bottom';
+    } else if (prefer === 'top') {
+      top = rect.top - tipRect.height - TOOLTIP_OFFSET;
+      left = rect.left + rect.width / 2 - tipRect.width / 2;
+      this.calculatedPosition = 'top';
+    } else if (prefer === 'left') {
+      top = rect.top + rect.height / 2 - tipRect.height / 2;
+      left = rect.left - tipRect.width - TOOLTIP_OFFSET;
+      this.calculatedPosition = 'left';
+    } else if (prefer === 'right') {
+      top = rect.top + rect.height / 2 - tipRect.height / 2;
+      left = rect.right + TOOLTIP_OFFSET;
+      this.calculatedPosition = 'right';
+    } else {
+      // fallback: top
+      top = rect.top - tipRect.height - TOOLTIP_OFFSET;
+      left = rect.left + rect.width / 2 - tipRect.width / 2;
+      this.calculatedPosition = 'top';
+    }
+    // 화면 경계 보정
+    left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_MARGIN));
+    top = Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - tipRect.height - VIEWPORT_MARGIN));
+    this.panel.style.left = "".concat(Math.round(left), "px");
+    this.panel.style.top = "".concat(Math.round(top), "px");
+    this.isMeasuring = false;
+    this.updatePanelClass();
+  };
+  Tooltip.prototype.updatePanelClass = function () {
+    if (!this.panel) return;
+    var newClassName = this.buildPanelClassName();
+    if (this.panel.className !== newClassName) {
+      this.panel.className = newClassName;
+    }
+  };
+  /* ========== Public API ========== */
+  Tooltip.prototype.getElement = function () {
+    return this.element;
+  };
+  /* 기존 옵션 업데이트 ( i18n 적용, 속성 변경 등 옵션 변경 시 사용 ) */
+  Tooltip.prototype.updateOptions = function (newOptions) {
+    var _a;
+    // 기존 리스너/DOM 정리
+    this.disableMouseEvents();
+    window.removeEventListener('resize', this.boundResizeScroll);
+    window.removeEventListener('scroll', this.boundResizeScroll);
+    (_a = this.panel) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.boundPanelClick);
+    if (this.panelId) {
+      this.layerManager.removePanel(this.panelId);
+    }
+    // 옵션 병합
+    this.options = __assign(__assign({}, this.options), newOptions);
+    // 앵커 재구성
+    var parent = this.element.parentNode;
+    var newEl = this.createElement();
+    if (parent) parent.replaceChild(newEl, this.element);
+    this.element = newEl;
+    // 리스너 재바인딩
+    this.bindEvents();
+  };
+  /* 정리 메서드 용도 */
+  Tooltip.prototype.destroy = function () {
+    var _a;
+    this.disableMouseEvents();
+    window.removeEventListener('resize', this.boundResizeScroll);
+    window.removeEventListener('scroll', this.boundResizeScroll);
+    (_a = this.panel) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.boundPanelClick);
+    if (this.panelId) {
+      this.layerManager.removePanel(this.panelId);
+    }
+    if (this.element.parentNode) this.element.parentNode.removeChild(this.element);
+  };
+  /* ========== 팩토리 메서드 ========== */
+  Tooltip.create = function (options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(options);
+  };
+  Tooltip.createShort = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'short',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createLong = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'long',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createAuto = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      position: 'auto',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createAutoLong = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'long',
+      position: 'auto',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createAutoLongWithShadowDOM = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'long',
+      position: 'auto',
+      title: title,
+      content: content,
+      useShadowDOM: true
+    }, options));
+  };
+  return Tooltip;
+}();
+export { Tooltip };