@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/cjs/assets/scripts/notification/FloatingNotification.js

@@ -9,53 +9,45 @@ var _utils = require("./utils");
 var _breakpoint = require("../../../src/constant/breakpoint");
 var _featuredIcon = require("../featuredIcon");
 var _ButtonCloseX = require("../shared/ButtonCloseX");
-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 FloatingNotification = exports.FloatingNotification = /** @class */function () {
-  function FloatingNotification(options) {
-    this.options = __assign({
+class FloatingNotification {
+  constructor(options) {
+    this.options = {
       color: 'neutral',
       className: '',
       actions: [],
       autoClose: 0,
-      supportingText: undefined
-    }, options);
+      supportingText: undefined,
+      ...options
+    };
     this.element = this.createElement();
     this.bindEvents();
     this.setupAutoClose();
     this.setupMobileListener();
   }
-  FloatingNotification.prototype.createElement = function () {
-    var _a = this.options,
-      title = _a.title,
-      supportingText = _a.supportingText,
-      color = _a.color,
-      className = _a.className,
-      actions = _a.actions,
-      onClose = _a.onClose;
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose
+    } = this.options;
     // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
-    var actualColor = color;
+    let actualColor = color;
     if (color === 'info') {
       console.warn('Floating notification does not support "info" color. Using "neutral" instead.');
       actualColor = 'neutral';
     }
-    var wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FLOATING.BASE, actualColor, className);
-    var iconFunction = _const.FLOATING_ICON_MAP[actualColor];
-    var mobile = (0, _utils.isMobile)();
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FLOATING.BASE, actualColor, className);
+    const iconFunction = _const.FLOATING_ICON_MAP[actualColor];
+    const mobile = (0, _utils.isMobile)();
     // FeaturedIcon 생성
-    var featuredIconElement = null;
+    let featuredIconElement = null;
     if (iconFunction) {
-      var size = _const.getSizes.featuredIcon(mobile);
-      var iconSize = _const.getSizes.iconPixel(mobile);
-      var iconSvg = iconFunction(iconSize);
+      const size = _const.getSizes.featuredIcon(mobile);
+      const iconSize = _const.getSizes.iconPixel(mobile);
+      const iconSvg = iconFunction(iconSize);
       this.featuredIcon = _featuredIcon.FeaturedIcon.create({
         svgString: iconSvg,
         theme: 'dark-circle',
@@ -65,92 +57,98 @@ var FloatingNotification = exports.FloatingNotification = /** @class */function
       featuredIconElement = this.featuredIcon.getElement();
     }
     wrapper.innerHTML = this.buildTemplate({
-      title: title,
-      supportingText: supportingText,
-      actions: actions,
-      onClose: onClose,
+      title,
+      supportingText,
+      actions,
+      onClose,
       isMobile: mobile
     });
     // FeaturedIcon을 container에 추가
     if (featuredIconElement) {
-      var container = wrapper.querySelector(".".concat(_const.CLASS_NAMES.FLOATING.CONTAINER));
+      const container = wrapper.querySelector(`.${_const.CLASS_NAMES.FLOATING.CONTAINER}`);
       if (container) {
         container.insertBefore(featuredIconElement, container.firstChild);
       }
     }
     return wrapper;
-  };
-  FloatingNotification.prototype.buildTemplate = function (params) {
-    var title = params.title,
-      supportingText = params.supportingText,
-      actions = params.actions,
-      onClose = params.onClose,
-      isMobile = params.isMobile;
-    return "\n      <div class=\"".concat(_const.CLASS_NAMES.FLOATING.CONTENT, "\">\n        <div class=\"").concat(_const.CLASS_NAMES.FLOATING.CONTAINER, "\">\n          <div class=\"").concat(_const.CLASS_NAMES.FLOATING.TEXT_CONTAINER, "\">\n            <div class=\"").concat(_const.CLASS_NAMES.FLOATING.TITLE_WRAPPER, "\">\n              <span class=\"").concat(_const.CLASS_NAMES.FLOATING.TITLE, "\">").concat(title, "</span>\n            </div>\n            ").concat((0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FLOATING.SUPPORTING_TEXT), "\n            ").concat(actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FLOATING.ACTIONS) : '', "\n          </div>\n        </div>\n      </div>\n      ").concat(this.renderCloseButton(onClose, isMobile), "\n    ");
-  };
-  FloatingNotification.prototype.renderCloseButton = function (onClose, isMobile) {
-    if (isMobile === void 0) {
-      isMobile = false;
-    }
+  }
+  buildTemplate(params) {
+    const {
+      title,
+      supportingText,
+      actions,
+      onClose,
+      isMobile
+    } = params;
+    return `
+      <div class="${_const.CLASS_NAMES.FLOATING.CONTENT}">
+        <div class="${_const.CLASS_NAMES.FLOATING.CONTAINER}">
+          <div class="${_const.CLASS_NAMES.FLOATING.TEXT_CONTAINER}">
+            <div class="${_const.CLASS_NAMES.FLOATING.TITLE_WRAPPER}">
+              <span class="${_const.CLASS_NAMES.FLOATING.TITLE}">${title}</span>
+            </div>
+            ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FLOATING.SUPPORTING_TEXT)}
+            ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FLOATING.ACTIONS) : ''}
+          </div>
+        </div>
+      </div>
+      ${this.renderCloseButton(onClose, isMobile)}
+    `;
+  }
+  renderCloseButton(onClose) {
+    let isMobile = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (!onClose) return '';
-    var size = _const.getSizes.closeButton(isMobile);
+    const size = _const.getSizes.closeButton(isMobile);
     return (0, _ButtonCloseX.ButtonCloseX)(size, 'light', _const.CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
-  };
-  FloatingNotification.prototype.setupMobileListener = function () {
-    var _this = this;
-    var mediaQuery = window.matchMedia(_breakpoint.MEDIA_QUERY.mobile);
-    var handleChange = function (e) {
-      _this.updateMobileStyles(e.matches);
-      if (e.matches && _this.options.onClose) {
-        _this.options.onClose();
-        _this.remove();
+  }
+  setupMobileListener() {
+    const mediaQuery = window.matchMedia(_breakpoint.MEDIA_QUERY.mobile);
+    const handleChange = e => {
+      this.updateMobileStyles(e.matches);
+      if (e.matches && this.options.onClose) {
+        this.options.onClose();
+        this.remove();
       }
     };
     handleChange({
       matches: mediaQuery.matches
     });
     mediaQuery.addEventListener('change', handleChange);
-    this.mobileCleanup = function () {
+    this.mobileCleanup = () => {
       mediaQuery.removeEventListener('change', handleChange);
     };
-  };
-  FloatingNotification.prototype.updateMobileStyles = function (mobile) {
+  }
+  updateMobileStyles(mobile) {
     if (this.featuredIcon) {
-      var newSize = _const.getSizes.featuredIcon(mobile);
+      const newSize = _const.getSizes.featuredIcon(mobile);
       this.featuredIcon.updateSize(newSize);
     }
-    var closeButton = this.element.querySelector('.ncua-button-close-x');
+    const closeButton = this.element.querySelector('.ncua-button-close-x');
     if (closeButton) {
-      var newSize = _const.getSizes.closeButton(mobile);
-      var newSvgSize = _const.getSizes.closeButtonSvg(newSize);
-      closeButton.className = closeButton.className.replace(/ncua-button-close-x--(xs|sm)/, "ncua-button-close-x--".concat(newSize));
-      var svg = closeButton.querySelector('svg');
+      const newSize = _const.getSizes.closeButton(mobile);
+      const newSvgSize = _const.getSizes.closeButtonSvg(newSize);
+      closeButton.className = closeButton.className.replace(/ncua-button-close-x--(xs|sm)/, `ncua-button-close-x--${newSize}`);
+      const svg = closeButton.querySelector('svg');
       if (svg) {
         svg.setAttribute('width', newSvgSize.toString());
         svg.setAttribute('height', newSvgSize.toString());
       }
     }
-  };
-  FloatingNotification.prototype.bindEvents = function () {
-    var _this = this;
-    (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, function () {
-      return _this.remove();
-    });
-  };
-  FloatingNotification.prototype.setupAutoClose = function () {
-    var _this = this;
-    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, function () {
-      return _this.remove();
-    });
-  };
+  }
+  bindEvents() {
+    (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, () => this.remove());
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
   // Public methods
-  FloatingNotification.prototype.getElement = function () {
+  getElement() {
     return this.element;
-  };
-  FloatingNotification.prototype.appendTo = function (parent) {
+  }
+  appendTo(parent) {
     parent.appendChild(this.element);
-  };
-  FloatingNotification.prototype.remove = function () {
+  }
+  remove() {
     if (this.autoCloseTimer) {
       clearTimeout(this.autoCloseTimer);
       this.autoCloseTimer = undefined;
@@ -158,8 +156,8 @@ var FloatingNotification = exports.FloatingNotification = /** @class */function
     if (this.element && this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
     }
-  };
-  FloatingNotification.prototype.destroy = function () {
+  }
+  destroy() {
     // FeaturedIcon 정리
     if (this.featuredIcon) {
       this.featuredIcon.destroy();
@@ -171,10 +169,10 @@ var FloatingNotification = exports.FloatingNotification = /** @class */function
       this.mobileCleanup = undefined;
     }
     this.remove();
-  };
+  }
   // Static factory methods
-  FloatingNotification.create = function (options) {
+  static create(options) {
     return new FloatingNotification(options);
-  };
-  return FloatingNotification;
-}();
+  }
+}
+exports.FloatingNotification = FloatingNotification;

package/dist/cjs/assets/scripts/notification/FullWidthNotification.js

@@ -6,101 +6,113 @@ Object.defineProperty(exports, "__esModule", {
 exports.FullWidthNotification = void 0;
 var _const = require("./const");
 var _utils = require("./utils");
-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 FullWidthNotification = exports.FullWidthNotification = /** @class */function () {
-  function FullWidthNotification(options) {
-    this.options = __assign({
+class FullWidthNotification {
+  constructor(options) {
+    this.options = {
       color: 'neutral',
       className: '',
       actions: [],
       autoClose: 0,
-      supportingText: undefined
-    }, options);
+      supportingText: undefined,
+      ...options
+    };
     this.element = this.createElement();
     this.bindEvents();
     this.setupAutoClose();
   }
-  FullWidthNotification.prototype.createElement = function () {
-    var _a = this.options,
-      title = _a.title,
-      supportingText = _a.supportingText,
-      color = _a.color,
-      className = _a.className,
-      actions = _a.actions,
-      onClose = _a.onClose,
-      supportTextLink = _a.supportTextLink,
-      onHidePermanently = _a.onHidePermanently;
-    var wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FULL_WIDTH.BASE, color, className);
-    var iconHtml = _const.FULL_WIDTH_ICON_MAP[color](_const.FULL_WIDTH_SIZES.ICON);
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    } = this.options;
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FULL_WIDTH.BASE, color, className);
+    const iconHtml = _const.FULL_WIDTH_ICON_MAP[color](_const.FULL_WIDTH_SIZES.ICON);
     wrapper.innerHTML = this.buildTemplate({
-      iconHtml: iconHtml,
-      title: title,
-      supportingText: supportingText,
-      actions: actions,
-      onClose: onClose,
-      supportTextLink: supportTextLink,
-      onHidePermanently: onHidePermanently
+      iconHtml,
+      title,
+      supportingText,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
     });
     return wrapper;
-  };
-  FullWidthNotification.prototype.buildTemplate = function (params) {
-    var iconHtml = params.iconHtml,
-      title = params.title,
-      supportingText = params.supportingText,
-      actions = params.actions,
-      onClose = params.onClose,
-      supportTextLink = params.supportTextLink,
-      onHidePermanently = params.onHidePermanently;
-    return "\n      <div class=\"".concat(_const.CLASS_NAMES.FULL_WIDTH.CONTAINER, "\">\n        <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.CONTENT, "\">\n          <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.ICON, "\">").concat(iconHtml, "</div>\n            <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, "\">\n              <span class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.TITLE, "\">").concat(title, "</span>\n              ").concat((0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink), "\n            </div>\n          </div>\n          <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FULL_WIDTH.ACTIONS) : '', "\n            ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n            ").concat(this.renderCloseButton(onClose), "\n          </div>\n        </div>\n      </div>\n    ");
-  };
-  FullWidthNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
+  }
+  buildTemplate(params) {
+    const {
+      iconHtml,
+      title,
+      supportingText,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    } = params;
+    return `
+      <div class="${_const.CLASS_NAMES.FULL_WIDTH.CONTAINER}">
+        <div class="${_const.CLASS_NAMES.FULL_WIDTH.CONTENT}">
+          <div class="${_const.CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER}">
+            <div class="${_const.CLASS_NAMES.FULL_WIDTH.ICON}">${iconHtml}</div>
+            <div class="${_const.CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER}">
+              <span class="${_const.CLASS_NAMES.FULL_WIDTH.TITLE}">${title}</span>
+              ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink)}
+            </div>
+          </div>
+          <div class="${_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderHidePermanentlyButton(onHidePermanently) {
     if (!onHidePermanently) return '';
-    return "\n      <button type=\"button\" class=\"ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link\" data-hide-permanently=\"true\">\n        \uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30\n      </button>\n    ";
-  };
-  FullWidthNotification.prototype.renderCloseButton = function (onClose) {
+    return `
+      <button type="button" class="ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link" data-hide-permanently="true">
+        다시보지 않기
+      </button>
+    `;
+  }
+  renderCloseButton(onClose) {
     if (!onClose) return '';
-    return "\n      <button type=\"button\" class=\"".concat(_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(_const.SVG_ICONS['x-close'](_const.FULL_WIDTH_SIZES.CLOSE_BUTTON), "\n      </button>\n    ");
-  };
-  FullWidthNotification.prototype.bindEvents = function () {
-    var _this = this;
-    (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, function () {
-      return _this.remove();
-    });
+    return `
+      <button type="button" class="${_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${_const.SVG_ICONS['x-close'](_const.FULL_WIDTH_SIZES.CLOSE_BUTTON)}
+      </button>
+    `;
+  }
+  bindEvents() {
+    (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, () => this.remove());
     // 다시보지 않기 버튼 이벤트 바인딩
     if (this.options.onHidePermanently) {
-      var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
       if (hidePermanentlyButton) {
-        hidePermanentlyButton.addEventListener('click', function () {
-          var _a, _b;
-          (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
-          _this.remove();
+        hidePermanentlyButton.addEventListener('click', () => {
+          this.options.onHidePermanently?.();
+          this.remove();
         });
       }
     }
-  };
-  FullWidthNotification.prototype.setupAutoClose = function () {
-    var _this = this;
-    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, function () {
-      return _this.remove();
-    });
-  };
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
   // Public methods
-  FullWidthNotification.prototype.getElement = function () {
+  getElement() {
     return this.element;
-  };
-  FullWidthNotification.prototype.appendTo = function (parent) {
+  }
+  appendTo(parent) {
     parent.appendChild(this.element);
-  };
-  FullWidthNotification.prototype.remove = function () {
+  }
+  remove() {
     if (this.autoCloseTimer) {
       clearTimeout(this.autoCloseTimer);
       this.autoCloseTimer = undefined;
@@ -108,13 +120,13 @@ var FullWidthNotification = exports.FullWidthNotification = /** @class */functio
     if (this.element && this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
     }
-  };
-  FullWidthNotification.prototype.destroy = function () {
+  }
+  destroy() {
     this.remove();
-  };
+  }
   // Static factory methods
-  FullWidthNotification.create = function (options) {
+  static create(options) {
     return new FullWidthNotification(options);
-  };
-  return FullWidthNotification;
-}();
+  }
+}
+exports.FullWidthNotification = FullWidthNotification;