@ncino/web-components 13.3.0 → 13.4.2
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-pagination/table-pagination.gator.js +11 -11
- package/dist/components/table/gator/table.gator.js +5 -2
- package/dist/components/table/table.js +1 -1
- package/dist/packages/web-components/src/components/checkbox/checkbox.gator.scss.js +1 -1
- package/dist/types/components/popover/popover.d.ts +5 -1
- package/dist/types/components/table/gator/table-pagination/table-pagination.gator.d.ts +1 -0
- package/dist/types/components/table/table.d.ts +1 -0
- package/dist/types/utils/components/design-tokens/css-color-utils.d.ts +4 -0
- package/dist/types/utils/components/design-tokens/css-token-parser.d.ts +12 -0
- package/dist/types/utils/components/design-tokens/semantic-tokens-table.d.ts +10 -0
- package/dist/types/utils/components/design-tokens/token-parser.d.ts +21 -1
- package/dist/types/utils/storybook-utils.d.ts +3 -1
- package/dist/utils/components/design-tokens/css-color-utils.js +1 -0
- package/dist/utils/components/design-tokens/css-token-parser.js +2 -0
- package/dist/utils/components/design-tokens/semantic-tokens-table.js +1 -0
- package/dist/utils/components/design-tokens/token-parser.js +1 -1
- package/dist/utils/storybook-utils.js +1 -1
- package/package.json +3 -3
- package/web-types.json +22 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{NjcPopover 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 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.7.5/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,s)=>{for(var o=s>1?void 0:s?w(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
|
+
${m(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 m}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="${k("Close")} ${this.title}"
|
|
17
17
|
icon-name="exit"
|
|
18
18
|
size="xsmall"
|
|
19
19
|
@click="${this.hidePopover}"
|
|
@@ -46,4 +46,4 @@ import{NjcPopover as m}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._computedPlacement.includes("left")?-12+this.xOffset:this._computedPlacement.includes("right")?12+this.xOffset:0}get _yPositionOffset(){return this._computedPlacement.includes("top")?-12+this.yOffset:this._computedPlacement.includes("bottom")?12+this.yOffset:0}get _nubbinPositionClass(){return{"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"),
|
|
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,s=!!this.errorText;e&&(e.style.display=i||s?"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:r,y:n,placement:h}=await E(t,this._popoverRef.value,o);this._placement!==h&&(this._placement=h,this.requestUpdate()),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={...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
|
-
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
|
|
1
|
+
import{property as a}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as v}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{createRef as m}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{generateRandomId as E}from"../../utils/string-utils.js";import{TestableLitElement as b}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{handleDataTestid as f}from"../../utils/datatestid-utils.js";import{StripTitleFromHostMixin as y}from"../../utils/mixins/strip-title-from-host-mixin.js";import{getFirstFocusableElement as _,getFocusableElements as u}from"../../utils/accessibility-utils.js";var w=Object.defineProperty,r=(d,e,s,t)=>{for(var i=void 0,o=d.length-1,h;o>=0;o--)(h=d[o])&&(i=h(e,s,i)||i);return i&&w(e,s,i),i};class n extends y(b){constructor(){super(...arguments),this.referenceId="",this.title="",this.xOffset=0,this.yOffset=0,this.iconName=void 0,this.errorText=void 0,this.size="medium",this.hideTippet=!1,this.showOnHover=!1,this._popoverRef=m(),this._forceOpen=!1,this._open=!1,this._mousedInsidePopover=!1,this._placement="top",this.popoverId=E(),this.elementListeners=new WeakMap}get isOpen(){return this._open}firstUpdated(){if(this._popoverRef.value&&(this._popoverRef.value.style.visibility="hidden",this._popoverRef.value.style.opacity="0"),!this.referenceId)return;const e=this.referenceElement,s=this._popoverRef.value;if(!e||!s)return;let t;e.shadowRoot?.delegatesFocus?t=_(e):t=e,t&&(t.ariaDescribedByElements=[this]),f(e,this.dataTestid,"trigger"),f(s,this.dataTestid,"popover"),e.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","false"),this.showOnHover?this._addShowOnHoverEvents(e,s):this._addShowOnClickEvents(e)}updated(e){if(super.updated(e),e.has("showOnHover")&&e.get("showOnHover")!==void 0){const s=this.referenceElement,t=this._popoverRef.value;t&&(this.removeAllTrackedEventListeners(s),this.removeAllTrackedEventListeners(t),this.removeAllTrackedEventListeners(document),this.showOnHover?this._addShowOnHoverEvents(s,t):this._addShowOnClickEvents(s))}}get referenceElement(){let e=document.querySelector(`#${this.referenceId}`);return e||(e=document.querySelector(`[data-id="${this.referenceId}"]`)?.shadowRoot?.querySelector(`#${this.referenceId}`)),!e&&this.previousElementSibling&&this.previousElementSibling.id===this.referenceId&&(e=this.previousElementSibling),e}_addShowOnHoverEvents(e,s){this.addTrackedEventListener(e,"mouseenter",()=>this.showPopover()),this.addTrackedEventListener(e,"mouseleave",t=>this._handleMouseLeave(t,e,s)),this.addTrackedEventListener(e,"click",()=>this.showPopover(!0)),this.addTrackedEventListener(s,"mouseenter",()=>this.showPopover()),this.addTrackedEventListener(s,"mouseleave",t=>{if(this._mousedInsidePopover){this.hidePopover();return}this._handleMouseLeave(t,e,s)})}_addShowOnClickEvents(e){this.addTrackedEventListener(e,"click",()=>this.showPopover()),this.addTrackedEventListener(document,"click",s=>{const t=s.composedPath(),i=t.includes(e);!t.includes(this)&&!i&&this.hidePopover()})}addTrackedEventListener(e,s,t,i={}){this.elementListeners.has(e)||this.elementListeners.set(e,[]),this.elementListeners.get(e).push({eventType:s,listener:t,options:i}),e.addEventListener(s,t,i)}removeAllTrackedEventListeners(e){if(!this.elementListeners.has(e))return;const s=this.elementListeners.get(e);for(const{eventType:t,listener:i,options:o}of s)e.removeEventListener(t,i,o);this.elementListeners.delete(e)}_handleMouseLeave(e,s,t){const i=s.getBoundingClientRect(),o=t.getBoundingClientRect(),h=this._isMouseInside(e,i,-5),l=this._isMouseInside(e,o,25);!h&&!l&&this.hidePopover(),l&&(this._mousedInsidePopover=!0)}_isMouseInside(e,s,t=0){const{left:i,right:o,top:h,bottom:l}=s,c=e.clientX,p=e.clientY;return c>=i-t&&c<=o+t&&p>=h-t&&p<=l+t}showPopover(e=!1){this.assignPosition();const s=this.referenceElement,t=this._popoverRef.value;t&&(t.style.visibility="visible",t.style.opacity="1"),s&&s.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","true"),this._open=!0,this._focusFirstElement(e)}hidePopover(){this._forceOpen||(this._popoverRef.value&&(this._popoverRef.value.style.visibility="hidden",this._popoverRef.value.style.opacity="0"),this.referenceElement&&this.referenceElement.shadowRoot?.firstElementChild?.setAttribute("aria-expanded","false"),this._open=!1,this.dispatchEvent(new CustomEvent("closed",{bubbles:!0})))}_getKeyboardFocusableElements(){let e=[];const s=this.shadowRoot?.querySelector('slot[name="footer"]');if(this.shadowRoot&&(e=e.concat(u(this.shadowRoot))),s){const t=Array.from(s.assignedElements());for(const i of t)e=e.concat(u(i))}return e.filter(t=>!t.hasAttribute("disabled")&&!t.hasAttribute("aria-hidden"))}_focusFirstElement(e=!1){const s=this._getKeyboardFocusableElements();if(s.length>0){const t=s[0];requestAnimationFrame(()=>{let i;e?i=t:(i=t.shadowRoot?.firstElementChild,i?.classList.add("no-focus-visible")),i?.focus()})}}assignPosition(){}disconnectedCallback(){this._cleanup&&this._cleanup(),super.disconnectedCallback()}}r([a({attribute:"reference-id"})],n.prototype,"referenceId");r([a({type:String,attribute:!1})],n.prototype,"title");r([a()],n.prototype,"placement");r([a({type:Number,attribute:"x-offset"})],n.prototype,"xOffset");r([a({type:Number,attribute:"y-offset"})],n.prototype,"yOffset");r([a({type:String,attribute:"icon-name"})],n.prototype,"iconName");r([a({type:String,attribute:"error-text"})],n.prototype,"errorText");r([a()],n.prototype,"size");r([a({type:Boolean,attribute:"hide-tippet"})],n.prototype,"hideTippet");r([a({type:Boolean,attribute:"show-on-hover"})],n.prototype,"showOnHover");r([v()],n.prototype,"_open");export{n as NjcPopover};
|
|
@@ -1,14 +1,14 @@
|
|
|
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 u}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 g}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as P}from"../../../../utils/decorators/custom-element-decorator.js";import{NgcComponent as c}from"../../../../utils/components/ngc-component.js";import{msg as r}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 p from"../../../../packages/web-components/src/components/table/gator/table-pagination/table-pagination.gator.scss.js";import"../../../button/gator/button.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../menu/base/slds/menu.slds.js";import"../../../menu/base/gator/menu.gator.js";import"../../../menu/menu-divider/menu-divider.slds.js";import"../../../menu/menu-item/slds/menu-item.slds.js";import"../../../menu/menu-item/gator/menu-item.gator.js";import"../../../menu/menu-submenu/menu-submenu.slds.js";import{unsafeCSS as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var d=Object.defineProperty,v=Object.getOwnPropertyDescriptor,b=Object.getPrototypeOf,$=Reflect.get,n=(e,t,i,o)=>{for(var s=o>1?void 0:o?v(t,i):t,m=e.length-1,l;m>=0;m--)(l=e[m])&&(s=(o?l(t,i,s):l(s))||s);return o&&s&&d(t,i,s),s},f=(e,t,i)=>$(b(e),i,t);let a=class extends c{constructor(){super(...arguments),this.currentPage=1,this.totalItems=0,this.itemsPerPage=10,this.itemsPerPageOptions=["10","15","20","50","100",r("All")]}updated(){this.currentPage>this.totalItems&&(this.currentPage=1)}render(){return u`
|
|
2
2
|
<div class="gator-table-pagination">
|
|
3
3
|
<div class="gator-table-pagination-items-per-row">
|
|
4
|
-
${
|
|
4
|
+
${r("Items per page:")}
|
|
5
5
|
<div class="gator-table-items-per-row-selector">
|
|
6
6
|
<ngc-menu @menuitemclick="${this.handleItemsPerPageChanged}">
|
|
7
7
|
<ngc-button
|
|
8
8
|
variant="base"
|
|
9
9
|
slot="trigger"
|
|
10
10
|
end-icon="sort-arrow-solid-down"
|
|
11
|
-
aria-label="${
|
|
11
|
+
aria-label="${r("Items per page")}: ${this.itemsPerPage}"
|
|
12
12
|
>
|
|
13
13
|
${this.itemsPerPage}
|
|
14
14
|
</ngc-button>
|
|
@@ -26,7 +26,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
26
26
|
?disabled="${this.isPreviousPageDisabled}"
|
|
27
27
|
size="medium"
|
|
28
28
|
icon-name="chevron-left"
|
|
29
|
-
aria-label="${
|
|
29
|
+
aria-label="${r("Previous page")}"
|
|
30
30
|
></ngc-icon-button>
|
|
31
31
|
</div>
|
|
32
32
|
<ngc-menu @menuitemclick="${this.handleCurrentPageChanged}">
|
|
@@ -34,26 +34,26 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
34
34
|
variant="base"
|
|
35
35
|
slot="trigger"
|
|
36
36
|
end-icon="sort-arrow-solid-down"
|
|
37
|
-
aria-label="${
|
|
37
|
+
aria-label="${r("Current page")}, ${this.currentPage} ${r("of")} ${this.totalPages}"
|
|
38
38
|
>
|
|
39
39
|
${this.currentPage}
|
|
40
40
|
</ngc-button>
|
|
41
41
|
${this.menuItemsForPageSelection}
|
|
42
42
|
</ngc-menu>
|
|
43
|
-
${
|
|
43
|
+
${r("of")} ${this.totalPages}
|
|
44
44
|
<div class="gator-pagination-page-selector-right">
|
|
45
45
|
<ngc-icon-button
|
|
46
46
|
@click="${this.sendNextPageEvent}"
|
|
47
47
|
?disabled="${this.isNextPageDisabled}"
|
|
48
48
|
size="medium"
|
|
49
49
|
icon-name="chevron-right"
|
|
50
|
-
aria-label="${
|
|
50
|
+
aria-label="${r("Next page")}"
|
|
51
51
|
></ngc-icon-button>
|
|
52
52
|
</div>
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
|
-
`}handleCurrentPageChanged(e){this.currentPage=Number(e.detail.value),this.sendPageChangedEvent()}handleItemsPerPageChanged(e){e.detail.value===
|
|
55
|
+
`}handleCurrentPageChanged(e){this.currentPage=Number(e.detail.value),this.sendPageChangedEvent()}handleItemsPerPageChanged(e){e.detail.value===r("All")?this.itemsPerPage=this.totalItems:this.itemsPerPage=Number(e.detail.value),this.sendTotalPerPageChangeEvent()}get totalPages(){return Math.ceil(this.totalItems/this.itemsPerPage)}get menuItemsForItemsPerPage(){return this.itemsPerPageOptions.map(e=>u`
|
|
56
|
+
<ngc-menu-item value="${e}"></ngc-menu-item>
|
|
57
|
+
`)}get menuItemsForPageSelection(){return Array.from({length:this.totalPages},(t,i)=>i+1).map(t=>u`
|
|
56
58
|
<ngc-menu-item value="${t}"></ngc-menu-item>
|
|
57
|
-
`)}get
|
|
58
|
-
<ngc-menu-item value="${t}"></ngc-menu-item>
|
|
59
|
-
`)}get currentItemsViewedText(){const e=(this.currentPage-1)*this.itemsPerPage+1,t=Math.min(this.currentPage*this.itemsPerPage,this.totalItems);return`${e}-${t} ${a("of")} ${this.totalItems}`}get isPreviousPageDisabled(){return this.currentPage<=1}get isNextPageDisabled(){return this.currentPage>=this.totalPages}sendNextPageEvent(){this.currentPage++,this.sendPageChangedEvent()}sendPreviousPageEvent(){this.currentPage--,this.sendPageChangedEvent()}sendPageChangedEvent(){this.dispatchEvent(new CustomEvent("pagechanged",{detail:{page:this.currentPage},bubbles:!0,composed:!0}))}sendTotalPerPageChangeEvent(){this.dispatchEvent(new CustomEvent("itemsperpagechanged",{detail:{itemsPerPage:this.itemsPerPage},bubbles:!0,composed:!0}))}};r.styles=[...f(r,r,"styles"),h(p)];g([u({type:Number,attribute:"current-page"})],r.prototype,"currentPage",2);g([u({type:Number,attribute:"total-items"})],r.prototype,"totalItems",2);g([u({type:Number,attribute:"items-per-page"})],r.prototype,"itemsPerPage",2);r=g([c("ngc-table-pagination")],r);export{r as NgcTablePagination};
|
|
59
|
+
`)}get currentItemsViewedText(){const e=(this.currentPage-1)*this.itemsPerPage+1,t=Math.min(this.currentPage*this.itemsPerPage,this.totalItems);return`${e}-${t} ${r("of")} ${this.totalItems}`}get isPreviousPageDisabled(){return this.currentPage<=1}get isNextPageDisabled(){return this.currentPage>=this.totalPages}sendNextPageEvent(){this.currentPage++,this.sendPageChangedEvent()}sendPreviousPageEvent(){this.currentPage--,this.sendPageChangedEvent()}sendPageChangedEvent(){this.dispatchEvent(new CustomEvent("pagechanged",{detail:{page:this.currentPage},bubbles:!0,composed:!0}))}sendTotalPerPageChangeEvent(){this.dispatchEvent(new CustomEvent("itemsperpagechanged",{detail:{itemsPerPage:this.itemsPerPage},bubbles:!0,composed:!0}))}};a.styles=[...f(a,a,"styles"),h(p)];n([g({type:Number,attribute:"current-page"})],a.prototype,"currentPage",2);n([g({type:Number,attribute:"total-items"})],a.prototype,"totalItems",2);n([g({type:Number,attribute:"items-per-page"})],a.prototype,"itemsPerPage",2);n([g({type:Array,attribute:"items-per-page-options"})],a.prototype,"itemsPerPageOptions",2);a=n([P("ngc-table-pagination")],a);export{a as NgcTablePagination};
|
|
@@ -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 b,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 y}from"../../../utils/decorators/custom-element-decorator.js";import{msg as g}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{NjcTable as F}from"../table.js";import{formatTableTextValue as S}from"../table-format-utils.js";import
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as b,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 y}from"../../../utils/decorators/custom-element-decorator.js";import{msg as g}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{NjcTable as F}from"../table.js";import{formatTableTextValue as S}from"../table-format-utils.js";import P from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import T from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import x 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{unsafeCSS as C}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var _=Object.defineProperty,R=Object.getOwnPropertyDescriptor,p=(e,t,l,i)=>{for(var s=i>1?void 0:i?R(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&&_(t,l,s),s};let c=class extends F{constructor(){super(...arguments),this.elevated=!1,this.includePagination=!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.renderHeaderFilterPopover=(e,t)=>{const l=e.filterOptions??[],i=(this._filterSearchQuery[e.field]??"").toLowerCase(),s=i?l.filter(u=>u.label.toLowerCase().includes(i)):l,r=this.hasActiveFilter(e),a=e.filterMultiselect===!0,d=this.getEffectivePending(e),n=s.map(u=>({title:u.label,value:String(u.value)})),h=a?d.join(";"):"",f=a?"":d||"";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}"
|
|
@@ -11,6 +11,8 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
11
11
|
reference-id="filter-trigger-${e.field}"
|
|
12
12
|
.title=${g("Filter")}
|
|
13
13
|
size="small"
|
|
14
|
+
placement="bottom"
|
|
15
|
+
.hideTippet="${!0}"
|
|
14
16
|
@closed="${()=>this.handleFilterPopoverClosed(e)}"
|
|
15
17
|
>
|
|
16
18
|
<div slot="content" class="gator-table-filter-popover-content">
|
|
@@ -84,6 +86,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
84
86
|
items-per-page="${this.itemsPerPage}"
|
|
85
87
|
total-items="${this.data.length}"
|
|
86
88
|
current-page="${this._currentPage}"
|
|
89
|
+
.itemsPerPageOptions="${this.itemsPerPageOptions}"
|
|
87
90
|
@pagechanged="${this.handlePageChanged}"
|
|
88
91
|
@itemsperpagechanged="${this.handleItemsPerPageChanged}"
|
|
89
92
|
></ngc-table-pagination>
|
|
@@ -203,4 +206,4 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
203
206
|
<td role="gridcell" headers="${d}" class="${n}">
|
|
204
207
|
${h}
|
|
205
208
|
</td>
|
|
206
|
-
`}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}}}))}};c.styles=[C(
|
|
209
|
+
`}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}}}))}};c.styles=[C(x),C(T),C(P)];p([v({type:Boolean})],c.prototype,"elevated",2);p([v({type:Boolean,attribute:"include-pagination"})],c.prototype,"includePagination",2);p([v({type:Boolean})],c.prototype,"skeleton",2);p([v({type:String,attribute:"sort-field"})],c.prototype,"sortField",2);p([v({type:String,attribute:"sort-direction"})],c.prototype,"sortDirection",2);p([v({type:Object,attribute:!1})],c.prototype,"filterValues",2);p([$()],c.prototype,"selectedRows",2);p([$()],c.prototype,"_currentPage",2);p([$()],c.prototype,"_sortField",2);p([$()],c.prototype,"_sortDirection",2);p([$()],c.prototype,"_hoveredHeaderColumnField",2);p([$()],c.prototype,"_pendingFilterValues",2);p([$()],c.prototype,"_filterSearchQuery",2);c=p([y("ngc-table")],c);export{c as NgcTable};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as b}from"../../utils/components/testable-lit-element/testable-lit-element.js";var
|
|
1
|
+
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{msg as m}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{TestableLitElement as b}from"../../utils/components/testable-lit-element/testable-lit-element.js";var y=Object.defineProperty,e=(p,s,i,n)=>{for(var a=void 0,o=p.length-1,l;o>=0;o--)(l=p[o])&&(a=l(s,i,a)||a);return a&&y(s,i,a),a};class r extends b{constructor(){super(...arguments),this.columns=[],this.data=[],this.tableAriaLabelledBy=null,this.selectable=!1,this.currentPage=1,this.totalItems=0,this.itemsPerPage=10,this.itemsPerPageOptions=["10","15","20","50","100",m("All")]}}e([t({type:Object})],r.prototype,"columns");e([t({type:Object})],r.prototype,"data");e([t({type:String,attribute:"table-aria-labelledby"})],r.prototype,"tableAriaLabelledBy");e([t({type:Boolean})],r.prototype,"selectable");e([t({type:Number,attribute:"current-page"})],r.prototype,"currentPage");e([t({type:Number,attribute:"total-items"})],r.prototype,"totalItems");e([t({type:Number,attribute:"items-per-page"})],r.prototype,"itemsPerPage");e([t({type:Array,attribute:"items-per-page-options"})],r.prototype,"itemsPerPageOptions");export{r as NjcTable};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const r='.gator-checkbox{display:flex;width:fit-content;flex-direction:row;align-items:center;gap:.5rem;margin:var(--ngc-checkbox-margin-y, .5rem) 0;padding:.2rem}.gator-checkbox-title{font-family:var(--font-family-body, "Open Sans"),sans-serif;color:var(--ngc-checkbox-title-color-default, var(--color-text-primary, #1F1F1F));font-size:var(--ngc-checkbox-title-font-size, var(--font-size-body-1, 1.0625rem));line-height:var(--ngc-checkbox-title-line-height, var(--line-height-body-1, 1.5rem))}.gator-checkbox-input-wrapper:has(:focus-visible){box-shadow:0 0 0 2px var(--color-surface-primary-white, #FFF),0 0 0 4px var(--ngc-checkbox-color-focus-indicator, var(--color-border-focus, #1F1F1F))}.gator-checkbox-input-wrapper:has(:focus-visible) input:focus-visible{outline:none}input{margin:0;border-radius:var(--border-radius-small, .25rem);accent-color:var(--ngc-checkbox-color-selected, var(--color-feedback-brand, #103656))}.gator-checkbox-input-wrapper{display:flex;align-items:center;border-radius:2px;outline:1px solid transparent;outline-offset:-1px;transform:scale(1.4)}.gator-checkbox-input-wrapper:has(input:invalid:not(:checked,:indeterminate,:disabled)){outline-color:var(--ngc-checkbox-color-error, var(--color-feedback-error, #D44011))}.gator-checkbox-input-wrapper:has(input:invalid:not(:checked,:indeterminate,:disabled)):hover{outline-color:var(--ngc-checkbox-color-error-hover, var(--color-feedback-error, #D44011));background:var(--color-surface-error, #FAEBE7)}.gator-checkbox-input-wrapper:has(input:not(:checked,:indeterminate,:disabled)){outline-color:var(--ngc-checkbox-color-border-unselected, var(--color-border-primary, #6D6D6D));background:var(--color-surface-primary, #FFFFFF)}.gator-checkbox-input-wrapper:has(input:not(:checked,:indeterminate,:disabled)):hover{outline-color:var(--ngc-checkbox-color-border-hover, var(--color-feedback-brand-secondary, #0D2B45));background:var(--color-surface-brand-secondary, #DAE7F1)}input:not(:checked,:indeterminate,:disabled){opacity:0}input:checked,input:indeterminate,input:disabled{opacity:1}input:invalid{accent-color:var(--ngc-checkbox-color-error, var(--color-feedback-error, #D44011))}';export{r as default};
|
|
1
|
+
const r='.gator-checkbox{display:flex;width:fit-content;flex-direction:row;align-items:center;gap:.5rem;margin:var(--ngc-checkbox-margin-y, .5rem) 0;padding:.2rem;cursor:pointer}.gator-checkbox:has(input:disabled){cursor:not-allowed}.gator-checkbox-title{font-family:var(--font-family-body, "Open Sans"),sans-serif;color:var(--ngc-checkbox-title-color-default, var(--color-text-primary, #1F1F1F));font-size:var(--ngc-checkbox-title-font-size, var(--font-size-body-1, 1.0625rem));line-height:var(--ngc-checkbox-title-line-height, var(--line-height-body-1, 1.5rem));cursor:pointer}.gator-checkbox:has(input:disabled) .gator-checkbox-title{cursor:not-allowed}.gator-checkbox-input-wrapper:has(:focus-visible){box-shadow:0 0 0 2px var(--color-surface-primary-white, #FFF),0 0 0 4px var(--ngc-checkbox-color-focus-indicator, var(--color-border-focus, #1F1F1F))}.gator-checkbox-input-wrapper:has(:focus-visible) input:focus-visible{outline:none}input{margin:0;border-radius:var(--border-radius-small, .25rem);accent-color:var(--ngc-checkbox-color-selected, var(--color-feedback-brand, #103656));cursor:pointer}input:disabled{cursor:not-allowed}.gator-checkbox-input-wrapper{display:flex;align-items:center;border-radius:2px;outline:1px solid transparent;outline-offset:-1px;transform:scale(1.4)}.gator-checkbox-input-wrapper:has(input:invalid:not(:checked,:indeterminate,:disabled)){outline-color:var(--ngc-checkbox-color-error, var(--color-feedback-error, #D44011))}.gator-checkbox-input-wrapper:has(input:invalid:not(:checked,:indeterminate,:disabled)):hover{outline-color:var(--ngc-checkbox-color-error-hover, var(--color-feedback-error, #D44011));background:var(--color-surface-error, #FAEBE7)}.gator-checkbox-input-wrapper:has(input:not(:checked,:indeterminate,:disabled)){outline-color:var(--ngc-checkbox-color-border-unselected, var(--color-border-primary, #6D6D6D));background:var(--color-surface-primary, #FFFFFF)}.gator-checkbox-input-wrapper:has(input:not(:checked,:indeterminate,:disabled)):hover{outline-color:var(--ngc-checkbox-color-border-hover, var(--color-feedback-brand-secondary, #0D2B45));background:var(--color-surface-brand-secondary, #DAE7F1)}input:not(:checked,:indeterminate,:disabled){opacity:0}input:checked,input:indeterminate,input:disabled{opacity:1}input:invalid{accent-color:var(--ngc-checkbox-color-error, var(--color-feedback-error, #D44011))}';export{r as default};
|
|
@@ -45,6 +45,11 @@ export declare class NjcPopover extends NjcPopover_base {
|
|
|
45
45
|
* @description The size of the popover
|
|
46
46
|
*/
|
|
47
47
|
size: NJC_POPOVER_SIZE;
|
|
48
|
+
/**
|
|
49
|
+
* @property {boolean} hideTippet
|
|
50
|
+
* @description If true, a directional arrow (nubbin) pointing at the reference element is shown.
|
|
51
|
+
*/
|
|
52
|
+
hideTippet: boolean;
|
|
48
53
|
/**
|
|
49
54
|
* @property {string} showOnHover
|
|
50
55
|
* @description If true, the popover will show on hover of the reference element. If false,
|
|
@@ -64,7 +69,6 @@ export declare class NjcPopover extends NjcPopover_base {
|
|
|
64
69
|
get referenceElement(): HTMLElement;
|
|
65
70
|
private _addShowOnHoverEvents;
|
|
66
71
|
private _addShowOnClickEvents;
|
|
67
|
-
private _hasPopoverAsParent;
|
|
68
72
|
elementListeners: WeakMap<object, any>;
|
|
69
73
|
addTrackedEventListener(element: HTMLElement | Document, eventType: string, listener: Function, options?: AddEventListenerOptions): void;
|
|
70
74
|
removeAllTrackedEventListeners(element: HTMLElement | Document): void;
|
|
@@ -4,6 +4,7 @@ export declare class NgcTablePagination extends NgcComponent {
|
|
|
4
4
|
currentPage: number;
|
|
5
5
|
totalItems: number;
|
|
6
6
|
itemsPerPage: number;
|
|
7
|
+
itemsPerPageOptions: string[];
|
|
7
8
|
updated(): void;
|
|
8
9
|
render(): import('lit').TemplateResult<1>;
|
|
9
10
|
handleCurrentPageChanged(e: CustomEvent): void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type CssCustomProperty = {
|
|
2
|
+
name: string;
|
|
3
|
+
value: string;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Parse `--name: value;` declarations from a `:host, :root { … }` token file.
|
|
7
|
+
*/
|
|
8
|
+
export declare function parseCssCustomProperties(css: string): CssCustomProperty[];
|
|
9
|
+
/** All `var(--token)` references in a value string (first argument only). */
|
|
10
|
+
export declare function extractVarReferences(value: string): string[];
|
|
11
|
+
/** Primitive token file uses one declaration per line; trailing hex comments are preferred for display. */
|
|
12
|
+
export declare function buildPrimitiveDefaults(primitiveCss: string): Map<string, string>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export type SemanticTokenRow = {
|
|
2
|
+
semantic: string;
|
|
3
|
+
primitives: string[];
|
|
4
|
+
/** Primitive defaults when resolved; otherwise the token’s own value from semantic.tokens.css */
|
|
5
|
+
defaults: string[];
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Build table rows: each semantic token, primitive(s) it resolves to, and primitive default values.
|
|
9
|
+
*/
|
|
10
|
+
export declare function buildSemanticTokenRows(semanticCss: string, primitiveCss: string): SemanticTokenRow[];
|
|
@@ -1 +1,21 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type ParsedDesignToken = {
|
|
2
|
+
name: string;
|
|
3
|
+
/** Fallback from `var(--token, fallback)` when present in SCSS */
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Split the inner text of a `var(...)` at top-level commas (respects nested parens).
|
|
8
|
+
*/
|
|
9
|
+
export declare function splitTopLevelVarArgs(inner: string): [string, string | undefined];
|
|
10
|
+
/**
|
|
11
|
+
* Parse `var(` starting at `varIdx` (index of `v` in `var(`). Returns end index after closing `)`.
|
|
12
|
+
*/
|
|
13
|
+
export declare function parseVarInvocation(content: string, varIdx: number): {
|
|
14
|
+
end: number;
|
|
15
|
+
firstArg: string;
|
|
16
|
+
secondArg?: string;
|
|
17
|
+
} | null;
|
|
18
|
+
/**
|
|
19
|
+
* Extract `--ngc-*` tokens from SCSS `var()` usages, including optional fallbacks.
|
|
20
|
+
*/
|
|
21
|
+
export declare function parseScssTokens(scssContent: string): ParsedDesignToken[];
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import { NJC_COMBOBOX_OPTION } from '../components/combobox';
|
|
2
|
+
export declare function buildMinimalComponentSnippet(componentTag: string, args: Record<string, unknown>): string;
|
|
3
|
+
/** Storybook `docs.source.transform` — align Docs snippet with control values when the canvas shows multiple host elements. */
|
|
4
|
+
export declare function convertArgsForStorybookCodeExample(code: string, componentTag: string | undefined, args: Record<string, unknown>): string;
|
|
2
5
|
export declare function generateOptions(numberOfOptions: number | undefined): NJC_COMBOBOX_OPTION[];
|
|
3
|
-
export declare function convertArgsForStorybookCodeExample(code: string, componentTag: string, args: Record<string, any>): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const s=/gradient|shadow|blur|(?:^|\s)\d+(?:\.\d+)?(?:rem|em|px|%)(?:\s|$)|sans-serif|Deca|system-ui|9999px/i,r=/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$|^rgba?\(|^hsla?\(/i;function o(n){const e=n?.trim();if(!e||e==="—"||s.test(e)&&!r.test(e))return null;if(typeof document<"u"){const t=document.createElement("div");if(t.style.backgroundColor=e,t.style.backgroundColor)return e}return r.test(e)?e:null}export{o as parseCssColorValue};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{parseVarInvocation as u}from"./token-parser.js";function p(i){const t=i.match(/\{([\s\S]*)\}/)?.[1]??i,n=[];let e=0;for(;e<t.length;){const s=t.indexOf("--",e);if(s===-1)break;const r=t.indexOf(":",s);if(r===-1)break;const l=t.slice(s,r).trim();if(!/^--[\w-]+$/.test(l)){e=s+2;continue}let c=r+1,a=0;for(;c<t.length;){const f=t[c];if(f==="(")a++;else if(f===")")a--;else if(f===";"&&a===0)break;c++}const h=t.slice(r+1,c).trim();n.push({name:l,value:h}),e=c+1}return n}function d(i){const o=[];let t=0;for(;t<i.length;){const n=i.indexOf("var(",t);if(n===-1)break;const e=u(i,n);if(!e){t=n+4;continue}const s=e.firstArg.trim();s.startsWith("--")&&o.push(s),t=e.end}return[...new Set(o)]}function b(i){const o=new Map;for(const t of i.split(`
|
|
2
|
+
`)){const n=t.match(/^\s*(--[\w-]+):\s*(.+?);\s*(?:\/\*\s*([^*]+?)\s*\*\/)?\s*$/);if(!n)continue;const[,e,s,r]=n;o.set(e,(r??s).trim())}return o}export{b as buildPrimitiveDefaults,d as extractVarReferences,p as parseCssCustomProperties};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{buildPrimitiveDefaults as f,parseCssCustomProperties as l,extractVarReferences as p}from"./css-token-parser.js";function d(n){return n.replace(/\s+/g," ").trim()}function v(n,o,r,m){const i=new Set,a=(e,s)=>{for(const t of p(e)){if(r.has(t)){i.add(t);continue}if(o.has(t)&&!s.has(t)){const c=new Set(s);c.add(t),a(o.get(t),c)}}};return a(n,m),[...i].sort((e,s)=>e.localeCompare(s))}function S(n,o){const r=f(o),m=new Set(r.keys()),i=l(n),a=new Map(i.map(e=>[e.name,e.value]));return i.map(({name:e,value:s})=>{const t=v(s,a,m,new Set([e])),c=t.length>0?t.map(u=>r.get(u)??"—"):[d(s)];return{semantic:e,primitives:t,defaults:c}}).sort((e,s)=>e.semantic.localeCompare(s.semantic))}export{S as buildSemanticTokenRows};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function f(t){let e=0;for(let r=0;r<t.length;r++){const s=t[r];if(s==="(")e++;else if(s===")")e--;else if(s===","&&e===0)return[t.slice(0,r).trim(),t.slice(r+1).trim()]}return[t.trim(),void 0]}function u(t,e){if(t.slice(e,e+4)!=="var(")return null;let r=1,s=e+4;const i=s;for(;s<t.length&&r>0;){const n=t[s];if(n==="(")r++;else if(n===")"&&(r--,r===0)){const c=t.slice(i,s),[o,l]=f(c);return{end:s+1,firstArg:o,secondArg:l}}s++}return null}function a(t,e,r){const s=t.get(e);if(!s){t.set(e,{name:e,defaultValue:r});return}!s.defaultValue&&r&&t.set(e,{name:e,defaultValue:r})}function p(t){const e=new Map,r=g(t);let s=0;for(;s<r.length;){const i=r.indexOf("var(",s);if(i===-1)break;const n=u(r,i);if(!n){s=i+4;continue}const c=n.firstArg.trim();c.startsWith("--ngc-")&&a(e,c,n.secondArg?.trim()),s=n.end}return Array.from(e.values()).sort((i,n)=>i.name.localeCompare(n.name))}function g(t){let e=t.replace(/\/\*[\s\S]*?\*\//g,"");return e=e.replace(/\/\/.*$/gm,""),e}export{p as parseScssTokens,u as parseVarInvocation,f as splitTopLevelVarArgs};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{camelToKebab as
|
|
1
|
+
import{camelToKebab as s}from"./string-utils.js";const a=new Set(["defaultSlot"]);function i(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<")}function f(t,e){const n=new RegExp(`<${e}\\b`,"g");return[...t.matchAll(n)].length}function l(t){const e=Object.entries(t).sort(([o],[r])=>o==="dataTestid"?-1:r==="dataTestid"?1:o.localeCompare(r)),n=[];for(const[o,r]of e){if(a.has(o)||r==null||r===!1)continue;if(o==="dataTestid"){n.push(`data-testid="${i(String(r))}"`);continue}const u=s(o);if(typeof r=="boolean"&&r){n.push(u);continue}typeof r!="boolean"&&n.push(`${u}="${i(String(r))}"`)}return n.length?` ${n.join(" ")}`:""}function c(t,e){const n=l(e),o=typeof e.defaultSlot=="string"?i(e.defaultSlot):"";return`<${t}${n}>${o}</${t}>`}function $(t,e,n){if(!e)return t;const o=f(t,e);if(o>1)return c(e,n);if(o===0)return t;const r=l(n);return r.trim()?t.replace(new RegExp(`<${e}\\b`),`<${e}${r}`):t}function b(t){const e=[];if(!t)return e;for(let n=1;n<=t;n++)e.push({label:`Option ${n}`,value:`${n}`});return e}export{c as buildMinimalComponentSnippet,$ as convertArgsForStorybookCodeExample,b as generateOptions};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "13.
|
|
4
|
+
"version": "13.4.2",
|
|
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.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "13.
|
|
103
|
+
"@ncino/styles": "13.4.2"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "13.
|
|
106
|
+
"@ncino/styles": "13.4.2"
|
|
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": "13.
|
|
4
|
+
"version": "13.4.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -6638,6 +6638,10 @@
|
|
|
6638
6638
|
"default": "'medium'"
|
|
6639
6639
|
}
|
|
6640
6640
|
},
|
|
6641
|
+
{
|
|
6642
|
+
"name": "hide-tippet",
|
|
6643
|
+
"value": { "type": "boolean", "default": "false" }
|
|
6644
|
+
},
|
|
6641
6645
|
{
|
|
6642
6646
|
"name": "show-on-hover",
|
|
6643
6647
|
"value": { "type": "boolean", "default": "false" }
|
|
@@ -6658,6 +6662,7 @@
|
|
|
6658
6662
|
{ "name": "iconName", "type": "string | undefined" },
|
|
6659
6663
|
{ "name": "errorText", "type": "string | undefined" },
|
|
6660
6664
|
{ "name": "size", "type": "'small' | 'medium' | 'large'" },
|
|
6665
|
+
{ "name": "hideTippet", "type": "boolean" },
|
|
6661
6666
|
{ "name": "showOnHover", "type": "boolean" },
|
|
6662
6667
|
{ "name": "_popoverRef", "type": "Ref<HTMLElement>" },
|
|
6663
6668
|
{ "name": "_cleanup", "type": "(() => void) | undefined" },
|
|
@@ -8124,6 +8129,13 @@
|
|
|
8124
8129
|
"name": "items-per-page",
|
|
8125
8130
|
"value": { "type": "number", "default": "10" }
|
|
8126
8131
|
},
|
|
8132
|
+
{
|
|
8133
|
+
"name": "items-per-page-options",
|
|
8134
|
+
"value": {
|
|
8135
|
+
"type": "string[]",
|
|
8136
|
+
"default": "['10', '15', '20', '50', '100', msg('All')]"
|
|
8137
|
+
}
|
|
8138
|
+
},
|
|
8127
8139
|
{
|
|
8128
8140
|
"name": "data-testid",
|
|
8129
8141
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
@@ -8171,6 +8183,7 @@
|
|
|
8171
8183
|
{ "name": "currentPage", "type": "number" },
|
|
8172
8184
|
{ "name": "totalItems", "type": "number" },
|
|
8173
8185
|
{ "name": "itemsPerPage", "type": "number" },
|
|
8186
|
+
{ "name": "itemsPerPageOptions", "type": "string[]" },
|
|
8174
8187
|
{ "name": "dataTestid", "type": "string | undefined" },
|
|
8175
8188
|
{ "name": "labelDataTestid" },
|
|
8176
8189
|
{ "name": "helpTextDataTestid" },
|
|
@@ -8203,6 +8216,13 @@
|
|
|
8203
8216
|
"name": "items-per-page",
|
|
8204
8217
|
"value": { "type": "number", "default": "10" }
|
|
8205
8218
|
},
|
|
8219
|
+
{
|
|
8220
|
+
"name": "items-per-page-options",
|
|
8221
|
+
"value": {
|
|
8222
|
+
"type": "string[]",
|
|
8223
|
+
"default": "['10', '15', '20', '50', '100', msg('All')]"
|
|
8224
|
+
}
|
|
8225
|
+
},
|
|
8206
8226
|
{
|
|
8207
8227
|
"name": "delegatesARIA",
|
|
8208
8228
|
"description": "A boolean property that determines whether ARIA-related attributes\n(e.g., `aria-label`, `aria-labelledby`, `role`, etc.) are managed\nby the host element or delegated to the component.\n\n- When `true` (default), ARIA attributes are removed from the host\n and managed internally by the component.\n- When `false`, previously removed ARIA attributes are restored\n to the host element.",
|
|
@@ -8226,6 +8246,7 @@
|
|
|
8226
8246
|
{ "name": "currentPage", "type": "number" },
|
|
8227
8247
|
{ "name": "totalItems", "type": "number" },
|
|
8228
8248
|
{ "name": "itemsPerPage", "type": "number" },
|
|
8249
|
+
{ "name": "itemsPerPageOptions", "type": "string[]" },
|
|
8229
8250
|
{ "name": "totalPages" },
|
|
8230
8251
|
{ "name": "menuItemsForItemsPerPage" },
|
|
8231
8252
|
{ "name": "menuItemsForPageSelection" },
|