@ncds/ui-admin 1.6.4 → 1.7.0

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

@@ -0,0 +1,360 @@
+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 };

package/dist/temp/assets/scripts/tooltip/TooltipLayerManager.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 툴팁 레이어 관리자
+ * 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
+ */
+export declare class TooltipLayerManager {
+    private static instance;
+    private layer;
+    private panels;
+    private nextId;
+    private maxZIndex;
+    private constructor();
+    static getInstance(): TooltipLayerManager;
+    private createGlobalLayer;
+    createPanel(zIndex?: number): {
+        id: string;
+        panel: HTMLElement;
+    };
+    removePanel(id: string): void;
+    getPanel(id: string): HTMLElement | null;
+    destroy(): void;
+}

package/dist/temp/assets/scripts/tooltip/TooltipLayerManager.js

@@ -0,0 +1,74 @@
+import { CLASS_NAMES, Z_INDEX } from './const';
+/**
+ * 툴팁 레이어 관리자
+ * 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
+ */
+var TooltipLayerManager = /** @class */ (function () {
+    function TooltipLayerManager() {
+        this.layer = null;
+        this.panels = new Map();
+        this.nextId = 0;
+        this.maxZIndex = Z_INDEX.TOOLTIP_LAYER; // 기본 z-index (가장 높은 값 추적)
+        this.createGlobalLayer();
+    }
+    TooltipLayerManager.getInstance = function () {
+        if (!this.instance) {
+            this.instance = new TooltipLayerManager();
+        }
+        return this.instance;
+    };
+    TooltipLayerManager.prototype.createGlobalLayer = function () {
+        // 기존 레이어가 있으면 제거
+        var existingLayer = document.getElementById('tooltip-global-layer');
+        if (existingLayer) {
+            existingLayer.remove();
+        }
+        this.layer = document.createElement('div');
+        this.layer.id = 'tooltip-global-layer';
+        this.layer.className = CLASS_NAMES.TOOLTIP_GLOBAL_LAYER;
+        this.layer.style.zIndex = String(this.maxZIndex);
+        document.body.appendChild(this.layer);
+    };
+    TooltipLayerManager.prototype.createPanel = function (zIndex) {
+        if (zIndex === void 0) { zIndex = Z_INDEX.TOOLTIP_LAYER; }
+        if (!this.layer) {
+            this.createGlobalLayer();
+        }
+        // 최대 z-index 추적 및 전역 레이어 업데이트
+        // 왜 이런 구현이 필요한지..? 툴팁 레이어 매니저는 바디에 무분별하게 붙는걸 방지하기 위해 하나의 전역 레이아웃입니다. 툴팁 20개씩 붙는 페이지를 위함
+        // 전역 레이어의 z-index는 자식과 일치되면 가장 좋지만, 수시로 변하는 z-index를 추적하는 것이 디버깅측면에서 좋지않고 버그를 유발할 가능성이 높아보여
+        // 툴팁은 보통은 고정된값을 사용하기에, 변동이 없다고 가정하고, 변동되는 경우에만 가장 높은 z-index를 추적하고 업데이트하는 구현을 하였습니다.
+        if (zIndex > this.maxZIndex) {
+            this.maxZIndex = zIndex;
+            if (this.layer) {
+                this.layer.style.zIndex = String(this.maxZIndex);
+            }
+        }
+        var id = "tooltip-panel-".concat(++this.nextId);
+        var panel = document.createElement('span');
+        panel.id = id;
+        panel.className = CLASS_NAMES.TOOLTIP_PANEL;
+        this.panels.set(id, panel);
+        this.layer.appendChild(panel);
+        return { id: id, panel: panel };
+    };
+    TooltipLayerManager.prototype.removePanel = function (id) {
+        var panel = this.panels.get(id);
+        if (panel && panel.parentNode) {
+            panel.parentNode.removeChild(panel);
+            this.panels.delete(id);
+        }
+    };
+    TooltipLayerManager.prototype.getPanel = function (id) {
+        return this.panels.get(id) || null;
+    };
+    TooltipLayerManager.prototype.destroy = function () {
+        this.panels.clear();
+        if (this.layer && this.layer.parentNode) {
+            this.layer.parentNode.removeChild(this.layer);
+        }
+        this.layer = null;
+    };
+    return TooltipLayerManager;
+}());
+export { TooltipLayerManager };

