@ncino/web-components 5.0.0-preview.3 → 5.0.0-preview.4

package/dist/types/services/toaster-service.d.ts

@@ -0,0 +1,117 @@
+import { DefaultToastOptions } from '../components/toaster/gator/toaster.gator.js';
+export type ToastCreateOptions = Partial<DefaultToastOptions> & {
+    title?: string;
+    subtitle?: string;
+};
+declare class ToasterService {
+    /**
+     * Find the toaster component in the DOM
+     * @private
+     * @returns The first visible toaster component or null if none found
+     */
+    private findToaster;
+    /**
+     * Create a toast using the toaster found in the DOM
+     * @param options - Configuration options for the toast
+     * @param options.title - The main title text for the toast
+     * @param options.subtitle - Optional subtitle text for the toast
+     * @param options.variant - The visual variant of the toast ('info' | 'success' | 'warning' | 'error' | 'inverse')
+     * @param options.duration - Duration in milliseconds before auto-dismiss (0 = sticky, >0 = auto-dismiss)
+     * @param options.dismissible - Whether the toast can be manually dismissed by the user
+     * @param options.exitIconLabel - Aria label for the dismiss button, default is 'Close Notification'
+     * @param options.statusIconLabel - Aria label for the status icon, default is the variant name (info, success, warning, error)
+     * @returns The unique ID of the created toast, or null if no toaster is found
+     * @example
+     * ```typescript
+     * // Simple usage
+     * const toastId = toasterService.createToast({
+     *   title: 'Hello World',
+     *   subtitle: 'This is a toast message'
+     * });
+     *
+     * // Advanced usage
+     * const toastId = toasterService.createToast({
+     *   title: 'Custom Toast',
+     *   variant: 'warning',
+     *   duration: 10000,
+     *   dismissible: false
+     * });
+     * ```
+     */
+    createToast(options: ToastCreateOptions): string | null;
+    /**
+     * Create a success toast with green styling
+     * @param title - The main title text for the toast
+     * @param subtitle - Optional subtitle text for the toast
+     * @param options - Additional configuration options (variant will be overridden to 'success')
+     * @returns The unique ID of the created toast, or null if no toaster is found
+     * @example
+     * ```typescript
+     * toasterService.success('Operation Complete', 'The file was saved successfully');
+     *
+     * // With custom options
+     * toasterService.success('Saved!', 'File saved', { duration: 2000 });
+     * ```
+     */
+    success(title: string, subtitle?: string, options?: Omit<ToastCreateOptions, 'title' | 'subtitle' | 'variant'>): string | null;
+    /**
+     * Create an error toast with red styling
+     * @param title - The main title text for the toast
+     * @param subtitle - Optional subtitle text for the toast
+     * @param options - Additional configuration options (variant will be overridden to 'error')
+     * @returns The unique ID of the created toast, or null if no toaster is found
+     * @example
+     * ```typescript
+     * toasterService.error('Failed to Save', 'Please check your connection and try again');
+     *
+     * // Sticky error that doesn't auto-dismiss
+     * toasterService.error('Critical Error', 'System malfunction detected', { duration: 0 });
+     * ```
+     */
+    error(title: string, subtitle?: string, options?: Omit<ToastCreateOptions, 'title' | 'subtitle' | 'variant'>): string | null;
+    /**
+     * Create a warning toast with yellow/orange styling
+     * @param title - The main title text for the toast
+     * @param subtitle - Optional subtitle text for the toast
+     * @param options - Additional configuration options (variant will be overridden to 'warning')
+     * @returns The unique ID of the created toast, or null if no toaster is found
+     * @example
+     * ```typescript
+     * toasterService.warning('Unsaved Changes', 'You have unsaved changes that will be lost');
+     *
+     * // Non-dismissible warning
+     * toasterService.warning('Low Storage', 'Running low on space', { dismissible: false });
+     * ```
+     */
+    warning(title: string, subtitle?: string, options?: Omit<ToastCreateOptions, 'title' | 'subtitle' | 'variant'>): string | null;
+    /**
+     * Create an info toast with blue styling (default variant)
+     * @param title - The main title text for the toast
+     * @param subtitle - Optional subtitle text for the toast
+     * @param options - Additional configuration options (variant will be overridden to 'info')
+     * @returns The unique ID of the created toast, or null if no toaster is found
+     * @example
+     * ```typescript
+     * toasterService.info('New Feature Available', 'Check out the new dashboard widgets');
+     *
+     * // Long-lasting info toast
+     * toasterService.info('Tip', 'Use Ctrl+S to save', { duration: 15000 });
+     * ```
+     */
+    info(title: string, subtitle?: string, options?: Omit<ToastCreateOptions, 'title' | 'subtitle' | 'variant'>): string | null;
+    /**
+     * Remove a specific toast by its ID
+     * @param id - The unique ID of the toast to remove (returned from createToast methods)
+     * @example
+     * ```typescript
+     * const toastId = toasterService.success('Uploading...', 'Please wait');
+     * // Later, when upload completes:
+     * toasterService.removeToast(toastId);
+     * toasterService.success('Upload Complete', 'File uploaded successfully');
+     * ```
+     */
+    removeToast(id: string): void;
+    clearAll(): void;
+}
+export declare const toasterService: ToasterService;
+export {};

