@ncds/ui-admin 1.8.4 → 1.8.5

package/dist/cjs/assets/scripts/featuredIcon.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FeaturedIcon = void 0;
+// React 컴포넌트와 동일하게 구성
+const iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+class FeaturedIcon {
+  constructor(options) {
+    this.options = {
+      theme: 'light-circle',
+      color: 'neutral',
+      size: 'sm',
+      className: '',
+      ...options
+    };
+    this.element = this.createElement();
+  }
+  // svgString ( ICON SVG ) 을 받아서 요소를 생성
+  createElement() {
+    const {
+      theme,
+      color,
+      size,
+      className,
+      svgString
+    } = this.options;
+    // React FeaturedIcon과 동일한 클래스 구조
+    const classes = ['ncua-featured-icon', `ncua-featured-icon--${theme}`, `ncua-featured-icon--${color}`, `ncua-featured-icon--${size}`];
+    if (className) {
+      classes.push(className);
+    }
+    const div = document.createElement('div');
+    div.className = classes.join(' ');
+    // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
+    if (theme === 'outline-circle') {
+      const innerOutline = document.createElement('div');
+      innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
+      div.appendChild(innerOutline);
+      const outerOutline = document.createElement('div');
+      outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
+      div.appendChild(outerOutline);
+    }
+    // SVG 아이콘 추가
+    const iconSize = iconSizeMap[size];
+    const svgWithSize = this.addSizeToSvg(svgString, iconSize);
+    div.innerHTML += svgWithSize;
+    return div;
+  }
+  addSizeToSvg(svgString, size) {
+    return svgString.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  updateColor(color) {
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, `ncua-featured-icon--${color}`);
+    this.options.color = color;
+  }
+  updateSize(size) {
+    const iconSize = iconSizeMap[size];
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, `ncua-featured-icon--${size}`);
+    const svgIcon = this.element.querySelector('svg');
+    if (svgIcon) {
+      svgIcon.setAttribute('width', String(iconSize));
+      svgIcon.setAttribute('height', String(iconSize));
+    }
+    this.options.size = size;
+  }
+  destroy() {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  // Static factory method
+  static create(options) {
+    return new FeaturedIcon(options);
+  }
+}
+exports.FeaturedIcon = FeaturedIcon;

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

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingNotification = void 0;
+var _breakpoint = require("../../../src/constant/breakpoint");
+var _featuredIcon = require("../featuredIcon");
+var _ButtonCloseX = require("../shared/ButtonCloseX");
+var _sanitize = require("../utils/sanitize");
+var _const = require("./const");
+var _utils = require("./utils");
+class FloatingNotification {
+  constructor(options) {
+    this.options = {
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined,
+      ...options
+    };
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+    this.setupMobileListener();
+  }
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose
+    } = this.options;
+    // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
+    let actualColor = color;
+    if (color === 'info') {
+      actualColor = 'neutral';
+    }
+    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 생성
+    let featuredIconElement = null;
+    if (iconFunction) {
+      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',
+        color: actualColor,
+        size: size
+      });
+      featuredIconElement = this.featuredIcon.getElement();
+    }
+    wrapper.innerHTML = (0, _sanitize.sanitizeHtml)(this.buildTemplate({
+      title,
+      supportingText,
+      actions,
+      onClose,
+      isMobile: mobile
+    }));
+    // FeaturedIcon을 container에 추가
+    if (featuredIconElement) {
+      const container = wrapper.querySelector(`.${_const.CLASS_NAMES.FLOATING.CONTAINER}`);
+      if (container) {
+        container.insertBefore(featuredIconElement, container.firstChild);
+      }
+    }
+    return wrapper;
+  }
+  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 '';
+    const size = _const.getSizes.closeButton(isMobile);
+    return (0, _ButtonCloseX.ButtonCloseX)(size, 'light', _const.CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
+  }
+  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 = () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }
+  updateMobileStyles(mobile) {
+    if (this.featuredIcon) {
+      const newSize = _const.getSizes.featuredIcon(mobile);
+      this.featuredIcon.updateSize(newSize);
+    }
+    const closeButton = this.element.querySelector('.ncua-button-close-x');
+    if (closeButton) {
+      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());
+      }
+    }
+  }
+  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
+  getElement() {
+    return this.element;
+  }
+  appendTo(parent) {
+    parent.appendChild(this.element);
+  }
+  remove() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  destroy() {
+    // FeaturedIcon 정리
+    if (this.featuredIcon) {
+      this.featuredIcon.destroy();
+      this.featuredIcon = undefined;
+    }
+    // 모바일 리스너 정리
+    if (this.mobileCleanup) {
+      this.mobileCleanup();
+      this.mobileCleanup = undefined;
+    }
+    this.remove();
+  }
+  // Static factory methods
+  static create(options) {
+    return new FloatingNotification(options);
+  }
+}
+exports.FloatingNotification = FloatingNotification;

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullWidthNotification = void 0;
+var _sanitize = require("../utils/sanitize");
+var _const = require("./const");
+var _utils = require("./utils");
+class FullWidthNotification {
+  constructor(options) {
+    this.options = {
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined,
+      ...options
+    };
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+  }
+  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 = (0, _sanitize.sanitizeHtml)(this.buildTemplate({
+      iconHtml,
+      title,
+      supportingText,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    }));
+    return wrapper;
+  }
+  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 `
+      <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 `
+      <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) {
+      const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      if (hidePermanentlyButton) {
+        hidePermanentlyButton.addEventListener('click', () => {
+          this.options.onHidePermanently?.();
+          this.remove();
+        });
+      }
+    }
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  appendTo(parent) {
+    parent.appendChild(this.element);
+  }
+  remove() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  destroy() {
+    this.remove();
+  }
+  // Static factory methods
+  static create(options) {
+    return new FullWidthNotification(options);
+  }
+}
+exports.FullWidthNotification = FullWidthNotification;

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

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageNotification = void 0;
+var _featuredIcon = require("../featuredIcon");
+var _sanitize = require("../utils/sanitize");
+var _const = require("./const");
+var _utils = require("./utils");
+class MessageNotification {
+  constructor(options) {
+    this.options = {
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined,
+      ...options
+    };
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+  }
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose,
+      onHidePermanently
+    } = this.options;
+    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+    let actualColor = color;
+    if (color === 'info') {
+      actualColor = 'neutral';
+    }
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+    const iconFunction = _const.FLOATING_ICON_MAP[actualColor];
+    // FeaturedIcon 생성
+    let featuredIconElement = null;
+    if (iconFunction) {
+      const iconSvg = iconFunction(_const.MESSAGE_SIZES.ICON_PIXEL);
+      this.featuredIcon = _featuredIcon.FeaturedIcon.create({
+        svgString: iconSvg,
+        theme: 'light-circle',
+        color: actualColor,
+        size: _const.MESSAGE_SIZES.FEATURED_ICON
+      });
+      featuredIconElement = this.featuredIcon.getElement();
+    }
+    wrapper.innerHTML = (0, _sanitize.sanitizeHtml)(this.buildTemplate({
+      title,
+      supportingText,
+      actions,
+      onClose,
+      onHidePermanently
+    }));
+    // FeaturedIcon을 content-wrapper에 추가
+    if (featuredIconElement) {
+      const contentWrapper = wrapper.querySelector(`.${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
+      if (contentWrapper) {
+        contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
+      }
+    }
+    return wrapper;
+  }
+  buildTemplate(params) {
+    const {
+      title,
+      supportingText,
+      actions,
+      onClose,
+      onHidePermanently
+    } = params;
+    return `
+      <div class="${_const.CLASS_NAMES.MESSAGE.CONTAINER}">
+        <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT}">
+          <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
+            <div class="${_const.CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
+              <span class="${_const.CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
+              ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+            </div>
+          </div>
+          <div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.MESSAGE.ACTIONS) : ''}
+          </div>
+          <div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderHidePermanentlyButton(onHidePermanently) {
+    if (!onHidePermanently) return '';
+    return `
+      <button type="button" class="${_const.CLASS_NAMES.COMMON.ACTION_BUTTON} ${_const.CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${_const.CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
+        다시 보지 않기
+      </button>
+    `;
+  }
+  renderCloseButton(onClose) {
+    if (!onClose) return '';
+    return `
+      <button type="button" class="${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${_const.SVG_ICONS['x-close'](_const.MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
+      </button>
+    `;
+  }
+  bindEvents() {
+    (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, () => this.remove());
+    // 다시보지 않기 버튼 이벤트 바인딩
+    if (this.options.onHidePermanently) {
+      const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      if (hidePermanentlyButton) {
+        hidePermanentlyButton.addEventListener('click', () => {
+          this.options.onHidePermanently?.();
+          this.remove();
+        });
+      }
+    }
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  appendTo(parent) {
+    parent.appendChild(this.element);
+  }
+  remove() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  destroy() {
+    // FeaturedIcon 정리
+    if (this.featuredIcon) {
+      this.featuredIcon.destroy();
+      this.featuredIcon = undefined;
+    }
+    this.remove();
+  }
+  // Static factory methods
+  static create(options) {
+    return new MessageNotification(options);
+  }
+}
+exports.MessageNotification = MessageNotification;

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NcuaNotification = void 0;
+var _FloatingNotification = require("./FloatingNotification");
+var _FullWidthNotification = require("./FullWidthNotification");
+var _MessageNotification = require("./MessageNotification");
+var _positionSync = require("./positionSync");
+// 통합 Notification 클래스 (글로벌 Web Notifications API와의 식별자 충돌을 피하기 위해 NcuaNotification 으로 명명)
+class NcuaNotification {
+  constructor(options) {
+    const {
+      type = 'floating',
+      ...baseOptions
+    } = options;
+    this.resolvedType = type;
+    if (type === 'message') {
+      this.instance = new _MessageNotification.MessageNotification(baseOptions);
+    } else if (type === 'full-width') {
+      this.instance = new _FullWidthNotification.FullWidthNotification(baseOptions);
+    } else {
+      this.instance = new _FloatingNotification.FloatingNotification(baseOptions);
+    }
+  }
+  // 모든 메서드를 instance에 위임
+  getElement() {
+    return this.instance.getElement();
+  }
+  appendTo(parent) {
+    return this.instance.appendTo(parent);
+  }
+  remove() {
+    return this.instance.remove();
+  }
+  destroy() {
+    return this.instance.destroy();
+  }
+  show(parent) {
+    // 사용자가 부모를 명시한 경우 기존 동작 유지 (legacy 호환).
+    if (parent) {
+      this.instance.appendTo(parent);
+      return;
+    }
+    // §5.1 — floating 은 자동으로 우측 상단 호스트에 append.
+    // 시각적으로는 최신 토스트가 상단에 노출되고, 이전 토스트들은 그 아래로 12px 씩 겹쳐 쌓인다
+    // (LIFO, §5.4 "최신 상단" 준수. godomall5 등 기존 admin wrapper 와 동일 정책.
+    // 겹침 너비는 --ncua-floating-notification-stack-overlap CSS 변수로 오버라이드 가능).
+    //
+    // SSR 가드는 mountFloatingNotificationHost 내부의 isBrowserEnv() 로 위임 — null 이면
+    // 토스트가 표시될 환경이 아니라는 의미이므로 silently return 한다 (document.body 에 append
+    // 시도하는 fallthrough 는 SSR 에서 ReferenceError 를 일으키므로 금지).
+    if (this.resolvedType === 'floating') {
+      const host = (0, _positionSync.mountFloatingNotificationHost)();
+      if (host) {
+        this.instance.appendTo(host);
+      }
+      return;
+    }
+    // full-width / message는 기존대로 body에 append.
+    this.instance.appendTo(document.body);
+  }
+  // Static factory methods
+  static create(options) {
+    return new NcuaNotification(options);
+  }
+  // Convenience method for creating notifications with specific color
+  static createWithColor(color, title, supportingText, options) {
+    const autoCloseMap = {
+      success: 3000,
+      error: 5000,
+      warning: 3000,
+      info: 3000,
+      neutral: 0
+    };
+    return new NcuaNotification({
+      title,
+      supportingText,
+      color,
+      type: 'floating',
+      autoClose: autoCloseMap[color],
+      ...options
+    });
+  }
+  // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
+  static success(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('success', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static error(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('error', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static warning(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('warning', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static info(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('info', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static neutral(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('neutral', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  // showFullWidth method for backward compatibility
+  static showFullWidth(options) {
+    return new NcuaNotification({
+      ...options,
+      type: 'full-width'
+    });
+  }
+}
+exports.NcuaNotification = NcuaNotification;