@ncino/web-components 2.2.0-preview.7 → 3.0.0-preview.1

package/dist/utils/components/slot-placeholder/slot-placeholder.js

@@ -1,5 +1,8 @@
-import{r as a,x as i}from"../../../assets/index-chunk2.js";import{t as n}from"../../../assets/index-chunk3.js";var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,h=(l,e,t,s)=>{for(var r=s>1?void 0:s?v(e,t):e,d=l.length-1,o;d>=0;d--)(o=l[d])&&(r=(s?o(e,t,r):o(r))||r);return s&&r&&f(e,t,r),r};let p=class extends a{render(){return i`
+import{r as d,x as m}from"../../../assets/index-chunk2.js";import{t as n}from"../../../assets/index-chunk3.js";import{n as f}from"../../../assets/index-chunk.js";var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(i,r,o,t)=>{for(var e=t>1?void 0:t?v(r,o):r,s=i.length-1,l;s>=0;s--)(l=i[s])&&(e=(t?l(r,o,e):l(e))||e);return t&&e&&u(r,o,e),e};let a=class extends d{constructor(){super(...arguments),this.slotName=""}render(){return m`
             <div style="border: 1px dashed #C3A786; border-radius: 0.5rem; padding: 1rem">
                 Swap this with your design
+                <div style="font-size: 0.8rem;">
+                    Slot Name : ${this.slotName}
+                </div>
             </div>
-        `}};p=h([n("slot-placeholder")],p);export{p as S};
+        `}};p([f({attribute:"slot-name"})],a.prototype,"slotName",2);a=p([n("slot-placeholder")],a);export{a as S};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ncino/web-components",
     "author": "nCino",
-    "version": "2.2.0-preview.7",
+    "version": "3.0.0-preview.1",
     "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
@@ -59,6 +59,7 @@
         "test:coverage": "vitest --coverage.enabled true"
     },
     "dependencies": {
+        "@deltablot/dropzone": "^7.2.0",
         "@floating-ui/dom": "^1.6.13",
         "ckeditor5": "^44.2.1",
         "libphonenumber-js": "^1.11.20",

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": "2.2.0-preview.6",
+  "version": "2.2.0-preview.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -18,7 +18,15 @@
               "value": { "type": "string", "default": "''" }
             },
             { "name": "width", "value": { "type": "string | undefined" } },
-            { "name": "height", "value": { "type": "string | undefined" } }
+            { "name": "height", "value": { "type": "string | undefined" } },
+            {
+              "name": "background",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "data-testid",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
           ],
           "events": [],
           "js": {
@@ -31,7 +39,12 @@
               },
               { "name": "width", "type": "string | undefined" },
               { "name": "height", "type": "string | undefined" },
-              { "name": "_svg", "type": "SVGElement | null | undefined" }
+              { "name": "background", "type": "boolean" },
+              { "name": "_svg", "type": "SVGElement | null | undefined" },
+              { "name": "dataTestid", "type": "string | undefined" },
+              { "name": "labelDataTestid" },
+              { "name": "helpTextDataTestid" },
+              { "name": "errorMessageDataTestid" }
             ],
             "events": []
           }
@@ -2060,6 +2073,10 @@
               "name": "aria-labelledby",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "aria-describedby",
