@ncds/ui-admin 1.7.0 → 1.8.0

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

@@ -1,100 +1,112 @@
-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 { SVG_ICONS, CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES } from './const';
 import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose } from './utils';
-var FullWidthNotification = /** @class */function () {
-  function FullWidthNotification(options) {
-    this.options = __assign({
+export 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 = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
-    var iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    } = this.options;
+    const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
+    const iconHtml = FULL_WIDTH_ICON_MAP[color](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(CLASS_NAMES.FULL_WIDTH.CONTAINER, "\">\n        <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.CONTENT, "\">\n          <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.ICON, "\">").concat(iconHtml, "</div>\n            <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, "\">\n              <span class=\"").concat(CLASS_NAMES.FULL_WIDTH.TITLE, "\">").concat(title, "</span>\n              ").concat(renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink), "\n            </div>\n          </div>\n          <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? renderActions(actions, 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="${CLASS_NAMES.FULL_WIDTH.CONTAINER}">
+        <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT}">
+          <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.FULL_WIDTH.ICON}">${iconHtml}</div>
+            <div class="${CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.FULL_WIDTH.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, 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(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON), "\n      </button>\n    ");
-  };
-  FullWidthNotification.prototype.bindEvents = function () {
-    var _this = this;
-    bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () {
-      return _this.remove();
-    });
+    return `
+      <button type="button" class="${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON)}
+      </button>
+    `;
+  }
+  bindEvents() {
+    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 = setupAutoClose(this.options.autoClose, this.options.onClose, function () {
-      return _this.remove();
-    });
-  };
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = 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;
@@ -102,14 +114,12 @@ var FullWidthNotification = /** @class */function () {
     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;
-}();
-export { FullWidthNotification };
+  }
+}

package/dist/esm/assets/scripts/notification/MessageNotification.js

@@ -1,50 +1,42 @@
-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 { SVG_ICONS, CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
 import { FeaturedIcon } from '../featuredIcon';
 import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose } from './utils';
