@ncino/web-components 7.0.0-preview.4 → 7.0.0-preview.5

package/dist/components/input/gator/input-phone/input-phone.gator.js

@@ -1,17 +1,16 @@
-import{customElement as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{state as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/state.js";import{NgcInputBase as m}from"../../base/input-base.gator.js";import{html as s}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import"../dropdown/input-dropdown.gator.js";import"../input-text/input-text.gator.js";import"../input-label/input-label.gator.js";import b from"../../../../packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js";import{createRef as p,ref as d}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{parsePhoneNumber as v}from"../../../../node_modules/.pnpm/libphonenumber-js@1.12.9/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";import{unsafeCSS as f}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var C=Object.defineProperty,g=Object.getOwnPropertyDescriptor,y=Object.getPrototypeOf,$=Reflect.get,u=(e,t,r,i)=>{for(var o=i>1?void 0:i?g(t,r):t,a=e.length-1,l;a>=0;a--)(l=e[a])&&(o=(i?l(t,r,o):l(o))||o);return i&&o&&C(t,r,o),o},P=(e,t,r)=>$(y(e),r,t);let n=class extends m{constructor(){super(...arguments),this.inputContainer=p(),this.dropdownContainer=p()}render(){return s`
+import{customElement as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{state as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/state.js";import{NgcInputBase as m}from"../../base/input-base.gator.js";import{html as s}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import"../dropdown/input-dropdown.gator.js";import"../input-text/input-text.gator.js";import"../input-label/input-label.gator.js";import v from"../../../../packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js";import{createRef as p,ref as d}from"../../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{parsePhoneNumber as b}from"../../../../node_modules/.pnpm/libphonenumber-js@1.12.9/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";import{unsafeCSS as f}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var g=Object.defineProperty,C=Object.getOwnPropertyDescriptor,y=Object.getPrototypeOf,$=Reflect.get,u=(e,t,r,i)=>{for(var n=i>1?void 0:i?C(t,r):t,a=e.length-1,l;a>=0;a--)(l=e[a])&&(n=(i?l(t,r,n):l(n))||n);return i&&n&&g(t,r,n),n},P=(e,t,r)=>$(y(e),r,t);let o=class extends m{constructor(){super(...arguments),this.inputContainer=p(),this.dropdownContainer=p()}render(){return s`
             <div class="gator-form-element">
                 ${this.label?this.labelMarkup:null}
                 <div class="gator-phone-input-container" ${d(this.inputContainer)}>
                     <div class="gator-phone-input-country-container">
                         <ngc-input-dropdown
                             ${d(this.dropdownContainer)}
-                            .value="${this.countryCodeValue}"
+                            value="${this.countryCodeValue}"
                             id="country-${this.id}"
                             ?disabled="${this.disabled}"
                             autocomplete
                             data-type="phoneCodes"
-                            @selected="${this.handleSelected}"
-                            label="${this.label} Country Code"
+                            @change="${this.handleSelected}"
                             value-displayed
                         >
                             ${this.slotLabelMarkup}
@@ -24,7 +23,6 @@ import{customElement as c}from"../../../../node_modules/.pnpm/@lit_reactive-elem
                             type="text"
                             id="phone-${this.id}"
                             @change="${this.handlePhoneInput}"
-                            label="${this.label} Number"
                         >
                             ${this.slotLabelMarkup}
                         </ngc-input-text>
@@ -32,12 +30,12 @@ import{customElement as c}from"../../../../node_modules/.pnpm/@lit_reactive-elem
                 </div>
                 ${this.bottomText}
             </div>
-        `}updated(){this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}handleSelected(e){this.countryCodeValue=e.detail.value}handlePhoneInput(e){e.preventDefault(),e.stopPropagation();const t=v(e.detail.value,this.countryCodeValue);if(t){!this.countryCodeValue&&t.countryCallingCode&&(this.countryCodeValue="+"+t.countryCallingCode),this.phoneNumberValue=t.nationalNumber,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value,countryCode:t.countryCallingCode,country:t.country,phoneNumber:t.nationalNumber,formattedPhoneNumber:t.formatInternational()}}));return}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value}}))}get slotLabelMarkup(){return s`
+        `}updated(){this.dropdownContainer.value&&this.inputContainer.value&&(this.dropdownContainer.value.listWidth=this.inputContainer.value?.offsetWidth.toString())}handleSelected(e){this.countryCodeValue=e.detail.value}handlePhoneInput(e){e.preventDefault(),e.stopPropagation();const t=b(e.detail.value,this.countryCodeValue);if(t){!this.countryCodeValue&&t.countryCallingCode&&(this.countryCodeValue="+"+t.countryCallingCode),this.phoneNumberValue=t.nationalNumber,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value,countryCode:t.countryCallingCode,country:t.country,phoneNumber:t.nationalNumber,formattedPhoneNumber:t.formatInternational()}}));return}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e.detail.value}}))}get slotLabelMarkup(){return s`
             <ngc-input-label
                 slot="label"
                 hide-label
-                .for="country-${this.id}"
+                for="country-${this.id}"
                 .required="${this.required}"
             >
                 ${this.label}
-            </ngc-input-label>`}};n.styles=[...P(n,n,"styles"),f(b)];u([h()],n.prototype,"countryCodeValue",2);u([h()],n.prototype,"phoneNumberValue",2);n=u([c("ngc-input-phone")],n);export{n as NgcInputPhone};
+            </ngc-input-label>`}};o.styles=[...P(o,o,"styles"),f(v)];u([h()],o.prototype,"countryCodeValue",2);u([h()],o.prototype,"phoneNumberValue",2);o=u([c("ngc-input-phone")],o);export{o as NgcInputPhone};

package/dist/components/panel/gator/panel.storybook-test.js

@@ -1 +1 @@
-import{within as h,waitFor as d,expect as e,userEvent as s}from"../../../node_modules/.pnpm/storybook@9.1.2_@testing-library_dom@10.4.0_msw@2.7.3_@types_node@24.3.0_typescript@5.8_573854de366b5ba3e2ab3da4bce0caa8/node_modules/storybook/dist/test/index.js";import{getShadowRootElementByDataTestId as p}from"../../../utils/vitest-utils.js";const r=async({canvasElement:w,step:t})=>{const i=h(w);let l,o,c,n;await t("Scenario: Nested Panel Functionality",async()=>{await t("GIVEN the Story renders with the first panel open and the second panel closed",async()=>{l=await i.findByTestId("first-panel"),o=p(l,"first-panel-panel"),c=await i.findByTestId("second-panel"),n=p(c,"second-panel-panel"),await d(()=>e(o).toBeVisible()),e(n).not.toBeVisible()}),await t("WHEN I click on the list item with nested content to open the second panel",async()=>{i.getByTestId("list-item-with-nested").click()}),await t("THEN the second panel is opened relative to the first panel",async()=>{await d(()=>e(n).toBeVisible());const a=o?.offsetWidth;e(window.getComputedStyle(n).left).toBe(`${a}px`)}),await t("WHEN I click the collapse button in the first panel",async()=>{const a=i.getByText("Collapse");await s.click(a)}),await t("THEN I expect the second panel to have moved with the first panel",async()=>{e(window.getComputedStyle(o).width).toBe("56px"),e(window.getComputedStyle(n).left).toBe(`${o.offsetWidth}px`)}),await t("WHEN I click the expand button in the first panel",async()=>{const a=i.getByTestId("expand-button");await s.click(a)}),await t("THEN I expect the first panel to expand and the second panel to move with it",async()=>{e(window.getComputedStyle(o).width).toBe("280px"),e(window.getComputedStyle(n).left).toBe(`${o.offsetWidth}px`)}),await t("WHEN I click on the close button in the second panel",async()=>{const a=i.getByTestId("close-button");await s.click(a)}),await t("THEN I expect the second panel to be closed",async()=>{n.addEventListener("animationend",()=>{e(n).not.toBeVisible()},{once:!0})})})};export{r as nestedPanelTests};
+import{within as h,waitFor as d,expect as e,userEvent as s}from"../../../node_modules/.pnpm/storybook@9.1.2_@testing-library_dom@10.4.0_msw@2.7.3_@types_node@24.3.0_typescript@5.8_413f1e59e14f568767561920c5a87a5f/node_modules/storybook/dist/test/index.js";import{getShadowRootElementByDataTestId as p}from"../../../utils/vitest-utils.js";const r=async({canvasElement:w,step:t})=>{const i=h(w);let l,o,c,n;await t("Scenario: Nested Panel Functionality",async()=>{await t("GIVEN the Story renders with the first panel open and the second panel closed",async()=>{l=await i.findByTestId("first-panel"),o=p(l,"first-panel-panel"),c=await i.findByTestId("second-panel"),n=p(c,"second-panel-panel"),await d(()=>e(o).toBeVisible()),e(n).not.toBeVisible()}),await t("WHEN I click on the list item with nested content to open the second panel",async()=>{i.getByTestId("list-item-with-nested").click()}),await t("THEN the second panel is opened relative to the first panel",async()=>{await d(()=>e(n).toBeVisible());const a=o?.offsetWidth;e(window.getComputedStyle(n).left).toBe(`${a}px`)}),await t("WHEN I click the collapse button in the first panel",async()=>{const a=i.getByText("Collapse");await s.click(a)}),await t("THEN I expect the second panel to have moved with the first panel",async()=>{e(window.getComputedStyle(o).width).toBe("56px"),e(window.getComputedStyle(n).left).toBe(`${o.offsetWidth}px`)}),await t("WHEN I click the expand button in the first panel",async()=>{const a=i.getByTestId("expand-button");await s.click(a)}),await t("THEN I expect the first panel to expand and the second panel to move with it",async()=>{e(window.getComputedStyle(o).width).toBe("280px"),e(window.getComputedStyle(n).left).toBe(`${o.offsetWidth}px`)}),await t("WHEN I click on the close button in the second panel",async()=>{const a=i.getByTestId("close-button");await s.click(a)}),await t("THEN I expect the second panel to be closed",async()=>{n.addEventListener("animationend",()=>{e(n).not.toBeVisible()},{once:!0})})})};export{r as nestedPanelTests};

package/dist/packages/web-components/src/components/input/gator/input-phone/input-phone.gator.scss.js

@@ -1 +1 @@
-const r=".gator-phone-input-container{display:flex}.gator-phone-input-country-container{width:25%}.gator-phone-input-number-container{width:75%}ngc-input-dropdown{--ngc-input-border-radius: var(--radius-sm, .125rem) 0 0 var(--radius-sm, .125rem)}ngc-input-text{--ngc-input-border-radius: 0 var(--radius-sm, .125rem) var(--radius-sm, .125rem) 0}";export{r as default};
+const r=".gator-phone-input-container{display:flex}.gator-phone-input-country-container{width:25%}.gator-phone-input-number-container{width:75%}ngc-input-dropdown{--ngc-input-border-radius: var(--radius-sm, .125rem) 0 0 var(--radius-sm, .125rem)}ngc-input-text{--ngc-input-height: 24px;--ngc-input-border-radius: 0 var(--radius-sm, .125rem) var(--radius-sm, .125rem) 0}";export{r as default};

package/dist/packages/web-components/src/components/input/input.gator.scss.js

@@ -1 +1 @@
-const r='input,textarea{border:none;background-color:transparent}input:focus,textarea:focus{outline:none}input[type=time]::-webkit-calendar-picker-indicator{background:none;display:none}.gator-form-element-control:focus-within:not(.gator-disabled){outline:2px solid var(--ngc-input-outline-color-focused, var(--color-stroke-brand, #11395B))!important}.gator-form-element{display:block;margin-bottom:var(--ngc-input-margin-bottom, 1rem);max-width:var(--ngc-input-max-width, 200px)}.gator-form-element-control{padding:var(--ngc-input-padding);display:flex;flex-direction:column}.gator-input,.gator-faux-input{display:flex;width:100%;height:100%;font-size:var(--ngc-input-font-size, 1.0625rem);font-family:var(--text-family-body, "Open Sans", sans-serif);padding:0;line-height:24px}.gator-form-element-control{margin:.5rem 0;border:1px solid var(--ngc-input-border-color, var(--color-stroke-primary, #6D6D6D));border-radius:var(--ngc-input-border-radius, 2px);flex:1;background-color:var(--ngc-input-background-color, var(--color-surface-primary, #FFFFFF))}.gator-form-element-control:hover:not(.gator-disabled){border:1px solid var(--ngc-input-border-color-hovered, var(--color-stroke-interactive, #0E304D));outline:none}.gator-readonly{border-color:var(--color-stroke-secondary, #BFBFBF);background:var(--color-surface-tertiary, #F2F2F2);color:var(--text-color-primary-base, #1F1F1F)}.gator-has-error:not(.gator-readonly){border-color:var(--ngc-input-error-border, var(--color-stroke-error, #AA330E))!important}.gator-disabled{background:var(--color-surface-secondary, #F7F7F7);border:none;cursor:not-allowed;--ngc-icon-color: var(--color-stroke-secondary, #BFBFBF)}.gator-disabled input,.gator-disabled textarea{cursor:not-allowed}.gator-form-element-control-icon-right{display:flex;align-items:center}.gator-input-container{display:flex;align-items:center;position:relative;width:100%}.gator-input-start,.gator-input-end{display:flex;align-items:center;font-family:var(--text-family-body),sans-serif;font-size:var(--text-size-body-1)}.gator-input-start{margin-right:.5rem}.gator-cursor-pointer{cursor:pointer}';export{r as default};
+const r='input,textarea{border:none;background-color:transparent}input:focus,textarea:focus{outline:none}input[type=time]::-webkit-calendar-picker-indicator{background:none;display:none}.gator-form-element-control:focus-within:not(.gator-disabled){outline:2px solid var(--ngc-input-outline-color-focused, var(--color-stroke-brand, #11395B))!important}.gator-form-element{display:block;margin-bottom:var(--ngc-input-margin-bottom, 1rem);max-width:var(--ngc-input-max-width, 200px)}.gator-form-element-control{padding:var(--ngc-input-padding);display:flex;flex-direction:column;height:var(--ngc-input-height, unset)}.gator-input,.gator-faux-input{display:flex;width:100%;height:100%;font-size:var(--ngc-input-font-size, 1.0625rem);font-family:var(--text-family-body, "Open Sans", sans-serif);padding:0;line-height:24px}.gator-form-element-control{margin:.5rem 0;border:1px solid var(--ngc-input-border-color, var(--color-stroke-primary, #6D6D6D));border-radius:var(--ngc-input-border-radius, 2px);flex:1;background-color:var(--ngc-input-background-color, var(--color-surface-primary, #FFFFFF))}.gator-form-element-control:hover:not(.gator-disabled){border:1px solid var(--ngc-input-border-color-hovered, var(--color-stroke-interactive, #0E304D));outline:none}.gator-readonly{border-color:var(--color-stroke-secondary, #BFBFBF);background:var(--color-surface-tertiary, #F2F2F2);color:var(--text-color-primary-base, #1F1F1F)}.gator-has-error:not(.gator-readonly){border-color:var(--ngc-input-error-border, var(--color-stroke-error, #AA330E))!important}.gator-disabled{background:var(--color-surface-secondary, #F7F7F7);border:none;cursor:not-allowed;--ngc-icon-color: var(--color-stroke-secondary, #BFBFBF)}.gator-disabled input,.gator-disabled textarea{cursor:not-allowed}.gator-form-element-control-icon-right{display:flex;align-items:center}.gator-input-container{display:flex;align-items:center;position:relative;width:100%}.gator-input-start,.gator-input-end{display:flex;align-items:center;font-family:var(--text-family-body),sans-serif;font-size:var(--text-size-body-1)}.gator-input-start{margin-right:.5rem}.gator-cursor-pointer{cursor:pointer}';export{r as default};

package/dist/packages/web-components/src/components/input/input.gator.tokens.scss.js

@@ -1 +1 @@
-const r=":root,:host{--ngc-input-error-border: var(--color-stroke-error, #AA330E);--ngc-input-border-color: var(--color-stroke-primary, #6D6D6D);--ngc-input-border-color-hovered: var(--color-stroke-interactive, #0E304D);--ngc-input-outline-color-focused: var(--color-stroke-brand, #11395B);--ngc-input-background-color: var(--color-surface-primary, #FFFFFF);--ngc-input-min-width: 200px;--ngc-input-padding: var(--spacing-3, .75rem) var(--spacing-4, 1rem);--ngc-input-border-radius: var(--radius-sm, .125rem);--ngc-input-max-width: 100%;--ngc-input-search-max-width: 15.75rem;--ngc-input-margin-bottom: 1rem;--ngc-input-font-size: 17px}";export{r as default};
+const r=":root,:host{--ngc-input-error-border: var(--color-stroke-error, #AA330E);--ngc-input-border-color: var(--color-stroke-primary, #6D6D6D);--ngc-input-border-color-hovered: var(--color-stroke-interactive, #0E304D);--ngc-input-outline-color-focused: var(--color-stroke-brand, #11395B);--ngc-input-background-color: var(--color-surface-primary, #FFFFFF);--ngc-input-min-width: 200px;--ngc-input-padding: var(--spacing-3, .75rem) var(--spacing-4, 1rem);--ngc-input-border-radius: var(--radius-sm, .125rem);--ngc-input-max-width: 100%;--ngc-input-search-max-width: 15.75rem;--ngc-input-margin-bottom: 1rem;--ngc-input-height: unset;--ngc-input-font-size: 17px}";export{r as default};

package/dist/utils/vitest-a11y-utils.js

@@ -1 +1 @@
-import{page as s}from"../node_modules/.pnpm/@vitest_browser@3.2.4_msw@2.7.3_@types_node@24.3.0_typescript@5.8.3__playwright@1.55.0__558558d730596f7c5e09b21ff26a3e74/node_modules/@vitest/browser/context.js";import n from"../_virtual/axe.js";import{a as o}from"../node_modules/.pnpm/vitest@3.2.4_@types_debug@4.1.12_@types_node@24.3.0_@vitest_browser@3.2.4_@vitest_ui@3._f0774390203a57f267156838cb4cb2c5/node_modules/vitest/dist/chunks/vi.bdSIJ99Y.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function h(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function g(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{g as expectComponentFocusStyle,h as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};
+import{page as s}from"../node_modules/.pnpm/@vitest_browser@3.2.4_msw@2.7.3_@types_node@24.3.0_typescript@5.8.3__playwright@1.55.0__250fccbe5ed788e0688ecbf1c4e5e907/node_modules/@vitest/browser/context.js";import n from"../_virtual/axe.js";import{a as o}from"../node_modules/.pnpm/vitest@3.2.4_@types_debug@4.1.12_@types_node@24.3.0_@vitest_browser@3.2.4_@vitest_ui@3._ad1109fdae535cd946c9feed44178247/node_modules/vitest/dist/chunks/vi.bdSIJ99Y.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function h(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function g(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{g as expectComponentFocusStyle,h as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "7.0.0-preview.4",
+  "version": "7.0.0-preview.5",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -96,7 +96,7 @@
     "@storybook/addon-links": "^9.1.1",
     "@storybook/web-components-vite": "^9.1.1",
     "@types/react": "^19.1.8",
-    "@typescript-eslint/parser": "^8.40.0",
+    "@typescript-eslint/parser": "^8.41.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "3.2.4",
@@ -119,7 +119,7 @@
     "playwright": "1.55.0",
     "postcss": "^8.5.6",
     "rimraf": "^6.0.1",
-    "sass": "1.90.0",
+    "sass": "1.91.0",
     "storybook": "^9.1.1",
     "storybook-addon-code-editor": "^5.0.0",
     "storybook-design-token": "^4.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": "7.0.0-preview.3",
+  "version": "7.0.0-preview.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {