@ncino/web-components 14.4.0 → 15.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/button.js +1 -1
- package/dist/components/button/gator/button.gator.js +23 -10
- package/dist/components/button-card/button-card.js +1 -1
- package/dist/components/button-card/gator/button-card.gator.js +37 -20
- package/dist/components/table/gator/table-pagination/table-pagination.gator.js +26 -20
- package/dist/components/table/gator/table.gator.js +18 -17
- package/dist/packages/web-components/src/components/button/gator/button.gator.scss.js +1 -1
- package/dist/packages/web-components/src/components/button-card/gator/button-card.gator.scss.js +1 -1
- package/dist/types/components/button/button.d.ts +14 -0
- package/dist/types/components/button/gator/button.gator.d.ts +10 -0
- package/dist/types/components/button-card/button-card.d.ts +15 -0
- package/dist/types/components/button-card/gator/button-card.gator.d.ts +12 -0
- package/dist/types/components/table/gator/table-pagination/table-pagination.gator.d.ts +2 -0
- package/dist/types/components/table/gator/table.gator.d.ts +1 -0
- package/package.json +3 -3
- package/web-types.json +47 -1
|
@@ -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 s}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{AttributeDeletionMixin as
|
|
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 s}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{AttributeDeletionMixin as y}from"../../utils/mixins/attribute-deletion.js";var d=Object.defineProperty,e=(i,p,l,b)=>{for(var a=void 0,o=i.length-1,n;o>=0;o--)(n=i[o])&&(a=n(p,l,a)||a);return a&&d(p,l,a),a};class r extends y(s){constructor(){super(...arguments),this.variant="primary",this.size="medium",this.ariaLabel="",this.loadingAriaLabel="Loading",this.disabled=!1,this.loading=!1,this.skeleton=!1,this.href="",this.target=""}}e([t()],r.prototype,"variant");e([t()],r.prototype,"size");e([t({type:String,attribute:"aria-label"})],r.prototype,"ariaLabel");e([t({type:String,attribute:"loading-aria-label"})],r.prototype,"loadingAriaLabel");e([t({type:Boolean})],r.prototype,"disabled");e([t({type:Boolean})],r.prototype,"loading");e([t({type:Boolean})],r.prototype,"skeleton");e([t({type:String})],r.prototype,"href");e([t({type:String})],r.prototype,"target");export{r as NjcButton};
|
|
@@ -1,7 +1,7 @@
|
|
|
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 r,nothing as d}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 b}from"../../../utils/decorators/custom-element-decorator.js";import{ifDefined as o}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{NjcButton as p}from"../button.js";import m from"../../../packages/web-components/src/components/button/gator/button.gator.scss.js";import f from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import k from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"../../loading-spinner/gator/loading-spinner.gator.js";import"../../icon/gator/icon.gator.js";import"../../icon/gator/templates/index.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,v=Object.getOwnPropertyDescriptor,l=(t,e,a,i)=>{for(var s=i>1?void 0:i?v(e,a):e,u=t.length-1,h;u>=0;u--)(h=t[u])&&(s=(i?h(e,a,s):h(s))||s);return i&&s&&$(e,a,s),s};let n=class extends p{constructor(){super(...arguments),this.type="submit"}render(){return this.skeleton?this.skeletonMarkup:this.isLinkMode?this.anchorMarkup:this.buttonMarkup}get isLinkMode(){return!!this.href&&!this.disabled&&!this.loading}get buttonMarkup(){return r`
|
|
2
2
|
<button
|
|
3
3
|
aria-label=${this.buttonAriaLabel}
|
|
4
|
-
data-testid=${
|
|
4
|
+
data-testid=${o(this.dataTestid?`${this.dataTestid}-button`:void 0)}
|
|
5
5
|
class="gator-button ${this.variantClass} ${this.sizeClass} ${this.loadingClass}"
|
|
6
6
|
.disabled="${this.disabled}"
|
|
7
7
|
aria-disabled="${this.disabled||this.loading}"
|
|
@@ -9,13 +9,26 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
9
9
|
type="${this.type}"
|
|
10
10
|
>
|
|
11
11
|
${this.loading?this.loadingMarkup:null}
|
|
12
|
-
|
|
13
|
-
<slot name="start-icon">${this.startIconMarkup}</slot>
|
|
14
|
-
<span class="gator-button-text"><slot></slot></span>
|
|
15
|
-
<slot name="end-icon">${this.endIconMarkup}</slot>
|
|
16
|
-
</div>
|
|
12
|
+
${this.buttonContentMarkup}
|
|
17
13
|
</button>
|
|
18
|
-
`}get
|
|
14
|
+
`}get anchorMarkup(){return r`
|
|
15
|
+
<a
|
|
16
|
+
aria-label=${this.buttonAriaLabel}
|
|
17
|
+
data-testid=${o(this.dataTestid?`${this.dataTestid}-button`:void 0)}
|
|
18
|
+
class="gator-button ${this.variantClass} ${this.sizeClass}"
|
|
19
|
+
href=${o(this.href||void 0)}
|
|
20
|
+
target=${o(this.target||void 0)}
|
|
21
|
+
@click="${this.handleAnchorClick}"
|
|
22
|
+
>
|
|
23
|
+
${this.buttonContentMarkup}
|
|
24
|
+
</a>
|
|
25
|
+
`}get buttonContentMarkup(){return r`
|
|
26
|
+
<div class="gator-button-content">
|
|
27
|
+
<slot name="start-icon">${this.startIconMarkup}</slot>
|
|
28
|
+
<span class="gator-button-text"><slot></slot></span>
|
|
29
|
+
<slot name="end-icon">${this.endIconMarkup}</slot>
|
|
30
|
+
</div>
|
|
31
|
+
`}get startIconMarkup(){return this.startIcon?r`<ngc-icon name="${this.startIcon}"></ngc-icon>`:d}get endIconMarkup(){return this.endIcon?r`<ngc-icon name="${this.endIcon}"></ngc-icon>`:d}get buttonAriaLabel(){return this.loading?this.loadingAriaLabel:this.dataset.ariaLabel?this.dataset.ariaLabel:this.ariaLabel?this.ariaLabel:d}get variantClass(){return this.variant?`gator-button_${this.variant}`:null}get sizeClass(){return this.size?`gator-button_${this.size}`:null}get loadingClass(){return this.loading?"gator-button_loading":null}get skeletonMarkup(){let t,e;const a=this.variant==="base";switch(this.size){case"small":t=a?44:67,e=28;break;case"medium":t=a?50:81,e=36;break;case"xlarge":t=a?57:137,e=56;break;default:t=a?57:98,e=48;break}const i=getComputedStyle(this);return i.getPropertyValue("--ngc-button-width")&&(t=Number(i.getPropertyValue("--ngc-button-width").trim())),i.getPropertyValue("--ngc-button-height")&&(e=Number(i.getPropertyValue("--ngc-button-height").trim())),r`
|
|
19
32
|
<ngc-skeleton-loader
|
|
20
33
|
class="gator-button gator-button-skeleton"
|
|
21
34
|
width="${t}"
|
|
@@ -23,8 +36,8 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
23
36
|
radius="2"
|
|
24
37
|
@click="${this.handleClick}"
|
|
25
38
|
></ngc-skeleton-loader>
|
|
26
|
-
`}get loadingMarkup(){let t;switch(this.size){case"large":case"xlarge":t="large";break;default:t="medium";break}return
|
|
39
|
+
`}get loadingMarkup(){let t;switch(this.size){case"large":case"xlarge":t="large";break;default:t="medium";break}return r`
|
|
27
40
|
<div class="gator-button-loader">
|
|
28
41
|
<ngc-loading-spinner .size="${t}"></ngc-loading-spinner>
|
|
29
42
|
</div>
|
|
30
|
-
`}handleClick(t){if(t.preventDefault(),t.stopPropagation(),!(this.disabled||this.loading||this.skeleton)){if(this.type==="submit"){const e=this.closest("form");e&&(e.reportValidity(),e.checkValidity()&&e.requestSubmit())}this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0}))}}};
|
|
43
|
+
`}handleClick(t){if(t.preventDefault(),t.stopPropagation(),!(this.disabled||this.loading||this.skeleton)){if(this.type==="submit"){const e=this.closest("form");e&&(e.reportValidity(),e.checkValidity()&&e.requestSubmit())}this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0}))}}handleAnchorClick(t){(this.disabled||this.loading||this.skeleton)&&(t.preventDefault(),t.stopPropagation())}};n.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0};n.styles=[c(m),c(f),c(k)];l([g({type:String,attribute:"start-icon"})],n.prototype,"startIcon",2);l([g({type:String,attribute:"end-icon"})],n.prototype,"endIcon",2);l([g({attribute:"type"})],n.prototype,"type",2);n=l([b("ngc-button")],n);export{n as NgcButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{NjcCard as
|
|
1
|
+
import{NjcCard as n}from"../card/card.js";import{property as e}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";var c=Object.defineProperty,r=(o,i,s,f)=>{for(var t=void 0,a=o.length-1,l;a>=0;a--)(l=o[a])&&(t=l(i,s,t)||t);return t&&c(i,s,t),t};class p extends n{constructor(){super(...arguments),this.chipLabel="",this.selected=!1,this.href="",this.target=""}}r([e({attribute:"chip-label",type:String})],p.prototype,"chipLabel");r([e({type:Boolean,reflect:!0})],p.prototype,"selected");r([e({type:String})],p.prototype,"href");r([e({type:String})],p.prototype,"target");export{p as NjcButtonCard};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{NjcButtonCard as u}from"../button-card.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import{NjcButtonCard as u}from"../button-card.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as m}from"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as f}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as b}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as g}from"../../../utils/decorators/custom-element-decorator.js";import{ifDefined as a}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{classMap as k}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{KEY_CONSTANTS as p}from"../../../consts/key-constants.js";import $ from"../../../packages/web-components/src/components/button-card/gator/button-card.gator.scss.js";import y from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import C from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"../../chip/gator/chip.gator.js";import"../../card/gator/base/card.gator.js";import"../../card/gator/header/card-header.gator.js";import"../../card/gator/content/card-content.gator.js";import"../../card/gator/footer/card-footer.gator.js";import"../../text-detail/gator/text-detail.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 v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,h=(t,i,d,e)=>{for(var s=e>1?void 0:e?_(i,d):i,l=t.length-1,n;l>=0;l--)(n=t[l])&&(s=(e?n(i,d,s):n(s))||s);return e&&s&&v(i,d,s),s};let o=class extends u{constructor(){super(...arguments),this.chipType=null,this._showDefault=null,this._selectedInLinkModeWarned=!1}firstUpdated(t){super.firstUpdated(t),this._checkSlotContent()}updated(t){super.updated(t),this.isLinkMode&&this.selected&&!this._selectedInLinkModeWarned&&(this._selectedInLinkModeWarned=!0,console.warn("ngc-button-card: `selected` (aria-pressed) is ignored in link mode (when `href` is set). The selected/toggle state applies to button mode only."))}get isLinkMode(){return!!this.href&&!this.disabled}render(){return this.isLinkMode?this.linkMarkup:this.buttonMarkup}get buttonMarkup(){return r`
|
|
2
2
|
<ngc-card
|
|
3
3
|
tabindex="${this.disabled?"-1":"0"}"
|
|
4
4
|
role="button"
|
|
@@ -8,30 +8,47 @@ import{NjcButtonCard as u}from"../button-card.js";import"../../../node_modules/.
|
|
|
8
8
|
@click=${this.handleClick}
|
|
9
9
|
@keydown=${this.handleKeydown}
|
|
10
10
|
?disabled="${this.disabled}"
|
|
11
|
-
class="${
|
|
11
|
+
class="${k(this.cardClasses)}"
|
|
12
12
|
>
|
|
13
|
-
${this.
|
|
14
|
-
|
|
15
|
-
${this._showDefault===!0?a`
|
|
16
|
-
<div class="gator-button-card-container ${this.disabledClass}">
|
|
17
|
-
<ngc-text-detail
|
|
18
|
-
.title=${this.title}
|
|
19
|
-
.subtitle=${this.subtitle}
|
|
20
|
-
data-testid=${n(this.dataTestid)}-text-detail
|
|
21
|
-
>
|
|
22
|
-
<slot name="start" slot="prepend"></slot>
|
|
23
|
-
<slot name="end" slot="append"></slot>
|
|
24
|
-
</ngc-text-detail>
|
|
25
|
-
</div>
|
|
26
|
-
`:a`<slot></slot>`}
|
|
13
|
+
${this.cardBodyMarkup}
|
|
27
14
|
</ngc-card>
|
|
28
|
-
`}
|
|
15
|
+
`}get linkMarkup(){return r`
|
|
16
|
+
<a
|
|
17
|
+
class="gator-button-card-link"
|
|
18
|
+
href=${a(this.href||void 0)}
|
|
19
|
+
target=${a(this.target||void 0)}
|
|
20
|
+
data-testid=${a(this.dataTestid?`${this.dataTestid}-button-card-link`:void 0)}
|
|
21
|
+
@click=${this.handleAnchorClick}
|
|
22
|
+
>
|
|
23
|
+
<ngc-card
|
|
24
|
+
?elevated="${this.elevated}"
|
|
25
|
+
?outlined="${this.outlined}"
|
|
26
|
+
>
|
|
27
|
+
${this.cardBodyMarkup}
|
|
28
|
+
</ngc-card>
|
|
29
|
+
</a>
|
|
30
|
+
`}get cardBodyMarkup(){return r`
|
|
31
|
+
${this.cardLabelMarkup}
|
|
32
|
+
|
|
33
|
+
${this._showDefault===!0?r`
|
|
34
|
+
<div class="gator-button-card-container ${this.disabledClass}">
|
|
35
|
+
<ngc-text-detail
|
|
36
|
+
.title=${this.title}
|
|
37
|
+
.subtitle=${this.subtitle}
|
|
38
|
+
data-testid=${a(this.dataTestid)}-text-detail
|
|
39
|
+
>
|
|
40
|
+
<slot name="start" slot="prepend"></slot>
|
|
41
|
+
<slot name="end" slot="append"></slot>
|
|
42
|
+
</ngc-text-detail>
|
|
43
|
+
</div>
|
|
44
|
+
`:r`<slot></slot>`}
|
|
45
|
+
`}_checkSlotContent(){const t=this.shadowRoot?.querySelector("slot:not([name])");if(t){const d=t.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE?!0:e.nodeType===Node.TEXT_NODE?(e.textContent?.trim().length??0)>0:!1);this._showDefault=!d}}get cardClasses(){return{selected:this.selected}}get cardLabelMarkup(){return this.chipLabel?r`
|
|
29
46
|
<ngc-chip
|
|
30
47
|
?disabled="${this.disabled}"
|
|
31
48
|
class="gator-button-card-chip-label"
|
|
32
|
-
data-testid=${
|
|
33
|
-
type="${
|
|
49
|
+
data-testid=${a(this.dataTestid)}-chip
|
|
50
|
+
type="${a(this.chipType||void 0)}"
|
|
34
51
|
readonly
|
|
35
52
|
>
|
|
36
53
|
${this.chipLabel}
|
|
37
|
-
</ngc-chip>`:null}get disabledClass(){return this.disabled?"gator-button-card_disabled":""}handleClick(t){t.preventDefault(),t.stopImmediatePropagation(),!this.disabled&&this.dispatchEvent(new CustomEvent("click",{bubbles:!0}))}click(){this.handleClick(new CustomEvent("click",{bubbles:!0}))}handleKeydown(t){[
|
|
54
|
+
</ngc-chip>`:null}get disabledClass(){return this.disabled?"gator-button-card_disabled":""}handleClick(t){t.preventDefault(),t.stopImmediatePropagation(),!this.disabled&&this.dispatchEvent(new CustomEvent("click",{bubbles:!0}))}click(){if(this.isLinkMode){this.shadowRoot?.querySelector("a")?.click();return}this.handleClick(new CustomEvent("click",{bubbles:!0}))}handleKeydown(t){[p.ENTER,p.SPACE].includes(t.key)&&this.handleClick(t)}handleAnchorClick(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation())}};o.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0};o.styles=[c($),c(y),c(C)];h([f({type:String,attribute:"chip-type"})],o.prototype,"chipType",2);h([b()],o.prototype,"_showDefault",2);o=h([g("ngc-button-card")],o);export{o as NgcButtonCard};
|
|
@@ -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 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 g}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as u}from"../../../../utils/decorators/custom-element-decorator.js";import{NgcComponent as p}from"../../../../utils/components/ngc-component.js";import{msg as a}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,m)=>{for(var s=m>1?void 0:m?v(t,i):t,l=e.length-1,c;l>=0;l--)(c=e[l])&&(s=(m?c(t,i,s):c(s))||s);return m&&s&&d(t,i,s),s},f=(e,t,i)=>$(b(e),i,t);let r=class extends p{constructor(){super(...arguments),this.currentPage=1,this.totalItems=0,this.itemsPerPage=10,this.itemsPerPageOptions=["10","15","20","50","100",a("All")],this.includePageSelection=!1}updated(){this.currentPage>this.totalItems&&(this.currentPage=1)}render(){return o`
|
|
2
2
|
<div class="gator-table-pagination">
|
|
3
3
|
<div class="gator-table-pagination-items-per-row">
|
|
4
|
-
${
|
|
4
|
+
${a("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="${a("Items per page")}: ${this.itemsPerPage}"
|
|
12
12
|
>
|
|
13
13
|
${this.itemsPerPage}
|
|
14
14
|
</ngc-button>
|
|
@@ -26,34 +26,40 @@ 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="${a("Previous page")}"
|
|
30
30
|
></ngc-icon-button>
|
|
31
31
|
</div>
|
|
32
|
-
|
|
33
|
-
<ngc-button
|
|
34
|
-
variant="base"
|
|
35
|
-
slot="trigger"
|
|
36
|
-
end-icon="sort-arrow-solid-down"
|
|
37
|
-
aria-label="${r("Current page")}, ${this.currentPage} ${r("of")} ${this.totalPages}"
|
|
38
|
-
>
|
|
39
|
-
${this.currentPage}
|
|
40
|
-
</ngc-button>
|
|
41
|
-
${this.menuItemsForPageSelection}
|
|
42
|
-
</ngc-menu>
|
|
43
|
-
${r("of")} ${this.totalPages}
|
|
32
|
+
${this.pageSelectionContent}
|
|
44
33
|
<div class="gator-pagination-page-selector-right">
|
|
45
34
|
<ngc-icon-button
|
|
46
35
|
@click="${this.sendNextPageEvent}"
|
|
47
36
|
?disabled="${this.isNextPageDisabled}"
|
|
48
37
|
size="medium"
|
|
49
38
|
icon-name="chevron-right"
|
|
50
|
-
aria-label="${
|
|
39
|
+
aria-label="${a("Next page")}"
|
|
51
40
|
></ngc-icon-button>
|
|
52
41
|
</div>
|
|
53
42
|
</div>
|
|
54
43
|
</div>
|
|
55
|
-
`}handleCurrentPageChanged(e){this.currentPage=Number(e.detail.value),this.sendPageChangedEvent()}handleItemsPerPageChanged(e){e.detail.value===
|
|
44
|
+
`}handleCurrentPageChanged(e){this.currentPage=Number(e.detail.value),this.sendPageChangedEvent()}handleItemsPerPageChanged(e){e.detail.value===a("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=>o`
|
|
56
45
|
<ngc-menu-item value="${e}"></ngc-menu-item>
|
|
57
|
-
`)}get
|
|
46
|
+
`)}get pageSelectionContent(){const e=`${a("Current page")}, ${this.currentPage} ${a("of")} ${this.totalPages}`;return this.includePageSelection?o`
|
|
47
|
+
<ngc-menu @menuitemclick="${this.handleCurrentPageChanged}">
|
|
48
|
+
<ngc-button
|
|
49
|
+
variant="base"
|
|
50
|
+
slot="trigger"
|
|
51
|
+
end-icon="sort-arrow-solid-down"
|
|
52
|
+
aria-label="${e}"
|
|
53
|
+
>
|
|
54
|
+
${this.currentPage}
|
|
55
|
+
</ngc-button>
|
|
56
|
+
${this.menuItemsForPageSelection}
|
|
57
|
+
</ngc-menu>
|
|
58
|
+
${a("of")} ${this.totalPages}
|
|
59
|
+
`:o`
|
|
60
|
+
<span aria-label="${e}">
|
|
61
|
+
${this.currentPage} ${a("of")} ${this.totalPages}
|
|
62
|
+
</span>
|
|
63
|
+
`}get menuItemsForPageSelection(){return Array.from({length:this.totalPages},(t,i)=>i+1).map(t=>o`
|
|
58
64
|
<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} ${
|
|
65
|
+
`)}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)];n([g({type:Number,attribute:"current-page"})],r.prototype,"currentPage",2);n([g({type:Number,attribute:"total-items"})],r.prototype,"totalItems",2);n([g({type:Number,attribute:"items-per-page"})],r.prototype,"itemsPerPage",2);n([g({type:Array,attribute:"items-per-page-options"})],r.prototype,"itemsPerPageOptions",2);n([g({type:Boolean,attribute:"include-page-selection"})],r.prototype,"includePageSelection",2);r=n([u("ngc-table-pagination")],r);export{r as NgcTablePagination};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as g,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 g,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 $}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as F}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 P}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 T}from"../table.js";import{formatTableTextValue as x}from"../table-format-utils.js";import _ from"../../../packages/web-components/src/components/table/gator/table.gator.scss.js";import R from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import A 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 k}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var B=Object.defineProperty,E=Object.getOwnPropertyDescriptor,p=(e,t,l,i)=>{for(var s=i>1?void 0:i?E(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&&B(t,l,s),s};let h=class extends T{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.renderHeaderFilterPopover=(e,t,l=!1)=>{const i=e.filterOptions??[],s=(this._filterSearchQuery[e.field]??"").toLowerCase(),r=s?i.filter(f=>f.label.toLowerCase().includes(s)):i,a=this.hasActiveFilter(e),c=e.filterMultiselect===!0,n=this.getEffectivePending(e),d=r.map(f=>({title:f.label,value:String(f.value)})),b=c?n.join(";"):"",v=c?"":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}"
|
|
5
5
|
icon-name="filters-2"
|
|
6
6
|
size="xsmall"
|
|
7
|
-
icon-aria-label="${
|
|
7
|
+
icon-aria-label="${u("Filter by")} ${e.name}"
|
|
8
8
|
class="${a?"gator-table-header-filter-icon-active":""}"
|
|
9
9
|
></ngc-icon-button>
|
|
10
10
|
<ngc-popover
|
|
11
11
|
reference-id="filter-trigger-${e.field}"
|
|
12
|
-
.title=${
|
|
12
|
+
.title=${u("Filter")}
|
|
13
13
|
size="small"
|
|
14
14
|
placement="${l?"bottom-start":"bottom-end"}"
|
|
15
15
|
.hideTippet="${!0}"
|
|
@@ -18,7 +18,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
18
18
|
<div slot="content" class="gator-table-filter-popover-content">
|
|
19
19
|
${i.length>10?o`
|
|
20
20
|
<ngc-input-search
|
|
21
|
-
placeholder="${
|
|
21
|
+
placeholder="${u("Search")}"
|
|
22
22
|
.value="${this._filterSearchQuery[e.field]??""}"
|
|
23
23
|
@input="${f=>this.handleFilterSearchInput(f,e)}"
|
|
24
24
|
class="gator-table-filter-popover-search"
|
|
@@ -28,25 +28,25 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
28
28
|
<ngc-checkbox-group
|
|
29
29
|
.options="${d}"
|
|
30
30
|
.value="${b}"
|
|
31
|
-
aria-label="${
|
|
31
|
+
aria-label="${u("Filter by")} ${e.name}"
|
|
32
32
|
@change="${f=>this.handleFilterCheckboxGroupChange(f,e)}"
|
|
33
33
|
></ngc-checkbox-group>
|
|
34
34
|
`:o`
|
|
35
35
|
<ngc-radio-group
|
|
36
36
|
.options="${d}"
|
|
37
37
|
.value="${v}"
|
|
38
|
-
aria-label="${
|
|
38
|
+
aria-label="${u("Filter by")} ${e.name}"
|
|
39
39
|
@change="${f=>this.handleFilterRadioGroupChange(f,e)}"
|
|
40
40
|
></ngc-radio-group>
|
|
41
41
|
`}
|
|
42
42
|
</div>
|
|
43
43
|
<div slot="footer" class="gator-table-filter-popover-footer">
|
|
44
|
-
<ngc-button variant="primary" @click="${()=>this.handleFilterPopoverApply(e)}">${
|
|
45
|
-
<ngc-button variant="base" @click="${()=>this.handleFilterPopoverClear(e)}">${
|
|
44
|
+
<ngc-button variant="primary" @click="${()=>this.handleFilterPopoverApply(e)}">${u("Apply")}</ngc-button>
|
|
45
|
+
<ngc-button variant="base" @click="${()=>this.handleFilterPopoverClear(e)}">${u("Clear")}</ngc-button>
|
|
46
46
|
</div>
|
|
47
47
|
</ngc-popover>
|
|
48
48
|
</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);return t?`width: ${t}; box-sizing: border-box`:""}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){const l=this.getActiveFilterChips(),i=l.length>0,s=this.emptyStateTitle||
|
|
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);return t?`width: ${t}; box-sizing: border-box`:""}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){const l=this.getActiveFilterChips(),i=l.length>0,s=this.emptyStateTitle||u("No results found"),r=i?this.emptyStateBodyFiltered||u("No data matches the current filters."):this.emptyStateBody||u("Start by adding some data."),a=this.emptyStateIllustration||"empty-box";return o`
|
|
50
50
|
<ngc-table-bulk-controls
|
|
51
51
|
?visible="${this.showBulkControls}"
|
|
52
52
|
.selectedRows="${this.selectedRows.length}"
|
|
@@ -55,7 +55,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
55
55
|
<slot name="bulk-controls"></slot>
|
|
56
56
|
</ngc-table-bulk-controls>
|
|
57
57
|
${!this.skeleton&&i?o`
|
|
58
|
-
<div class="gator-table-filter-chips" role="region" aria-label="${
|
|
58
|
+
<div class="gator-table-filter-chips" role="region" aria-label="${u("Active filters")}">
|
|
59
59
|
${l.map(({column:c,value:n,label:d})=>o`
|
|
60
60
|
<ngc-chip
|
|
61
61
|
dismissible
|
|
@@ -68,7 +68,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
68
68
|
type="button"
|
|
69
69
|
class="gator-table-filter-chips-clear-all"
|
|
70
70
|
@click="${this.handleClearAllFilters}"
|
|
71
|
-
>${
|
|
71
|
+
>${u("Clear all")}</button>
|
|
72
72
|
`:g}
|
|
73
73
|
</div>
|
|
74
74
|
`:g}
|
|
@@ -81,7 +81,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
81
81
|
.bodyText="${r}"
|
|
82
82
|
size="medium"
|
|
83
83
|
>
|
|
84
|
-
${i?o`<ngc-button @click="${this.handleClearAllFilters}">${
|
|
84
|
+
${i?o`<ngc-button @click="${this.handleClearAllFilters}">${u("Clear filters")}</ngc-button>`:g}
|
|
85
85
|
</ngc-illustration>
|
|
86
86
|
</div>
|
|
87
87
|
</ngc-card>
|
|
@@ -99,6 +99,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
99
99
|
items-per-page="${this.itemsPerPage}"
|
|
100
100
|
total-items="${this.data.length}"
|
|
101
101
|
current-page="${this._currentPage}"
|
|
102
|
+
.includePageSelection="${this.includePageSelection}"
|
|
102
103
|
.itemsPerPageOptions="${this.itemsPerPageOptions}"
|
|
103
104
|
@pagechanged="${this.handlePageChanged}"
|
|
104
105
|
@itemsperpagechanged="${this.handleItemsPerPageChanged}"
|
|
@@ -107,7 +108,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
107
108
|
`}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`
|
|
108
109
|
<th id="col-select" scope="col">
|
|
109
110
|
<ngc-checkbox
|
|
110
|
-
title-text="${
|
|
111
|
+
title-text="${u("Select All")}"
|
|
111
112
|
hide-label
|
|
112
113
|
?selected="${this.selectedRows.length===this.data.filter(l=>!l.isTableHeader&&!l.disabled).length}"
|
|
113
114
|
@change="${l=>this.handleSelectAll(l)}"
|
|
@@ -129,7 +130,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
129
130
|
class="gator-table-header-sort-trigger"
|
|
130
131
|
role="button"
|
|
131
132
|
tabindex="0"
|
|
132
|
-
aria-label="${
|
|
133
|
+
aria-label="${u("Sort by")} ${e.name}"
|
|
133
134
|
@click="${()=>this.handleSortColumn(e)}"
|
|
134
135
|
@keydown="${C=>C.key==="Enter"||C.key===" "?(C.preventDefault(),this.handleSortColumn(e)):null}"
|
|
135
136
|
>
|
|
@@ -192,7 +193,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
192
193
|
<tr role="row" class="gator-table-total-row">
|
|
193
194
|
${c}
|
|
194
195
|
</tr>
|
|
195
|
-
`}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
|
|
196
|
+
`}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 x(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`
|
|
196
197
|
<td role="gridcell" class="gator-table-checkbox-column" headers="${r}">
|
|
197
198
|
<ngc-checkbox
|
|
198
199
|
label="test"
|
|
@@ -212,7 +213,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
212
213
|
${i}
|
|
213
214
|
</th>
|
|
214
215
|
</tr>
|
|
215
|
-
`}handleTableBodyRowSelected(e,t){t.disabled||(e.detail.selected?(t.selected=!0,this.selectedRows.push(t),this.addSkipLinkToBulkActions(e.target)):(t.selected=!1,this.selectedRows=this.selectedRows.filter(l=>l!==t),this.removeSkipLinkToBulkActions(e.target)),this.dispatchEvent(new CustomEvent("rowselected",{bubbles:!0,composed:!0,detail:{data:t,selectedRows:this.selectedRows}}))),this.requestUpdate()}addSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")||e.parentNode?.insertBefore(this.getSkipToBulkActionsMarkup(e),e)}getSkipToBulkActionsMarkup(e){const t=document.createElement("ngc-skip-link");return t.target=this.shadowRoot?.querySelector("ngc-table-bulk-controls")||"",t.text=
|
|
216
|
+
`}handleTableBodyRowSelected(e,t){t.disabled||(e.detail.selected?(t.selected=!0,this.selectedRows.push(t),this.addSkipLinkToBulkActions(e.target)):(t.selected=!1,this.selectedRows=this.selectedRows.filter(l=>l!==t),this.removeSkipLinkToBulkActions(e.target)),this.dispatchEvent(new CustomEvent("rowselected",{bubbles:!0,composed:!0,detail:{data:t,selectedRows:this.selectedRows}}))),this.requestUpdate()}addSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")||e.parentNode?.insertBefore(this.getSkipToBulkActionsMarkup(e),e)}getSkipToBulkActionsMarkup(e){const t=document.createElement("ngc-skip-link");return t.target=this.shadowRoot?.querySelector("ngc-table-bulk-controls")||"",t.text=u("Jump to table actions"),t.referenceElement=e,t.placement="top-start",t.xOffset=4,t.yOffset=-12,t.onblur=this.removeSkipLinkToBulkActions.bind(this,e),t}removeSkipLinkToBulkActions(e){e.parentNode?.querySelector("ngc-skip-link")?.remove()}get displayedRowData(){if(this.skeleton){let i=[];for(let s=0;s<5;s++)i=i.concat({skeleton:!0});return i}if(!this.includePagination)return this.data;const e=(this._currentPage-1)*this.itemsPerPage,t=e+this.itemsPerPage;return this.data.slice(e,t)}getTableBodyCell(e,t,l,i=0){const s=!!e.skeleton,r=o`
|
|
216
217
|
<ngc-skeleton-loader
|
|
217
218
|
full-width
|
|
218
219
|
height="24"
|
|
@@ -227,4 +228,4 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
227
228
|
>
|
|
228
229
|
${d}
|
|
229
230
|
</td>
|
|
230
|
-
`}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}}}))}};
|
|
231
|
+
`}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=[k(A),k(R),k(_)];p([$({type:Boolean})],h.prototype,"elevated",2);p([$({type:Boolean,attribute:"include-pagination"})],h.prototype,"includePagination",2);p([$({type:Boolean,attribute:"include-page-selection"})],h.prototype,"includePageSelection",2);p([$({type:Boolean})],h.prototype,"skeleton",2);p([$({type:String,attribute:"sort-field"})],h.prototype,"sortField",2);p([$({type:String,attribute:"sort-direction"})],h.prototype,"sortDirection",2);p([$({type:Object,attribute:!1})],h.prototype,"filterValues",2);p([m()],h.prototype,"selectedRows",2);p([m()],h.prototype,"_currentPage",2);p([m()],h.prototype,"_sortField",2);p([m()],h.prototype,"_sortDirection",2);p([m()],h.prototype,"_hoveredHeaderColumnField",2);p([m()],h.prototype,"_pendingFilterValues",2);p([m()],h.prototype,"_filterSearchQuery",2);h=p([F("ngc-table"),P()],h);export{h as NgcTable};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const o='.gator-button{--box-shadow-default: 0 5px 10px 0px var(--shadow-color-5), 0 7px 14px 0px var(--shadow-color-8), 0 3px 6px 0px var(--shadow-color-4);display:inline-flex;align-items:center;justify-content:center;border-style:none;cursor:pointer;font-family:var(--font-family-body, "Open Sans"),sans-serif;font-weight:var(--ngc-button-font-weight, var(--font-weight-semi-bold, 600));margin:var(--ngc-button-margin, auto);width:var(--ngc-button-width, auto);position:var(--ngc-button-position, relative);border-radius:var(--ngc-button-border-radius, var(--border-radius-x-small, 2px));gap:.5rem}.gator-button ngc-icon{--ngc-icon-color: var(--ngc-button-icon-color, var(--color-icon-inverse, #FFFFFF))}.gator-button:focus-visible{outline:var(--ngc-button-focus-outline, 2px solid var(--ngc-button-focus-outline-color, var(--color-border-neutral, #1F1F1F)));outline-offset:2px}.gator-button:disabled{cursor:not-allowed}.gator-button.gator-button_loading{cursor:not-allowed}.gator-button-loader{display:flex;align-items:center;justify-content:center;position:absolute}.gator-button-loader+.gator-button-text{visibility:hidden}.gator-button-skeleton{background-color:var(--color-surface-loading, #DBDBDB);cursor:default}.gator-button-content{display:flex;align-items:center;justify-content:center;gap:.5rem}.gator-button_loading .gator-button-content{visibility:hidden}.gator-button_small{font-size:var(--ngc-button-font-size, var(--font-size-body-3, .8125rem));line-height:var(--ngc-button-line-height, var(--line-height-body-3, 1.125rem));padding:var(--ngc-button-padding, 0 .75rem);min-width:var(--ngc-button-min-width, 3.5rem);height:var(--ngc-button-height, 1.75rem)}.gator-button_medium{font-size:var(--ngc-button-font-size, var(--font-size-body-2, .9375rem));line-height:var(--ngc-button-line-height, var(--line-height-body-2, 1.375rem));padding:var(--ngc-button-padding, 0 1rem);min-width:var(--ngc-button-min-width, 4rem);height:var(--ngc-button-height, 2.25rem)}.gator-button_large{font-size:var(--ngc-button-font-size, var(--font-size-body-1, 1.0625rem));line-height:var(--ngc-button-line-height, var(--line-height-body-1, 1.5rem));padding:var(--ngc-button-padding, 0 1rem);min-width:var(--ngc-button-min-width, 6rem);height:var(--ngc-button-height, 3rem)}.gator-button_xlarge{font-size:var(--ngc-button-font-size, var(--font-size-body-1, 1.0625rem));line-height:var(--ngc-button-line-height, var(--line-height-body-1, 1.5rem));padding:var(--ngc-button-padding, 0 2.5rem);min-width:var(--ngc-button-min-width, 7.5rem);height:var(--ngc-button-height, 3.5rem)}.gator-button_primary{background-color:var(--ngc-button-background-color, var(--color-feedback-brand, #103656));color:var(--ngc-button-color, var(--color-text-inverse, #FFFFFF))}.gator-button_primary:not([disabled]):not(.gator-button_loading):hover{background-color:var(--ngc-button-hover-background-color, var(--color-feedback-brand-secondary, #0D2B45));color:var(--ngc-button-hover-color, var(--color-text-inverse, #FFFFFF));box-shadow:var(--ngc-button-hover-box-shadow, var(--shadow-2-card-raised, var(--box-shadow-default)))}.gator-button_primary:not([disabled]):not(.gator-button_loading):active{background-color:var(--ngc-button-pressed-background-color, var(--color-feedback-brand-tertiary, #061622));color:var(--ngc-button-pressed-color, var(--color-text-inverse, #FFFFFF));box-shadow:none}.gator-button_primary:disabled{background-color:var(--ngc-button-disabled-background-color, var(--color-surface-disabled, #E5E5E5));color:var(--ngc-button-disabled-color, var(--color-text-disabled, #BFBFBF))}.gator-button_primary.gator-button_loading{background-color:var(--ngc-button-loading-background-color, var(--color-feedback-brand-tertiary, #061622))}.gator-button_secondary{background-color:var(--ngc-button-background-color, transparent);color:var(--ngc-button-color, var(--color-text-brand, #103656))}.gator-button_secondary:before{content:"";position:absolute;inset:0;border-radius:var(--ngc-button-border-radius, var(--border-radius-x-small, 2px));border-width:1px;border-color:var(--ngc-button-border-color, var(--color-border-brand, #103656));border-style:solid}.gator-button_secondary ngc-icon{--ngc-icon-color: var(--ngc-button-icon-color, var(--color-icon-brand, #103656))}.gator-button_secondary:not([disabled]):not(.gator-button_loading):hover{background-color:var(--ngc-button-hover-background-color, var(--color-surface-secondary, #F7F7F7));box-shadow:var(--ngc-button-hover-box-shadow, var(--shadow-2-card-raised, var(--box-shadow-default)))}.gator-button_secondary:not([disabled]):not(.gator-button_loading):active{background-color:var(--ngc-button-pressed-background-color, var(--color-surface-secondary, #F7F7F7));box-shadow:none}.gator-button_secondary:disabled{color:var(--ngc-button-disabled-color, var(--color-text-disabled, #BFBFBF));cursor:not-allowed}.gator-button_secondary:disabled ngc-icon{--ngc-icon-color: var(--color-icon-disabled)}.gator-button_secondary:disabled:before{border-color:var(--ngc-button-border-color, var(--color-border-secondary, #BFBFBF))}.gator-button_secondary.gator-button_loading{background-color:var(--ngc-button-loading-background-color, var(--color-surface-secondary, #F7F7F7))}.gator-button_secondary.gator-button_loading:before{border-color:var(--ngc-button-border-color, var(--color-border-secondary, #BFBFBF))}.gator-button_destructive{background-color:var(--ngc-button-background-color, var(--color-feedback-error, #D44011));color:var(--ngc-button-color, var(--color-text-inverse, #FFFFFF))}.gator-button_destructive:not([disabled]):not(.gator-button_loading):hover{box-shadow:var(--ngc-button-hover-box-shadow, var(--shadow-2-card-raised, var(--box-shadow-default)));background-color:var(--ngc-button-hover-background-color, var(--color-feedback-error-secondary, #AA330E))}.gator-button_destructive:not([disabled]):not(.gator-button_loading):active{background-color:var(--ngc-button-pressed-background-color, var(--color-feedback-error-secondary, #AA330E));box-shadow:none}.gator-button_destructive:disabled{background-color:var(--ngc-button-disabled-background-color, var(--color-surface-disabled, #E5E5E5));color:var(--ngc-button-disabled-color, var(--color-text-disabled, #BFBFBF))}.gator-button_destructive.gator-button_loading{background-color:var(--ngc-button-loading-background-color, var(--color-feedback-error-tertiary, #9E2500))}.gator-button_base{background-color:var(--ngc-button-background-color, transparent);color:var(--ngc-button-color, var(--color-text-brand, #103656));padding:3px 0}.gator-button_base ngc-icon{--ngc-icon-color: var(--ngc-button-icon-color, var(--color-icon-brand, #103656))}.gator-button_base .gator-button-text{border-bottom:1px solid var(--color-underline-primary, #BFBFBF)}.gator-button_base.gator-button_small{min-width:2.75rem}.gator-button_base.gator-button_medium{min-width:3.125rem}.gator-button_base.gator-button_large,.gator-button_base.gator-button_xlarge{min-width:3.5625rem}.gator-button_base:not([disabled]):not(.gator-button_loading):hover .gator-button-text{box-shadow:var(--ngc-button-hover-box-shadow, none);color:var(--ngc-button-hover-color, var(--color-text-brand, #103656));border-bottom:1px solid var(--color-underline-brand, #103656)}.gator-button_base:not([disabled]):not(.gator-button_loading):active .gator-button-text{color:var(--ngc-button-pressed-color, var(--color-text-brand, #103656));border-bottom:1px solid var(--color-underline-brand, #103656)}.gator-button_base:disabled{color:var(--ngc-button-color, var(--color-text-disabled, #BFBFBF))}.gator-button_base:disabled .gator-button-text{border-bottom:1px solid var(--color-text-disabled, #BFBFBF)}';export{o as default};
|
|
1
|
+
const o='.gator-button{--box-shadow-default: 0 5px 10px 0px var(--shadow-color-5), 0 7px 14px 0px var(--shadow-color-8), 0 3px 6px 0px var(--shadow-color-4);display:inline-flex;align-items:center;justify-content:center;border-style:none;cursor:pointer;text-decoration:none;font-family:var(--font-family-body, "Open Sans"),sans-serif;font-weight:var(--ngc-button-font-weight, var(--font-weight-semi-bold, 600));margin:var(--ngc-button-margin, auto);width:var(--ngc-button-width, auto);position:var(--ngc-button-position, relative);border-radius:var(--ngc-button-border-radius, var(--border-radius-x-small, 2px));gap:.5rem}.gator-button ngc-icon{--ngc-icon-color: var(--ngc-button-icon-color, var(--color-icon-inverse, #FFFFFF))}.gator-button:focus-visible{outline:var(--ngc-button-focus-outline, 2px solid var(--ngc-button-focus-outline-color, var(--color-border-neutral, #1F1F1F)));outline-offset:2px}.gator-button:disabled{cursor:not-allowed}.gator-button.gator-button_loading{cursor:not-allowed}.gator-button-loader{display:flex;align-items:center;justify-content:center;position:absolute}.gator-button-loader+.gator-button-text{visibility:hidden}.gator-button-skeleton{background-color:var(--color-surface-loading, #DBDBDB);cursor:default}.gator-button-content{display:flex;align-items:center;justify-content:center;gap:.5rem}.gator-button_loading .gator-button-content{visibility:hidden}.gator-button_small{font-size:var(--ngc-button-font-size, var(--font-size-body-3, .8125rem));line-height:var(--ngc-button-line-height, var(--line-height-body-3, 1.125rem));padding:var(--ngc-button-padding, 0 .75rem);min-width:var(--ngc-button-min-width, 3.5rem);height:var(--ngc-button-height, 1.75rem)}.gator-button_medium{font-size:var(--ngc-button-font-size, var(--font-size-body-2, .9375rem));line-height:var(--ngc-button-line-height, var(--line-height-body-2, 1.375rem));padding:var(--ngc-button-padding, 0 1rem);min-width:var(--ngc-button-min-width, 4rem);height:var(--ngc-button-height, 2.25rem)}.gator-button_large{font-size:var(--ngc-button-font-size, var(--font-size-body-1, 1.0625rem));line-height:var(--ngc-button-line-height, var(--line-height-body-1, 1.5rem));padding:var(--ngc-button-padding, 0 1rem);min-width:var(--ngc-button-min-width, 6rem);height:var(--ngc-button-height, 3rem)}.gator-button_xlarge{font-size:var(--ngc-button-font-size, var(--font-size-body-1, 1.0625rem));line-height:var(--ngc-button-line-height, var(--line-height-body-1, 1.5rem));padding:var(--ngc-button-padding, 0 2.5rem);min-width:var(--ngc-button-min-width, 7.5rem);height:var(--ngc-button-height, 3.5rem)}.gator-button_primary{background-color:var(--ngc-button-background-color, var(--color-feedback-brand, #103656));color:var(--ngc-button-color, var(--color-text-inverse, #FFFFFF))}.gator-button_primary:not([disabled]):not(.gator-button_loading):hover{background-color:var(--ngc-button-hover-background-color, var(--color-feedback-brand-secondary, #0D2B45));color:var(--ngc-button-hover-color, var(--color-text-inverse, #FFFFFF));box-shadow:var(--ngc-button-hover-box-shadow, var(--shadow-2-card-raised, var(--box-shadow-default)))}.gator-button_primary:not([disabled]):not(.gator-button_loading):active{background-color:var(--ngc-button-pressed-background-color, var(--color-feedback-brand-tertiary, #061622));color:var(--ngc-button-pressed-color, var(--color-text-inverse, #FFFFFF));box-shadow:none}.gator-button_primary:disabled{background-color:var(--ngc-button-disabled-background-color, var(--color-surface-disabled, #E5E5E5));color:var(--ngc-button-disabled-color, var(--color-text-disabled, #BFBFBF))}.gator-button_primary.gator-button_loading{background-color:var(--ngc-button-loading-background-color, var(--color-feedback-brand-tertiary, #061622))}.gator-button_secondary{background-color:var(--ngc-button-background-color, transparent);color:var(--ngc-button-color, var(--color-text-brand, #103656))}.gator-button_secondary:before{content:"";position:absolute;inset:0;border-radius:var(--ngc-button-border-radius, var(--border-radius-x-small, 2px));border-width:1px;border-color:var(--ngc-button-border-color, var(--color-border-brand, #103656));border-style:solid}.gator-button_secondary ngc-icon{--ngc-icon-color: var(--ngc-button-icon-color, var(--color-icon-brand, #103656))}.gator-button_secondary:not([disabled]):not(.gator-button_loading):hover{background-color:var(--ngc-button-hover-background-color, var(--color-surface-secondary, #F7F7F7));box-shadow:var(--ngc-button-hover-box-shadow, var(--shadow-2-card-raised, var(--box-shadow-default)))}.gator-button_secondary:not([disabled]):not(.gator-button_loading):active{background-color:var(--ngc-button-pressed-background-color, var(--color-surface-secondary, #F7F7F7));box-shadow:none}.gator-button_secondary:disabled{color:var(--ngc-button-disabled-color, var(--color-text-disabled, #BFBFBF));cursor:not-allowed}.gator-button_secondary:disabled ngc-icon{--ngc-icon-color: var(--color-icon-disabled)}.gator-button_secondary:disabled:before{border-color:var(--ngc-button-border-color, var(--color-border-secondary, #BFBFBF))}.gator-button_secondary.gator-button_loading{background-color:var(--ngc-button-loading-background-color, var(--color-surface-secondary, #F7F7F7))}.gator-button_secondary.gator-button_loading:before{border-color:var(--ngc-button-border-color, var(--color-border-secondary, #BFBFBF))}.gator-button_destructive{background-color:var(--ngc-button-background-color, var(--color-feedback-error, #D44011));color:var(--ngc-button-color, var(--color-text-inverse, #FFFFFF))}.gator-button_destructive:not([disabled]):not(.gator-button_loading):hover{box-shadow:var(--ngc-button-hover-box-shadow, var(--shadow-2-card-raised, var(--box-shadow-default)));background-color:var(--ngc-button-hover-background-color, var(--color-feedback-error-secondary, #AA330E))}.gator-button_destructive:not([disabled]):not(.gator-button_loading):active{background-color:var(--ngc-button-pressed-background-color, var(--color-feedback-error-secondary, #AA330E));box-shadow:none}.gator-button_destructive:disabled{background-color:var(--ngc-button-disabled-background-color, var(--color-surface-disabled, #E5E5E5));color:var(--ngc-button-disabled-color, var(--color-text-disabled, #BFBFBF))}.gator-button_destructive.gator-button_loading{background-color:var(--ngc-button-loading-background-color, var(--color-feedback-error-tertiary, #9E2500))}.gator-button_base{background-color:var(--ngc-button-background-color, transparent);color:var(--ngc-button-color, var(--color-text-brand, #103656));padding:3px 0}.gator-button_base ngc-icon{--ngc-icon-color: var(--ngc-button-icon-color, var(--color-icon-brand, #103656))}.gator-button_base .gator-button-text{border-bottom:1px solid var(--color-underline-primary, #BFBFBF)}.gator-button_base.gator-button_small{min-width:2.75rem}.gator-button_base.gator-button_medium{min-width:3.125rem}.gator-button_base.gator-button_large,.gator-button_base.gator-button_xlarge{min-width:3.5625rem}.gator-button_base:not([disabled]):not(.gator-button_loading):hover .gator-button-text{box-shadow:var(--ngc-button-hover-box-shadow, none);color:var(--ngc-button-hover-color, var(--color-text-brand, #103656));border-bottom:1px solid var(--color-underline-brand, #103656)}.gator-button_base:not([disabled]):not(.gator-button_loading):active .gator-button-text{color:var(--ngc-button-pressed-color, var(--color-text-brand, #103656));border-bottom:1px solid var(--color-underline-brand, #103656)}.gator-button_base:disabled{color:var(--ngc-button-color, var(--color-text-disabled, #BFBFBF))}.gator-button_base:disabled .gator-button-text{border-bottom:1px solid var(--color-text-disabled, #BFBFBF)}';export{o as default};
|
package/dist/packages/web-components/src/components/button-card/gator/button-card.gator.scss.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=":host{max-width:var(--ngc-button-card-width, 21rem)}ngc-card{--ngc-card-display: var(--ngc-button-card-display, flex);--ngc-card-max-width: var(--ngc-button-card-width, 21rem);--ngc-card-padding: var(--spacing-8);cursor:pointer}ngc-card:hover{--ngc-card-box-shadow: var(--shadow-4-modal)}ngc-card:active{--ngc-card-background-color: var(--ngc-button-card-pressed-background-color, var(--color-surface-brand, #F0F5FA))}ngc-card[outline]:active{--ngc-card-outline: 1px solid var(--ngc-button-card-pressed-outline-color, var(--color-border-brand-tertiary, #BDCDDC))}ngc-card.selected{--ngc-card-outline: 1px solid var(--ngc-button-card-selected-outline-color, var(--color-stroke-brand, #11395B))}ngc-card[disabled]:hover,ngc-card[disabled]:active,ngc-card[disabled].selected{--ngc-card-box-shadow: unset;--ngc-card-background-color: unset;--ngc-card-outline: unset;--ngc-card-border: unset;cursor:not-allowed}ngc-card:focus-visible{--ngc-card-outline: 2px solid var(--ngc-button-card-focused-outline-color, var(--color-border-neutral, #1F1F1F))}ngc-chip{--ngc-chip-font-size: var(--font-size-body-3, .8125rem);--ngc-chip-line-height: var(--line-height-body-2, 1.125rem)}ngc-text-detail{width:100%;--ngc-text-detail-title-color: var(--color-text-primary, #1F1F1F);--ngc-text-detail-title-font-size: var(--font-size-sibtitle-1, 1.0625rem);--ngc-text-detail-title-font-weight: var(--font-weight-bold, 700);--ngc-text-detail-title-line-height: var(--line-height-sibtitle-1, 1.5rem);--ngc-text-detail-subtitle-color: var(--color-text-secondary, #6D6D6D);--ngc-text-detail-subtitle-line-height: var(--line-height-body-2, 1.375rem);--ngc-text-detail-subtitle-font-size: var(--font-size-body-2, .9375rem)}.gator-button-card-chip-label{position:absolute;top:0;left:var(--spacing-8);transform:translateY(-50%);--ngc-chip-cursor: pointer}.gator-button-card-container{display:inline-flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.gator-button-card_disabled ngc-text-detail{--ngc-text-detail-title-color: var(--color-text-disabled, #6D6D6D);--ngc-text-detail-subtitle-color: var(--color-text-disabled, #6D6D6D)}";export{t as default};
|
|
1
|
+
const t=":host{max-width:var(--ngc-button-card-width, 21rem)}ngc-card{--ngc-card-display: var(--ngc-button-card-display, flex);--ngc-card-max-width: var(--ngc-button-card-width, 21rem);--ngc-card-padding: var(--spacing-8);cursor:pointer}ngc-card:hover{--ngc-card-box-shadow: var(--shadow-4-modal)}ngc-card:active{--ngc-card-background-color: var(--ngc-button-card-pressed-background-color, var(--color-surface-brand, #F0F5FA))}ngc-card[outline]:active{--ngc-card-outline: 1px solid var(--ngc-button-card-pressed-outline-color, var(--color-border-brand-tertiary, #BDCDDC))}ngc-card.selected{--ngc-card-outline: 1px solid var(--ngc-button-card-selected-outline-color, var(--color-stroke-brand, #11395B))}ngc-card[disabled]:hover,ngc-card[disabled]:active,ngc-card[disabled].selected{--ngc-card-box-shadow: unset;--ngc-card-background-color: unset;--ngc-card-outline: unset;--ngc-card-border: unset;cursor:not-allowed}ngc-card:focus-visible{--ngc-card-outline: 2px solid var(--ngc-button-card-focused-outline-color, var(--color-border-neutral, #1F1F1F))}ngc-chip{--ngc-chip-font-size: var(--font-size-body-3, .8125rem);--ngc-chip-line-height: var(--line-height-body-2, 1.125rem)}ngc-text-detail{width:100%;--ngc-text-detail-title-color: var(--color-text-primary, #1F1F1F);--ngc-text-detail-title-font-size: var(--font-size-sibtitle-1, 1.0625rem);--ngc-text-detail-title-font-weight: var(--font-weight-bold, 700);--ngc-text-detail-title-line-height: var(--line-height-sibtitle-1, 1.5rem);--ngc-text-detail-subtitle-color: var(--color-text-secondary, #6D6D6D);--ngc-text-detail-subtitle-line-height: var(--line-height-body-2, 1.375rem);--ngc-text-detail-subtitle-font-size: var(--font-size-body-2, .9375rem)}.gator-button-card-link{display:block;text-decoration:none;color:inherit;cursor:pointer;outline:none;border-radius:var(--ngc-card-border-radius, var(--border-radius-x-large, 1rem))}.gator-button-card-link:focus-visible{--ngc-card-outline: 2px solid var(--ngc-button-card-focused-outline-color, var(--color-border-neutral, #1F1F1F))}.gator-button-card-chip-label{position:absolute;top:0;left:var(--spacing-8);transform:translateY(-50%);--ngc-chip-cursor: pointer}.gator-button-card-container{display:inline-flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.gator-button-card_disabled ngc-text-detail{--ngc-text-detail-title-color: var(--color-text-disabled, #6D6D6D);--ngc-text-detail-subtitle-color: var(--color-text-disabled, #6D6D6D)}";export{t as default};
|
|
@@ -38,5 +38,19 @@ export declare class NjcButton extends NjcButton_base {
|
|
|
38
38
|
@type {boolean}
|
|
39
39
|
**/
|
|
40
40
|
skeleton: boolean;
|
|
41
|
+
/**
|
|
42
|
+
@property href - When set, the button renders as a real navigable anchor (`<a>`) styled as the
|
|
43
|
+
button, giving native open-in-new-tab, modifier/middle-click, copy-link and the link
|
|
44
|
+
screen-reader role without an outer `<a>` wrapper. When empty, standard `<button>` semantics are
|
|
45
|
+
kept. Ignored while `disabled` or `loading`. For inline text links prefer `ngc-text-link`.
|
|
46
|
+
@type {string}
|
|
47
|
+
**/
|
|
48
|
+
href: string;
|
|
49
|
+
/**
|
|
50
|
+
@property target - The browsing context for the link when `href` is set (e.g. `_blank`,
|
|
51
|
+
`_self`). Has no effect without `href`.
|
|
52
|
+
@type {string}
|
|
53
|
+
**/
|
|
54
|
+
target: string;
|
|
41
55
|
}
|
|
42
56
|
export {};
|
|
@@ -17,6 +17,15 @@ export declare class NgcButton extends NjcButton {
|
|
|
17
17
|
endIcon: string | undefined;
|
|
18
18
|
type: 'submit' | 'button' | 'reset';
|
|
19
19
|
render(): import('lit').TemplateResult<1>;
|
|
20
|
+
/**
|
|
21
|
+
* Link mode is active only when an `href` is provided and the button is neither disabled nor
|
|
22
|
+
* loading. Disabled/loading intentionally fall back to `<button>` so a link can never navigate
|
|
23
|
+
* while in those states.
|
|
24
|
+
*/
|
|
25
|
+
get isLinkMode(): boolean;
|
|
26
|
+
get buttonMarkup(): import('lit').TemplateResult<1>;
|
|
27
|
+
get anchorMarkup(): import('lit').TemplateResult<1>;
|
|
28
|
+
get buttonContentMarkup(): import('lit').TemplateResult<1>;
|
|
20
29
|
get startIconMarkup(): import('lit').TemplateResult<1> | typeof nothing;
|
|
21
30
|
get endIconMarkup(): import('lit').TemplateResult<1> | typeof nothing;
|
|
22
31
|
get buttonAriaLabel(): string | typeof nothing;
|
|
@@ -26,6 +35,7 @@ export declare class NgcButton extends NjcButton {
|
|
|
26
35
|
get skeletonMarkup(): import('lit').TemplateResult<1>;
|
|
27
36
|
get loadingMarkup(): import('lit').TemplateResult<1>;
|
|
28
37
|
handleClick(event: Event): void;
|
|
38
|
+
handleAnchorClick(event: Event): void;
|
|
29
39
|
}
|
|
30
40
|
declare global {
|
|
31
41
|
interface HTMLElementTagNameMap {
|
|
@@ -10,4 +10,19 @@ export declare class NjcButtonCard extends NjcCard {
|
|
|
10
10
|
* @property {boolean} selected
|
|
11
11
|
*/
|
|
12
12
|
selected: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* @description When set, the button card renders as a real navigable anchor (`<a>`) wrapping the
|
|
15
|
+
* card, providing native open-in-new-tab, modifier/middle-click, copy-link and the link
|
|
16
|
+
* screen-reader role without an outer `<a>` wrapper. When empty, the card keeps its
|
|
17
|
+
* `role="button"` toggle semantics. `selected`/`aria-pressed` apply to button mode only and are
|
|
18
|
+
* ignored in link mode.
|
|
19
|
+
* @property {string} href
|
|
20
|
+
*/
|
|
21
|
+
href: string;
|
|
22
|
+
/**
|
|
23
|
+
* @description The browsing context for the link when `href` is set (e.g. `_blank`, `_self`).
|
|
24
|
+
* Has no effect without `href`.
|
|
25
|
+
* @property {string} target
|
|
26
|
+
*/
|
|
27
|
+
target: string;
|
|
13
28
|
}
|
|
@@ -17,8 +17,19 @@ export declare class NgcButtonCard extends NjcButtonCard {
|
|
|
17
17
|
*/
|
|
18
18
|
chipType: NJC_CHIP_TYPES;
|
|
19
19
|
private _showDefault;
|
|
20
|
+
private _selectedInLinkModeWarned;
|
|
20
21
|
firstUpdated(_changedProperties: PropertyValues): void;
|
|
22
|
+
updated(_changedProperties: PropertyValues): void;
|
|
23
|
+
/**
|
|
24
|
+
* Link mode is active only when an `href` is provided and the card is not disabled. As with
|
|
25
|
+
* `ngc-button`, a disabled card falls back to button-mode markup so a link can never navigate
|
|
26
|
+
* while disabled.
|
|
27
|
+
*/
|
|
28
|
+
get isLinkMode(): boolean;
|
|
21
29
|
render(): import('lit').TemplateResult<1>;
|
|
30
|
+
get buttonMarkup(): import('lit').TemplateResult<1>;
|
|
31
|
+
get linkMarkup(): import('lit').TemplateResult<1>;
|
|
32
|
+
get cardBodyMarkup(): import('lit').TemplateResult<1>;
|
|
22
33
|
private _checkSlotContent;
|
|
23
34
|
get cardClasses(): {
|
|
24
35
|
selected: boolean;
|
|
@@ -28,4 +39,5 @@ export declare class NgcButtonCard extends NjcButtonCard {
|
|
|
28
39
|
handleClick(event: Event): void;
|
|
29
40
|
click(): void;
|
|
30
41
|
handleKeydown(event: KeyboardEvent): void;
|
|
42
|
+
handleAnchorClick(event: Event): void;
|
|
31
43
|
}
|
|
@@ -5,12 +5,14 @@ export declare class NgcTablePagination extends NgcComponent {
|
|
|
5
5
|
totalItems: number;
|
|
6
6
|
itemsPerPage: number;
|
|
7
7
|
itemsPerPageOptions: string[];
|
|
8
|
+
includePageSelection: boolean;
|
|
8
9
|
updated(): void;
|
|
9
10
|
render(): import('lit').TemplateResult<1>;
|
|
10
11
|
handleCurrentPageChanged(e: CustomEvent): void;
|
|
11
12
|
handleItemsPerPageChanged(e: CustomEvent): void;
|
|
12
13
|
get totalPages(): number;
|
|
13
14
|
get menuItemsForItemsPerPage(): import('lit').TemplateResult<1>[];
|
|
15
|
+
get pageSelectionContent(): import('lit').TemplateResult<1>;
|
|
14
16
|
get menuItemsForPageSelection(): import('lit').TemplateResult<1>[];
|
|
15
17
|
get currentItemsViewedText(): string;
|
|
16
18
|
get isPreviousPageDisabled(): boolean;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "15.1.0",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.0",
|
|
102
102
|
"yaml-eslint-parser": "^2.0.0",
|
|
103
|
-
"@ncino/styles": "
|
|
103
|
+
"@ncino/styles": "15.1.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "
|
|
106
|
+
"@ncino/styles": "15.1.0"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "15.0.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -1734,6 +1734,11 @@
|
|
|
1734
1734
|
"name": "skeleton",
|
|
1735
1735
|
"value": { "type": "boolean", "default": "false" }
|
|
1736
1736
|
},
|
|
1737
|
+
{ "name": "href", "value": { "type": "string", "default": "''" } },
|
|
1738
|
+
{
|
|
1739
|
+
"name": "target",
|
|
1740
|
+
"value": { "type": "string", "default": "''" }
|
|
1741
|
+
},
|
|
1737
1742
|
{
|
|
1738
1743
|
"name": "data-testid",
|
|
1739
1744
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
@@ -1760,6 +1765,8 @@
|
|
|
1760
1765
|
{ "name": "disabled", "type": "boolean" },
|
|
1761
1766
|
{ "name": "loading", "type": "boolean" },
|
|
1762
1767
|
{ "name": "skeleton", "type": "boolean" },
|
|
1768
|
+
{ "name": "href", "type": "string" },
|
|
1769
|
+
{ "name": "target", "type": "string" },
|
|
1763
1770
|
{ "name": "dataTestid", "type": "string | undefined" },
|
|
1764
1771
|
{ "name": "labelDataTestid" },
|
|
1765
1772
|
{ "name": "helpTextDataTestid" },
|
|
@@ -1874,6 +1881,11 @@
|
|
|
1874
1881
|
"name": "skeleton",
|
|
1875
1882
|
"value": { "type": "boolean", "default": "false" }
|
|
1876
1883
|
},
|
|
1884
|
+
{ "name": "href", "value": { "type": "string", "default": "''" } },
|
|
1885
|
+
{
|
|
1886
|
+
"name": "target",
|
|
1887
|
+
"value": { "type": "string", "default": "''" }
|
|
1888
|
+
},
|
|
1877
1889
|
{
|
|
1878
1890
|
"name": "data-testid",
|
|
1879
1891
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
@@ -1888,6 +1900,13 @@
|
|
|
1888
1900
|
{ "name": "startIcon", "type": "string | undefined" },
|
|
1889
1901
|
{ "name": "endIcon", "type": "string | undefined" },
|
|
1890
1902
|
{ "name": "type", "type": "'submit' | 'button' | 'reset'" },
|
|
1903
|
+
{
|
|
1904
|
+
"name": "isLinkMode",
|
|
1905
|
+
"description": "Link mode is active only when an `href` is provided and the button is neither disabled nor\nloading. Disabled/loading intentionally fall back to `<button>` so a link can never navigate\nwhile in those states."
|
|
1906
|
+
},
|
|
1907
|
+
{ "name": "buttonMarkup" },
|
|
1908
|
+
{ "name": "anchorMarkup" },
|
|
1909
|
+
{ "name": "buttonContentMarkup" },
|
|
1891
1910
|
{ "name": "startIconMarkup" },
|
|
1892
1911
|
{ "name": "endIconMarkup" },
|
|
1893
1912
|
{ "name": "buttonAriaLabel" },
|
|
@@ -1914,6 +1933,8 @@
|
|
|
1914
1933
|
{ "name": "disabled", "type": "boolean" },
|
|
1915
1934
|
{ "name": "loading", "type": "boolean" },
|
|
1916
1935
|
{ "name": "skeleton", "type": "boolean" },
|
|
1936
|
+
{ "name": "href", "type": "string" },
|
|
1937
|
+
{ "name": "target", "type": "string" },
|
|
1917
1938
|
{ "name": "dataTestid", "type": "string | undefined" },
|
|
1918
1939
|
{ "name": "labelDataTestid" },
|
|
1919
1940
|
{ "name": "helpTextDataTestid" },
|
|
@@ -1942,6 +1963,11 @@
|
|
|
1942
1963
|
"name": "selected",
|
|
1943
1964
|
"value": { "type": "boolean", "default": "false" }
|
|
1944
1965
|
},
|
|
1966
|
+
{ "name": "href", "value": { "type": "string", "default": "''" } },
|
|
1967
|
+
{
|
|
1968
|
+
"name": "target",
|
|
1969
|
+
"value": { "type": "string", "default": "''" }
|
|
1970
|
+
},
|
|
1945
1971
|
{
|
|
1946
1972
|
"name": "subtitle",
|
|
1947
1973
|
"value": { "type": "string", "default": "''" }
|
|
@@ -1974,11 +2000,20 @@
|
|
|
1974
2000
|
"name": "chipType",
|
|
1975
2001
|
"type": " | 'success' | 'warning' | 'error' | 'info' | 'ai'"
|
|
1976
2002
|
},
|
|
2003
|
+
{
|
|
2004
|
+
"name": "isLinkMode",
|
|
2005
|
+
"description": "Link mode is active only when an `href` is provided and the card is not disabled. As with\n`ngc-button`, a disabled card falls back to button-mode markup so a link can never navigate\nwhile disabled."
|
|
2006
|
+
},
|
|
2007
|
+
{ "name": "buttonMarkup" },
|
|
2008
|
+
{ "name": "linkMarkup" },
|
|
2009
|
+
{ "name": "cardBodyMarkup" },
|
|
1977
2010
|
{ "name": "cardClasses" },
|
|
1978
2011
|
{ "name": "cardLabelMarkup" },
|
|
1979
2012
|
{ "name": "disabledClass" },
|
|
1980
2013
|
{ "name": "chipLabel", "type": "string" },
|
|
1981
2014
|
{ "name": "selected", "type": "boolean" },
|
|
2015
|
+
{ "name": "href", "type": "string" },
|
|
2016
|
+
{ "name": "target", "type": "string" },
|
|
1982
2017
|
{ "name": "title", "type": "string" },
|
|
1983
2018
|
{ "name": "subtitle", "type": "string" },
|
|
1984
2019
|
{ "name": "elevated", "type": "boolean" },
|
|
@@ -8100,6 +8135,10 @@
|
|
|
8100
8135
|
"name": "include-pagination",
|
|
8101
8136
|
"value": { "type": "boolean", "default": "false" }
|
|
8102
8137
|
},
|
|
8138
|
+
{
|
|
8139
|
+
"name": "include-page-selection",
|
|
8140
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8141
|
+
},
|
|
8103
8142
|
{
|
|
8104
8143
|
"name": "skeleton",
|
|
8105
8144
|
"value": { "type": "boolean", "default": "false" }
|
|
@@ -8184,6 +8223,7 @@
|
|
|
8184
8223
|
"properties": [
|
|
8185
8224
|
{ "name": "elevated", "type": "boolean" },
|
|
8186
8225
|
{ "name": "includePagination", "type": "boolean" },
|
|
8226
|
+
{ "name": "includePageSelection", "type": "boolean" },
|
|
8187
8227
|
{ "name": "skeleton", "type": "boolean" },
|
|
8188
8228
|
{ "name": "sortField", "type": "string | null" },
|
|
8189
8229
|
{ "name": "sortDirection", "type": "'asc' | 'desc' | null" },
|
|
@@ -8274,6 +8314,10 @@
|
|
|
8274
8314
|
"default": "['10', '15', '20', '50', '100', msg('All')]"
|
|
8275
8315
|
}
|
|
8276
8316
|
},
|
|
8317
|
+
{
|
|
8318
|
+
"name": "include-page-selection",
|
|
8319
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8320
|
+
},
|
|
8277
8321
|
{
|
|
8278
8322
|
"name": "delegatesARIA",
|
|
8279
8323
|
"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.",
|
|
@@ -8298,8 +8342,10 @@
|
|
|
8298
8342
|
{ "name": "totalItems", "type": "number" },
|
|
8299
8343
|
{ "name": "itemsPerPage", "type": "number" },
|
|
8300
8344
|
{ "name": "itemsPerPageOptions", "type": "string[]" },
|
|
8345
|
+
{ "name": "includePageSelection", "type": "boolean" },
|
|
8301
8346
|
{ "name": "totalPages" },
|
|
8302
8347
|
{ "name": "menuItemsForItemsPerPage" },
|
|
8348
|
+
{ "name": "pageSelectionContent" },
|
|
8303
8349
|
{ "name": "menuItemsForPageSelection" },
|
|
8304
8350
|
{ "name": "currentItemsViewedText" },
|
|
8305
8351
|
{ "name": "isPreviousPageDisabled" },
|