package/dist/temp/assets/scripts/tooltip/const/classNames.d.ts

@@ -0,0 +1,17 @@
+export declare const CLASS_NAMES: {
+    TOOLTIP: string;
+    TOOLTIP_ICON: string;
+    TOOLTIP_BG: string;
+    TOOLTIP_TITLE: string;
+    TOOLTIP_CONTENT: string;
+    TOOLTIP_CLOSE_BUTTON: string;
+    TOOLTIP_HIDDEN_ARROW: string;
+    TOOLTIP_STROKE: string;
+    TOOLTIP_AUTO: string;
+    TOOLTIP_BG_VISIBLE: string;
+    TOOLTIP_BG_MEASURING: string;
+    TOOLTIP_BG_FORCE_HIDDEN: string;
+    TOOLTIP_GLOBAL_LAYER: string;
+    TOOLTIP_PANEL: string;
+    BUTTON_CLOSE_X: string;
+};

package/dist/temp/assets/scripts/tooltip/const/classNames.js

@@ -0,0 +1,23 @@
+// Tooltip CSS 클래스명 상수들
+export var CLASS_NAMES = {
+    // 기본 클래스
+    TOOLTIP: 'ncua-tooltip',
+    TOOLTIP_ICON: 'ncua-tooltip__icon',
+    TOOLTIP_BG: 'ncua-tooltip__bg',
+    TOOLTIP_TITLE: 'ncua-tooltip__title',
+    TOOLTIP_CONTENT: 'ncua-tooltip__content',
+    TOOLTIP_CLOSE_BUTTON: 'ncua-tooltip__close-button',
+    // 수정자 클래스 (modifier classes)
+    TOOLTIP_HIDDEN_ARROW: 'ncua-tooltip--hidden-arrow',
+    TOOLTIP_STROKE: 'ncua-tooltip--stroke',
+    TOOLTIP_AUTO: 'ncua-tooltip--auto',
+    // 배경 상태 클래스
+    TOOLTIP_BG_VISIBLE: 'ncua-tooltip__bg--visible',
+    TOOLTIP_BG_MEASURING: 'ncua-tooltip__bg--measuring',
+    TOOLTIP_BG_FORCE_HIDDEN: 'ncua-tooltip__bg--force-hidden',
+    // 레이어 관련 클래스
+    TOOLTIP_GLOBAL_LAYER: 'ncua-tooltip-global-layer',
+    TOOLTIP_PANEL: 'ncua-tooltip-panel',
+    // 버튼 클래스
+    BUTTON_CLOSE_X: 'ncua-button-close-x',
+};

package/dist/temp/assets/scripts/tooltip/const/constants.d.ts

@@ -0,0 +1,33 @@
+import { TooltipOptions } from './types';
+export declare const MARGIN = 10;
+export declare const DEFAULT_TOOLTIP_WIDTH = 200;
+export declare const DEFAULT_TOOLTIP_HEIGHT = 60;
+export declare const POSITION_PRIORITY: readonly ["bottom", "top", "right", "left"];
+export declare const TOOLTIP_OFFSET = 8;
+export declare const VIEWPORT_MARGIN = 8;
+export declare const ICON_SIZES: {
+    readonly sm: 14;
+    readonly md: 16;
+};
+export declare const TRANSITION_DURATION = "0.18s";
+export declare const OFFSCREEN_POSITION = "-99999px";
+export declare const OPACITY: {
+    readonly HIDDEN: "0";
+    readonly VISIBLE: "1";
+};
+export declare const POSITION: {
+    readonly INITIAL: "0px";
+    readonly OFFSCREEN: "-99999px";
+};
+export declare const Z_INDEX: {
+    readonly TOOLTIP_LAYER: 2000;
+};
+export declare const EVENT_OPTIONS: {
+    readonly PASSIVE: {
+        readonly passive: true;
+    };
+    readonly ONCE: {
+        readonly once: true;
+    };
+};
+export declare const TOOLTIP_DEFAULT_VALUE: TooltipOptions;

