@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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

@@ -0,0 +1,35 @@
+import { Swiper } from 'swiper';
+var 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(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;
+}());
+export { Tab };

package/dist/temp/assets/scripts/tag/Tag.d.ts

@@ -0,0 +1,27 @@
+import { BaseTagOptions } from './const/types';
+export declare class Tag {
+    private element;
+    private options;
+    private isTooltipVisible;
+    private calculatedPosition;
+    private tooltipElement;
+    constructor(options: BaseTagOptions);
+    private createElement;
+    private getTagClasses;
+    private shouldTruncate;
+    private getTruncatedText;
+    private createSideSlot;
+    private createIconSVG;
+    private createCloseButton;
+    private createTooltip;
+    private removeTooltip;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    getElement(): HTMLSpanElement;
+    isTooltipShown(): boolean;
+    setText(text: string): void;
+    setCount(count: string | undefined): void;
+    private updateTextElement;
+    private updateCountElement;
+    destroy(): void;
+}

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

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

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

@@ -0,0 +1,11 @@
+export declare const TAG_CLASS_NAMES: {
+    tag: string;
+    text: string;
+    count: string;
+    close: string;
+    tooltip: string;
+    tooltipContent: string;
+    truncated: string;
+};
+export declare const getTagSizeClassName: (size: string) => string;
+export declare const getTooltipPositionClassName: (position: string) => string;

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

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

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

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

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

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

package/dist/temp/assets/scripts/tag/const/sizes.d.ts

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

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

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

package/dist/temp/assets/scripts/tag/const/types.d.ts

@@ -0,0 +1,33 @@
+import { CalculatedPosition } from '../../../../src/components/tag/Tag';
+export type TagSize = 'sm' | 'md';
+export type { CalculatedPosition };
+export interface SideSlotIcon {
+    type: 'icon';
+    icon: string;
+    color?: string;
+}
+export interface SideSlotDot {
+    type: 'dot';
+    color?: string;
+    size?: 'sm' | 'md';
+}
+export interface SideSlotCustom {
+    type: 'custom';
+    children: HTMLElement;
+}
+export type SideSlotType = SideSlotIcon | SideSlotDot | SideSlotCustom;
+export interface BaseTagOptions {
+    size?: TagSize;
+    icon?: SideSlotType;
+    text: string;
+    count?: string;
+    close?: boolean;
+    onButtonClick?: (event: MouseEvent) => void;
+    maxLength?: number;
+}
+export interface RequiredTagProps extends Required<Pick<BaseTagOptions, 'text' | 'size' | 'maxLength'>> {
+    icon?: SideSlotType;
+    count?: string;
+    close?: boolean;
+    onButtonClick?: (event: MouseEvent) => void;
+}

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

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

package/dist/temp/assets/scripts/tag/index.d.ts

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export * from './const/types';
+export * from './const/classNames';

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

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

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

@@ -0,0 +1,54 @@
+import { TooltipOptions } from './const';
+/**
+ * Tooltip 클래스
+ * 툴팁 패널 패턴을 사용하여 툴팁을 생성합니다.
+ * 툴팁 패널 패턴은 바깥 컨테이너(항상 pointer-events:none) + 실제 패널(클릭 허용) 패턴을 사용합니다.
+ * 레이어 1개 아래에 여러개의 패널과 툴팁이 생성되어 화면에 삽입됩니다.
+ * 자동 위치조정 ( 공간이 부족하다면 상하좌우를 조절하는 기능 - 기본값: top )을 사용합니다.
+ * Shadow DOM 지원
+ */
+export declare class Tooltip {
+    private element;
+    private iconElement;
+    private layerManager;
+    private panelId;
+    private panel;
+    private calculatedPosition;
+    private isVisible;
+    private isMeasuring;
+    private isForceHidden;
+    private options;
+    private boundMouseEnter;
+    private boundMouseLeave;
+    private boundResizeScroll;
+    private boundPanelClick;
+    constructor(options?: TooltipOptions);
+    private createElement;
+    private buildAnchorClassName;
+    private buildPanelClassName;
+    private renderContentHTML;
+    private renderCloseButtonHTML;
+    /** 전역 레이어에 패널 생성 */
+    private createLayerAndPanel;
+    private setupShadowContent;
+    private bindEvents;
+    private enableMouseEvents;
+    private disableMouseEvents;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleResizeScroll;
+    private handlePanelClick;
+    showTooltip(): void;
+    hideTooltip(): void;
+    private updateTooltipPosition;
+    private updatePanelClass;
+    getElement(): HTMLElement;
+    updateOptions(newOptions: Partial<TooltipOptions>): void;
+    destroy(): void;
+    static create(options?: TooltipOptions): Tooltip;
+    static createShort(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
+    static createLong(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
+    static createAuto(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
+    static createAutoLong(title: string, content?: string, options?: Partial<TooltipOptions>): Tooltip;
+    static createAutoLongWithShadowDOM(title: string, content: string, options?: Partial<TooltipOptions>): Tooltip;
+}