@ncino/web-components 15.7.0 → 16.1.0

package/dist/components/popover/gator/popover.gator.js

@@ -1,6 +1,6 @@
-import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as a,nothing as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as d}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ref as m}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{customElement as g}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/popover/gator/popover.gator.scss.js";import b from"../../../packages/web-components/src/components/popover/popover.scss.js";import _ from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import y from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoUpdate as P,computePosition as E,autoPlacement as O}from"../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as p}from"../../../consts/key-constants.js";import{msg as k}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{unsafeCSS as l}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var w=Object.getOwnPropertyDescriptor,$=(t,e,i,r)=>{for(var o=r>1?void 0:r?w(e,i):e,s=t.length-1,n;s>=0;s--)(n=t[s])&&(o=n(o)||o);return o};let c=class extends f{render(){return a`
+import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as a,nothing as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as m}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ref as d}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{customElement as g}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/popover/gator/popover.gator.scss.js";import b from"../../../packages/web-components/src/components/popover/popover.scss.js";import _ from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import y from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{autoPlacement as P,autoUpdate as E,computePosition as w}from"../../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as p}from"../../../consts/key-constants.js";import{msg as O}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{unsafeCSS as l}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var k=Object.getOwnPropertyDescriptor,$=(t,e,i,s)=>{for(var o=s>1?void 0:s?k(e,i):e,r=t.length-1,n;r>=0;r--)(n=t[r])&&(o=n(o)||o);return o};let c=class extends f{render(){return a`
             <div
-                ${m(this._popoverRef)}
+                ${d(this._popoverRef)}
                 id="${this.popoverId}"
                 class="gator-popover ${this._nubbinPositionClass} gator-popover-${this.size}"
                 aria-label="${this.title}"
@@ -13,7 +13,7 @@ import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@l
         `}get _closeButtonMarkup(){return a`
             <ngc-icon-button
                 id="gator-popover-close"
-                .ariaLabel="${k("Close")} ${this.title}"
+                .ariaLabel="${O("Close")} ${this.title}"
                 icon-name="exit"
                 size="xsmall"
                 @click="${this.hidePopover}"
@@ -46,4 +46,4 @@ import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@l
                 ${this.errorText?a`<ngc-help-text icon error>${this.errorText}</ngc-help-text>`:u}
                 <slot name="footer"></slot>
             </div>
-        `}get _computedPlacement(){return this.placement||this._placement}get _xPositionOffset(){return this.hideTippet?this.xOffset:this._computedPlacement.includes("left")?-12+this.xOffset:this._computedPlacement.includes("right")?12+this.xOffset:0}get _yPositionOffset(){return this.hideTippet?this.yOffset:this._computedPlacement.includes("top")?-12+this.yOffset:this._computedPlacement.includes("bottom")?12+this.yOffset:0}get _nubbinPositionClass(){return this.hideTippet?"":{"top-start":"gator-popover-nubbin_bottom-start",top:"gator-popover-nubbin_bottom-center","top-end":"gator-popover-nubbin_bottom-end","right-start":"gator-popover-nubbin_left-start",right:"gator-popover-nubbin_left-center","right-end":"gator-popover-nubbin_left-end","bottom-start":"gator-popover-nubbin_top-start",bottom:"gator-popover-nubbin_top-center","bottom-end":"gator-popover-nubbin_top-end","left-start":"gator-popover-nubbin_right-start",left:"gator-popover-nubbin_right-center","left-end":"gator-popover-nubbin_right-end"}[this._computedPlacement]}connectedCallback(){super.connectedCallback(),this.addTrackedEventListener(this.referenceElement,"keydown",t=>{(t.key===p.SPACE||t.key===p.ENTER)&&(t.preventDefault(),t.stopPropagation(),this.showPopover(!0))})}firstUpdated(){super.firstUpdated();const t=this.shadowRoot?.querySelector('slot[name="footer"]'),e=this.shadowRoot?.querySelector(".gator-popover-footer"),i=!!t&&t.assignedNodes().length>0,r=!!this.errorText;e&&(e.style.display=i||r?"flex":"none")}updated(t){super.updated(t),t.has("placement")&&(this._cleanup&&this._cleanup(),this.assignPosition(),this.requestUpdate())}assignPosition(){const t=this.referenceElement;if(!this._popoverRef||!this._popoverRef.value||!t)return;const e={placement:this.placement},i={middleware:[O({allowedPlacements:["top-start","top","top-end","right-start","right","right-end","bottom-start","bottom","bottom-end","left-start","left","left-end"],padding:5})]},o=!!this.placement?e:i;this._cleanup=P(t,this._popoverRef.value,async()=>{if(!this._popoverRef||!this._popoverRef.value||!t)return;const{x:s,y:n,placement:h}=await E(t,this._popoverRef.value,o);this._placement!==h&&(this._placement=h,this.requestUpdate()),this._popoverRef.value&&Object.assign(this._popoverRef.value.style,{left:`${s+this._xPositionOffset}px`,top:`${n+this._yPositionOffset}px`})})}showPopover(t=!1){super.showPopover(t),this.addEventListener("keydown",this._handleKeyDown)}hidePopover(){super.hidePopover(),this.shadowRoot?.querySelector("#gator-popover-close")?.shadowRoot?.firstElementChild?.classList.remove("no-focus-visible")}_handleKeyDown(t){const i=(t.key===p.SPACE||t.key===p.ENTER)&&t.target?.id==="gator-popover-close";if((t.key===p.ESCAPE||i)&&(t.preventDefault(),this.hidePopover(),this.referenceElement.focus()),t.key===p.TAB){const r=this._getKeyboardFocusableElements(),o=this.shadowRoot?.activeElement??document.activeElement,s=r[0],n=r[r.length-1];o?.shadowRoot?.firstElementChild?.classList.remove("no-focus-visible"),t.shiftKey?o===s&&(t.preventDefault(),t.stopPropagation(),n.focus()):o===n&&(t.preventDefault(),t.stopPropagation(),s.focus())}}};c.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0,mode:"open"};c.styles=[l(v),l(b),l(_),l(y)];c=$([g("ngc-popover")],c);export{c as NgcPopover};
+        `}get _computedPlacement(){return this.placement&&!this.autoAlign?this.placement:this._placement}get allowedPlacements(){return this.autoAlign&&this.placement?[`${this.placement}-start`,this.placement,`${this.placement}-end`]:["top-start","top","top-end","right-start","right","right-end","bottom-start","bottom","bottom-end","left-start","left","left-end"]}get _xPositionOffset(){return this.hideTippet?this.xOffset:this._computedPlacement.includes("left")?-12+this.xOffset:this._computedPlacement.includes("right")?12+this.xOffset:0}get _yPositionOffset(){return this.hideTippet?this.yOffset:this._computedPlacement.includes("top")?-12+this.yOffset:this._computedPlacement.includes("bottom")?12+this.yOffset:0}get _nubbinPositionClass(){return this.hideTippet?"":{"top-start":"gator-popover-nubbin_bottom-start",top:"gator-popover-nubbin_bottom-center","top-end":"gator-popover-nubbin_bottom-end","right-start":"gator-popover-nubbin_left-start",right:"gator-popover-nubbin_left-center","right-end":"gator-popover-nubbin_left-end","bottom-start":"gator-popover-nubbin_top-start",bottom:"gator-popover-nubbin_top-center","bottom-end":"gator-popover-nubbin_top-end","left-start":"gator-popover-nubbin_right-start",left:"gator-popover-nubbin_right-center","left-end":"gator-popover-nubbin_right-end"}[this._computedPlacement]}connectedCallback(){super.connectedCallback(),this.addTrackedEventListener(this.referenceElement,"keydown",t=>{(t.key===p.SPACE||t.key===p.ENTER)&&(t.preventDefault(),t.stopPropagation(),this.showPopover(!0))})}firstUpdated(){super.firstUpdated();const t=this.shadowRoot?.querySelector('slot[name="footer"]'),e=this.shadowRoot?.querySelector(".gator-popover-footer"),i=!!t&&t.assignedNodes().length>0,s=!!this.errorText;e&&(e.style.display=i||s?"flex":"none")}updated(t){super.updated(t),(t.has("placement")||t.has("autoAlign"))&&(this.assignPosition(),this.requestUpdate())}assignPosition(){const t=this.referenceElement;if(!this._popoverRef||!this._popoverRef.value||!t)return;this._cleanup&&this._cleanup();const e={placement:this.placement},i={middleware:[P({allowedPlacements:this.allowedPlacements,padding:5})]},o=!!this.placement&&!this.autoAlign?e:i;this._cleanup=E(t,this._popoverRef.value,async()=>{if(!this._popoverRef||!this._popoverRef.value||!t)return;const{x:r,y:n,placement:h}=await w(t,this._popoverRef.value,o);this._placement!==h&&(this._placement=h,this.requestUpdate()),this._popoverRef.value&&Object.assign(this._popoverRef.value.style,{left:`${r+this._xPositionOffset}px`,top:`${n+this._yPositionOffset}px`})})}showPopover(t=!1){super.showPopover(t),this.addEventListener("keydown",this._handleKeyDown)}hidePopover(){super.hidePopover(),this.shadowRoot?.querySelector("#gator-popover-close")?.shadowRoot?.firstElementChild?.classList.remove("no-focus-visible")}_handleKeyDown(t){const i=(t.key===p.SPACE||t.key===p.ENTER)&&t.target?.id==="gator-popover-close";if((t.key===p.ESCAPE||i)&&(t.preventDefault(),this.hidePopover(),this.referenceElement.focus()),t.key===p.TAB){const s=this._getKeyboardFocusableElements(),o=this.shadowRoot?.activeElement??document.activeElement,r=s[0],n=s[s.length-1];o?.shadowRoot?.firstElementChild?.classList.remove("no-focus-visible"),t.shiftKey?o===r&&(t.preventDefault(),t.stopPropagation(),n.focus()):o===n&&(t.preventDefault(),t.stopPropagation(),r.focus())}}};c.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0,mode:"open"};c.styles=[l(v),l(b),l(_),l(y)];c=$([g("ngc-popover")],c);export{c as NgcPopover};

