@ncds/ui-admin 1.6.3 → 1.6.4-alpha.0

package/dist/cjs/assets/scripts/selectBox.js

@@ -1,319 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SelectBox = void 0;
-var _UnifiedBoxManager = require("./utils/unifiedBox/UnifiedBoxManager");
-var __assign = void 0 && (void 0).__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);
-};
-var SelectBox = exports.SelectBox = /** @class */function () {
-  function SelectBox(element, config) {
-    if (config === void 0) {
-      config = {};
-    }
-    var _this = this;
-    var _a, _b, _c, _d, _e, _f;
-    this.targetSelect = null;
-    this.isInitializing = true;
-    this.lastValue = '';
-    this.element = element;
-    // 타겟 select 요소 찾기
-    this.targetSelect = this.findTargetSelect(element);
-    // HTML에서 옵션 파싱 (config.options가 없을 경우)
-    var htmlOptions = this.parseOptionsFromHTML();
-    // JavaScript 옵션을 DropdownOption 형식으로 변환
-    var normalizedOptions = config.options ? this.normalizeOptions(config.options) : htmlOptions;
-    var finalOptions = normalizedOptions;
-    // HTML에서 속성 파싱
-    var htmlAttributes = this.parseAttributesFromHTML();
-    // 기존 API를 새 API로 변환
-    var unifiedConfig = __assign(__assign({}, config), {
-      type: 'selectbox',
-      multiple: (_a = config.multiple) !== null && _a !== void 0 ? _a : false,
-      showFooterButtons: (_b = config.showFooterButtons) !== null && _b !== void 0 ? _b : false,
-      onEdit: config.onEdit,
-      onSelectAll: config.onSelectAll,
-      onComplete: config.onComplete,
-      options: finalOptions,
-      placeholder: config.placeholder || htmlAttributes.placeholder || '선택하세요',
-      value: (_d = (_c = config.value) !== null && _c !== void 0 ? _c : htmlAttributes.value) !== null && _d !== void 0 ? _d : config.multiple ? [] : '',
-      disabled: (_f = (_e = config.disabled) !== null && _e !== void 0 ? _e : htmlAttributes.disabled) !== null && _f !== void 0 ? _f : false,
-      size: config.size || htmlAttributes.size || 'md',
-      onChange: function (value) {
-        var _a;
-        // 초기화 중에는 동기화하지 않음 (무한 루프 방지)
-        if (_this.isInitializing) {
-          _this.lastValue = value; // 초기값 저장
-          return;
-        }
-        // 값이 실제로 변경되지 않았으면 동기화 생략 (무한 루프 방지)
-        if (JSON.stringify(_this.lastValue) === JSON.stringify(value)) {
-          return;
-        }
-        _this.lastValue = value; // 새 값 저장
-        // 타겟 select와 동기화
-        if (config.multiple) {
-          _this.syncWithTargetSelectMultiple(value);
-        } else {
-          _this.syncWithTargetSelect(value);
-        }
-        // onChange 콜백에는 실제 value를 전달
-        var realValue = config.multiple ? value.map(function (v) {
-          return _this.getRealValueFromId(v);
-        }) : _this.getRealValueFromId(value);
-        (_a = config.onChange) === null || _a === void 0 ? void 0 : _a.call(config, realValue);
-      }
-    });
-    this.unifiedSelectBox = new _UnifiedBoxManager.UnifiedBoxManager(element, unifiedConfig);
-    // 초기화 완료 (다음 이벤트 루프에서 실행)
-    setTimeout(function () {
-      _this.isInitializing = false;
-    }, 0);
-  }
-  /**
-   * JavaScript 옵션을 DropdownOption 형식으로 변환
-   */
-  SelectBox.prototype.normalizeOptions = function (options) {
-    return options.map(function (option) {
-      // 이미 DropdownOption 형식인 경우
-      if ('label' in option) {
-        return option;
-      }
-      // SelectBoxOptionType 형식인 경우 (text -> label 변환)
-      var selectBoxOption = option;
-      return {
-        id: selectBoxOption.id,
-        label: selectBoxOption.text,
-        disabled: selectBoxOption.disabled
-      };
-    });
-  };
-  /**
-   * 타겟 select 요소 찾기
-   */
-  SelectBox.prototype.findTargetSelect = function (element) {
-    // 1. 직접 select 태그인 경우
-    if (element.tagName === 'SELECT') {
-      return element;
-    }
-    // 2. 자식으로 select 태그가 있는 경우
-    var selectChild = element.querySelector('select');
-    if (selectChild) {
-      return selectChild;
-    }
-    // 3. data-target 속성으로 지정된 경우
-    var targetId = element.getAttribute('data-target');
-    if (targetId) {
-      var targetElement = document.getElementById(targetId);
-      if (targetElement && targetElement.tagName === 'SELECT') {
-        return targetElement;
-      }
-    }
-    return null;
-  };
-  /**
-   * HTML select에서 옵션 파싱
-   */
-  SelectBox.prototype.parseOptionsFromHTML = function () {
-    if (!this.targetSelect) return [];
-    var options = [];
-    var optionElements = this.targetSelect.querySelectorAll('option');
-    // 빈 값 옵션 개수 확인 (최적화를 위해)
-    var emptyValueCount = Array.from(optionElements).filter(function (opt) {
-      return opt.value === '';
-    }).length;
-    optionElements.forEach(function (optionElement, index) {
-      var optionValue = optionElement.value;
-      // 빈 값 옵션이 1개뿐이면 단순 처리, 여러 개면 고유 ID 생성
-      var optionId;
-      if (optionValue !== '') {
-        optionId = optionValue;
-      } else if (emptyValueCount === 1) {
-        // 빈 값 옵션이 하나뿐이면 그냥 빈 문자열 사용 (단순화)
-        optionId = '';
-      } else {
-        // 빈 값 옵션이 여러 개면 고유 ID 생성 (구분 필요)
-        optionId = "__empty_option_".concat(index);
-      }
-      options.push({
-        id: optionId,
-        label: optionElement.textContent || optionElement.value || '선택하세요',
-        disabled: optionElement.disabled,
-        // 원본 value 저장 (동기화를 위해)
-        originalValue: optionValue
-      });
-    });
-    return options;
-  };
-  /**
-   * HTML에서 속성 파싱
-   */
-  SelectBox.prototype.parseAttributesFromHTML = function () {
-    var attributes = {};
-    if (this.targetSelect) {
-      // select 요소의 속성들
-      if (this.targetSelect.disabled) attributes.disabled = true;
-      if (this.targetSelect.value) attributes.value = this.targetSelect.value;
-      // placeholder는 첫 번째 빈 option에서 가져오기
-      var firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
-      if (firstOption) {
-        attributes.placeholder = firstOption.textContent || '선택하세요';
-      }
-    }
-    // 컨테이너 요소의 data 속성들
-    var containerAttributes = this.element.dataset;
-    if (containerAttributes.placeholder) attributes.placeholder = containerAttributes.placeholder;
-    if (containerAttributes.size) attributes.size = containerAttributes.size;
-    if (containerAttributes.disabled === 'true') attributes.disabled = true;
-    return attributes;
-  };
-  /**
-   * ID로부터 실제 HTML select의 value 값을 가져오기
-   */
-  SelectBox.prototype.getRealValueFromId = function (id) {
-    var options = this.unifiedSelectBox.getOptions();
-    var option = options.find(function (opt) {
-      return opt.id === id;
-    });
-    // originalValue가 있으면 그것을 사용, 없으면 id를 문자열로 변환
-    return (option === null || option === void 0 ? void 0 : option.originalValue) !== undefined ? option.originalValue : String(id);
-  };
-  /**
-   * 실제 HTML select의 value 값으로부터 내부 ID를 가져오기
-   */
-  SelectBox.prototype.getIdFromRealValue = function (value) {
-    var options = this.unifiedSelectBox.getOptions();
-    var option = options.find(function (opt) {
-      return opt.originalValue === String(value);
-    });
-    // originalValue가 일치하는 옵션을 찾으면 그 ID를 반환, 없으면 value 그대로 반환
-    return option ? option.id : value;
-  };
-  /**
-   * 타겟 select와 동기화 (Single 모드)
-   */
-  SelectBox.prototype.syncWithTargetSelect = function (value) {
-    if (this.targetSelect) {
-      // originalValue가 있는 옵션을 찾아서 실제 value로 변환
-      var realValue = this.getRealValueFromId(value);
-      this.targetSelect.value = realValue;
-      // select 요소의 change 이벤트 발생
-      var event_1 = new Event('change', {
-        bubbles: true
-      });
-      this.targetSelect.dispatchEvent(event_1);
-    }
-  };
-  /**
-   * 타겟 select와 동기화 (Multiple 모드)
-   */
-  SelectBox.prototype.syncWithTargetSelectMultiple = function (values) {
-    var _this = this;
-    if (this.targetSelect && this.targetSelect.multiple) {
-      // 모든 옵션 선택 해제
-      Array.from(this.targetSelect.options).forEach(function (option) {
-        option.selected = false;
-      });
-      // 선택된 값들에 해당하는 옵션들 선택
-      values.forEach(function (value) {
-        var realValue = _this.getRealValueFromId(value);
-        var option = _this.targetSelect.querySelector("option[value=\"".concat(realValue, "\"]"));
-        if (option) {
-          option.selected = true;
-        }
-      });
-      // select 요소의 change 이벤트 발생
-      var event_2 = new Event('change', {
-        bubbles: true
-      });
-      this.targetSelect.dispatchEvent(event_2);
-    }
-  };
-  // 기존 API 호환성 메서드들
-  SelectBox.prototype.getValues = function () {
-    var _this = this;
-    var internalValue = this.unifiedSelectBox.getValues();
-    return internalValue.map(function (option) {
-      return __assign(__assign({}, option), {
-        id: _this.getRealValueFromId(option.id)
-      });
-    });
-  };
-  SelectBox.prototype.setValues = function (value) {
-    var _this = this;
-    var internalValue = value.map(function (v) {
-      return _this.getIdFromRealValue(v.id);
-    });
-    if (JSON.stringify(this.lastValue) === JSON.stringify(internalValue)) {
-      return;
-    }
-    this.lastValue = internalValue;
-    // id 배열을 옵션 객체 배열로 변환
-    var allOptions = this.unifiedSelectBox.getOptions();
-    var optionArray = internalValue.map(function (id) {
-      return allOptions.find(function (opt) {
-        return opt.id === id;
-      });
-    }).filter(function (opt) {
-      return opt !== undefined;
-    });
-    this.unifiedSelectBox.setValues(optionArray);
-    // setValues 호출 시에도 타겟 select와 동기화
-    if (this.targetSelect) {
-      if (this.unifiedSelectBox.isMultiple()) {
-        this.syncWithTargetSelectMultiple(internalValue);
-      } else {
-        // 단일 선택 모드인 경우 첫 번째 값만 사용
-        this.syncWithTargetSelect(internalValue[0] || '');
-      }
-    }
-  };
-  SelectBox.prototype.getOptions = function () {
-    return this.unifiedSelectBox.getOptions();
-  };
-  SelectBox.prototype.updateOptions = function (newOptions) {
-    this.unifiedSelectBox.updateOptions(newOptions);
-  };
-  SelectBox.prototype.setDisabled = function (disabled) {
-    this.unifiedSelectBox.setDisabled(disabled);
-  };
-  SelectBox.prototype.open = function () {
-    this.unifiedSelectBox.open();
-  };
-  SelectBox.prototype.close = function () {
-    this.unifiedSelectBox.close();
-  };
-  SelectBox.prototype.focus = function () {
-    this.unifiedSelectBox.focus();
-  };
-  SelectBox.prototype.destroy = function () {
-    this.unifiedSelectBox.destroy();
-  };
-  // Multiple 모드 전용 메서드들
-  SelectBox.prototype.selectAll = function () {
-    this.unifiedSelectBox.selectAll();
-  };
-  SelectBox.prototype.deselectAll = function () {
-    this.unifiedSelectBox.deselectAll();
-  };
-  SelectBox.prototype.getSelectedCount = function () {
-    var values = this.getValues();
-    return values.length;
-  };
-  SelectBox.prototype.isMultiple = function () {
-    return this.unifiedSelectBox.isMultiple();
-  };
-  SelectBox.prototype.toggleSelectAll = function () {
-    this.unifiedSelectBox.toggleSelectAll();
-  };
-  return SelectBox;
-}();

