@ncino/web-components 9.0.0 → 9.0.1-preview.2

package/dist/components/button/gator/button.gator.js

@@ -15,7 +15,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
                     <slot name="end-icon">${this.endIconMarkup}</slot>
                 </div>
             </button>
-        `}get startIconMarkup(){return this.startIcon?e`<ngc-icon name="${this.startIcon}"></ngc-icon>`:l}get endIconMarkup(){return this.endIcon?e`<ngc-icon name="${this.endIcon}"></ngc-icon>`:l}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:l}get variantClass(){return this.variant?`gator-button_${this.variant}`:null}get sizeClass(){return this.size?`gator-button_${this.size}`:null}get loadingClass(){return this.loading?"gator-button_loading":null}get skeletonMarkup(){let t,i;const o=this.variant==="base";switch(this.size){case"small":t=o?44:67,i=28;break;case"medium":t=o?50:81,i=36;break;case"xlarge":t=o?57:137,i=56;break;case"large":default:t=o?57:98,i=48;break}const r=getComputedStyle(this);return r.getPropertyValue("--ngc-button-width")&&(t=Number(r.getPropertyValue("--ngc-button-width").trim())),r.getPropertyValue("--ngc-button-height")&&(i=Number(r.getPropertyValue("--ngc-button-height").trim())),e`
+        `}get startIconMarkup(){return this.startIcon?e`<ngc-icon name="${this.startIcon}"></ngc-icon>`:l}get endIconMarkup(){return this.endIcon?e`<ngc-icon name="${this.endIcon}"></ngc-icon>`:l}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:l}get variantClass(){return this.variant?`gator-button_${this.variant}`:null}get sizeClass(){return this.size?`gator-button_${this.size}`:null}get loadingClass(){return this.loading?"gator-button_loading":null}get skeletonMarkup(){let t,i;const o=this.variant==="base";switch(this.size){case"small":t=o?44:67,i=28;break;case"medium":t=o?50:81,i=36;break;case"xlarge":t=o?57:137,i=56;break;default:t=o?57:98,i=48;break}const r=getComputedStyle(this);return r.getPropertyValue("--ngc-button-width")&&(t=Number(r.getPropertyValue("--ngc-button-width").trim())),r.getPropertyValue("--ngc-button-height")&&(i=Number(r.getPropertyValue("--ngc-button-height").trim())),e`
             <ngc-skeleton-loader
                 class="gator-button gator-button-skeleton"
                 width="${t}"
@@ -23,7 +23,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
                 radius="2"
                 @click="${this.handleClick}"
             ></ngc-skeleton-loader>
-        `}get loadingMarkup(){let t;switch(this.size){case"large":case"xlarge":t="large";break;case"small":case"medium":default:t="medium";break}return e`
+        `}get loadingMarkup(){let t;switch(this.size){case"large":case"xlarge":t="large";break;default:t="medium";break}return e`
             <div class="gator-button-loader">
                 <ngc-loading-spinner .size="${t}"></ngc-loading-spinner>
             </div>

package/dist/components/fab/gator/fab.gator.js

@@ -8,7 +8,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
             >
                 ${this.loading?this.loadingMarkup:o`<slot @slotchange="${this.handleSlotChange}"></slot>`}
             </button>