package/dist/components/popover/popover.js

@@ -1 +1 @@
-import{property as a}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as v}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{createRef as m}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{generateRandomId as E}from"../../utils/string-utils.js";import{TestableLitElement as y}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as f}from"../../utils/datatestid-utils.js";import{StripTitleFromHostMixin as b}from"../../utils/mixins/strip-title-from-host-mixin.js";import{getFirstFocusableElement as _,getFocusableElements as u}from"../../utils/accessibility-utils.js";var w=Object.defineProperty,r=(d,e,s,t)=>{for(var i=void 0,o=d.length-1,h;o>=0;o--)(h=d[o])&&(i=h(e,s,i)||i);return i&&w(e,s,i),i};class n extends b(y){constructor(){super(...arguments),this.referenceId="",this.title="",this.xOffset=0,this.yOffset=0,this.iconName=void 0,this.errorText=void 0,this.size="medium",this.hideTippet=!1,this.showOnHover=!1,this._popoverRef=m(),this._forceOpen=!1,this._open=!1,this._mousedInsidePopover=!1,this._placement="top",this.popoverId=E(),this.elementListeners=new WeakMap}get isOpen(){return this._open}firstUpdated(){if(this._popoverRef.value&&(this._popoverRef.value.style.visibility="hidden",this._popoverRef.value.style.opacity="0"),!this.referenceId)return;const e=this.referenceElement,s=this._popoverRef.value;if(!e||!s)return;let t;e.shadowRoot?.delegatesFocus?t=_(e):t=e,t&&(t.ariaDescribedByElements=[this]),f(e,this.dataTestid,"trigger"),f(s,this.dataTestid,"popover"),e.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","false"),this.showOnHover?this._addShowOnHoverEvents(e,s):this._addShowOnClickEvents(e)}updated(e){if(super.updated(e),e.has("showOnHover")&&e.get("showOnHover")!==void 0){const s=this.referenceElement,t=this._popoverRef.value;t&&(this.removeAllTrackedEventListeners(s),this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this.showOnHover?this._addShowOnHoverEvents(s,t):this._addShowOnClickEvents(s))}}get referenceElement(){let e=document.querySelector(`#${this.referenceId}`);return e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),!e&&this.previousElementSibling&&this.previousElementSibling.id===this.referenceId&&(e=this.previousElementSibling),e}_addShowOnHoverEvents(e,s){this.addTrackedEventListener(e,"mouseenter",()=>this.showPopover()),this.addTrackedEventListener(e,"mouseleave",t=>this._handleMouseLeave(t,e,s)),this.addTrackedEventListener(e,"click",()=>this.showPopover(!0)),this.addTrackedEventListener(s,"mouseenter",()=>this.showPopover()),this.addTrackedEventListener(s,"mouseleave",t=>{if(this._mousedInsidePopover){this.hidePopover();return}this._handleMouseLeave(t,e,s)})}_addShowOnClickEvents(e){this.addTrackedEventListener(e,"click",()=>this.showPopover()),this.addTrackedEventListener(document,"click",s=>{const t=s.composedPath(),i=t.includes(e);!t.includes(this)&&!i&&this.hidePopover()})}addTrackedEventListener(e,s,t,i={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:s,listener:t,options:i}),e.addEventListener(s,t,i)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const s=this.elementListeners.get(e);for(const{eventType:t,listener:i,options:o}of s)e.removeEventListener(t,i,o);this.elementListeners.delete(e)}_handleMouseLeave(e,s,t){const i=s.getBoundingClientRect(),o=t.getBoundingClientRect(),h=this._isMouseInside(e,i,-5),l=this._isMouseInside(e,o,25);!h&&!l&&this.hidePopover(),l&&(this._mousedInsidePopover=!0)}_isMouseInside(e,s,t=0){const{left:i,right:o,top:h,bottom:l}=s,c=e.clientX,p=e.clientY;return c>=i-t&&c<=o+t&&p>=h-t&&p<=l+t}showPopover(e=!1){const s=e===!0;this.assignPosition();const t=this.referenceElement,i=this._popoverRef.value;i&&(i.style.visibility="visible",i.style.opacity="1"),t&&t.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","true"),this._open=!0,this._focusFirstElement(s)}hidePopover(){this._forceOpen||(this._popoverRef.value&&(this._popoverRef.value.style.visibility="hidden",this._popoverRef.value.style.opacity="0"),this.referenceElement&&this.referenceElement.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","false"),this._open=!1,this.dispatchEvent(new CustomEvent("closed",{bubbles:!0})))}_getKeyboardFocusableElements(){let e=[];const s=this.shadowRoot?.querySelector('slot[name="footer"]');if(this.shadowRoot&&(e=e.concat(u(this.shadowRoot))),s){const t=Array.from(s.assignedElements());for(const i of t)e=e.concat(u(i))}return e.filter(t=>!t.hasAttribute("disabled")&&!t.hasAttribute("aria-hidden"))}_focusFirstElement(e=!1){const s=this._getKeyboardFocusableElements();if(s.length>0){const t=s[0];requestAnimationFrame(()=>{let i;e?i=t:(i=t.shadowRoot?.firstElementChild,i?.classList.add("no-focus-visible")),i?.focus()})}}assignPosition(){}disconnectedCallback(){this._cleanup&&this._cleanup(),super.disconnectedCallback()}}r([a({attribute:"reference-id"})],n.prototype,"referenceId");r([a({type:String,attribute:!1})],n.prototype,"title");r([a()],n.prototype,"placement");r([a({type:Number,attribute:"x-offset"})],n.prototype,"xOffset");r([a({type:Number,attribute:"y-offset"})],n.prototype,"yOffset");r([a({type:String,attribute:"icon-name"})],n.prototype,"iconName");r([a({type:String,attribute:"error-text"})],n.prototype,"errorText");r([a()],n.prototype,"size");r([a({type:Boolean,attribute:"hide-tippet"})],n.prototype,"hideTippet");r([a({type:Boolean,attribute:"show-on-hover"})],n.prototype,"showOnHover");r([v()],n.prototype,"_open");export{n as NjcPopover};
+import{property as a}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as v}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{createRef as m}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{generateRandomId as y}from"../../utils/string-utils.js";import{TestableLitElement as E}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as f}from"../../utils/datatestid-utils.js";import{StripTitleFromHostMixin as b}from"../../utils/mixins/strip-title-from-host-mixin.js";import{getFirstFocusableElement as _,getFocusableElements as u}from"../../utils/accessibility-utils.js";var w=Object.defineProperty,o=(d,e,s,t)=>{for(var i=void 0,n=d.length-1,l;n>=0;n--)(l=d[n])&&(i=l(e,s,i)||i);return i&&w(e,s,i),i};class r extends b(E){constructor(){super(...arguments),this.referenceId="",this.title="",this.autoAlign=!1,this.xOffset=0,this.yOffset=0,this.iconName=void 0,this.errorText=void 0,this.size="medium",this.hideTippet=!1,this.showOnHover=!1,this._popoverRef=m(),this._forceOpen=!1,this._open=!1,this._mousedInsidePopover=!1,this._placement="top",this.popoverId=y(),this.elementListeners=new WeakMap}get isOpen(){return this._open}firstUpdated(){if(this._popoverRef.value&&(this._popoverRef.value.style.visibility="hidden",this._popoverRef.value.style.opacity="0"),!this.referenceId)return;const e=this.referenceElement,s=this._popoverRef.value;if(!e||!s)return;let t;e.shadowRoot?.delegatesFocus?t=_(e):t=e,t&&(t.ariaDescribedByElements=[this]),f(e,this.dataTestid,"trigger"),f(s,this.dataTestid,"popover"),e.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","false"),this.showOnHover?this._addShowOnHoverEvents(e,s):this._addShowOnClickEvents(e)}willUpdate(e){super.willUpdate(e),(e.has("placement")||e.has("autoAlign"))&&this.autoAlign&&this.placement?.includes("-")&&(this.autoAlign=!1)}updated(e){if(super.updated(e),e.has("showOnHover")&&e.get("showOnHover")!==void 0){const s=this.referenceElement,t=this._popoverRef.value;t&&(this.removeAllTrackedEventListeners(s),this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this.showOnHover?this._addShowOnHoverEvents(s,t):this._addShowOnClickEvents(s))}}get referenceElement(){let e=document.querySelector(`#${this.referenceId}`);return e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),!e&&this.previousElementSibling&&this.previousElementSibling.id===this.referenceId&&(e=this.previousElementSibling),e}_addShowOnHoverEvents(e,s){this.addTrackedEventListener(e,"mouseenter",()=>this.showPopover()),this.addTrackedEventListener(e,"mouseleave",t=>this._handleMouseLeave(t,e,s)),this.addTrackedEventListener(e,"click",()=>this.showPopover(!0)),this.addTrackedEventListener(s,"mouseenter",()=>this.showPopover()),this.addTrackedEventListener(s,"mouseleave",t=>{if(this._mousedInsidePopover){this.hidePopover();return}this._handleMouseLeave(t,e,s)})}_addShowOnClickEvents(e){this.addTrackedEventListener(e,"click",()=>this.showPopover()),this.addTrackedEventListener(document,"click",s=>{const t=s.composedPath(),i=t.includes(e);!t.includes(this)&&!i&&this.hidePopover()})}addTrackedEventListener(e,s,t,i={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:s,listener:t,options:i}),e.addEventListener(s,t,i)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const s=this.elementListeners.get(e);for(const{eventType:t,listener:i,options:n}of s)e.removeEventListener(t,i,n);this.elementListeners.delete(e)}_handleMouseLeave(e,s,t){const i=s.getBoundingClientRect(),n=t.getBoundingClientRect(),l=this._isMouseInside(e,i,-5),h=this._isMouseInside(e,n,25);!l&&!h&&this.hidePopover(),h&&(this._mousedInsidePopover=!0)}_isMouseInside(e,s,t=0){const{left:i,right:n,top:l,bottom:h}=s,p=e.clientX,c=e.clientY;return p>=i-t&&p<=n+t&&c>=l-t&&c<=h+t}showPopover(e=!1){const s=e===!0;this.assignPosition();const t=this.referenceElement,i=this._popoverRef.value;i&&(i.style.visibility="visible",i.style.opacity="1"),t&&t.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","true"),this._open=!0,this._focusFirstElement(s)}hidePopover(){this._forceOpen||(this._popoverRef.value&&(this._popoverRef.value.style.visibility="hidden",this._popoverRef.value.style.opacity="0"),this.referenceElement&&this.referenceElement.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","false"),this._open=!1,this.dispatchEvent(new CustomEvent("closed",{bubbles:!0})))}_getKeyboardFocusableElements(){let e=[];const s=this.shadowRoot?.querySelector('slot[name="footer"]');if(this.shadowRoot&&(e=e.concat(u(this.shadowRoot))),s){const t=Array.from(s.assignedElements());for(const i of t)e=e.concat(u(i))}return e.filter(t=>!t.hasAttribute("disabled")&&!t.hasAttribute("aria-hidden"))}_focusFirstElement(e=!1){const s=this._getKeyboardFocusableElements();if(s.length>0){const t=s[0];requestAnimationFrame(()=>{let i;e?i=t:(i=t.shadowRoot?.firstElementChild,i?.classList.add("no-focus-visible")),i?.focus()})}}assignPosition(){}disconnectedCallback(){this._cleanup&&this._cleanup(),super.disconnectedCallback()}}o([a({attribute:"reference-id"})],r.prototype,"referenceId");o([a({type:String,attribute:!1})],r.prototype,"title");o([a()],r.prototype,"placement");o([a({type:Boolean,attribute:"auto-align"})],r.prototype,"autoAlign");o([a({type:Number,attribute:"x-offset"})],r.prototype,"xOffset");o([a({type:Number,attribute:"y-offset"})],r.prototype,"yOffset");o([a({type:String,attribute:"icon-name"})],r.prototype,"iconName");o([a({type:String,attribute:"error-text"})],r.prototype,"errorText");o([a()],r.prototype,"size");o([a({type:Boolean,attribute:"hide-tippet"})],r.prototype,"hideTippet");o([a({type:Boolean,attribute:"show-on-hover"})],r.prototype,"showOnHover");o([v()],r.prototype,"_open");export{r as NjcPopover};

package/dist/components/table/gator/table.gator.js

@@ -74,7 +74,8 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
                             reference-id="filter-chips-overflow-trigger"
                             class="gator-table-filter-chips-popover"
                             size="small"
-                            placement="bottom-start"
+                            placement="bottom"
+                            auto-align
                             y-offset="8"
                             .hideTippet=${!0}
                         >

package/dist/types/src/components/popover/gator/popover.gator.d.ts

@@ -15,6 +15,7 @@ export declare class NgcPopover extends NjcPopover {
     private get _bodyMarkup();
     private get _footerMarkup();
     private get _computedPlacement();
+    private get allowedPlacements();
     private get _xPositionOffset();
     private get _yPositionOffset();
     private get _nubbinPositionClass();

package/dist/types/src/components/popover/popover.d.ts

@@ -20,6 +20,14 @@ export declare class NjcPopover extends NjcPopover_base {
      * @description The placement of the popover relative to the reference element
      */
     placement: Placement | undefined;
+    /**
+     * @property {boolean} autoAlign
+     * @description Whether the popover dynamically selects its alignment while remaining on the
+     * specified placement side. Requires a placement of `top`, `right`, `bottom`, or `left`. If an
+     * aligned placement such as `top-start` is set, auto-align is disabled and the given placement
+     * is used as-is.
+     */
+    autoAlign: boolean;
     /**
      * @property {number} xOffset
      * @description X offset of the popover's position
@@ -65,6 +73,7 @@ export declare class NjcPopover extends NjcPopover_base {
     popoverId: string;
     get isOpen(): boolean;
     firstUpdated(): void;
+    protected willUpdate(_changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     get referenceElement(): HTMLElement;
     private _addShowOnHoverEvents;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "15.7.0",
+  "version": "16.1.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -100,10 +100,10 @@
     "vite-plugin-static-copy": "^3.3.0",
     "vitest": "^4.1.10",
     "yaml-eslint-parser": "^2.1.0",
-    "@ncino/styles": "15.7.0"
+    "@ncino/styles": "16.1.0"
   },
   "peerDependencies": {
-    "@ncino/styles": "15.7.0"
+    "@ncino/styles": "16.1.0"
   },
   "bugs": {
     "url": "https://github.com/ncino/force-sdk-web-components/issues"

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": "15.6.1",
+  "version": "16.0.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6769,6 +6769,10 @@
               "name": "placement",
               "value": { "type": "Placement | undefined" }
             },
+            {
+              "name": "auto-align",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "x-offset",
               "value": { "type": "number", "default": "0" }
@@ -6811,6 +6815,7 @@
               { "name": "referenceId", "type": "string" },
               { "name": "title", "type": "string" },
               { "name": "placement", "type": "Placement | undefined" },
+              { "name": "autoAlign", "type": "boolean" },
               { "name": "xOffset", "type": "number" },
               { "name": "yOffset", "type": "number" },
               { "name": "iconName", "type": "string | undefined" },