@ncds/ui-admin 1.6.4 → 1.8.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,170 @@
+import { BaseBox } from './baseBox';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+export class SelectBox extends BaseBox {
+    get defaultPlaceholder() {
+        return '선택하세요';
+    }
+    constructor(element, config = {}) {
+        super(element);
+        // HTML에서 옵션 파싱 (config.options가 없을 경우)
+        const htmlOptions = this.parseOptionsFromHTML();
+        // JavaScript 옵션을 DropdownOption 형식으로 변환
+        const normalizedOptions = config.options ? this.normalizeOptions(config.options) : htmlOptions;
+        const finalOptions = normalizedOptions;
+        // HTML에서 속성 파싱
+        const htmlAttributes = this.parseAttributesFromHTML();
+        // 기존 API를 새 API로 변환
+        const unifiedConfig = {
+            ...config,
+            type: 'selectbox',
+            multiple: config.multiple ?? false,
+            showFooterButtons: config.showFooterButtons ?? false,
+            onEdit: config.onEdit,
+            onSelectAll: config.onSelectAll,
+            onComplete: config.onComplete,
+            options: finalOptions,
+            placeholder: config.placeholder || htmlAttributes.placeholder || this.defaultPlaceholder,
+            value: config.value ?? htmlAttributes.value ?? (config.multiple ? [] : ''),
+            disabled: config.disabled ?? htmlAttributes.disabled ?? false,
+            size: config.size || htmlAttributes.size || 'md',
+            onChange: (value) => {
+                // 초기화 중에는 동기화하지 않음 (무한 루프 방지)
+                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를 전달
+                const realValue = config.multiple
+                    ? value.map((v) => this.getRealValueFromId(v))
+                    : this.getRealValueFromId(value);
+                config.onChange?.(realValue);
+            },
+        };
+        this.unifiedSelectBox = new UnifiedBoxManager(element, unifiedConfig);
+        this.completeInitialization();
+    }
+    /**
+     * JavaScript 옵션을 DropdownOption 형식으로 변환
+     */
+    normalizeOptions(options) {
+        return options.map((option) => {
+            // 이미 DropdownOption 형식인 경우
+            if ('label' in option) {
+                return option;
+            }
+            // SelectBoxOptionType 형식인 경우 (text -> label 변환)
+            const selectBoxOption = option;
+            return {
+                id: selectBoxOption.id,
+                label: selectBoxOption.text,
+                disabled: selectBoxOption.disabled,
+            };
+        });
+    }
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    parseOptionsFromHTML() {
+        if (!this.targetSelect)
+            return [];
+        const options = [];
+        const optionElements = this.targetSelect.querySelectorAll('option');
+        // 빈 값 옵션 개수 확인 (최적화를 위해)
+        const emptyValueCount = Array.from(optionElements).filter((opt) => opt.value === '').length;
+        optionElements.forEach((optionElement, index) => {
+            const optionValue = optionElement.value;
+            // 빈 값 옵션이 1개뿐이면 단순 처리, 여러 개면 고유 ID 생성
+            let optionId;
+            if (optionValue !== '') {
+                optionId = optionValue;
+            }
+            else if (emptyValueCount === 1) {
+                // 빈 값 옵션이 하나뿐이면 그냥 빈 문자열 사용 (단순화)
+                optionId = '';
+            }
+            else {
+                // 빈 값 옵션이 여러 개면 고유 ID 생성 (구분 필요)
+                optionId = `__empty_option_${index}`;
+            }
+            options.push({
+                id: optionId,
+                label: optionElement.textContent || optionElement.value || this.defaultPlaceholder,
+                disabled: optionElement.disabled,
+                // 원본 value 저장 (동기화를 위해)
+                originalValue: optionValue,
+            });
+        });
+        return options;
+    }
+    /**
+     * 값 변환 - originalValue 매핑
+     */
+    resolveValue(value) {
+        return this.getRealValueFromId(value);
+    }
+    /**
+     * ID로부터 실제 HTML select의 value 값을 가져오기
+     */
+    getRealValueFromId(id) {
+        const options = this.unifiedSelectBox.getOptions();
+        const option = options.find((opt) => opt.id === id);
+        // originalValue가 있으면 그것을 사용, 없으면 id를 문자열로 변환
+        return option?.originalValue !== undefined ? option.originalValue : String(id);
+    }
+    /**
+     * 실제 HTML select의 value 값으로부터 내부 ID를 가져오기
+     */
+    getIdFromRealValue(value) {
+        const options = this.unifiedSelectBox.getOptions();
+        const option = options.find((opt) => opt.originalValue === String(value));
+        // originalValue가 일치하는 옵션을 찾으면 그 ID를 반환, 없으면 value 그대로 반환
+        return option ? option.id : value;
+    }
+    // SelectBox 고유 API
+    getValues() {
+        const internalValue = this.unifiedSelectBox.getValues();
+        return internalValue.map((option) => ({
+            ...option,
+            id: this.getRealValueFromId(option.id),
+        }));
+    }
+    setValues(value) {
+        const internalValue = value.map((v) => this.getIdFromRealValue(v.id));
+        if (JSON.stringify(this.lastValue) === JSON.stringify(internalValue)) {
+            return;
+        }
+        this.lastValue = internalValue;
+        // id 배열을 옵션 객체 배열로 변환
+        const allOptions = this.unifiedSelectBox.getOptions();
+        const optionArray = internalValue
+            .map((id) => allOptions.find((opt) => opt.id === id))
+            .filter((opt) => opt !== undefined);
+        this.unifiedSelectBox.setValues(optionArray);
+        // setValues 호출 시에도 타겟 select와 동기화
+        if (this.targetSelect) {
+            if (this.unifiedSelectBox.isMultiple()) {
+                this.syncWithTargetSelectMultiple(internalValue);
+            }
+            else {
+                // 단일 선택 모드인 경우 첫 번째 값만 사용
+                this.syncWithTargetSelect(internalValue[0] || '');
+            }
+        }
+    }
+    getSelectedCount() {
+        const values = this.getValues();
+        return values.length;
+    }
+}

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,33 @@
+// 공통 X버튼 로직 (React ButtonCloseX 컴포넌트와 동일한 구조)
+// React ButtonCloseX와 동일한 SVG 사이즈 매핑
+export const SVG_SIZE = {
+    xs: 16,
+    sm: 20,
+    md: 20,
+    lg: 24,
+};
+// X버튼 SVG 아이콘
+export const X_CLOSE_SVG = (size) => `<svg width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+  </svg>`;
+// X버튼 렌더링 유틸리티 (React ButtonCloseX와 동일한 인터페이스)
+export function ButtonCloseX(size, theme = 'light', additionalClasses = '', ariaLabel = '닫기', onClick) {
+    const svgSize = SVG_SIZE[size];
+    const buttonId = `close-btn-${Math.random().toString(36).substr(2, 9)}`;
+    const buttonHTML = `
+    <button type="button" id="${buttonId}" class="ncua-button-close-x ncua-button-close-x--${size} ncua-button-close-x--${theme} ${additionalClasses}" aria-label="${ariaLabel}">
+      ${X_CLOSE_SVG(svgSize.toString())}
+    </button>
+  `;
+    // onClick이 제공된 경우 이벤트 바인딩
+    if (onClick) {
+        // DOM에 추가된 후 이벤트 바인딩을 위해 setTimeout 사용
+        setTimeout(() => {
+            const 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,323 @@
+export class Slider {
+    constructor(element, options) {
+        this.activeHandle = null;
+        this.isDragging = false;
+        this.handleElements = [];
+        this.progressElement = null;
+        this.trackElement = null;
+        this.handleMouseDown = (e) => {
+            const targetElement = e.target;
+            e.preventDefault();
+            this.handleInteractionStart(e.clientX, targetElement);
+            if (this.isDragging) {
+                // 텍스트 선택 방지
+                document.body.style.userSelect = 'none';
+            }
+        };
+        this.handleTouchStart = (e) => {
+            if (e.touches.length > 0) {
+                const targetElement = e.target;
+                e.preventDefault();
+                this.handleInteractionStart(e.touches[0].clientX, targetElement);
+            }
+        };
+        this.handleMouseMove = (e) => {
+            if (this.isDragging) {
+                this.updateValueFromClientX(e.clientX);
+            }
+        };
+        this.handleTouchMove = (e) => {
+            if (this.isDragging && e.touches.length > 0) {
+                e.preventDefault();
+                this.updateValueFromClientX(e.touches[0].clientX);
+            }
+        };
+        this.handleMouseUp = () => {
+            this.isDragging = false;
+            document.body.style.userSelect = '';
+        };
+        this.handleTouchEnd = () => {
+            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();
+    }
+    init() {
+        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)
+            const [leftValue, rightValue] = this.value;
+            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();
+    }
+    createHandle(index, value) {
+        const 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', () => {
+            this.activeHandle = index;
+            this.updateHandleClasses();
+        });
+        handle.addEventListener('blur', () => {
+            this.activeHandle = null;
+            this.updateHandleClasses();
+        });
+        if (this.options.labelPosition === 'bottom') {
+            const label = document.createElement('div');
+            label.className = `ncua-slider__label`;
+            label.textContent = `${value}%`;
+            handle.appendChild(label);
+        }
+        if (this.options.labelPosition === 'top-floating') {
+            const label = document.createElement('div');
+            label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+            label.textContent = `${value}%`;
+            handle.appendChild(label);
+        }
+        this.element.appendChild(handle);
+        this.handleElements[index] = handle;
+    }
+    updateHandlePositions() {
+        if (Array.isArray(this.value)) {
+            // Range slider
+            const [leftValue, rightValue] = this.value;
+            const leftPosition = this.getPositionFromValue(leftValue);
+            const rightPosition = this.getPositionFromValue(rightValue);
+            this.handleElements[0].style.left = `${leftPosition}%`;
+            this.handleElements[1].style.left = `${rightPosition}%`;
+            if (this.options.labelPosition) {
+                const leftLabel = this.handleElements[0].querySelector('.ncua-slider__label');
+                const rightLabel = this.handleElements[1].querySelector('.ncua-slider__label');
+                if (leftLabel)
+                    leftLabel.textContent = `${leftValue}%`;
+                if (rightLabel)
+                    rightLabel.textContent = `${rightValue}%`;
+            }
+            if (this.progressElement) {
+                this.progressElement.style.left = `${leftPosition}%`;
+                this.progressElement.style.width = `${rightPosition - leftPosition}%`;
+            }
+        }
+        else {
+            // Single slider
+            const position = this.getPositionFromValue(this.value);
+            this.handleElements[0].style.left = `${position}%`;
+            if (this.options.labelPosition) {
+                const label = this.handleElements[0].querySelector('.ncua-slider__label');
+                if (label)
+                    label.textContent = `${this.value}%`;
+            }
+            if (this.progressElement) {
+                this.progressElement.style.left = '0';
+                this.progressElement.style.width = `${position}%`;
+            }
+        }
+        // ARIA 속성 업데이트
+        this.updateAriaAttributes();
+    }
+    updateHandleClasses() {
+        this.handleElements.forEach((handle, index) => {
+            if (index === this.activeHandle) {
+                handle.classList.add('is-active');
+            }
+            else {
+                handle.classList.remove('is-active');
+            }
+        });
+    }
+    updateAriaAttributes() {
+        if (Array.isArray(this.value)) {
+            // Range slider
+            const [leftValue, rightValue] = this.value;
+            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));
+        }
+    }
+    getPositionFromValue(value) {
+        return ((value - this.options.min) / (this.options.max - this.options.min)) * 100;
+    }
+    getValueFromPosition(position) {
+        const percentage = Math.min(Math.max(position, 0), 100);
+        const exactValue = this.options.min + (percentage / 100) * (this.options.max - this.options.min);
+        const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
+        return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
+    }
+    handleInteractionStart(clientX, target) {
+        // 슬라이더 영역 내부를 클릭/터치한 경우
+        if (target.closest('.ncua-slider')) {
+            // 핸들을 직접 클릭/터치했는지 확인
+            const 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 {
+                // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
+                const rect = this.element.getBoundingClientRect();
+                const position = ((clientX - rect.left) / rect.width) * 100;
+                if (Array.isArray(this.value)) {
+                    const [leftValue, rightValue] = this.value;
+                    const leftPosition = this.getPositionFromValue(leftValue);
+                    const 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);
+        }
+    }
+    updateValueFromClientX(clientX) {
+        if (!this.element || this.activeHandle === null)
+            return;
+        const rect = this.element.getBoundingClientRect();
+        const position = ((clientX - rect.left) / rect.width) * 100;
+        const newValue = this.getValueFromPosition(position);
+        const prevValue = this.value;
+        if (Array.isArray(this.value)) {
+            // Range slider
+            const [leftValue, rightValue] = this.value;
+            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();
+    }
+    notifyChange(prevValue) {
+        const isSingle = !Array.isArray(prevValue);
+        const checkChangedSingle = () => prevValue !== this.value;
+        const checkChangedRange = () => Array.isArray(prevValue) &&
+            Array.isArray(this.value) &&
+            (prevValue[0] !== this.value[0] || prevValue[1] !== this.value[1]);
+        const isChanged = isSingle ? checkChangedSingle() : checkChangedRange();
+        if (this.options.onChange && isChanged) {
+            this.options.onChange(this.value);
+        }
+    }
+    setValue(value) {
+        this.value = value;
+        this.updateHandlePositions();
+    }
+    getValue() {
+        return this.value;
+    }
+    disable() {
+        this.options.disabled = true;
+        this.element.style.opacity = '0.5';
+        this.handleElements.forEach((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);
+    }
+    enable() {
+        this.options.disabled = false;
+        this.element.style.opacity = '1';
+        this.handleElements.forEach((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);
+    }
+    destroy() {
+        // 모든 이벤트 리스너 제거
+        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;
+    }
+}

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;
+}

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

@@ -0,0 +1,33 @@
+import { Swiper } from 'swiper';
+export class Tab {
+    constructor(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();
+    }
+    init() {
+        this.swiper = new Swiper(this.element, {
+            slidesPerView: 'auto',
+            spaceBetween: 8,
+            grabCursor: true,
+            loop: false,
+            freeMode: {
+                enabled: true,
+                sticky: false,
+            },
+            mousewheel: true,
+        });
+    }
+    destroy() {
+        if (this.swiper) {
+            this.swiper.destroy();
+            this.swiper = null;
+        }
+    }
+}