package/dist/cjs/assets/scripts/shared/ButtonCloseX.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ButtonCloseX = ButtonCloseX;
-exports.X_CLOSE_SVG = exports.SVG_SIZE = void 0;
-// 공통 X버튼 로직 (React ButtonCloseX 컴포넌트와 동일한 구조)
-// React ButtonCloseX와 동일한 SVG 사이즈 매핑
-var SVG_SIZE = exports.SVG_SIZE = {
-  xs: 16,
-  sm: 20,
-  md: 20,
-  lg: 24
-};
-// X버튼 SVG 아이콘
-var X_CLOSE_SVG = function (size) {
-  return "<svg width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>");
-};
-// X버튼 렌더링 유틸리티 (React ButtonCloseX와 동일한 인터페이스)
-exports.X_CLOSE_SVG = X_CLOSE_SVG;
-function ButtonCloseX(size, theme, additionalClasses, ariaLabel, onClick) {
-  if (theme === void 0) {
-    theme = 'light';
-  }
-  if (additionalClasses === void 0) {
-    additionalClasses = '';
-  }
-  if (ariaLabel === void 0) {
-    ariaLabel = '닫기';
-  }
-  var svgSize = SVG_SIZE[size];
-  var buttonId = "close-btn-".concat(Math.random().toString(36).substr(2, 9));
-  var buttonHTML = "\n    <button type=\"button\" id=\"".concat(buttonId, "\" class=\"ncua-button-close-x ncua-button-close-x--").concat(size, " ncua-button-close-x--").concat(theme, " ").concat(additionalClasses, "\" aria-label=\"").concat(ariaLabel, "\">\n      ").concat(X_CLOSE_SVG(svgSize.toString()), "\n    </button>\n  ");
-  // onClick이 제공된 경우 이벤트 바인딩
-  if (onClick) {
-    // DOM에 추가된 후 이벤트 바인딩을 위해 setTimeout 사용
-    setTimeout(function () {
-      var button = document.getElementById(buttonId);
-      if (button) {
-        button.addEventListener('click', onClick);
-      }
-    }, 0);
-  }
-  return buttonHTML;
-}