-        `}updated(){this.setIconSizes()}handleSlotChange(e){const r=e.target.assignedElements();for(let t of r)t.tagName.toLowerCase()==="ngc-icon"&&(this._iconElement=t,this.setIconSizes())}handleClick(e){e.preventDefault(),e.stopPropagation(),!(this.disabled||this.loading)&&this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0}))}setIconSizes(){this._iconElement&&(this._iconElement.height=this.heightAndWidthForSize,this._iconElement.width=this.heightAndWidthForSize)}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:g}get loadingClass(){return this.loading?"gator-fab_loading":null}get heightAndWidthForSize(){switch(this.size){case"medium":return"24";case"large":return"36";case"xlarge":return"40";case"small":default:return"18"}}get sizeClass(){switch(this.size){case"medium":return"gator-fab_medium";case"large":return"gator-fab_large";case"xlarge":return"gator-fab_xlarge";case"small":default:return"gator-fab_small"}}get loadingMarkup(){let e;switch(this.size){case"small":case"medium":e="medium";break;case"large":e="large";break;case"xlarge":e="xlarge";break;default:e="small";break}return o`
+        `}updated(){this.setIconSizes()}handleSlotChange(e){const r=e.target.assignedElements();for(let t of r)t.tagName.toLowerCase()==="ngc-icon"&&(this._iconElement=t,this.setIconSizes())}handleClick(e){e.preventDefault(),e.stopPropagation(),!(this.disabled||this.loading)&&this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0}))}setIconSizes(){this._iconElement&&(this._iconElement.height=this.heightAndWidthForSize,this._iconElement.width=this.heightAndWidthForSize)}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:g}get loadingClass(){return this.loading?"gator-fab_loading":null}get heightAndWidthForSize(){switch(this.size){case"medium":return"24";case"large":return"36";case"xlarge":return"40";default:return"18"}}get sizeClass(){switch(this.size){case"medium":return"gator-fab_medium";case"large":return"gator-fab_large";case"xlarge":return"gator-fab_xlarge";default:return"gator-fab_small"}}get loadingMarkup(){let e;switch(this.size){case"small":case"medium":e="medium";break;case"large":e="large";break;case"xlarge":e="xlarge";break;default:e="small";break}return o`
             <div
                 class="gator-fab-loader"
                 style="width: ${this.heightAndWidthForSize}px; height: ${this.heightAndWidthForSize}px"

package/dist/components/icon-button/gator/icon-button.gator.js

@@ -13,7 +13,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
                 ${this.skeleton?this.skeletonMarkup:null}
                 ${!this.loading&&!this.skeleton?i`<ngc-icon .name="${this.iconName}"></ngc-icon>`:null}
             </button>
-        `}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:h}get sizeClass(){switch(this.size){case"xsmall":return"gator-icon-button_xsmall";case"medium":return"gator-icon-button_medium";case"large":return"gator-icon-button_large";case"xlarge":return"gator-icon-button_xlarge";case"small":default:return"gator-icon-button_small"}}get loadingClass(){return this.loading?"gator-icon-button_loading":""}get pxSize(){switch(this.size){case"xsmall":case"small":return 24;case"medium":return 32;case"large":case"xlarge":return 48;default:return 24}}get skeletonMarkup(){return i`
+        `}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:h}get sizeClass(){switch(this.size){case"xsmall":return"gator-icon-button_xsmall";case"medium":return"gator-icon-button_medium";case"large":return"gator-icon-button_large";case"xlarge":return"gator-icon-button_xlarge";default:return"gator-icon-button_small"}}get loadingClass(){return this.loading?"gator-icon-button_loading":""}get pxSize(){switch(this.size){case"xsmall":case"small":return 24;case"medium":return 32;case"large":case"xlarge":return 48;default:return 24}}get skeletonMarkup(){return i`
             <ngc-skeleton-loader
                 .width="${this.pxSize}"
                 .height="${this.pxSize}"

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@10.1.4_@testing-library_dom@10.4.1_prettier@3.7.4_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/test/index.js";import{getShadowRootElementByDataTestId as p}from"../../../utils/vitest-utils.js";const f=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{f as nestedPanelTests};
+import{within as h,waitFor as d,expect as e,userEvent as s}from"../../../node_modules/.pnpm/storybook@10.1.10_@testing-library_dom@10.4.1_prettier@3.7.4_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/storybook/dist/test/index.js";import{getShadowRootElementByDataTestId as p}from"../../../utils/vitest-utils.js";const f=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{f as nestedPanelTests};

package/dist/components/progress-stepper/stepper-item/stepper-item.gator.js

@@ -39,4 +39,4 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
                     <slot name="body"></slot>
                 </div>
             </slot>