-var MessageNotification = /** @class */function () {
-  function MessageNotification(options) {
-    this.options = __assign({
+export class MessageNotification {
+  constructor(options) {
+    this.options = {
       color: 'neutral',
       className: '',
       actions: [],
       autoClose: 0,
-      supportingText: undefined
-    }, options);
+      supportingText: undefined,
+      ...options
+    };
     this.element = this.createElement();
     this.bindEvents();
     this.setupAutoClose();
   }
-  MessageNotification.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,
-      onHidePermanently = _a.onHidePermanently;
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose,
+      onHidePermanently
+    } = this.options;
     // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-    var actualColor = color;
+    let actualColor = color;
     if (color === 'info') {
       console.warn('Message notification does not support "info" color. Using "neutral" instead.');
       actualColor = 'neutral';
     }
-    var wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
-    var iconFunction = FLOATING_ICON_MAP[actualColor];
+    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+    const iconFunction = FLOATING_ICON_MAP[actualColor];
     // FeaturedIcon 생성
-    var featuredIconElement = null;
+    let featuredIconElement = null;
     if (iconFunction) {
-      var iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
+      const iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
       this.featuredIcon = FeaturedIcon.create({
         svgString: iconSvg,
         theme: 'light-circle',
@@ -54,68 +46,89 @@ var MessageNotification = /** @class */function () {
       featuredIconElement = this.featuredIcon.getElement();
     }
     wrapper.innerHTML = this.buildTemplate({
-      title: title,
-      supportingText: supportingText,
-      actions: actions,
-      onClose: onClose,
-      onHidePermanently: onHidePermanently
+      title,
+      supportingText,
+      actions,
+      onClose,
+      onHidePermanently
     });
     // FeaturedIcon을 content-wrapper에 추가
     if (featuredIconElement) {
-      var contentWrapper = wrapper.querySelector(".".concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER));
+      const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
       if (contentWrapper) {
         contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
       }
     }
     return wrapper;
-  };
-  MessageNotification.prototype.buildTemplate = function (params) {
-    var title = params.title,
-      supportingText = params.supportingText,
-      actions = params.actions,
-      onClose = params.onClose,
-      onHidePermanently = params.onHidePermanently;
-    return "\n      <div class=\"".concat(CLASS_NAMES.MESSAGE.CONTAINER, "\">\n        <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT, "\">\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(CLASS_NAMES.MESSAGE.TEXT_CONTAINER, "\">\n              <span class=\"").concat(CLASS_NAMES.MESSAGE.TITLE, "\">").concat(title, "</span>\n              ").concat(renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT), "\n            </div>\n          </div>\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : '', "\n          </div>\n          <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n            ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n            ").concat(this.renderCloseButton(onClose), "\n          </div>\n        </div>\n      </div>\n    ");
-  };
-  MessageNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
+  }
+  buildTemplate(params) {
+    const {
+      title,
+      supportingText,
+      actions,
+      onClose,
+      onHidePermanently
+    } = params;
+    return `
+      <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
+        <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
+          <div class="${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : ''}
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderHidePermanentlyButton(onHidePermanently) {
     if (!onHidePermanently) return '';
-    return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.COMMON.ACTION_BUTTON, " ").concat(CLASS_NAMES.COMMON.ACTION_BUTTON, "--text ").concat(CLASS_NAMES.MESSAGE.HIDE_LINK, "\" data-hide-permanently=\"true\">\n        \uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30\n      </button>\n    ");
-  };
-  MessageNotification.prototype.renderCloseButton = function (onClose) {
+    return `
+      <button type="button" class="${CLASS_NAMES.COMMON.ACTION_BUTTON} ${CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
+        다시 보지 않기
+      </button>
+    `;
+  }
+  renderCloseButton(onClose) {
     if (!onClose) return '';
-    return "\n      <button type=\"button\" class=\"".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', "stroke=\"#2F2F30\""), "\n      </button>\n    ");
-  };
-  MessageNotification.prototype.bindEvents = function () {
-    var _this = this;
-    bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () {
-      return _this.remove();
-    });
+    return `
+      <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
+      </button>
+    `;
+  }
+  bindEvents() {
+    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();
         });
       }
     }
-  };
-  MessageNotification.prototype.setupAutoClose = function () {
-    var _this = this;
-    this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () {
-      return _this.remove();
-    });
-  };
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
   // Public methods
-  MessageNotification.prototype.getElement = function () {
+  getElement() {
     return this.element;
-  };
-  MessageNotification.prototype.appendTo = function (parent) {
+  }
+  appendTo(parent) {
     parent.appendChild(this.element);
-  };
-  MessageNotification.prototype.remove = function () {
+  }
+  remove() {
     if (this.autoCloseTimer) {
       clearTimeout(this.autoCloseTimer);
       this.autoCloseTimer = undefined;
@@ -123,19 +136,17 @@ var MessageNotification = /** @class */function () {
     if (this.element && this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
     }
-  };
-  MessageNotification.prototype.destroy = function () {
+  }
+  destroy() {
     // FeaturedIcon 정리
     if (this.featuredIcon) {
       this.featuredIcon.destroy();
       this.featuredIcon = undefined;
     }
     this.remove();
-  };
+  }
   // Static factory methods
-  MessageNotification.create = function (options) {
+  static create(options) {
     return new MessageNotification(options);
-  };
-  return MessageNotification;
-}();
-export { MessageNotification };
+  }
+}

package/dist/esm/assets/scripts/notification/Notification.js

@@ -1,30 +1,13 @@
-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);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { FullWidthNotification } from './FullWidthNotification';
 import { FloatingNotification } from './FloatingNotification';
 import { MessageNotification } from './MessageNotification';
 // 통합 Notification 클래스
-var Notification = /** @class */function () {
-  function Notification(options) {
-    var _a = options.type,
-      type = _a === void 0 ? 'floating' : _a,
-      baseOptions = __rest(options, ["type"]);
+export class Notification {
+  constructor(options) {
+    const {
+      type = 'floating',
+      ...baseOptions
+    } = options;
     if (type === 'message') {
       this.instance = new MessageNotification(baseOptions);
     } else if (type === 'full-width') {
@@ -34,78 +17,78 @@ var Notification = /** @class */function () {
     }
   }
   // 모든 메서드를 instance에 위임
-  Notification.prototype.getElement = function () {
+  getElement() {
     return this.instance.getElement();
-  };
-  Notification.prototype.appendTo = function (parent) {
+  }
+  appendTo(parent) {
     return this.instance.appendTo(parent);
-  };
-  Notification.prototype.remove = function () {
+  }
+  remove() {
     return this.instance.remove();
-  };
-  Notification.prototype.destroy = function () {
+  }
+  destroy() {
     return this.instance.destroy();
-  };
-  Notification.prototype.show = function (parent) {
+  }
+  show(parent) {
     if (parent) {
       this.instance.appendTo(parent);
     } else {
       this.instance.appendTo(document.body);
     }
-  };
+  }
   // Static factory methods
-  Notification.create = function (options) {
+  static create(options) {
     return new Notification(options);
-  };
+  }
   // Convenience method for creating notifications with specific color
-  Notification.createWithColor = function (color, title, supportingText, options) {
-    var autoCloseMap = {
+  static createWithColor(color, title, supportingText, options) {
+    const autoCloseMap = {
       success: 3000,
       error: 5000,
       warning: 3000,
       info: 3000,
       neutral: 0
     };
-    return new Notification(__assign({
-      title: title,
-      supportingText: supportingText,
-      color: color,
+    return new Notification({
+      title,
+      supportingText,
+      color,
       type: 'floating',
-      autoClose: autoCloseMap[color]
-    }, options));
-  };
+      autoClose: autoCloseMap[color],
+      ...options
+    });
+  }
   // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
-  Notification.success = function (title, supportingText, options) {
-    var notification = this.createWithColor('success', title, supportingText, options);
+  static success(title, supportingText, options) {
+    const notification = this.createWithColor('success', title, supportingText, options);
     notification.show();
     return notification;
-  };
-  Notification.error = function (title, supportingText, options) {
-    var notification = this.createWithColor('error', title, supportingText, options);
+  }
+  static error(title, supportingText, options) {
+    const notification = this.createWithColor('error', title, supportingText, options);
     notification.show();
     return notification;
-  };
-  Notification.warning = function (title, supportingText, options) {
-    var notification = this.createWithColor('warning', title, supportingText, options);
+  }
+  static warning(title, supportingText, options) {
+    const notification = this.createWithColor('warning', title, supportingText, options);
     notification.show();
     return notification;
-  };
-  Notification.info = function (title, supportingText, options) {
-    var notification = this.createWithColor('info', title, supportingText, options);
+  }
+  static info(title, supportingText, options) {
+    const notification = this.createWithColor('info', title, supportingText, options);
     notification.show();
     return notification;
-  };
-  Notification.neutral = function (title, supportingText, options) {
-    var notification = this.createWithColor('neutral', title, supportingText, options);
+  }
+  static neutral(title, supportingText, options) {
+    const notification = this.createWithColor('neutral', title, supportingText, options);
     notification.show();
     return notification;
-  };
+  }
   // showFullWidth method for backward compatibility
-  Notification.showFullWidth = function (options) {
-    return new Notification(__assign(__assign({}, options), {
+  static showFullWidth(options) {
+    return new Notification({
+      ...options,
       type: 'full-width'
-    }));
-  };
-  return Notification;
-}();
-export { Notification };
+    });
+  }
+}

package/dist/esm/assets/scripts/notification/const/classNames.js

@@ -1,5 +1,5 @@
 // CSS class names
-export var CLASS_NAMES = {
+export const CLASS_NAMES = {
   FULL_WIDTH: {
     BASE: 'ncua-full-width-notification',
     CONTAINER: 'ncua-full-width-notification__container',