package/dist/cjs/assets/scripts/tab.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tab = void 0;
-var _swiper = require("swiper");
-var Tab = exports.Tab = /** @class */function () {
-  function Tab(element) {
-    this.swiper = null;
-    if (!element) {
-      throw new Error('Tab element is required');
-    }
-    if (!(element instanceof HTMLElement)) {
-      throw new Error('Invalid element type provided to Tab');
-    }
-    this.element = element;
-    this.init();
-  }
-  Tab.prototype.init = function () {
-    this.swiper = new _swiper.Swiper(this.element, {
-      slidesPerView: 'auto',
-      spaceBetween: 8,
-      grabCursor: true,
-      loop: false,
-      freeMode: {
-        enabled: true,
-        sticky: false
-      },
-      mousewheel: true
-    });
-  };
-  Tab.prototype.destroy = function () {
-    if (this.swiper) {
-      this.swiper.destroy();
-      this.swiper = null;
-    }
-  };
-  return Tab;
-}();

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

@@ -1,268 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tag = void 0;
-var _classNames = require("./const/classNames");
-var _sizes = require("./const/sizes");
-var __assign = void 0 && (void 0).__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);
-};
-// 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 || _sizes.DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || _sizes.DEFAULT_TOOLTIP_HEIGHT;
-  var spaces = {
-    top: triggerRect.top,
-    bottom: viewportHeight - triggerRect.bottom,
-    left: triggerRect.left,
-    right: viewportWidth - triggerRect.right
-  };
-  // 위/아래 공간을 먼저 확인하고 우선순위 결정
-  var hasTopSpace = spaces.top >= tooltipHeight + _sizes.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 + _sizes.MARGIN : spaces.bottom >= tooltipHeight + _sizes.MARGIN;
-    var hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + _sizes.MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
-    : spaces.left >= tooltipWidth + _sizes.MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
-    if (hasVerticalSpace && hasHorizontalSpace) {
-      return position;
-    }
-  }
-  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-  var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
-  return fallbackPosition;
-};
-var Tag = exports.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(_sizes.DEFAULT_TOOLTIP_WIDTH, "px");
-        dummyTooltipElement.style.height = "".concat(_sizes.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 = _classNames.TAG_CLASS_NAMES.text;
-    textElement.textContent = displayText;
-    this.element.appendChild(textElement);
-    // 카운트 추가
-    if (this.options.count) {
-      var countElement = document.createElement('span');
-      countElement.className = _classNames.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 = [_classNames.TAG_CLASS_NAMES.tag, (0, _classNames.getTagSizeClassName)(this.options.size)];
-    if (this.shouldTruncate()) {
-      classes.push(_classNames.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, _sizes.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 = _classNames.TAG_CLASS_NAMES.close;
-    // React 버전과 동일한 SVG 생성 (문자열 방식)
-    var grayColor = getCSSVariable('--gray-300', '#a4a5a8');
-    var svgString = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(_sizes.iconSize[this.options.size], "\" height=\"").concat(_sizes.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(_classNames.TAG_CLASS_NAMES.tooltip, " ").concat((0, _classNames.getTooltipPositionClassName)(this.calculatedPosition));
-    var tooltipContent = document.createElement('span');
-    tooltipContent.className = _classNames.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(_classNames.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(_classNames.TAG_CLASS_NAMES.truncated);
-      } else {
-        this.element.classList.remove(_classNames.TAG_CLASS_NAMES.truncated);
-      }
-    }
-  };
-  Tag.prototype.updateCountElement = function () {
-    var existingCount = this.element.querySelector(".".concat(_classNames.TAG_CLASS_NAMES.count));
-    if (this.options.count) {
-      if (existingCount) {
-        existingCount.textContent = this.options.count;
-      } else {
-        // 카운트 요소 새로 생성
-        var countElement = document.createElement('span');
-        countElement.className = _classNames.TAG_CLASS_NAMES.count;
-        countElement.textContent = this.options.count;
-        // 닫기 버튼 앞에 삽입
-        var closeButton = this.element.querySelector(".".concat(_classNames.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;
-}();