package/dist/temp/assets/scripts/tooltip/const/constants.js

@@ -0,0 +1,46 @@
+export var MARGIN = 10;
+export var DEFAULT_TOOLTIP_WIDTH = 200;
+export var DEFAULT_TOOLTIP_HEIGHT = 60;
+export var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 툴팁 위치 계산 관련 상수
+export var TOOLTIP_OFFSET = 8; // 툴팁과 앵커 사이의 거리
+export var VIEWPORT_MARGIN = 8; // 뷰포트 경계와의 최소 거리
+// 아이콘 크기 상수
+export var ICON_SIZES = {
+    sm: 14,
+    md: 16,
+};
+// 애니메이션 관련 상수
+export var TRANSITION_DURATION = '0.18s';
+export var OFFSCREEN_POSITION = '-99999px';
+// 툴팁 상태 관련 상수
+export var OPACITY = {
+    HIDDEN: '0',
+    VISIBLE: '1',
+};
+export var POSITION = {
+    INITIAL: '0px',
+    OFFSCREEN: OFFSCREEN_POSITION,
+};
+// z-index 관련 상수
+export var Z_INDEX = {
+    TOOLTIP_LAYER: 2000, // 툴팁 전역 레이어 기본 z-index
+};
+// 이벤트 관련 상수
+export var EVENT_OPTIONS = {
+    PASSIVE: { passive: true },
+    ONCE: { once: true },
+};
+export var TOOLTIP_DEFAULT_VALUE = {
+    tooltipType: 'white',
+    iconType: 'stroke',
+    position: 'auto',
+    size: 'sm',
+    hideArrow: false,
+    title: '',
+    content: '',
+    type: 'short',
+    zIndex: Z_INDEX.TOOLTIP_LAYER,
+    useShadowDOM: false,
+    className: '', // 커스텀 클래스명
+};

package/dist/temp/assets/scripts/tooltip/const/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const SVG_ICONS: {
+    readonly 'help-circle-stroke': (size: number) => string;
+    readonly 'help-circle-fill': (size: number) => string;
+};

package/dist/temp/assets/scripts/tooltip/const/icons.js

@@ -0,0 +1,9 @@
+// SVG 아이콘들
+export var SVG_ICONS = {
+    'help-circle-stroke': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\">\n      <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path>\n    </svg>");
+    },
+    'help-circle-fill': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m-1.093 7.271a2 2 0 0 1 3.013 1.727V10c0 .47-.365.958-1.055 1.418a6 6 0 0 1-1.262.634 1 1 0 0 0 .633 1.897l.169-.061a8.05 8.05 0 0 0 1.57-.806c.81-.54 1.944-1.55 1.945-3.081a4 4 0 0 0-7.773-1.333 1 1 0 0 0 1.886.664 2 2 0 0 1 .874-1.06M12 16a1 1 0 1 0 0 2h.01a1 1 0 0 0 0-2z\" clip-rule=\"evenodd\"></path>\n    </svg>");
+    },
+};

package/dist/temp/assets/scripts/tooltip/const/index.d.ts

@@ -0,0 +1,5 @@
+export type { TooltipOptions, CalculatedPosition } from './types';
+export { SVG_ICONS } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY, TOOLTIP_DEFAULT_VALUE, TOOLTIP_OFFSET, VIEWPORT_MARGIN, ICON_SIZES, TRANSITION_DURATION, OFFSCREEN_POSITION, OPACITY, POSITION, Z_INDEX, EVENT_OPTIONS, } from './constants';
+export { CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG } from './templates';

package/dist/temp/assets/scripts/tooltip/const/index.js

@@ -0,0 +1,4 @@
+export { SVG_ICONS } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY, TOOLTIP_DEFAULT_VALUE, TOOLTIP_OFFSET, VIEWPORT_MARGIN, ICON_SIZES, TRANSITION_DURATION, OFFSCREEN_POSITION, OPACITY, POSITION, Z_INDEX, EVENT_OPTIONS, } from './constants';
+export { CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG } from './templates';

