@ncino/web-components 15.5.0 → 15.7.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/chip/chip.js +1 -1
- package/dist/components/chip/gator/chip.gator.js +9 -7
- package/dist/components/guided-nav/gator/guided-nav-step/guided-nav-step.gator.js +3 -3
- package/dist/components/input/gator/dropdown/input-dropdown.gator.js +42 -35
- package/dist/components/input/gator/input-phone/input-phone.gator.js +6 -5
- package/dist/components/list/gator/list/list.gator.js +2 -2
- package/dist/components/menu/base/gator/menu.gator.js +3 -3
- package/dist/components/menu/menu-item/gator/menu-item.gator.js +10 -4
- package/dist/components/menu/menu-item/menu-item.js +1 -1
- package/dist/components/popover/gator/popover.gator.js +2 -2
- package/dist/components/table/gator/__tests__/test-table-data.js +1 -1
- package/dist/components/table/gator/table-cells/table-cell-icon-button.gator.js +11 -8
- package/dist/components/table/gator/table.gator.js +62 -36
- package/dist/packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js +1 -1
- package/dist/packages/web-components/src/components/table/gator/table.gator.scss.js +1 -1
- package/dist/types/src/components/chip/chip.d.ts +5 -0
- package/dist/types/src/components/input/gator/dropdown/input-dropdown.gator.d.ts +56 -1
- package/dist/types/src/components/input/gator/input-phone/input-phone.gator.d.ts +11 -1
- package/dist/types/src/components/list/gator/list/list.gator.d.ts +1 -1
- package/dist/types/src/components/menu/base/gator/menu.gator.d.ts +4 -0
- package/dist/types/src/components/menu/menu-item/gator/menu-item.gator.d.ts +10 -1
- package/dist/types/src/components/menu/menu-item/menu-item.d.ts +14 -2
- package/dist/types/src/components/table/gator/__tests__/test-table-data.d.ts +17 -0
- package/dist/types/src/components/table/gator/table.gator.d.ts +6 -0
- package/dist/types/src/components/table/table-cell-config.d.ts +6 -0
- package/package.json +3 -3
- package/web-types.json +78 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import"../../../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{property as r}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{KEY_CONSTANTS as l}from"../../../consts/key-constants.js";var u=Object.defineProperty,i=(s,t,p,m)=>{for(var e=void 0,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=a(t,p,e)||e);return e&&u(t,p,e),e};class n extends d{constructor(){super(...arguments),this.value="",this.subtitle=null,this.disabled=!1,this.startIcon="",this.endIcon=""}handleItemKeydown(t){this.disabled||(t.key===l.SPACE||t.key===l.ENTER)&&(this.sendEvent(),t.preventDefault())}handleItemClick(){this.disabled||this.sendEvent()}sendEvent(){this.disabled||this.dispatchEvent(new CustomEvent("menuitemclick",{bubbles:!0,composed:!0,detail:{value:this.value}}))}}i([r({type:String})],n.prototype,"value");i([r({type:String})],n.prototype,"subtitle");i([r({type:Boolean,reflect:!0})],n.prototype,"disabled");i([r({type:String,attribute:"start-icon"})],n.prototype,"startIcon");i([r({type:String,attribute:"end-icon"})],n.prototype,"endIcon");export{n as NjcMenuItem};
|
|
@@ -1,4 +1,4 @@
|
|
|
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 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,
|
|
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 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`
|
|
2
2
|
<div
|
|
3
3
|
${m(this._popoverRef)}
|
|
4
4
|
id="${this.popoverId}"
|
|
@@ -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||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,
|
|
49
|
+
`}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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",account:"12225144"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",account:"02532136"},{amount:"675.05",date:"2012-02-01T23:00:00.000Z",business:"Mertz - Krajcik",name:"Personal Loan Account 3150",type:"Withdrawal",account:"56962516"},{amount:"304.58",date:"2012-02-01T23:00:00.000Z",business:"Doyle - Baumbach",name:"Money Market Account 9760",type:"Withdrawal",account:"77263343"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",account:"26728093"},{amount:"538.01",date:"2012-02-01T23:00:00.000Z",business:"Gibson, Marks and Borer",name:"Checking Account 4107",type:"Withdrawal",account:"33480290"},{amount:"395.43",date:"2012-02-01T23:00:00.000Z",business:"Graham Group",name:"Investment Account 8159",type:"Payment",account:"10021492"},{amount:"643.06",date:"2012-02-01T23:00:00.000Z",business:"Harris - Zulauf",name:"Auto Loan Account 6205",type:"Withdrawal",account:"37757471"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",account:"10052192"}]}function n(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",status:"Active",initials:"AL",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/1",longText:"Account details",tooltipContent:"Account in good standing",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/2",longText:"Account details",tooltipContent:"Pending review",account:"12225144"},{isTableHeader:!0,headerText:"Some Category"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",status:"Inactive",initials:"SA",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/3",longText:"Account details",tooltipContent:"Requires attention",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",status:"Active",initials:"MM",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/4",longText:"Account details",tooltipContent:"In good standing",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/5",longText:"Account details",tooltipContent:"Pending",account:"02532136"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/6",longText:"Account details",tooltipContent:"Needs review",account:"26728093"},{isTableHeader:!0,headerText:"Some Other Category"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Active",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/7",longText:"Account details",tooltipContent:"Active",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Pending",initials:"CC",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/8",longText:"Account details",tooltipContent:"Pending",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/9",longText:"Account details",tooltipContent:"nCino account",account:"10052192"}]}export{t as getTestData,n as getTestDataWithHeader};
|
|
1
|
+
function t(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",account:"12225144"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",account:"02532136"},{amount:"675.05",date:"2012-02-01T23:00:00.000Z",business:"Mertz - Krajcik",name:"Personal Loan Account 3150",type:"Withdrawal",account:"56962516"},{amount:"304.58",date:"2012-02-01T23:00:00.000Z",business:"Doyle - Baumbach",name:"Money Market Account 9760",type:"Withdrawal",account:"77263343"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",account:"26728093"},{amount:"538.01",date:"2012-02-01T23:00:00.000Z",business:"Gibson, Marks and Borer",name:"Checking Account 4107",type:"Withdrawal",account:"33480290"},{amount:"395.43",date:"2012-02-01T23:00:00.000Z",business:"Graham Group",name:"Investment Account 8159",type:"Payment",account:"10021492"},{amount:"643.06",date:"2012-02-01T23:00:00.000Z",business:"Harris - Zulauf",name:"Auto Loan Account 6205",type:"Withdrawal",account:"37757471"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",account:"10052192"}]}function n(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",status:"Active",initials:"AL",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/1",longText:"Account details",tooltipContent:"Account in good standing",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/2",longText:"Account details",tooltipContent:"Pending review",account:"12225144"},{isTableHeader:!0,headerText:"Some Category"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",status:"Inactive",initials:"SA",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/3",longText:"Account details",tooltipContent:"Requires attention",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Deposit",status:"Active",initials:"MM",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/4",longText:"Account details",tooltipContent:"In good standing",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Deposit",status:"Pending",initials:"PL",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/5",longText:"Account details",tooltipContent:"Pending",account:"02532136"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Withdrawal",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/6",longText:"Account details",tooltipContent:"Needs review",account:"26728093"},{isTableHeader:!0,headerText:"Some Other Category"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Active",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/7",longText:"Account details",tooltipContent:"Active",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",status:"Pending",initials:"CC",avatarUrl:"",owner:"user-2",actions:"Edit",notes:"",linkUrl:"/accounts/8",longText:"Account details",tooltipContent:"Pending",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",status:"Inactive",initials:"CC",avatarUrl:"",owner:"user-1",actions:"Edit",notes:"",linkUrl:"/accounts/9",longText:"Account details",tooltipContent:"nCino account",account:"10052192"}]}function e(){return[{amount:"392.62",date:"2012-02-01T23:00:00.000Z",business:"Mohr Group",name:"Auto Loan Account 8145",type:"Withdrawal",account:"99082877",selected:!0},{amount:"393.59",date:"2012-02-01T23:00:00.000Z",business:"Goodwin - Johnson",name:"Personal Loan Account 0538",type:"Deposit",account:"12225144"},{amount:"964.47",date:"2012-02-01T23:00:00.000Z",business:"Nienow - Strosin",name:"Savings Account 8691",type:"Payment",account:"98822518"},{amount:"51.38",date:"2012-02-01T23:00:00.000Z",business:"Rosenbaum Inc",name:"Money Market Account 4536",type:"Cash",account:"26946392",selected:!0},{amount:"691.89",date:"2012-02-01T23:00:00.000Z",business:"Yundt Group",name:"Personal Loan Account 0201",type:"Transfer",account:"02532136"},{amount:"675.05",date:"2012-02-01T23:00:00.000Z",business:"Mertz - Krajcik",name:"Personal Loan Account 3150",type:"Refund",account:"56962516"},{amount:"304.58",date:"2012-02-01T23:00:00.000Z",business:"Doyle - Baumbach",name:"Money Market Account 9760",type:"Fee",account:"77263343"},{amount:"415.99",date:"2012-02-01T23:00:00.000Z",business:"King - Mitchell",name:"Credit Card Account 2820",type:"Interest",account:"26728093"},{amount:"538.01",date:"2012-02-01T23:00:00.000Z",business:"Gibson, Marks and Borer",name:"Checking Account 4107",type:"Wire Transfer",account:"33480290"},{amount:"395.43",date:"2012-02-01T23:00:00.000Z",business:"Graham Group",name:"Investment Account 8159",type:"Direct Deposit",account:"10021492"},{amount:"643.06",date:"2012-02-01T23:00:00.000Z",business:"Harris - Zulauf",name:"Auto Loan Account 6205",type:"Reversal",account:"37757471"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Adjustment",account:"10021492"},{amount:"100.00",date:"2012-02-01T23:00:00.000Z",business:"Hahn, Krajcik and Krajcik",name:"Credit Card Account 1950",type:"Payment",account:"10021492"},{amount:"140.00",date:"2014-02-01T23:00:00.000Z",business:"nCino",name:"Credit Card Account 1950",type:"Payment",account:"10052192"}]}export{e as getSortableFilterableTestData,t as getTestData,n as getTestDataWithHeader};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as l,nothing as r}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ifDefined as u}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{customElement as b}from"../../../../utils/decorators/custom-element-decorator.js";import{TableCellBase as g}from"./table-cell-base.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import"../../../menu/base/gator/menu.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";var p=Object.getOwnPropertyDescriptor,$=(e,n,c,o)=>{for(var t=o>1?void 0:o?p(n,c):n,i=e.length-1,m;i>=0;i--)(m=e[i])&&(t=m(t)||t);return t};let a=class extends g{renderCellContent(){const e=this.column.cellConfig??{},n=e.iconName,c=typeof e.iconAriaLabel=="function"?e.iconAriaLabel(this.rowData):e.iconAriaLabel??"More actions",o=typeof e.menuItems=="function"?e.menuItems(this.rowData):e.menuItems??[],t=e.menuPlacement??"bottom-end",i=e.menuAriaLabel??"More actions",m=l`
|
|
2
2
|
<ngc-icon-button
|
|
3
3
|
icon-name="${n}"
|
|
4
4
|
size="medium"
|
|
5
5
|
aria-label="${c}"
|
|
6
6
|
@click="${()=>this.emitCellClick()}"
|
|
7
7
|
></ngc-icon-button>
|
|
8
|
-
`;return o.length>0?
|
|
8
|
+
`;return o.length>0?l`
|
|
9
9
|
<ngc-menu placement="${t}" menu-aria-label="${i}">
|
|
10
10
|
<ngc-icon-button
|
|
11
11
|
slot="trigger"
|
|
@@ -13,13 +13,16 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
13
13
|
size="medium"
|
|
14
14
|
aria-label="${c}"
|
|
15
15
|
></ngc-icon-button>
|
|
16
|
-
${o.map(
|
|
16
|
+
${o.map(s=>this.renderMenuItem(s))}
|
|
17
17
|
</ngc-menu>
|
|
18
|
-
`:
|
|
18
|
+
`:m}renderMenuItem(e){const n=e.value??e.label;return l`
|
|
19
19
|
<ngc-menu-item
|
|
20
20
|
value="${e.label}"
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
subtitle="${u(e.subtitle)}"
|
|
22
|
+
?disabled="${!!e.disabled}"
|
|
23
23
|
@menuitemclick="${()=>this.emitCellClick(n)}"
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
>
|
|
25
|
+
${e.startIcon?l`<ngc-icon slot="start" name="${e.startIcon}"></ngc-icon>`:r}
|
|
26
|
+
${e.endIcon?l`<ngc-icon slot="end" name="${e.endIcon}"></ngc-icon>`:r}
|
|
27
|
+
</ngc-menu-item>
|
|
28
|
+
`}};a=$([b("ngc-table-cell-icon-button")],a);export{a as NgcTableCellIconButton};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as f,html as o}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as f,html as o}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as v}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as $}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as T}from"../../../utils/decorators/custom-element-decorator.js";import{msg as u}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as x}from"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{NjcTable as _}from"../table.js";import{formatTableTextValue as P}from"../table-format-utils.js";import R from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import A from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import O from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"./table-bulk-controls/table-bulk-controls.gator.js";import"./table-cells/table-cell-chip.gator.js";import"./table-cells/table-cell-avatar.gator.js";import"./table-cells/table-cell-checkbox.gator.js";import"./table-cells/table-cell-text-link.gator.js";import"./table-cells/table-cell-button.gator.js";import"./table-cells/table-cell-icon-button.gator.js";import"./table-cells/table-cell-input-dropdown.gator.js";import"./table-cells/table-cell-input-text.gator.js";import"./table-cells/table-cell-text.gator.js";import"../../checkbox/checkbox.gator.js";import"../../icon/gator/icon.gator.js";import"../../icon/gator/templates/index.js";import"../../icon-button/gator/icon-button.gator.js";import"../../popover/gator/popover.gator.js";import"../../checkbox-group/checkbox-group.gator.js";import"../../radio-group/radio-group.gator.js";import"../../button/gator/button.gator.js";import"../../chip/gator/chip.gator.js";import"../../input/gator/input-search/input-search.gator.js";import"../../skip-link/gator/base/skip-link.gator.js";import"../../illustration/gator/illustration.gator.js";import"../../illustration/gator/templates/index.js";import"../../card/gator/base/card.gator.js";import{unsafeCSS as y}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var E=Object.defineProperty,B=Object.getOwnPropertyDescriptor,g=(e,t,l,i)=>{for(var s=i>1?void 0:i?B(t,l):t,r=e.length-1,a;r>=0;r--)(a=e[r])&&(s=(i?a(t,l,s):a(s))||s);return i&&s&&E(t,l,s),s};const k=5,V=60;let h=class extends _{constructor(){super(...arguments),this.elevated=!1,this.includePagination=!1,this.includePageSelection=!1,this.skeleton=!1,this.sortField=null,this.sortDirection=null,this.filterValues={},this.selectedRows=[],this._currentPage=1,this._sortField=null,this._sortDirection=null,this._hoveredHeaderColumnField=null,this._pendingFilterValues={},this._filterSearchQuery={},this._visibleFilterChipCount=k,this.previousFilterOptionsScrollTop=0,this._filterChipResizeObserver=new ResizeObserver(()=>this.calculateFilterChipOverflow()),this.renderHeaderFilterPopover=(e,t,l=!1)=>{const i=e.filterOptions??[],s=(this._filterSearchQuery[e.field]??"").toLowerCase(),r=s?i.filter(p=>p.label.toLowerCase().includes(s)):i,a=this.hasActiveFilter(e),d=e.filterMultiselect===!0,n=this.getEffectivePending(e),c=r.map(p=>({title:p.label,value:String(p.value)})),b=d?n.join(";"):"",m=d?"":n||"";return o`
|
|
2
2
|
<span class="gator-table-header-filter-trigger-wrap ${t?"gator-table-header-filter-trigger-visible":""}">
|
|
3
3
|
<ngc-icon-button
|
|
4
4
|
id="filter-trigger-${e.field}"
|
|
@@ -20,23 +20,27 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
20
20
|
<ngc-input-search
|
|
21
21
|
placeholder="${u("Search")}"
|
|
22
22
|
.value="${this._filterSearchQuery[e.field]??""}"
|
|
23
|
-
@input="${
|
|
23
|
+
@input="${p=>this.handleFilterSearchInput(p,e)}"
|
|
24
24
|
class="gator-table-filter-popover-search"
|
|
25
25
|
></ngc-input-search>
|
|
26
26
|
`:f}
|
|
27
|
-
${
|
|
27
|
+
${d?o`
|
|
28
28
|
<ngc-checkbox-group
|
|
29
|
-
.options="${
|
|
29
|
+
.options="${c}"
|
|
30
30
|
.value="${b}"
|
|
31
31
|
aria-label="${u("Filter by")} ${e.name}"
|
|
32
|
-
@change="${
|
|
32
|
+
@change="${p=>this.handleFilterCheckboxGroupChange(p,e)}"
|
|
33
|
+
class="gator-table-filter-options"
|
|
34
|
+
@scroll=${p=>this.onFilterOptionsScroll(p,e)}
|
|
33
35
|
></ngc-checkbox-group>
|
|
34
36
|
`:o`
|
|
35
37
|
<ngc-radio-group
|
|
36
|
-
.options="${
|
|
37
|
-
.value="${
|
|
38
|
+
.options="${c}"
|
|
39
|
+
.value="${m}"
|
|
38
40
|
aria-label="${u("Filter by")} ${e.name}"
|
|
39
|
-
@change="${
|
|
41
|
+
@change="${p=>this.handleFilterRadioGroupChange(p,e)}"
|
|
42
|
+
class="gator-table-filter-options"
|
|
43
|
+
@scroll=${p=>this.onFilterOptionsScroll(p,e)}
|
|
40
44
|
></ngc-radio-group>
|
|
41
45
|
`}
|
|
42
46
|
</div>
|
|
@@ -46,7 +50,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
46
50
|
</div>
|
|
47
51
|
</ngc-popover>
|
|
48
52
|
</span>
|
|
49
|
-
`},this.handleClearAllFilters=()=>{if(!this.columns?.length||!this.filterValues)return;const e=t=>t.filterOptions??[];for(const t of this.columns){if(!t.filterable||e(t).length===0)continue;const l=this.filterValues[t.field];if(l==null)continue;if(t.filterMultiselect===!0?l.length>0:l!==""){const s=t.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:t.field,value:s}}))}}this.requestUpdate()}}updated(e){super.updated(e),e.has("data")&&queueMicrotask(()=>{this.selectedRows=this.data.filter(t=>t.selected&&!t.isTableHeader)})}render(){if(!this.skeleton&&!this.columns)return null;const e=this.skeleton?this._skeletonLoaderColumns:this.columns;return this.renderWrapper(this.getTableHeader(e),this.getTableBody(e,this.displayedRowData))}getColumnCellStyle(e){const t=e.width??(e.cellType==="icon-button"?"5%":void 0),l=e.minWidth,i=[];if(t&&i.push(`width: ${t}`),l&&i.push(`min-width: ${l}`),e.cellConfig?.truncate){const s=t??l;s&&i.push(`max-width: ${s}`)}return i.length===0?"":(i.push("box-sizing: border-box"),i.join("; "))}get _skeletonLoaderColumns(){const e=this.columns?.length||6;let t=[];for(let l=0;l<e;l++)t=t.concat({field:`skeleton-loader-${l}`,name:`skeleton-loader-${l}`});return t}get tableElevatedClass(){return this.elevated?"gator-table-elevated":""}get showBulkControls(){return this.selectable&&this.selectedRows.length>0}renderWrapper(e,t){
|
|
53
|
+
`},this.handleClearAllFilters=()=>{if(!this.columns?.length||!this.filterValues)return;const e=t=>t.filterOptions??[];for(const t of this.columns){if(!t.filterable||e(t).length===0)continue;const l=this.filterValues[t.field];if(l==null)continue;if(t.filterMultiselect===!0?l.length>0:l!==""){const s=t.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:t.field,value:s}}))}}this.requestUpdate()}}updated(e){if(super.updated(e),e.has("data")&&queueMicrotask(()=>{this.selectedRows=this.data.filter(t=>t.selected&&!t.isTableHeader)}),e.has("columns")||e.has("filterValues")||e.has("skeleton")){this._filterChipResizeObserver.disconnect();const t=this.renderRoot.querySelector(".gator-table-filter-chips");t&&(this._filterChipResizeObserver.observe(t),requestAnimationFrame(()=>this.calculateFilterChipOverflow()))}}disconnectedCallback(){this._filterChipResizeObserver.disconnect(),super.disconnectedCallback()}render(){if(!this.skeleton&&!this.columns)return null;const e=this.skeleton?this._skeletonLoaderColumns:this.columns;return this.renderWrapper(this.getTableHeader(e),this.getTableBody(e,this.displayedRowData))}getColumnCellStyle(e){const t=e.width??(e.cellType==="icon-button"?"5%":void 0),l=e.minWidth,i=[];if(t&&i.push(`width: ${t}`),l&&i.push(`min-width: ${l}`),e.cellConfig?.truncate){const s=t??l;s&&i.push(`max-width: ${s}`)}return i.length===0?"":(i.push("box-sizing: border-box"),i.join("; "))}get _skeletonLoaderColumns(){const e=this.columns?.length||6;let t=[];for(let l=0;l<e;l++)t=t.concat({field:`skeleton-loader-${l}`,name:`skeleton-loader-${l}`});return t}get tableElevatedClass(){return this.elevated?"gator-table-elevated":""}get showBulkControls(){return this.selectable&&this.selectedRows.length>0}renderWrapper(e,t){let l=this.getActiveFilterChips();const i=l.length>0,s=l.slice(this._visibleFilterChipCount);l=l.slice(0,this._visibleFilterChipCount);const r=this.emptyStateTitle||u("No results found"),a=i?this.emptyStateBodyFiltered||u("No data matches the current filters."):this.emptyStateBody||u("Start by adding some data."),d=this.emptyStateIllustration||"empty-box";return o`
|
|
50
54
|
<ngc-table-bulk-controls
|
|
51
55
|
?visible="${this.showBulkControls}"
|
|
52
56
|
.selectedRows="${this.selectedRows.length}"
|
|
@@ -56,14 +60,36 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
56
60
|
</ngc-table-bulk-controls>
|
|
57
61
|
${!this.skeleton&&i?o`
|
|
58
62
|
<div class="gator-table-filter-chips" role="region" aria-label="${u("Active filters")}">
|
|
59
|
-
${l.map(({column:
|
|
63
|
+
${l.map(({column:n,value:c,label:b})=>o`
|
|
60
64
|
<ngc-chip
|
|
65
|
+
class="gator-table-filter-chip"
|
|
61
66
|
dismissible
|
|
62
67
|
size="small"
|
|
63
|
-
@dismiss="${()=>this.handleFilterChipDismiss(c
|
|
64
|
-
>${
|
|
68
|
+
@dismiss="${()=>this.handleFilterChipDismiss(n,c)}"
|
|
69
|
+
>${n.name}: ${b}</ngc-chip>
|
|
65
70
|
`)}
|
|
66
|
-
${
|
|
71
|
+
${s.length>0?o`
|
|
72
|
+
<ngc-chip id="filter-chips-overflow-trigger" size="small" end-icon="sort-arrow-solid-down">+${s.length}</ngc-chip>
|
|
73
|
+
<ngc-popover
|
|
74
|
+
reference-id="filter-chips-overflow-trigger"
|
|
75
|
+
class="gator-table-filter-chips-popover"
|
|
76
|
+
size="small"
|
|
77
|
+
placement="bottom-start"
|
|
78
|
+
y-offset="8"
|
|
79
|
+
.hideTippet=${!0}
|
|
80
|
+
>
|
|
81
|
+
<div slot="content" class="gator-table-filter-chips-popover-content">
|
|
82
|
+
${s.map(({column:n,value:c,label:b})=>o`
|
|
83
|
+
<ngc-chip
|
|
84
|
+
dismissible
|
|
85
|
+
size="small"
|
|
86
|
+
@dismiss="${()=>this.handleFilterChipDismiss(n,c)}"
|
|
87
|
+
>${n.name}: ${b}</ngc-chip>
|
|
88
|
+
`)}
|
|
89
|
+
</div>
|
|
90
|
+
</ngc-popover>
|
|
91
|
+
`:f}
|
|
92
|
+
${l.length+s.length>1?o`
|
|
67
93
|
<button
|
|
68
94
|
type="button"
|
|
69
95
|
class="gator-table-filter-chips-clear-all"
|
|
@@ -76,9 +102,9 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
76
102
|
<ngc-card class="gator-table-empty-state-card">
|
|
77
103
|
<div class="gator-table-empty-state">
|
|
78
104
|
<ngc-illustration
|
|
79
|
-
name="${
|
|
80
|
-
title-text="${
|
|
81
|
-
.bodyText="${
|
|
105
|
+
name="${d}"
|
|
106
|
+
title-text="${r}"
|
|
107
|
+
.bodyText="${a}"
|
|
82
108
|
size="medium"
|
|
83
109
|
>${this.renderEmptyStateIllustrationActions(i)}</ngc-illustration>
|
|
84
110
|
</div>
|
|
@@ -105,7 +131,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
105
131
|
@itemsperpagechanged="${this.handleItemsPerPageChanged}"
|
|
106
132
|
></ngc-table-pagination>
|
|
107
133
|
`:f}
|
|
108
|
-
`}renderEmptyStateIllustrationActions(e){return e?o`
|
|
134
|
+
`}calculateFilterChipOverflow(){const e=this.renderRoot.querySelector(".gator-table-filter-chips");if(!e)return;const t=[...e.querySelectorAll(".gator-table-filter-chip, .gator-table-filter-chips-popover-content ngc-chip")].slice(0,k),l=parseFloat(getComputedStyle(e).columnGap)||0,i=e.querySelector(".gator-table-filter-chips-clear-all")?.getBoundingClientRect().width??0,s=t.reduce((n,c)=>n+c.getBoundingClientRect().width+l,i);let r=V+i+l*2;const a=t.findIndex(n=>(r+=n.getBoundingClientRect().width+l)>e.clientWidth),d=this.getActiveFilterChips().length<=k&&s<=e.clientWidth?t.length:Math.max(1,a<0?t.length:a);this._visibleFilterChipCount!==d&&(this._visibleFilterChipCount=d)}renderEmptyStateIllustrationActions(e){return e?o`
|
|
109
135
|
<ngc-button @click="${this.handleClearAllFilters}">${u("Clear filters")}</ngc-button>
|
|
110
136
|
`:o`<slot name="empty-state-actions"></slot>`}handlePageChanged(e){this._currentPage=e.detail.page}handleItemsPerPageChanged(e){this.itemsPerPage=e.detail.itemsPerPage}getTableHeader(e){const t=e.map((l,i)=>this.getTableHeaderColumn(l,i===0));return!this.skeleton&&this.selectable&&t.unshift(o`
|
|
111
137
|
<th id="col-select" scope="col">
|
|
@@ -127,7 +153,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
127
153
|
height="24"
|
|
128
154
|
rounded
|
|
129
155
|
></ngc-skeleton-loader>
|
|
130
|
-
`,s=`col-${e.field}`,r=!this.skeleton&&e.sortable===!0,a=!this.skeleton&&e.filterable===!0&&e.filterOptions?.length,
|
|
156
|
+
`,s=`col-${e.field}`,r=!this.skeleton&&e.sortable===!0,a=!this.skeleton&&e.filterable===!0&&e.filterOptions?.length,d=r?this.getSortAriaSort(e):void 0,n=r&&this.effectiveSortField===e.field,c=a&&this.hasActiveFilter(e),b=r||a,m=r?o`
|
|
131
157
|
<div
|
|
132
158
|
class="gator-table-header-sort-trigger"
|
|
133
159
|
role="button"
|
|
@@ -141,32 +167,32 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
141
167
|
<ngc-icon name="${this.getSortIcon(e)}" class="gator-table-sort-icon" size="x-small"></ngc-icon>
|
|
142
168
|
</span>
|
|
143
169
|
</div>
|
|
144
|
-
`:o`<span class="gator-table-header-label">${e.name}</span>`,
|
|
170
|
+
`:o`<span class="gator-table-header-label">${e.name}</span>`,p=!!(a&&(this._hoveredHeaderColumnField===e.field||c||this.isFilterPopoverOpen(e))),S=l?i:o`
|
|
145
171
|
<div class="gator-table-header-cell-inner">
|
|
146
|
-
${
|
|
147
|
-
${a?this.renderHeaderFilterPopover(e,
|
|
172
|
+
${m}
|
|
173
|
+
${a?this.renderHeaderFilterPopover(e,p,t):f}
|
|
148
174
|
</div>
|
|
149
|
-
`,
|
|
175
|
+
`,F=[n?"gator-table-header-cell-sort-active":"",c?"gator-table-header-cell-filter-active":"",b?"gator-table-header-cell-interactive":""].filter(Boolean).join(" "),w=this.getColumnCellStyle(e);return o`
|
|
150
176
|
<th
|
|
151
177
|
id="${s}"
|
|
152
178
|
scope="col"
|
|
153
|
-
aria-sort="${
|
|
154
|
-
class="${
|
|
179
|
+
aria-sort="${d??f}"
|
|
180
|
+
class="${F}"
|
|
155
181
|
style="${w||f}"
|
|
156
182
|
@mouseenter="${a||r?()=>this._hoveredHeaderColumnField=e.field:f}"
|
|
157
183
|
@mouseleave="${a||r?()=>this._hoveredHeaderColumnField=null:f}"
|
|
158
184
|
>
|
|
159
|
-
${
|
|
185
|
+
${S}
|
|
160
186
|
</th>
|
|
161
|
-
`}getEffectivePending(e){const t=this._pendingFilterValues[e.field];return t!==void 0?t:this.filterValues[e.field]??(e.filterMultiselect===!0?[]:"")}getFilterPopoverForColumn(e){return this.shadowRoot?.querySelector(`ngc-popover[reference-id="filter-trigger-${e.field}"]`)??null}isFilterPopoverOpen(e){return this.getFilterPopoverForColumn(e)?.isOpen===!0}handleFilterPopoverClosed(e){this._filterSearchQuery={...this._filterSearchQuery,[e.field]:""}}handleFilterSearchInput(e,t){const l=e.detail?.value??"";this._filterSearchQuery={...this._filterSearchQuery,[t.field]:l},this.requestUpdate()}handleFilterCheckboxGroupChange(e,t){const l=e.detail??"",i=l?l.split(";").filter(Boolean):[];this._pendingFilterValues={...this._pendingFilterValues,[t.field]:i},this.requestUpdate()}handleFilterRadioGroupChange(e,t){const l=e.detail??"";this._pendingFilterValues={...this._pendingFilterValues,[t.field]:l},this.requestUpdate()}handleFilterPopoverApply(e){const t=this.getEffectivePending(e);this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:t}}));const l={...this._pendingFilterValues};delete l[e.field],this._pendingFilterValues=l,this.getFilterPopoverForColumn(e)?.hidePopover?.(),this.requestUpdate()}handleFilterPopoverClear(e){const l=e.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:l}}));const i={...this._pendingFilterValues};delete i[e.field],this._pendingFilterValues=i,this.getFilterPopoverForColumn(e)?.hidePopover?.(),this.requestUpdate()}hasActiveFilter(e){const t=this.filterValues[e.field];return t==null?!1:e.filterMultiselect===!0?t.length>0:t!==""}getActiveFilterChips(){if(!this.columns?.length||!this.filterValues)return[];const e=[],t=l=>l.filterOptions??[];for(const l of this.columns){if(!l.filterable||t(l).length===0)continue;const i=this.filterValues[l.field];if(i==null)continue;if(l.filterMultiselect===!0){const r=i;for(const a of r){const
|
|
187
|
+
`}getEffectivePending(e){const t=this._pendingFilterValues[e.field];return t!==void 0?t:this.filterValues[e.field]??(e.filterMultiselect===!0?[]:"")}getFilterPopoverForColumn(e){return this.shadowRoot?.querySelector(`ngc-popover[reference-id="filter-trigger-${e.field}"]`)??null}isFilterPopoverOpen(e){return this.getFilterPopoverForColumn(e)?.isOpen===!0}handleFilterPopoverClosed(e){this.previousFilterOptionsScrollTop=0,this._filterSearchQuery={...this._filterSearchQuery,[e.field]:""}}handleFilterSearchInput(e,t){const l=e.detail?.value??"";this.previousFilterOptionsScrollTop=0,this._filterSearchQuery={...this._filterSearchQuery,[t.field]:l},this.requestUpdate()}handleFilterCheckboxGroupChange(e,t){const l=e.detail??"",i=l?l.split(";").filter(Boolean):[];this._pendingFilterValues={...this._pendingFilterValues,[t.field]:i},this.requestUpdate()}handleFilterRadioGroupChange(e,t){const l=e.detail??"";this._pendingFilterValues={...this._pendingFilterValues,[t.field]:l},this.requestUpdate()}handleFilterPopoverApply(e){const t=this.getEffectivePending(e);this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:t}}));const l={...this._pendingFilterValues};delete l[e.field],this._pendingFilterValues=l,this.getFilterPopoverForColumn(e)?.hidePopover?.(),this.requestUpdate()}handleFilterPopoverClear(e){const l=e.filterMultiselect===!0?[]:"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:l}}));const i={...this._pendingFilterValues};delete i[e.field],this._pendingFilterValues=i,this.getFilterPopoverForColumn(e)?.hidePopover?.(),this.requestUpdate()}hasActiveFilter(e){const t=this.filterValues[e.field];return t==null?!1:e.filterMultiselect===!0?t.length>0:t!==""}getActiveFilterChips(){if(!this.columns?.length||!this.filterValues)return[];const e=[],t=l=>l.filterOptions??[];for(const l of this.columns){if(!l.filterable||t(l).length===0)continue;const i=this.filterValues[l.field];if(i==null)continue;if(l.filterMultiselect===!0){const r=i;for(const a of r){const d=t(l).find(n=>String(n.value)===a);e.push({column:l,value:a,label:d?.label??a})}}else{const r=i;if(r==="")continue;const a=t(l).find(d=>String(d.value)===r);e.push({column:l,value:r,label:a?.label??r})}}return e}handleFilterChipDismiss(e,t){const l=e.filterMultiselect===!0,i=this.filterValues[e.field],s=l?(i||[]).filter(r=>r!==t):"";this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:{field:e.field,value:s}})),this.requestUpdate()}onFilterOptionsScroll(e,t){const l=e.target,i=l.scrollTop>this.previousFilterOptionsScrollTop,s=Math.floor(l.scrollHeight-l.scrollTop)===l.clientHeight;this.previousFilterOptionsScrollTop=l.scrollTop,i&&s&&this.dispatchEvent(new CustomEvent("filteroptionsreachedbottom",{bubbles:!0,composed:!0,detail:{field:t.field}}))}getTableBody(e,t){const l=[];let i={rows:[]};return t.forEach(s=>{s.isTableHeader?((i.rows.length>0||i.header)&&l.push(i),i={header:s,rows:[]}):i.rows.push(s)}),(i.rows.length>0||i.header)&&l.push(i),l.length===0&&t.length>0&&l.push({rows:t}),o`
|
|
162
188
|
${l.map(s=>this.getCategoryBody(s,e))}
|
|
163
|
-
`}getCategoryBody(e,t){let l="",i="",s="";e.header&&(l=e.header.headerText||e.header.categoryText||e.header.name||"Category",s=`category-${l.toLowerCase().replace(/\s+/g,"-")}`,i=s);const r=e.header?this.getTableHeaderRow(t,e.header):"",a=e.rows.map(
|
|
189
|
+
`}getCategoryBody(e,t){let l="",i="",s="";e.header&&(l=e.header.headerText||e.header.categoryText||e.header.name||"Category",s=`category-${l.toLowerCase().replace(/\s+/g,"-")}`,i=s);const r=e.header?this.getTableHeaderRow(t,e.header):"",a=e.rows.map(c=>this.getTableBodyRow(c,t,s,this.data.indexOf(c))),d=t.some(c=>c.includedInTotals===!0),n=e.rows.length>0&&d?this.getTotalRow(e.rows,t,s):"";return o`
|
|
164
190
|
<tbody role="rowgroup" ${i?o`aria-labelledby="${i}"`:""}>
|
|
165
191
|
${r}
|
|
166
192
|
${a}
|
|
167
193
|
${n}
|
|
168
194
|
</tbody>
|
|
169
|
-
`}getTotalRow(e,t,l){const i={};t.forEach(n=>{i[n.field]=0,n.includedInTotals&&e.forEach(
|
|
195
|
+
`}getTotalRow(e,t,l){const i={};t.forEach(n=>{i[n.field]=0,n.includedInTotals&&e.forEach(c=>{const b=this.parseNumericValue(c[n.field]);b!==null&&(i[n.field]+=b)})});const s=l?`${l}-total`:"total-row",r=o`
|
|
170
196
|
<th
|
|
171
197
|
id="${s}"
|
|
172
198
|
scope="row"
|
|
@@ -174,7 +200,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
174
200
|
>
|
|
175
201
|
Total
|
|
176
202
|
</th>
|
|
177
|
-
`,a=t.map(n=>{const
|
|
203
|
+
`,a=t.map(n=>{const c=`col-${n.field}`,b=[s,l,c].filter(Boolean).join(" ");return n.includedInTotals?o`
|
|
178
204
|
<td
|
|
179
205
|
role="gridcell"
|
|
180
206
|
headers="${b}"
|
|
@@ -191,11 +217,11 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
191
217
|
>
|
|
192
218
|
|
|
193
219
|
</td>
|
|
194
|
-
`}),
|
|
220
|
+
`}),d=this.selectable?[r,...a]:[r,...a.slice(1)];return o`
|
|
195
221
|
<tr role="row" class="gator-table-total-row">
|
|
196
|
-
${
|
|
222
|
+
${d}
|
|
197
223
|
</tr>
|
|
198
|
-
`}parseNumericValue(e){if(typeof e=="number")return e;if(typeof e=="string"){const t=e.replace(/[^0-9.-]/g,""),l=parseFloat(t);if(!isNaN(l))return l}return null}formatTotal(e,t){if(typeof t.cellRenderer=="function"){const i=t.cellConfig?.decimalPlaces??t.decimalPlaces??2;return t.cellRenderer({[t.field]:e.toFixed(i)})}return
|
|
224
|
+
`}parseNumericValue(e){if(typeof e=="number")return e;if(typeof e=="string"){const t=e.replace(/[^0-9.-]/g,""),l=parseFloat(t);if(!isNaN(l))return l}return null}formatTotal(e,t){if(typeof t.cellRenderer=="function"){const i=t.cellConfig?.decimalPlaces??t.decimalPlaces??2;return t.cellRenderer({[t.field]:e.toFixed(i)})}return P(e,t.cellConfig,t.decimalPlaces)}getTableBodyRow(e,t,l,i){const s=t.map(r=>this.getTableBodyCell(e,r,l,i??0));if(!this.skeleton&&this.selectable){const r=l?`col-select ${l}`:"col-select";s.unshift(o`
|
|
199
225
|
<td role="gridcell" class="gator-table-checkbox-column" headers="${r}">
|
|
200
226
|
<ngc-checkbox
|
|
201
227
|
label="test"
|
|
@@ -221,13 +247,13 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
221
247
|
height="24"
|
|
222
248
|
rounded
|
|
223
249
|
></ngc-skeleton-loader>
|
|
224
|
-
`,a=`col-${t.field}`,
|
|
250
|
+
`,a=`col-${t.field}`,d=l?`${a} ${l}`:a,n=s?this.getCellAlignClass(t):"",c=s?r:this.renderCellByType(e,t,i,l??"");return o`
|
|
225
251
|
<td
|
|
226
252
|
role="gridcell"
|
|
227
|
-
headers="${
|
|
253
|
+
headers="${d}"
|
|
228
254
|
class="${n}"
|
|
229
255
|
style="${this.getColumnCellStyle(t)||f}"
|
|
230
256
|
>
|
|
231
|
-
${
|
|
257
|
+
${c}
|
|
232
258
|
</td>
|
|
233
|
-
`}getCellAlignClass(e){return`gator-table-cell-${e.cellConfig?.align??"left"}`}renderCellByType(e,t,l,i){const s=a=>this.handleCellChange(a),r=a=>this.handleCellClick(a);switch(t.cellType){case"chip":return o`<ngc-table-cell-chip .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-chip>`;case"avatar":return o`<ngc-table-cell-avatar .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-avatar>`;case"checkbox":return o`<ngc-table-cell-checkbox .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-checkbox>`;case"text-link":return o`<ngc-table-cell-text-link .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text-link>`;case"button":return o`<ngc-table-cell-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-button>`;case"icon-button":return o`<ngc-table-cell-icon-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-icon-button>`;case"input-dropdown":return o`<ngc-table-cell-input-dropdown .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-dropdown>`;case"input-text":return o`<ngc-table-cell-input-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-text>`;default:return o`<ngc-table-cell-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text>`}}handleCellChange(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellchange",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,value:i}}))}handleCellClick(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellclick",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,...i!==void 0&&{value:i}}}))}};h.styles=[
|
|
259
|
+
`}getCellAlignClass(e){return`gator-table-cell-${e.cellConfig?.align??"left"}`}renderCellByType(e,t,l,i){const s=a=>this.handleCellChange(a),r=a=>this.handleCellClick(a);switch(t.cellType){case"chip":return o`<ngc-table-cell-chip .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-chip>`;case"avatar":return o`<ngc-table-cell-avatar .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-avatar>`;case"checkbox":return o`<ngc-table-cell-checkbox .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-checkbox>`;case"text-link":return o`<ngc-table-cell-text-link .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text-link>`;case"button":return o`<ngc-table-cell-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-button>`;case"icon-button":return o`<ngc-table-cell-icon-button .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-icon-button>`;case"input-dropdown":return o`<ngc-table-cell-input-dropdown .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-dropdown>`;case"input-text":return o`<ngc-table-cell-input-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-input-text>`;default:return o`<ngc-table-cell-text .rowData="${e}" .column="${t}" .rowIndex="${l}" .categoryHeaderId="${i}" @cellchange="${s}" @cellclick="${r}"></ngc-table-cell-text>`}}handleCellChange(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellchange",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,value:i}}))}handleCellClick(e){e.stopPropagation();const{rowIndex:t,field:l,value:i}=e.detail??{};this.dispatchEvent(new CustomEvent("cellclick",{bubbles:!0,composed:!0,detail:{rowIndex:t,field:l,...i!==void 0&&{value:i}}}))}};h.styles=[y(O),y(A),y(R)];g([v({type:Boolean})],h.prototype,"elevated",2);g([v({type:Boolean,attribute:"include-pagination"})],h.prototype,"includePagination",2);g([v({type:Boolean,attribute:"include-page-selection"})],h.prototype,"includePageSelection",2);g([v({type:Boolean})],h.prototype,"skeleton",2);g([v({type:String,attribute:"sort-field"})],h.prototype,"sortField",2);g([v({type:String,attribute:"sort-direction"})],h.prototype,"sortDirection",2);g([v({type:Object,attribute:!1})],h.prototype,"filterValues",2);g([$()],h.prototype,"selectedRows",2);g([$()],h.prototype,"_currentPage",2);g([$()],h.prototype,"_sortField",2);g([$()],h.prototype,"_sortDirection",2);g([$()],h.prototype,"_hoveredHeaderColumnField",2);g([$()],h.prototype,"_pendingFilterValues",2);g([$()],h.prototype,"_filterSearchQuery",2);g([$()],h.prototype,"_visibleFilterChipCount",2);h=g([T("ngc-table"),x()],h);export{h as NgcTable};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const o=':root,:host{--ngc-input-dropdown-list-max-height: 14rem}ngc-icon-button{--ngc-icon-button-hover-box-shadow: none;margin-top:-.5rem;margin-bottom:-.5rem}.gator-dropdown-listbox{position:fixed;width:max-content;top:0;left:0;max-height:var(--ngc-input-dropdown-list-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--border-radius-medium);padding:var(--spacing-5) var(--spacing-2);background:var(--color-surface-primary);box-shadow:var(--shadow-3-dropdown);margin:0;border:none}.gator-dropdown-listbox:not(:popover-open){display:none}.gator-form-element{position:relative}.gator-form-element-control:focus-visible:not(.gator-disabled){outline:2px solid var(--ngc-input-border-color-focused, var(--color-border-neutral, #1F1F1F))!important;outline-offset:0}.gator-dropdown-listbox_expanded{display:block}.gator-faux-input-placeholder{color:var(--color-text-placeholder);font-family:var(--font-family-body, "Open Sans"),sans-serif;font-size:var(--font-size-body-1);line-height:var(--line-height-body-1);letter-spacing:var(--letter-spacing-default)}.gator-dropdown-listbox-message{display:block;padding:var(--spacing-5) var(--spacing-8);align-self:stretch;color:var(--color-text-primary);font-family:var(--font-family-body, "Open Sans"),sans-serif;font-size:var(--font-size-body-1)}.gator-dropdown-listbox-message .gator-tag-input-kbd{display:inline-block;padding:0 var(--spacing-3);border-radius:var(--border-radius-small);background:#000;color:#fff;font-family:inherit;font-size:inherit;line-height:inherit}.gator-dropdown-chevron{display:var(--ngc-input-dropdown-end-chevron-display)}.gator-readonly .gator-dropdown-chevron{--ngc-icon-color: var(--color-icon-disabled)}.gator-multiselect-selections{flex-wrap:wrap;display:flex;gap:var(--spacing-5);width:100%;align-items:center;max-height:70px;overflow-y:auto;margin:-2px 0}.gator-multiselect-selections .gator-input,.gator-multiselect-selections .gator-faux-input{width:max-content}.gator-multiselect-selections .gator-multiselect-label{position:absolute;top:0;left:0;visibility:hidden;opacity:0}.gator-multiselect-selections .gator-chips-container{display:flex;gap:var(--spacing-5);max-width:100%;overflow:hidden}.gator-multiselect-selections .gator-chips-container.gator-chips-container-autocomplete{max-width:66%}.gator-multiselect-selections .gator-chips-container:not(:has(*)){margin-right:calc(var(--spacing-5) * -1)}.gator-dropdown-option{--ngc-list-item-interaction-icon-color: var(--color-border-primary)}.gator-dropdown-select-all[
|
|
1
|
+
const o=':root,:host{--ngc-input-dropdown-list-max-height: 14rem}ngc-icon-button{--ngc-icon-button-hover-box-shadow: none;margin-top:-.5rem;margin-bottom:-.5rem}.gator-dropdown-listbox{position:fixed;width:max-content;top:0;left:0;max-height:var(--ngc-input-dropdown-list-max-height);overflow-y:auto;overflow-x:hidden;border-radius:var(--border-radius-medium);padding:var(--spacing-5) var(--spacing-2);background:var(--color-surface-primary);box-shadow:var(--shadow-3-dropdown);margin:0;border:none}.gator-dropdown-listbox:not(:popover-open){display:none}.gator-form-element{position:relative}.gator-form-element-control:focus-visible:not(.gator-disabled){outline:2px solid var(--ngc-input-border-color-focused, var(--color-border-neutral, #1F1F1F))!important;outline-offset:0}.gator-dropdown-listbox_expanded{display:block}.gator-faux-input-placeholder{color:var(--color-text-placeholder);font-family:var(--font-family-body, "Open Sans"),sans-serif;font-size:var(--font-size-body-1);line-height:var(--line-height-body-1);letter-spacing:var(--letter-spacing-default)}.gator-dropdown-listbox-message{display:block;padding:var(--spacing-5) var(--spacing-8);align-self:stretch;color:var(--color-text-primary);font-family:var(--font-family-body, "Open Sans"),sans-serif;font-size:var(--font-size-body-1)}.gator-dropdown-listbox-message .gator-tag-input-kbd{display:inline-block;padding:0 var(--spacing-3);border-radius:var(--border-radius-small);background:#000;color:#fff;font-family:inherit;font-size:inherit;line-height:inherit}.gator-dropdown-chevron{display:var(--ngc-input-dropdown-end-chevron-display)}.gator-readonly .gator-dropdown-chevron{--ngc-icon-color: var(--color-icon-disabled)}.gator-multiselect-selections{flex-wrap:wrap;display:flex;gap:var(--spacing-5);width:100%;align-items:center;max-height:70px;overflow-y:auto;margin:-2px 0}.gator-multiselect-selections .gator-input,.gator-multiselect-selections .gator-faux-input{width:max-content}.gator-multiselect-selections .gator-multiselect-label{position:absolute;top:0;left:0;visibility:hidden;opacity:0}.gator-multiselect-selections .gator-chips-container{display:flex;gap:var(--spacing-5);max-width:100%;overflow:hidden}.gator-multiselect-selections .gator-chips-container.gator-chips-container-autocomplete{max-width:66%}.gator-multiselect-selections .gator-chips-container:not(:has(*)){margin-right:calc(var(--spacing-5) * -1)}.gator-dropdown-option{--ngc-list-item-interaction-icon-color: var(--color-border-primary)}.gator-dropdown-select-all[data-select-all-icon=checkbox]{--ngc-list-item-start-icon-color: var(--color-border-primary)}.gator-dropdown-select-all[data-select-all-icon=checkbox-selected],.gator-dropdown-select-all[data-select-all-icon=checkbox-indeterminate]{--ngc-list-item-start-icon-color: var(--color-feedback-brand)}ngc-loading-spinner{padding:0 3px}';export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const r='.gator-table-filter-chips{display:flex;flex-wrap:
|
|
1
|
+
const r=':host{--ngc-table-filter-options-max-height: 14rem}.gator-table-filter-chips{display:flex;flex-wrap:nowrap;gap:var(--spacing-8);padding:0 0 var(--spacing-8);align-items:center;overflow:hidden}.gator-table-filter-chips-clear-all{flex:0 0 auto;font-family:var(--font-family-body, "Open Sans"),sans-serif;font-size:var(--font-size-body-2);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-2);letter-spacing:var(--letter-spacing-default, 0);color:var(--color-text-brand, var(--color-text-primary));background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.gator-table-filter-chips-clear-all:hover{color:var(--color-feedback-brand-secondary)}.gator-table-filter-chips-clear-all:focus{outline:none}.gator-table-filter-chips-clear-all:focus-visible{outline:2px solid var(--color-border-focus, currentColor);outline-offset:2px}.gator-table-filter-chips-popover-content{display:grid;grid-template-columns:repeat(2,max-content);gap:var(--spacing-5)}.gator-table-filter-chips-popover{--ngc-popover-width: max-content}.gator-table-scroll{width:100%;overflow-x:auto}.gator-table{font-family:var(--font-family-body, "Open Sans"),sans-serif;border-spacing:0;width:100%;border-radius:var(--ngc-table-border-radius, var(--border-radius-medium));background-color:var(--ngc-table-row-background-color, var(--color-surface-primary))}.gator-table thead>th,.gator-table thead>tr{height:3rem;min-height:3rem}.gator-table thead>th :first-child,.gator-table thead>tr :first-child{border-top-left-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table thead>th :last-child,.gator-table thead>tr :last-child{border-top-right-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table tbody>tr,.gator-table tfoot>tr{min-height:3rem;height:3rem}.gator-table th{background:var(--ngc-table-header-background-color, var(--color-surface-brand));text-align:left;padding:var(--spacing-5) var(--spacing-8);border-bottom:1px solid var(--ngc-table-header-border-bottom-color, var(--color-border-tertiary))}.gator-table th:hover{background:var(--ngc-table-header-background-color-hover, var(--color-surface-brand-secondary))}.gator-table .gator-table-header-cell-interactive{cursor:default}.gator-table .gator-table-header-cell-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-5);width:100%;min-width:0}.gator-table .gator-table-header-sort-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;cursor:pointer;flex:1}.gator-table .gator-table-header-sort-trigger:focus{outline:none}.gator-table .gator-table-header-sort-trigger:focus-visible{outline:2px solid var(--color-border-focus, currentColor);outline-offset:2px;border-radius:0}.gator-table .gator-table-header-label{min-width:0}.gator-table .gator-table-sort-icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.gator-table .gator-table-sort-icon{flex-shrink:0}.gator-table th:not(.gator-table-header-cell-sort-active) .gator-table-header-sort-trigger .gator-table-sort-icon-wrap .gator-table-sort-icon{opacity:0}.gator-table th:hover .gator-table-header-sort-trigger .gator-table-sort-icon-wrap .gator-table-sort-icon,.gator-table th.gator-table-header-cell-sort-active .gator-table-header-sort-trigger .gator-table-sort-icon-wrap .gator-table-sort-icon{opacity:1}.gator-table .gator-table-header-filter-trigger-wrap{flex-shrink:0;display:inline-flex;align-items:center;width:2rem;margin-left:var(--spacing-5);opacity:0;pointer-events:none;transition:opacity .15s ease}.gator-table .gator-table-header-filter-trigger-wrap.gator-table-header-filter-trigger-visible{opacity:1;pointer-events:auto}.gator-table .gator-table-header-filter-icon-active{color:var(--color-text-brand, currentColor)}.gator-table .gator-table-header-filter-trigger-wrap,.gator-table .gator-table-header-filter-trigger-wrap ngc-popover{font-weight:var(--font-weight-regular)}.gator-table .gator-table-header-filter-trigger-wrap ngc-popover{--ngc-popover-width: max-content}.gator-table .gator-table-filter-popover-content{min-width:0;display:flex;flex-direction:column;gap:var(--spacing-5)}.gator-table .gator-table-filter-popover-search{--ngc-input-search-margin-bottom: 0}.gator-table .gator-table-filter-popover-footer{display:flex;gap:var(--spacing-5);justify-content:flex-start;width:100%}.gator-table .gator-table-filter-options{max-height:var(--ngc-table-filter-options-max-height);overflow-y:auto}.gator-table [dir=rtl] th.mat-header-cell{text-align:right}.gator-table td{padding:var(--spacing-5) var(--spacing-8);border-bottom:1px solid var(--ngc-table-row-border-bottom-color, var(--color-border-tertiary))}.gator-table tr:has(td:hover){background:var(--ngc-table-row-background-color-hover, var(--color-surface-secondary))}.gator-table tbody:last-child>tr:last-child th:first-child,.gator-table tbody:last-child>tr:last-child td:first-child{border-bottom-left-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table tbody:last-child>tr:last-child td:last-child{border-bottom-right-radius:var(--ngc-table-border-radius, var(--border-radius-medium))}.gator-table th:first-of-type,.gator-table td:first-of-type{padding-left:24px}.gator-table [dir=rtl] th:first-of-type,.gator-table [dir=rtl] td:first-of-type{padding-left:0;padding-right:24px}.gator-table th:last-of-type,.gator-table td:last-of-type{padding-right:24px}.gator-table [dir=rtl] th:last-of-type,.gator-table [dir=rtl] td:last-of-type{padding-right:0;padding-left:24px}.gator-table ngc-checkbox{--ngc-input-margin-bottom: 0}.gator-table ngc-input-dropdown,.gator-table ngc-input-text{--ngc-input-margin-bottom: 0}.gator-table .gator-table-cell-left{text-align:left}.gator-table .gator-table-cell-center{text-align:center}.gator-table .gator-table-cell-right{text-align:right}.gator-table .gator-table-cell-avatar{display:flex;align-items:center;gap:var(--spacing-4, 8px)}.gator-table .gator-table-cell-avatar .gator-table-cell-avatar-label{flex:1}.gator-table-empty-state-card{display:block;width:100%;border-radius:var(--border-radius-x-large, 16px);background:var(--color-surface-secondary, #F7F7F7);--ngc-card-border-radius: var(--border-radius-x-large, 16px);--ngc-card-background-color: var(--color-surface-secondary, #F7F7F7);--ngc-card-width: 100%;--ngc-card-max-width: none}.gator-table-empty-state{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--spacing-10) 0}.gator-table-checkbox-column{width:1%}.gator-table-row-selected{background-color:var(--ngc-table-row-background-color-selected, var(--color-surface-brand))}.gator-table-elevated{box-shadow:var(--shadow-1-card)}.gator-table-category-header{background-color:var(--ngc-table-header-background-color, var(--color-surface-brand))}.gator-table-category-header:hover{background-color:var(--ngc-table-header-hover-background-color, var(--color-surface-brand-secondary))!important}.gator-table-category-header th{border-bottom:none!important;font-weight:var(--font-weight-bold);background-color:var(--ngc-table-header-background-color, var(--color-surface-brand));color:var(--color-text-primary);line-height:var(--line-height-subtitle-2);letter-spacing:var(--letter-spacing-default)}.gator-table-total-row{background-color:var(--ngc-table-total-row-background-color, var(--color-surface-secondary))!important;font-weight:var(--font-weight-bold)}.gator-table-total-row:hover{background-color:var(--ngc-table-total-row-hover-background-color, var(--color-surface-tertiary))!important}.gator-table-total-row td,.gator-table-total-row th{background-color:var(--ngc-table-total-row-background-color, var(--color-surface-secondary))!important;border-top:1px solid var(--ngc-table-total-row-border-bottom-color, var(--color-border-tertiary));border-bottom:none!important}.gator-table-total-row th:hover{background-color:var(--ngc-table-total-row-background-color, var(--color-surface-tertiary))!important}.gator-table-total-label{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}';export{r as default};
|
|
@@ -32,6 +32,11 @@ export declare class NjcChip extends TestableLitElement {
|
|
|
32
32
|
@type {String}
|
|
33
33
|
**/
|
|
34
34
|
startIcon: string;
|
|
35
|
+
/**
|
|
36
|
+
@property endIcon - The icon to display at the end of the chip.
|
|
37
|
+
@type {String}
|
|
38
|
+
**/
|
|
39
|
+
endIcon: string;
|
|
35
40
|
/**
|
|
36
41
|
@property dismissible - If true, the chip displays a dismiss button and emits a "dismiss" event when clicked.
|
|
37
42
|
@type {boolean}
|
|
@@ -1,12 +1,34 @@
|
|
|
1
|
-
import { nothing } from 'lit';
|
|
1
|
+
import { nothing, PropertyValues } from 'lit';
|
|
2
2
|
import { Ref } from 'lit/directives/ref.js';
|
|
3
3
|
import { NgcInputBase } from '../../base/input-base.gator.ts';
|
|
4
4
|
import { NgcList } from '../../../list/gator/list/list.gator.ts';
|
|
5
|
+
import { NgcListItem } from '../../../list/gator/list-item/list-item.gator.ts';
|
|
5
6
|
export type NgcDropdownType = {
|
|
6
7
|
label: string;
|
|
7
8
|
value: string | number;
|
|
9
|
+
/** Icon name; host stamps `<ngc-icon slot="start">` when rendering */
|
|
10
|
+
startIcon?: string;
|
|
11
|
+
/** Icon name; host stamps `<ngc-icon slot="end">` when rendering */
|
|
12
|
+
endIcon?: string;
|
|
13
|
+
/** Secondary text under the option label */
|
|
14
|
+
subtitle?: string;
|
|
15
|
+
/** When true, option is non-interactive and skipped by keyboard navigation */
|
|
16
|
+
disabled?: boolean;
|
|
8
17
|
};
|
|
9
18
|
export type NgcDropdownDataType = 'country' | 'state' | 'naics' | 'phoneCodes';
|
|
19
|
+
/** Internal list-item value for the Select All row — avoid using this as an option value. */
|
|
20
|
+
export declare const NGC_DROPDOWN_SELECT_ALL_VALUE = "__ngc_select_all__";
|
|
21
|
+
/**
|
|
22
|
+
* Dropdown / combobox. Options come from either:
|
|
23
|
+
* - the `options` / `data-type` props (data-driven), or
|
|
24
|
+
* - light-DOM `ngc-list-item` children (slotted). If any list-item children are present,
|
|
25
|
+
* they win and `options` / `data-type` are ignored.
|
|
26
|
+
*
|
|
27
|
+
* Slotted items must be direct children of `ngc-input-dropdown` (not wrapped in other elements).
|
|
28
|
+
*
|
|
29
|
+
* @slot label - Optional custom label
|
|
30
|
+
* @slot - Optional `ngc-list-item` children used as the listbox options (avatars, custom start/end, etc.)
|
|
31
|
+
*/
|
|
10
32
|
export declare class NgcInputDropdown extends NgcInputBase {
|
|
11
33
|
static shadowRootOptions: {
|
|
12
34
|
delegatesFocus: boolean;
|
|
@@ -86,6 +108,11 @@ export declare class NgcInputDropdown extends NgcInputBase {
|
|
|
86
108
|
private _visibleChipCount;
|
|
87
109
|
private _showOverflowChip;
|
|
88
110
|
private _truncateChips;
|
|
111
|
+
/**
|
|
112
|
+
* True when light-DOM `ngc-list-item` children are projected into the listbox.
|
|
113
|
+
* When true, `options` / `data-type` are ignored (either/or).
|
|
114
|
+
*/
|
|
115
|
+
private _hasSlottedListItems;
|
|
89
116
|
private _resizeObserver;
|
|
90
117
|
private _calculationPending;
|
|
91
118
|
listboxRef: Ref<HTMLDivElement>;
|
|
@@ -94,6 +121,11 @@ export declare class NgcInputDropdown extends NgcInputBase {
|
|
|
94
121
|
listboxMessageRef: Ref<HTMLElement>;
|
|
95
122
|
protected multiselectValueDelimiter: string;
|
|
96
123
|
disconnectedCallback(): void;
|
|
124
|
+
/**
|
|
125
|
+
* Detect direct light-DOM list items before paint so we don't briefly render
|
|
126
|
+
* `options` alongside slotted children while waiting for slotchange.
|
|
127
|
+
*/
|
|
128
|
+
protected willUpdate(changedProperties: PropertyValues): void;
|
|
97
129
|
render(): import('lit').TemplateResult<1>;
|
|
98
130
|
get controlClasses(): {
|
|
99
131
|
'gator-cursor-pointer': boolean;
|
|
@@ -140,6 +172,29 @@ export declare class NgcInputDropdown extends NgcInputBase {
|
|
|
140
172
|
private get autocompleteEditorValue();
|
|
141
173
|
get showPlaceholder(): boolean | "";
|
|
142
174
|
get listboxMarkup(): import('lit').TemplateResult<1>;
|
|
175
|
+
/**
|
|
176
|
+
* Direct light-DOM `ngc-list-item` children (default slot). Used when composing rich
|
|
177
|
+
* options (avatars, custom start/end) instead of the `options` array. Nested/wrapped
|
|
178
|
+
* list items are not supported — place them as direct children of the dropdown.
|
|
179
|
+
*/
|
|
180
|
+
get slottedListItems(): NgcListItem[];
|
|
181
|
+
private refreshSlottedMode;
|
|
182
|
+
private handleDefaultSlotChange;
|
|
183
|
+
/** Consistent value matching for selection / labels (strict equality). */
|
|
184
|
+
private isSameOptionValue;
|
|
185
|
+
/**
|
|
186
|
+
* Keeps slotted list items in sync with dropdown state (selection, faux-focus, autocomplete filter).
|
|
187
|
+
* Applies the same maxAutocompleteResults cap as the data-driven options path when autocomplete is on.
|
|
188
|
+
*/
|
|
189
|
+
private syncSlottedListItems;
|
|
190
|
+
private get visibleSlottedListItemCount();
|
|
191
|
+
/** Visible options in the listbox — data-driven or slotted. */
|
|
192
|
+
private get hasVisibleListOptions();
|
|
193
|
+
/**
|
|
194
|
+
* Values that Select All should consider: currently displayed/visible and not disabled.
|
|
195
|
+
* Matches data-driven `displayedOptions` filtering for autocomplete.
|
|
196
|
+
*/
|
|
197
|
+
private get selectableOptionValues();
|
|
143
198
|
get selectAllIcon(): "checkbox-selected" | "checkbox" | "checkbox-indeterminate";
|
|
144
199
|
get allSelected(): boolean;
|
|
145
200
|
selectAllOptions(): void;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PropertyValues } from 'lit';
|
|
1
2
|
import { Ref } from 'lit/directives/ref.js';
|
|
2
3
|
import { CountryCode } from 'libphonenumber-js';
|
|
3
4
|
import { NgcInputBase } from '../../base/input-base.gator.ts';
|
|
@@ -14,6 +15,11 @@ export declare class NgcInputPhone extends NgcInputBase {
|
|
|
14
15
|
defaultCountry?: string;
|
|
15
16
|
inputContainer: Ref<HTMLDivElement>;
|
|
16
17
|
dropdownContainer: Ref<NgcInputDropdown>;
|
|
18
|
+
/**
|
|
19
|
+
* Latest raw text typed into the number field. `value` is not written back on input — that
|
|
20
|
+
* would feed `ngc-input-text`'s `live()` directive and reset the caret mid-typing.
|
|
21
|
+
*/
|
|
22
|
+
private lastRawPhoneValue;
|
|
17
23
|
/**
|
|
18
24
|
* ISO region for the calling-code control and libphonenumber default: explicit dropdown
|
|
19
25
|
* selection, otherwise `default-country` (normalized). Not the same as `countryCodeValue`
|
|
@@ -21,7 +27,8 @@ export declare class NgcInputPhone extends NgcInputBase {
|
|
|
21
27
|
*/
|
|
22
28
|
get phoneRegionIso(): CountryCode | undefined;
|
|
23
29
|
render(): import('lit').TemplateResult<1>;
|
|
24
|
-
updated(): void;
|
|
30
|
+
updated(changedProperties: PropertyValues<this>): void;
|
|
31
|
+
private get currentPhoneValue();
|
|
25
32
|
handleSelected(e: CustomEvent): void;
|
|
26
33
|
/**
|
|
27
34
|
* Validity for the selected/default region when known; otherwise only when the library
|
|
@@ -29,6 +36,9 @@ export declare class NgcInputPhone extends NgcInputBase {
|
|
|
29
36
|
* validated and is treated as valid (`true`).
|
|
30
37
|
*/
|
|
31
38
|
private isValidPhoneNumberForCurrentContext;
|
|
39
|
+
/** Builds the `change` detail and applies the parse-derived state, for every emit path. */
|
|
40
|
+
private buildChangeDetail;
|
|
41
|
+
private emitPhoneChange;
|
|
32
42
|
handlePhoneInput(e: CustomEvent): void;
|
|
33
43
|
get slotLabelMarkup(): import('lit').TemplateResult<1>;
|
|
34
44
|
}
|