@ncino/web-components 15.7.0 → 16.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/popover/gator/popover.gator.js +4 -4
- package/dist/components/popover/popover.js +1 -1
- package/dist/components/table/gator/table.gator.js +2 -1
- package/dist/types/src/components/popover/gator/popover.gator.d.ts +1 -0
- package/dist/types/src/components/popover/popover.d.ts +9 -0
- package/package.json +3 -3
- package/web-types.json +6 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
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
|
|
1
|
+
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`
|
|
2
2
|
<div
|
|
3
|
-
${
|
|
3
|
+
${d(this._popoverRef)}
|
|
4
4
|
id="${this.popoverId}"
|
|
5
5
|
class="gator-popover ${this._nubbinPositionClass} gator-popover-${this.size}"
|
|
6
6
|
aria-label="${this.title}"
|
|
@@ -13,7 +13,7 @@ import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@l
|
|
|
13
13
|
`}get _closeButtonMarkup(){return a`
|
|
14
14
|
<ngc-icon-button
|
|
15
15
|
id="gator-popover-close"
|
|
16
|
-
.ariaLabel="${
|
|
16
|
+
.ariaLabel="${O("Close")} ${this.title}"
|
|
17
17
|
icon-name="exit"
|
|
18
18
|
size="xsmall"
|
|
19
19
|
@click="${this.hidePopover}"
|
|
@@ -46,4 +46,4 @@ import{NjcPopover as f}from"../popover.js";import"../../../node_modules/.pnpm/@l
|
|
|
46
46
|
${this.errorText?a`<ngc-help-text icon error>${this.errorText}</ngc-help-text>`:u}
|
|
47
47
|
<slot name="footer"></slot>
|
|
48
48
|
</div>
|
|
49
|
-
`}get _computedPlacement(){return this.placement
|
|
49
|
+
`}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};
|
|
@@ -1 +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
|
|
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 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};
|
|
@@ -74,7 +74,8 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
74
74
|
reference-id="filter-chips-overflow-trigger"
|
|
75
75
|
class="gator-table-filter-chips-popover"
|
|
76
76
|
size="small"
|
|
77
|
-
placement="bottom
|
|
77
|
+
placement="bottom"
|
|
78
|
+
auto-align
|
|
78
79
|
y-offset="8"
|
|
79
80
|
.hideTippet=${!0}
|
|
80
81
|
>
|
|
@@ -15,6 +15,7 @@ export declare class NgcPopover extends NjcPopover {
|
|
|
15
15
|
private get _bodyMarkup();
|
|
16
16
|
private get _footerMarkup();
|
|
17
17
|
private get _computedPlacement();
|
|
18
|
+
private get allowedPlacements();
|
|
18
19
|
private get _xPositionOffset();
|
|
19
20
|
private get _yPositionOffset();
|
|
20
21
|
private get _nubbinPositionClass();
|
|
@@ -20,6 +20,14 @@ export declare class NjcPopover extends NjcPopover_base {
|
|
|
20
20
|
* @description The placement of the popover relative to the reference element
|
|
21
21
|
*/
|
|
22
22
|
placement: Placement | undefined;
|
|
23
|
+
/**
|
|
24
|
+
* @property {boolean} autoAlign
|
|
25
|
+
* @description Whether the popover dynamically selects its alignment while remaining on the
|
|
26
|
+
* specified placement side. Requires a placement of `top`, `right`, `bottom`, or `left`. If an
|
|
27
|
+
* aligned placement such as `top-start` is set, auto-align is disabled and the given placement
|
|
28
|
+
* is used as-is.
|
|
29
|
+
*/
|
|
30
|
+
autoAlign: boolean;
|
|
23
31
|
/**
|
|
24
32
|
* @property {number} xOffset
|
|
25
33
|
* @description X offset of the popover's position
|
|
@@ -65,6 +73,7 @@ export declare class NjcPopover extends NjcPopover_base {
|
|
|
65
73
|
popoverId: string;
|
|
66
74
|
get isOpen(): boolean;
|
|
67
75
|
firstUpdated(): void;
|
|
76
|
+
protected willUpdate(_changedProperties: PropertyValues): void;
|
|
68
77
|
protected updated(_changedProperties: PropertyValues): void;
|
|
69
78
|
get referenceElement(): HTMLElement;
|
|
70
79
|
private _addShowOnHoverEvents;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "16.1.0",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.10",
|
|
102
102
|
"yaml-eslint-parser": "^2.1.0",
|
|
103
|
-
"@ncino/styles": "
|
|
103
|
+
"@ncino/styles": "16.1.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "
|
|
106
|
+
"@ncino/styles": "16.1.0"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "16.0.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -6769,6 +6769,10 @@
|
|
|
6769
6769
|
"name": "placement",
|
|
6770
6770
|
"value": { "type": "Placement | undefined" }
|
|
6771
6771
|
},
|
|
6772
|
+
{
|
|
6773
|
+
"name": "auto-align",
|
|
6774
|
+
"value": { "type": "boolean", "default": "false" }
|
|
6775
|
+
},
|
|
6772
6776
|
{
|
|
6773
6777
|
"name": "x-offset",
|
|
6774
6778
|
"value": { "type": "number", "default": "0" }
|
|
@@ -6811,6 +6815,7 @@
|
|
|
6811
6815
|
{ "name": "referenceId", "type": "string" },
|
|
6812
6816
|
{ "name": "title", "type": "string" },
|
|
6813
6817
|
{ "name": "placement", "type": "Placement | undefined" },
|
|
6818
|
+
{ "name": "autoAlign", "type": "boolean" },
|
|
6814
6819
|
{ "name": "xOffset", "type": "number" },
|
|
6815
6820
|
{ "name": "yOffset", "type": "number" },
|
|
6816
6821
|
{ "name": "iconName", "type": "string | undefined" },
|