+              "value": { "type": "string | undefined" }
+            },
             { "name": "title", "value": { "type": "string", "default": "''" } },
             {
               "name": "faux-focus",
@@ -2081,6 +2098,7 @@
               { "name": "selectable", "type": "boolean" },
               { "name": "multiselect", "type": "boolean" },
               { "name": "ariaLabelledBy", "type": "string" },
+              { "name": "ariaDescribedby", "type": "string | undefined" },
               { "name": "title", "type": "string" },
               { "name": "fauxFocus", "type": "boolean" },
               { "name": "_selectedListItem", "type": "null" },
@@ -2097,9 +2115,143 @@
           }
         },
         {
-          "name": "ngc-input-dropdown",
+          "name": "nsc-icon",
           "description": "\n---\n",
           "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "type",
+              "value": {
+                "type": "'standard' | 'utility' | 'doctype' | 'action' | 'custom'",
+                "default": "'utility'"
+              }
+            },
+            {
+              "name": "size",
+              "value": {
+                "type": "'xx-small' | 'x-small' | 'small' | 'large'",
+                "default": "'small'"
+              }
+            },
+            {
+              "name": "icon-title",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'success' | 'warning' | 'error' | 'light' | 'bare'",
+                "default": "'bare'"
+              }
+            },
+            {
+              "name": "svg-classes",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "fill", "value": { "type": "string", "default": "''" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "iconPath" },
+              { "name": "iconSize" },
+              { "name": "iconVariant" },
+              { "name": "name", "type": "string | null" },
+              {
+                "name": "type",
+                "type": "'standard' | 'utility' | 'doctype' | 'action' | 'custom'"
+              },
+              {
+                "name": "size",
+                "type": "'xx-small' | 'x-small' | 'small' | 'large'"
+              },
+              { "name": "iconTitle", "type": "string | null" },
+              {
+                "name": "variant",
+                "type": "'success' | 'warning' | 'error' | 'light' | 'bare'"
+              },
+              { "name": "svgClasses", "type": "string" },
+              { "name": "fill", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "ngc-icon-button",
+          "description": "\n---\n\n\n### **Events:**\n - **click**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "value": {
+                "type": " | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
+                "default": "'small'"
+              }
+            },
+            {
+              "name": "aria-label",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading-aria-label",
+              "value": { "type": "string", "default": "'Loading'" }
+            },
+            {
+              "name": "icon-name",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "skeleton",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "data-testid",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "events": [{ "name": "click", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "buttonAriaLabel" },
+              { "name": "sizeClass" },
+              { "name": "loadingClass" },
+              { "name": "pxSize" },
+              { "name": "skeletonMarkup" },
+              { "name": "loadingMarkup" },
+              {
+                "name": "size",
+                "type": " | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'"
+              },
+              { "name": "ariaLabel", "type": "string" },
+              { "name": "loadingAriaLabel", "type": "string" },
+              { "name": "iconName", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "loading", "type": "boolean" },
+              { "name": "skeleton", "type": "boolean" },
+              { "name": "dataTestid", "type": "string | undefined" },
+              { "name": "labelDataTestid" },
+              { "name": "helpTextDataTestid" },
+              { "name": "errorMessageDataTestid" }
+            ],
+            "events": [{ "name": "click", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "ngc-input-dropdown",
+          "description": "\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
           "attributes": [
             {
               "name": "options",
@@ -2119,6 +2271,10 @@
               "name": "value-displayed",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "max-autocomplete-results",
+              "value": { "type": "number | undefined", "default": "250" }
+            },
             { "name": "id", "value": { "type": "string", "default": "''" } },
             {
               "name": "required",
@@ -2170,7 +2326,7 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
-          "events": [],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
               { "name": "options", "type": "NgcDropdownType[]" },
@@ -2179,22 +2335,33 @@
               { "name": "countryCode", "type": "string | undefined" },
               { "name": "listWidth", "type": "string | undefined" },
               { "name": "valueDisplayed", "type": "boolean" },
+              {
+                "name": "maxAutocompleteResults",
+                "type": "number | undefined"
+              },
               { "name": "_cleanup", "type": "(() => void) | undefined" },
               { "name": "_expanded", "type": "boolean" },
               { "name": "_searchValue", "type": "string" },
               { "name": "listboxRef", "type": "Ref<HTMLDivElement>" },
               { "name": "listRef", "type": "Ref<HTMLElement>" },
               { "name": "inputRef", "type": "Ref<HTMLInputElement>" },
+              { "name": "noResultsMessage", "type": "string" },
               { "name": "fauxInputMarkup" },
               { "name": "displayedValue" },
               { "name": "showPlaceholder" },
               { "name": "replacedActiveDescendant" },
               { "name": "listboxMarkup" },
+              { "name": "listboxMessageMarkup" },
+              { "name": "resultsExceedMaxMessage" },
               { "name": "displayedOptions" },
+              { "name": "filteredOptions" },
+              { "name": "limitedOptions" },
+              { "name": "resultsExceedMax" },
               { "name": "errorClass" },
               { "name": "disabledClass" },
               { "name": "labelMarkup" },
               { "name": "endIconMarkup" },
+              { "name": "clearIconButtonMarkup" },
               { "name": "controlRef", "type": "Ref<HTMLDivElement>" },
               { "name": "shouldHaveStartMarkup" },
               { "name": "shouldHaveEndMarkup" },
@@ -2220,7 +2387,7 @@
               { "name": "helpTextDataTestid" },
               { "name": "errorMessageDataTestid" }
             ],
-            "events": []
+            "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
         {
@@ -2318,137 +2485,147 @@
           }
         },
         {
-          "name": "nsc-icon",
+          "name": "ngc-file-upload-preview",
           "description": "\n---\n",
           "doc-url": "",
           "attributes": [
+            { "name": "value", "value": { "type": "File[]", "default": "[]" } },
             {
-              "name": "name",
-              "value": { "type": "string | null", "default": "null" }
-            },
-            {
-              "name": "type",
-              "value": {
-                "type": "'standard' | 'utility' | 'doctype' | 'action' | 'custom'",
-                "default": "'utility'"
-              }
-            },
-            {
-              "name": "size",
-              "value": {
-                "type": "'xx-small' | 'x-small' | 'small' | 'large'",
-                "default": "'small'"
-              }
-            },
-            {
-              "name": "icon-title",
-              "value": { "type": "string | null", "default": "null" }
-            },
-            {
-              "name": "variant",
-              "value": {
-                "type": "'success' | 'warning' | 'error' | 'light' | 'bare'",
-                "default": "'bare'"
-              }
-            },
-            {
-              "name": "svg-classes",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "fill", "value": { "type": "string", "default": "''" } }
+              "name": "data-testid",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "iconPath" },
-              { "name": "iconSize" },
-              { "name": "iconVariant" },
-              { "name": "name", "type": "string | null" },
-              {
-                "name": "type",
-                "type": "'standard' | 'utility' | 'doctype' | 'action' | 'custom'"
-              },
-              {
-                "name": "size",
-                "type": "'xx-small' | 'x-small' | 'small' | 'large'"
-              },
-              { "name": "iconTitle", "type": "string | null" },
-              {
-                "name": "variant",
-                "type": "'success' | 'warning' | 'error' | 'light' | 'bare'"
-              },
-              { "name": "svgClasses", "type": "string" },
-              { "name": "fill", "type": "string" }
+              { "name": "value", "type": "File[]" },
+              { "name": "contentText" },
+              { "name": "dataTestid", "type": "string | undefined" },
+              { "name": "labelDataTestid" },
+              { "name": "helpTextDataTestid" },
+              { "name": "errorMessageDataTestid" }
             ],
             "events": []
           }
         },
         {
-          "name": "ngc-icon-button",
-          "description": "\n---\n\n\n### **Events:**\n - **click**",
+          "name": "ngc-input-file",
+          "description": "\n---\n\n\n### **Events:**\n - **change**",
           "doc-url": "",
           "attributes": [
             {
-              "name": "size",
+              "name": "value",
               "value": {
-                "type": " | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-                "default": "'small'"
+                "type": "string | number | undefined | null",
+                "default": "[]"
               }
             },
             {
-              "name": "aria-label",
-              "value": { "type": "string", "default": "''" }
+              "name": "accept",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "loading-aria-label",
-              "value": { "type": "string", "default": "'Loading'" }
+              "name": "state",
+              "value": { "type": "string", "default": "'default'" }
             },
             {
-              "name": "icon-name",
-              "value": { "type": "string", "default": "''" }
+              "name": "size",
+              "value": { "type": "string", "default": "'default'" }
             },
+            { "name": "id", "value": { "type": "string", "default": "''" } },
             {
-              "name": "disabled",
+              "name": "required",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "loading",
+              "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
             {
-              "name": "skeleton",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "aria-description",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "error-text",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "type",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            {
+              "name": "start-icon",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "end-icon",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max-length",
+              "value": { "type": "string", "default": "undefined" }
             },
             {
               "name": "data-testid",
               "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
-          "events": [{ "name": "click", "type": "CustomEvent" }],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
-              { "name": "buttonAriaLabel" },
-              { "name": "sizeClass" },
-              { "name": "loadingClass" },
-              { "name": "pxSize" },
-              { "name": "skeletonMarkup" },
-              { "name": "loadingMarkup" },
+              { "name": "value", "type": "string | number | undefined | null" },
+              { "name": "accept", "type": "string | undefined" },
+              { "name": "state", "type": "string" },
+              { "name": "size", "type": "string" },
+              { "name": "dropzoneRef", "type": "Ref<HTMLDivElement>" },
               {
-                "name": "size",
-                "type": " | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'"
+                "name": "hiddenInputContainerRef",
+                "type": "Ref<HTMLDivElement>"
               },
-              { "name": "ariaLabel", "type": "string" },
-              { "name": "loadingAriaLabel", "type": "string" },
-              { "name": "iconName", "type": "string" },
+              { "name": "previewRef", "type": "Ref<NgcFileUploadPreview>" },
+              { "name": "_loadedDropzone", "type": "boolean" },
+              { "name": "_uploadFailed", "type": "boolean" },
+              { "name": "sizeClass" },
+              { "name": "errorClass" },
+              { "name": "errorTextMarkup" },
+              { "name": "hasError" },
+              { "name": "displayedAcceptsString" },
+              { "name": "inputElement" },
+              { "name": "controlRef", "type": "Ref<HTMLDivElement>" },
+              { "name": "shouldHaveStartMarkup" },
+              { "name": "shouldHaveEndMarkup" },
+              { "name": "startIconMarkup" },
+              { "name": "endIconMarkup" },
+              { "name": "labelMarkup" },
+              { "name": "helpTextMarkup" },
+              { "name": "bottomText" },
+              { "name": "id", "type": "string" },
+              { "name": "required", "type": "boolean" },
               { "name": "disabled", "type": "boolean" },
-              { "name": "loading", "type": "boolean" },
-              { "name": "skeleton", "type": "boolean" },
+              { "name": "label", "type": "string" },
+              { "name": "ariaDescription", "type": "string | null" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "errorText", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "type", "type": "string" },
+              { "name": "startIcon", "type": "string" },
+              { "name": "endIcon", "type": "string" },
+              { "name": "maxLength", "type": "string" },
               { "name": "dataTestid", "type": "string | undefined" },
               { "name": "labelDataTestid" },
               { "name": "helpTextDataTestid" },
               { "name": "errorMessageDataTestid" }
             ],
-            "events": [{ "name": "click", "type": "CustomEvent" }]
+            "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
         {
@@ -3811,16 +3988,24 @@
           "js": { "properties": [], "events": [] }
         },
         {
-          "name": "ngc-illustration-list",
-          "description": "An element that renders all of the illustrations in the illustration registry.\nThis component is not distributed as part of the library, but is useful for\ndevelopment and testing.\n---\n",
+          "name": "slot-placeholder",
+          "description": "\n---\n",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "slot-name",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [{ "name": "slotName", "type": "string" }],
+            "events": []
+          }
         },
         {
-          "name": "slot-placeholder",
-          "description": "\n---\n",
+          "name": "ngc-illustration-list",
+          "description": "An element that renders all of the illustrations in the illustration registry.\nThis component is not distributed as part of the library, but is useful for\ndevelopment and testing.\n---\n",
           "doc-url": "",
           "attributes": [],
           "events": [],