-        `}get skeletonMarkup(){return d`<span class="stepper-title-skeleton"><ngc-skeleton-loader full-width height="12" rounded></ngc-skeleton-loader></span>`}get classes(){return{"gator-stepper-item":!0,[`gator-stepper-item-${this.variant}`]:!0,"gator-stepper-item_disabled":this.disabled,"gator-stepper-item_skeleton":this.skeleton,"gator-stepper-item_current":this.current}}get icon(){if(this.iconName)return this.iconName;switch(this.variant){case"base":return"circle-filled";case"success":return"check-circle-filled";case"warning":return"warning-filled";case"error":return"restricted-filled";case"ai":return"sparkle-filled";case"incomplete":default:return"circle-dashed"}}get variantLabel(){const i=this.variant||"base";return this.variantAriaLabelOverrides?.[i]||this._defaultVariantAriaLabels[i]}handleStepClicked(){this.disabled||this.dispatchStepClickedEvent()}dispatchStepClickedEvent(){this.dispatchEvent(new CustomEvent("step-clicked",{detail:{stepTitle:this.stepTitle},bubbles:!0,composed:!0}))}};t.styles=[...L(t,t,"styles"),y(f)];e([r({type:String})],t.prototype,"variant",2);e([r({type:Boolean})],t.prototype,"vertical",2);e([r({type:Boolean})],t.prototype,"disabled",2);e([r({type:Boolean})],t.prototype,"skeleton",2);e([r({type:Boolean})],t.prototype,"current",2);e([r({type:String,attribute:"step-title"})],t.prototype,"stepTitle",2);e([r({type:String,attribute:"step-subtitle"})],t.prototype,"stepSubtitle",2);e([r({type:String,attribute:"icon-name"})],t.prototype,"iconName",2);e([r({type:Object})],t.prototype,"variantAriaLabelOverrides",2);e([v()],t.prototype,"_orientation",2);t=e([b("ngc-stepper-item")],t);export{t as NgcStepperItem};
+        `}get skeletonMarkup(){return d`<span class="stepper-title-skeleton"><ngc-skeleton-loader full-width height="12" rounded></ngc-skeleton-loader></span>`}get classes(){return{"gator-stepper-item":!0,[`gator-stepper-item-${this.variant}`]:!0,"gator-stepper-item_disabled":this.disabled,"gator-stepper-item_skeleton":this.skeleton,"gator-stepper-item_current":this.current}}get icon(){if(this.iconName)return this.iconName;switch(this.variant){case"base":return"circle-filled";case"success":return"check-circle-filled";case"warning":return"warning-filled";case"error":return"restricted-filled";case"ai":return"sparkle-filled";default:return"circle-dashed"}}get variantLabel(){const i=this.variant||"base";return this.variantAriaLabelOverrides?.[i]||this._defaultVariantAriaLabels[i]}handleStepClicked(){this.disabled||this.dispatchStepClickedEvent()}dispatchStepClickedEvent(){this.dispatchEvent(new CustomEvent("step-clicked",{detail:{stepTitle:this.stepTitle},bubbles:!0,composed:!0}))}};t.styles=[...L(t,t,"styles"),y(f)];e([r({type:String})],t.prototype,"variant",2);e([r({type:Boolean})],t.prototype,"vertical",2);e([r({type:Boolean})],t.prototype,"disabled",2);e([r({type:Boolean})],t.prototype,"skeleton",2);e([r({type:Boolean})],t.prototype,"current",2);e([r({type:String,attribute:"step-title"})],t.prototype,"stepTitle",2);e([r({type:String,attribute:"step-subtitle"})],t.prototype,"stepSubtitle",2);e([r({type:String,attribute:"icon-name"})],t.prototype,"iconName",2);e([r({type:Object})],t.prototype,"variantAriaLabelOverrides",2);e([v()],t.prototype,"_orientation",2);t=e([b("ngc-stepper-item")],t);export{t as NgcStepperItem};