package/dist/types/services/toaster-service.test.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ncino/web-components",
     "author": "nCino",
-    "version": "5.0.0-preview.3",
+    "version": "5.0.0-preview.4",
     "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
@@ -36,6 +36,10 @@
             "import": "./dist/index.data.js",
             "types": "./dist/types/index.data.d.ts"
         },
+        "./services": {
+            "import": "./dist/index.services.js",
+            "types": "./dist/types/index.services.d.ts"
+        },
         "./gator-global-styles.css": {
             "import": "./dist/styles/gator/gator-global-styles.css"
         }
@@ -103,7 +107,7 @@
         "@vitest/ui": "3.2.4",
         "axe-core": "^4.10.3",
         "cem-plugin-expanded-types": "^1.4.0",
-        "chromatic": "^12.2.0",
+        "chromatic": "^13.1.2",
         "conventional-changelog-conventionalcommits": "^9.0.0",
         "custom-element-jet-brains-integration": "^1.7.0",
         "custom-elements-manifest": "^2.1.0",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "5.0.0-preview.2",
+  "version": "5.0.0-preview.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -5008,10 +5008,74 @@
           }
         },
         {
-          "name": "ngc-toast",
-          "description": "\n---\n\n\n### **Events:**\n - **dismiss**\n\n### **Slots:**\n - _default_ - The content within the toast",
+          "name": "ngc-toast-title",
+          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The title content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "id",
+              "description": "Unique identifier for the toast.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "dismissible",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "sticky",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "exit-icon-label", "value": { "type": "string" } },
+            {
+              "name": "status-icon-label",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "subtitle",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The title content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "id",
+                "description": "Unique identifier for the toast.",
+                "type": "string"
+              },
+              {
+                "name": "variant",
+                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'"
+              },
+              { "name": "dismissible", "type": "boolean" },
+              { "name": "sticky", "type": "boolean" },
+              { "name": "exitIconLabel", "type": "string" },
+              { "name": "statusIconLabel", "type": "string" },
+              { "name": "title", "type": "string" },
+              { "name": "subtitle", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "ngc-toast-subtitle",
+          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The subtitle content",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "id",
+              "description": "Unique identifier for the toast.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "variant",
               "value": {
@@ -5027,10 +5091,66 @@
               "name": "sticky",
               "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "exit-icon-label", "value": { "type": "string" } },
+            {
+              "name": "status-icon-label",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "subtitle",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The subtitle content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "id",
+                "description": "Unique identifier for the toast.",
+                "type": "string"
+              },
+              {
+                "name": "variant",
+                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'"
+              },
+              { "name": "dismissible", "type": "boolean" },
+              { "name": "sticky", "type": "boolean" },
+              { "name": "exitIconLabel", "type": "string" },
+              { "name": "statusIconLabel", "type": "string" },
+              { "name": "title", "type": "string" },
+              { "name": "subtitle", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "ngc-toast",
+          "description": "\n---\n\n\n### **Events:**\n - **dismiss**\n\n### **Slots:**\n - _default_ - The content within the toast",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "exit-icon-label",
+              "name": "id",
+              "description": "Unique identifier for the toast.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "dismissible",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "sticky",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "exit-icon-label", "value": { "type": "string" } },
             {
               "name": "status-icon-label",
               "value": { "type": "string", "default": "''" }
@@ -5052,6 +5172,11 @@
               { "name": "variantClass" },
               { "name": "iconMarkup" },
               { "name": "dismissibleMarkup" },
+              {
+                "name": "id",
+                "description": "Unique identifier for the toast.",
+                "type": "string"
+              },
               {
                 "name": "variant",
                 "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'"
@@ -5066,6 +5191,58 @@
             "events": [{ "name": "dismiss", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "ngc-toast-container",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "toasts",
+              "value": { "type": "NJC_TOAST_OPTIONS[]", "default": "[]" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "toasts", "type": "NJC_TOAST_OPTIONS[]" }],
+            "events": []
+          }
+        },
+        {
+          "name": "ngc-toaster",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "position",
+              "description": "Fixed position of the toast container on the screen",
+              "value": {
+                "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
+                "default": "'top-right'"
+              }
+            },
+            {
+              "name": "default-toast-options",
+              "description": "Default options for toasts created by this toaster. Can be overridden by the `addToast` method.",
+              "value": { "type": "DefaultToastOptions", "default": "{}" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "position",
+                "description": "Fixed position of the toast container on the screen",
+                "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'"
+              },
+              {
+                "name": "defaultToastOptions",
+                "description": "Default options for toasts created by this toaster. Can be overridden by the `addToast` method.",
+                "type": "DefaultToastOptions"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "nsc-tooltip",
           "description": "\n---\n\n\n### **Methods:**\n - **assignPosition()** - Override this function to use floating UI autoUpdate and computePosition",
@@ -5688,110 +5865,6 @@
             ],
             "events": []
           }
-        },
-        {
-          "name": "ngc-toast-subtitle",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The subtitle content",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "value": {
-                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'",
-                "default": "'info'"
-              }
-            },
-            {
-              "name": "dismissible",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "sticky",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "exit-icon-label",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "status-icon-label",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "title", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "subtitle",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The subtitle content" }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'"
-              },
-              { "name": "dismissible", "type": "boolean" },
-              { "name": "sticky", "type": "boolean" },
-              { "name": "exitIconLabel", "type": "string" },
-              { "name": "statusIconLabel", "type": "string" },
-              { "name": "title", "type": "string" },
-              { "name": "subtitle", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "ngc-toast-title",
-          "description": "\n---\n\n\n### **Slots:**\n - _default_ - The title content",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "value": {
-                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'",
-                "default": "'info'"
-              }
-            },
-            {
-              "name": "dismissible",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "sticky",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "exit-icon-label",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "status-icon-label",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "title", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "subtitle",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The title content" }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "type": "'info' | 'warning' | 'error' | 'success' | 'inverse' | 'AI'"
-              },
-              { "name": "dismissible", "type": "boolean" },
-              { "name": "sticky", "type": "boolean" },
-              { "name": "exitIconLabel", "type": "string" },
-              { "name": "statusIconLabel", "type": "string" },
-              { "name": "title", "type": "string" },
-              { "name": "subtitle", "type": "string" }
-            ],
-            "events": []
-          }
         }
       ]
     },