@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/temp/assets/scripts/selectBox.d.ts

@@ -0,0 +1,50 @@
+import { OptionValue } from '../../src/types';
+import { BaseBox } from './baseBox';
+import { DropdownOption } from './utils/unifiedBox/dropdownModel';
+export interface SelectBoxOptionType {
+    id: string | number;
+    text: string;
+    disabled?: boolean;
+}
+export interface SelectBoxConfig {
+    options?: DropdownOption[] | SelectBoxOptionType[];
+    placeholder?: string;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    maxHeight?: number;
+    disabled?: boolean;
+    type?: 'default' | 'simple';
+    size?: 'xs' | 'sm' | 'md';
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    onEdit?: () => void;
+    onSelectAll?: () => void;
+    onComplete?: () => void;
+}
+export declare class SelectBox extends BaseBox {
+    protected get defaultPlaceholder(): string;
+    constructor(element: HTMLElement, config?: SelectBoxConfig);
+    /**
+     * JavaScript 옵션을 DropdownOption 형식으로 변환
+     */
+    private normalizeOptions;
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    private parseOptionsFromHTML;
+    /**
+     * 값 변환 - originalValue 매핑
+     */
+    protected resolveValue(value: string | number): string;
+    /**
+     * ID로부터 실제 HTML select의 value 값을 가져오기
+     */
+    private getRealValueFromId;
+    /**
+     * 실제 HTML select의 value 값으로부터 내부 ID를 가져오기
+     */
+    private getIdFromRealValue;
+    getValues(): DropdownOption[];
+    setValues(value: DropdownOption[]): void;
+    getSelectedCount(): number;
+}

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