package/dist/temp/assets/scripts/tooltip/const/templates.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 툴팁 관련 CSS 및 HTML 템플릿
+ */
+export declare const CSS_TEMPLATES: {
+    readonly LAYER_CONTAINER: (zIndex: number) => string;
+    readonly TOOLTIP_PANEL: (zIndex: number) => string;
+    readonly ANCHOR_WRAPPER: "\n    display: inline-flex;\n    vertical-align: middle;\n    margin: 0 4px;\n  ";
+    readonly SHADOW_DOM_HOST: "\n    :host { \n      all: unset; \n      display: block; \n      font-family: system-ui; \n      color: black; \n    }\n  ";
+};
+export declare const HTML_TEMPLATES: {
+    readonly ICON_WRAPPER: (className: string, iconSvg: string) => string;
+    readonly TOOLTIP_TITLE: (className: string, title: string) => string;
+    readonly TOOLTIP_CONTENT: (className: string, content: string) => string;
+    readonly TOOLTIP_CONTENT_SHADOW: (className: string) => string;
+};
+export declare const FALLBACK_ICON_SVG: (size: number) => string;

package/dist/temp/assets/scripts/tooltip/const/templates.js

@@ -0,0 +1,30 @@
+import { OFFSCREEN_POSITION, TRANSITION_DURATION } from './constants';
+/**
+ * 툴팁 관련 CSS 및 HTML 템플릿
+ */
+// CSS 템플릿
+export var CSS_TEMPLATES = {
+    // 레이어 컨테이너 스타일 (클릭 통과)
+    LAYER_CONTAINER: function (zIndex) { return "\n    position: fixed;\n    inset: 0;\n    pointer-events: none;\n    z-index: ".concat(zIndex, ";\n    display: block;\n  "); },
+    // 툴팁 패널 스타일 (클릭 허용)
+    TOOLTIP_PANEL: function (zIndex) { return "\n    position: fixed;\n    left: ".concat(OFFSCREEN_POSITION, "; \n    top: ").concat(OFFSCREEN_POSITION, ";\n    opacity: 0;\n    transition: opacity ").concat(TRANSITION_DURATION, " ease;\n    pointer-events: auto;\n    z-index: ").concat(zIndex, ";\n    right: auto;\n    bottom: auto;\n    transform: none;\n  "); },
+    // 앵커 래퍼 스타일
+    ANCHOR_WRAPPER: "\n    display: inline-flex;\n    vertical-align: middle;\n    margin: 0 4px;\n  ",
+    // Shadow DOM 기본 스타일
+    SHADOW_DOM_HOST: "\n    :host { \n      all: unset; \n      display: block; \n      font-family: system-ui; \n      color: black; \n    }\n  ",
+};
+// HTML 템플릿
+export var HTML_TEMPLATES = {
+    // 아이콘 래퍼
+    ICON_WRAPPER: function (className, iconSvg) { return "<span class=\"".concat(className, "\">").concat(iconSvg, "</span>"); },
+    // 툴팁 제목
+    TOOLTIP_TITLE: function (className, title) { return "<span class=\"".concat(className, "\">").concat(title, "</span>"); },
+    // 툴팁 콘텐츠 (일반)
+    TOOLTIP_CONTENT: function (className, content) { return "<span class=\"".concat(className, "\">").concat(content, "</span>"); },
+    // 툴팁 콘텐츠 (Shadow DOM)
+    TOOLTIP_CONTENT_SHADOW: function (className) { return "<span class=\"".concat(className, "\" data-shadow-content></span>"); },
+};
+// 폴백 아이콘 SVG
+export var FALLBACK_ICON_SVG = function (size) {
+    return "<svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" fill=\"none\"/>\n    <text x=\"8\" y=\"11\" font-size=\"8\" text-anchor=\"middle\" fill=\"currentColor\">?</text>\n  </svg>");
+};