@@ -0,0 +1,194 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 { BaseBox } from './baseBox';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+var SelectBox = /** @class */ (function (_super) {
+    __extends(SelectBox, _super);
+    function SelectBox(element, config) {
+        if (config === void 0) { config = {}; }
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f;
+        _this = _super.call(this, element) || this;
+        // 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 || _this.defaultPlaceholder, 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(element, unifiedConfig);
+        _this.completeInitialization();
+        return _this;
+    }
+    Object.defineProperty(SelectBox.prototype, "defaultPlaceholder", {
+        get: function () {
+            return '선택하세요';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 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,
+            };
+        });
+    };
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    SelectBox.prototype.parseOptionsFromHTML = function () {
+        var _this = this;
+        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 || _this.defaultPlaceholder,
+                disabled: optionElement.disabled,
+                // 원본 value 저장 (동기화를 위해)
+                originalValue: optionValue,
+            });
+        });
+        return options;
+    };
+    /**
+     * 값 변환 - originalValue 매핑
+     */
+    SelectBox.prototype.resolveValue = function (value) {
+        return this.getRealValueFromId(value);
+    };
+    /**
+     * 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;
+    };
+    // SelectBox 고유 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.getSelectedCount = function () {
+        var values = this.getValues();
+        return values.length;
+    };
+    return SelectBox;
+}(BaseBox));
+export { SelectBox };

package/dist/temp/assets/scripts/shared/ButtonCloseX.d.ts

@@ -0,0 +1,5 @@
+export type ButtonCloseXSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonCloseXTheme = 'dark' | 'light';
+export declare const SVG_SIZE: Record<ButtonCloseXSize, number>;
+export declare const X_CLOSE_SVG: (size: string) => string;
+export declare function ButtonCloseX(size: ButtonCloseXSize, theme?: ButtonCloseXTheme, additionalClasses?: string, ariaLabel?: string, onClick?: () => void): string;

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

@@ -0,0 +1,32 @@
+// 공통 X버튼 로직 (React ButtonCloseX 컴포넌트와 동일한 구조)
+// React ButtonCloseX와 동일한 SVG 사이즈 매핑
+export var SVG_SIZE = {
+    xs: 16,
+    sm: 20,
+    md: 20,
+    lg: 24,
+};
+// X버튼 SVG 아이콘
+export 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와 동일한 인터페이스)
+export 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/temp/assets/scripts/slider.d.ts

@@ -0,0 +1,41 @@
+export interface SliderOptions {
+    min: number;
+    max: number;
+    step: number;
+    value: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    labelPosition?: 'bottom' | 'top-floating';
+    disabled?: boolean;
+}
+export declare class Slider {
+    private element;
+    private options;
+    private activeHandle;
+    private isDragging;
+    private value;
+    private handleElements;
+    private progressElement;
+    private trackElement;
+    constructor(element: HTMLElement, options: SliderOptions);
+    private init;
+    private createHandle;
+    private updateHandlePositions;
+    private updateHandleClasses;
+    private updateAriaAttributes;
+    private getPositionFromValue;
+    private getValueFromPosition;
+    private handleInteractionStart;
+    private handleMouseDown;
+    private handleTouchStart;
+    private handleMouseMove;
+    private handleTouchMove;
+    private handleMouseUp;
+    private handleTouchEnd;
+    private updateValueFromClientX;
+    private notifyChange;
+    setValue(value: number | [number, number]): void;
+    getValue(): number | [number, number];
+    disable(): void;
+    enable(): void;
+    destroy(): void;
+}

package/dist/temp/assets/scripts/slider.js

@@ -0,0 +1,331 @@
+var Slider = /** @class */ (function () {
+    function Slider(element, options) {
+        var _this = this;
+        this.activeHandle = null;
+        this.isDragging = false;
+        this.handleElements = [];
+        this.progressElement = null;
+        this.trackElement = null;
+        this.handleMouseDown = function (e) {
+            var targetElement = e.target;
+            e.preventDefault();
+            _this.handleInteractionStart(e.clientX, targetElement);
+            if (_this.isDragging) {
+                // 텍스트 선택 방지
+                document.body.style.userSelect = 'none';
+            }
+        };
+        this.handleTouchStart = function (e) {
+            if (e.touches.length > 0) {
+                var targetElement = e.target;
+                e.preventDefault();
+                _this.handleInteractionStart(e.touches[0].clientX, targetElement);
+            }
+        };
+        this.handleMouseMove = function (e) {
+            if (_this.isDragging) {
+                _this.updateValueFromClientX(e.clientX);
+            }
+        };
+        this.handleTouchMove = function (e) {
+            if (_this.isDragging && e.touches.length > 0) {
+                e.preventDefault();
+                _this.updateValueFromClientX(e.touches[0].clientX);
+            }
+        };
+        this.handleMouseUp = function () {
+            _this.isDragging = false;
+            document.body.style.userSelect = '';
+        };
+        this.handleTouchEnd = function () {
+            _this.isDragging = false;
+        };
+        this.element = element;
+        this.options = Object.assign({
+            min: 0,
+            max: 100,
+            step: 1,
+            value: 0,
+            disabled: false,
+        }, options);
+        this.value = this.options.value;
+        this.options.min = Number(this.options.min);
+        this.options.max = Number(this.options.max);
+        this.options.step = Number(this.options.step);
+        this.init();
+    }
+    Slider.prototype.init = function () {
+        if (this.options.disabled) {
+            this.element.style.opacity = '0.5';
+        }
+        // 기존 내용 제거
+        this.element.innerHTML = '';
+        // Track 생성
+        this.trackElement = document.createElement('div');
+        this.trackElement.className = 'ncua-slider__track';
+        this.element.appendChild(this.trackElement);
+        // Progress 생성
+        this.progressElement = document.createElement('div');
+        this.progressElement.className = 'ncua-slider__progress';
+        this.element.appendChild(this.progressElement);
+        // Handle(s) 생성
+        if (Array.isArray(this.value)) {
+            // Range slider (2 handles)
+            var _a = this.value, leftValue = _a[0], rightValue = _a[1];
+            this.createHandle(0, leftValue);
+            this.createHandle(1, rightValue);
+        }
+        else {
+            // Single slider (1 handle)
+            this.createHandle(0, this.value);
+        }
+        // 이벤트 리스너 추가
+        if (!this.options.disabled) {
+            this.enable();
+        }
+        // 초기 위치 설정
+        this.updateHandlePositions();
+    };
+    Slider.prototype.createHandle = function (index, value) {
+        var _this = this;
+        var handle = document.createElement('div');
+        handle.className = 'ncua-slider__handle';
+        handle.setAttribute('role', 'slider');
+        handle.setAttribute('tabindex', this.options.disabled ? '-1' : '0');
+        handle.setAttribute('aria-valuemin', Array.isArray(this.value) && index === 1 ? String(this.value[0]) : String(this.options.min));
+        handle.setAttribute('aria-valuemax', Array.isArray(this.value) && index === 0 ? String(this.value[1]) : String(this.options.max));
+        handle.setAttribute('aria-valuenow', String(value));
+        handle.setAttribute('aria-disabled', String(this.options.disabled));
+        handle.dataset.index = String(index);
+        handle.addEventListener('focus', function () {
+            _this.activeHandle = index;
+            _this.updateHandleClasses();
+        });
+        handle.addEventListener('blur', function () {
+            _this.activeHandle = null;
+            _this.updateHandleClasses();
+        });
+        if (this.options.labelPosition === 'bottom') {
+            var label = document.createElement('div');
+            label.className = "ncua-slider__label";
+            label.textContent = "".concat(value, "%");
+            handle.appendChild(label);
+        }
+        if (this.options.labelPosition === 'top-floating') {
+            var label = document.createElement('div');
+            label.className = "ncua-slider__label ncua-slider__label--tooltip";
+            label.textContent = "".concat(value, "%");
+            handle.appendChild(label);
+        }
+        this.element.appendChild(handle);
+        this.handleElements[index] = handle;
+    };
+    Slider.prototype.updateHandlePositions = function () {
+        if (Array.isArray(this.value)) {
+            // Range slider
+            var _a = this.value, leftValue = _a[0], rightValue = _a[1];
+            var leftPosition = this.getPositionFromValue(leftValue);
+            var rightPosition = this.getPositionFromValue(rightValue);
+            this.handleElements[0].style.left = "".concat(leftPosition, "%");
+            this.handleElements[1].style.left = "".concat(rightPosition, "%");
+            if (this.options.labelPosition) {
+                var leftLabel = this.handleElements[0].querySelector('.ncua-slider__label');
+                var rightLabel = this.handleElements[1].querySelector('.ncua-slider__label');
+                if (leftLabel)
+                    leftLabel.textContent = "".concat(leftValue, "%");
+                if (rightLabel)
+                    rightLabel.textContent = "".concat(rightValue, "%");
+            }
+            if (this.progressElement) {
+                this.progressElement.style.left = "".concat(leftPosition, "%");
+                this.progressElement.style.width = "".concat(rightPosition - leftPosition, "%");
+            }
+        }
+        else {
+            // Single slider
+            var position = this.getPositionFromValue(this.value);
+            this.handleElements[0].style.left = "".concat(position, "%");
+            if (this.options.labelPosition) {
+                var label = this.handleElements[0].querySelector('.ncua-slider__label');
+                if (label)
+                    label.textContent = "".concat(this.value, "%");
+            }
+            if (this.progressElement) {
+                this.progressElement.style.left = '0';
+                this.progressElement.style.width = "".concat(position, "%");
+            }
+        }
+        // ARIA 속성 업데이트
+        this.updateAriaAttributes();
+    };
+    Slider.prototype.updateHandleClasses = function () {
+        var _this = this;
+        this.handleElements.forEach(function (handle, index) {
+            if (index === _this.activeHandle) {
+                handle.classList.add('is-active');
+            }
+            else {
+                handle.classList.remove('is-active');
+            }
+        });
+    };
+    Slider.prototype.updateAriaAttributes = function () {
+        if (Array.isArray(this.value)) {
+            // Range slider
+            var _a = this.value, leftValue = _a[0], rightValue = _a[1];
+            this.handleElements[0].setAttribute('aria-valuenow', String(leftValue));
+            this.handleElements[0].setAttribute('aria-valuemax', String(rightValue));
+            this.handleElements[1].setAttribute('aria-valuenow', String(rightValue));
+            this.handleElements[1].setAttribute('aria-valuemin', String(leftValue));
+        }
+        else {
+            // Single slider
+            this.handleElements[0].setAttribute('aria-valuenow', String(this.value));
+        }
+    };
+    Slider.prototype.getPositionFromValue = function (value) {
+        return ((value - this.options.min) / (this.options.max - this.options.min)) * 100;
+    };
+    Slider.prototype.getValueFromPosition = function (position) {
+        var percentage = Math.min(Math.max(position, 0), 100);
+        var exactValue = this.options.min + (percentage / 100) * (this.options.max - this.options.min);
+        var steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
+        return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
+    };
+    Slider.prototype.handleInteractionStart = function (clientX, target) {
+        // 슬라이더 영역 내부를 클릭/터치한 경우
+        if (target.closest('.ncua-slider')) {
+            // 핸들을 직접 클릭/터치했는지 확인
+            var handleElement = target.closest('.ncua-slider__handle');
+            if (handleElement) {
+                if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.max) {
+                    this.activeHandle = 0;
+                }
+                else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
+                    this.activeHandle = 1;
+                }
+                else {
+                    this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+                }
+            }
+            else {
+                // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
+                var rect = this.element.getBoundingClientRect();
+                var position = ((clientX - rect.left) / rect.width) * 100;
+                if (Array.isArray(this.value)) {
+                    var _a = this.value, leftValue = _a[0], rightValue = _a[1];
+                    var leftPosition = this.getPositionFromValue(leftValue);
+                    var rightPosition = this.getPositionFromValue(rightValue);
+                    if (position < leftPosition) {
+                        this.activeHandle = 0;
+                    }
+                    else if (position > rightPosition) {
+                        this.activeHandle = 1;
+                    }
+                    else {
+                        this.activeHandle = Math.abs(position - leftPosition) < Math.abs(position - rightPosition) ? 0 : 1;
+                    }
+                }
+                else {
+                    this.activeHandle = 0;
+                }
+            }
+            this.updateHandleClasses();
+            this.isDragging = true;
+            // 클릭/터치 위치로 값 업데이트
+            this.updateValueFromClientX(clientX);
+        }
+    };
+    Slider.prototype.updateValueFromClientX = function (clientX) {
+        if (!this.element || this.activeHandle === null)
+            return;
+        var rect = this.element.getBoundingClientRect();
+        var position = ((clientX - rect.left) / rect.width) * 100;
+        var newValue = this.getValueFromPosition(position);
+        var prevValue = this.value;
+        if (Array.isArray(this.value)) {
+            // Range slider
+            var _a = this.value, leftValue = _a[0], rightValue = _a[1];
+            if (this.activeHandle === 0) {
+                // 왼쪽 핸들
+                this.value = [Math.min(newValue, rightValue), rightValue];
+            }
+            else if (this.activeHandle === 1) {
+                // 오른쪽 핸들
+                this.value = [leftValue, Math.max(newValue, leftValue)];
+            }
+        }
+        else {
+            // Single slider
+            this.value = newValue;
+        }
+        this.notifyChange(prevValue);
+        this.updateHandlePositions();
+    };
+    Slider.prototype.notifyChange = function (prevValue) {
+        var _this = this;
+        var isSingle = !Array.isArray(prevValue);
+        var checkChangedSingle = function () { return prevValue !== _this.value; };
+        var checkChangedRange = function () {
+            return Array.isArray(prevValue) &&
+                Array.isArray(_this.value) &&
+                (prevValue[0] !== _this.value[0] || prevValue[1] !== _this.value[1]);
+        };
+        var isChanged = isSingle ? checkChangedSingle() : checkChangedRange();
+        if (this.options.onChange && isChanged) {
+            this.options.onChange(this.value);
+        }
+    };
+    Slider.prototype.setValue = function (value) {
+        this.value = value;
+        this.updateHandlePositions();
+    };
+    Slider.prototype.getValue = function () {
+        return this.value;
+    };
+    Slider.prototype.disable = function () {
+        this.options.disabled = true;
+        this.element.style.opacity = '0.5';
+        this.handleElements.forEach(function (handle) {
+            handle.setAttribute('tabindex', '-1');
+            handle.setAttribute('aria-disabled', 'true');
+        });
+        this.element.removeEventListener('mousedown', this.handleMouseDown);
+        this.element.removeEventListener('touchstart', this.handleTouchStart);
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    };
+    Slider.prototype.enable = function () {
+        this.options.disabled = false;
+        this.element.style.opacity = '1';
+        this.handleElements.forEach(function (handle) {
+            handle.setAttribute('tabindex', '0');
+            handle.setAttribute('aria-disabled', 'false');
+        });
+        this.element.addEventListener('mousedown', this.handleMouseDown);
+        this.element.addEventListener('touchstart', this.handleTouchStart, { passive: false });
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('touchmove', this.handleTouchMove);
+        document.addEventListener('touchend', this.handleTouchEnd);
+    };
+    Slider.prototype.destroy = function () {
+        // 모든 이벤트 리스너 제거
+        this.element.removeEventListener('mousedown', this.handleMouseDown);
+        this.element.removeEventListener('touchstart', this.handleTouchStart);
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+        // 모든 내용 제거
+        this.element.innerHTML = '';
+        // 참조 정리
+        this.handleElements = [];
+        this.progressElement = null;
+        this.trackElement = null;
+    };
+    return Slider;
+}());
+export { Slider };

package/dist/temp/assets/scripts/tab.d.ts

@@ -0,0 +1,7 @@
+export declare class Tab {
+    private element;
+    private swiper;
+    constructor(element: HTMLElement | null);
+    private init;
+    destroy(): void;
+}