@digital-realty/ix-grid 1.3.7 → 1.3.8
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/IxGridNoRows.js +3 -1
- package/dist/components/IxGridNoRows.js.map +1 -1
- package/dist/components/IxPagination.js +4 -2
- package/dist/components/IxPagination.js.map +1 -1
- package/dist/ix-grid.min.js +1 -1
- package/package.json +11 -11
- package/src/components/IxGridNoRows.ts +3 -1
- package/src/components/IxPagination.ts +4 -2
|
@@ -14,7 +14,9 @@ export class IxGridNoRows extends LitElement {
|
|
|
14
14
|
return html `
|
|
15
15
|
<div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
|
|
16
16
|
<ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
|
|
17
|
-
<h2 class="dlr-text-heading"
|
|
17
|
+
<h2 class="dlr-text-heading" data-testid="ix-grid-no-rows-heading">
|
|
18
|
+
${this.message}
|
|
19
|
+
</h2>
|
|
18
20
|
</div>
|
|
19
21
|
`;
|
|
20
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA2C8B,SAAI,GAAiC,OAAO,CAAC;QAE7C,SAAI,GAAW,OAAO,CAAC;QAEvB,YAAO,GAAW,oBAAoB,CAAC;QAEvC,iBAAY,GAAW,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA2C8B,SAAI,GAAiC,OAAO,CAAC;QAE7C,SAAI,GAAW,OAAO,CAAC;QAEvB,YAAO,GAAW,oBAAoB,CAAC;QAEvC,iBAAY,GAAW,MAAM,CAAC;IAY5D,CAAC;IAVC,MAAM;QACJ,OAAO,IAAI,CAAA;2DAC4C,IAAI,CAAC,YAAY;+BAC7C,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;;YAE1C,IAAI,CAAC,OAAO;;;KAGnB,CAAC;IACJ,CAAC;;AA3DM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,CAAC;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxGridNoRows extends LitElement {\n static styles = css`\n .container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n text-align: center;\n padding: 2.5rem 0;\n }\n .icon {\n user-select: none;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n font-size: 1.5rem;\n color: rgb(255, 152, 0);\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .warning,\n .error {\n user-select: none;\n color: var(--clr-warning, #ff9800);\n }\n .critical {\n color: var(--clr-critical, #db0028);\n }\n h2 {\n font-family: var(--ix-font-family, 'Red Hat Display');\n }\n h2.dlr-text-heading {\n margin: 0.5rem 0 0;\n font-family: 'Red Hat Display', sans-serif;\n font-style: normal;\n font-size: 1.5rem;\n line-height: 2rem;\n letter-spacing: 0em;\n color: rgb(9, 34, 65);\n text-align: center;\n font-weight: 700;\n }\n `;\n\n @property({ type: String }) type: 'warning' | 'info' | 'error' = 'error';\n\n @property({ type: String }) icon: string = 'error';\n\n @property({ type: String }) message: string = 'No data to display';\n\n @property({ type: String }) iconFontSize: string = '3rem';\n\n render() {\n return html`\n <div class=\"container\" style=\"--ix-icon-font-size: ${this.iconFontSize};\">\n <ix-icon class=\"icon ${this.type}\">${this.icon}</ix-icon>\n <h2 class=\"dlr-text-heading\" data-testid=\"ix-grid-no-rows-heading\">\n ${this.message}\n </h2>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -40,7 +40,9 @@ let IxPagination = class IxPagination extends LitElement {
|
|
|
40
40
|
const next = this.recordCount > this.page * this.pageSize;
|
|
41
41
|
return html ` <div class="pagination">
|
|
42
42
|
<div>
|
|
43
|
-
<p class="rows-per-page"
|
|
43
|
+
<p class="rows-per-page" data-testid="ix-pagination-rows-per-page">
|
|
44
|
+
${copy.rowsPerPage}:
|
|
45
|
+
</p>
|
|
44
46
|
<ix-select
|
|
45
47
|
wide-menu
|
|
46
48
|
menu-positioning="fixed"
|
|
@@ -61,7 +63,7 @@ let IxPagination = class IxPagination extends LitElement {
|
|
|
61
63
|
</ix-select>
|
|
62
64
|
</div>
|
|
63
65
|
<div>
|
|
64
|
-
<p>
|
|
66
|
+
<p data-testid="ix-pagination-page-of-page">
|
|
65
67
|
${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -
|
|
66
68
|
${this.page * this.pageSize > this.recordCount
|
|
67
69
|
? html `${this.recordCount}`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["../../src/components/IxPagination.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAGnC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAGuB,gBAAW,GAAG,CAAC,CAAC;QAEhB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["../../src/components/IxPagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { PaginationStyles } from './pagination-styles.js';\nimport { copy } from '../ix-grid-copy.js';\n\n@customElement('ix-pagination')\nexport class IxPagination extends LitElement {\n static readonly styles = [IxGridViewStyles, PaginationStyles];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n private changePage(offset: number) {\n this.page += offset;\n this.updatePagination();\n }\n\n private handlePageSizeSelection(e: Event) {\n const el = e.target as HTMLInputElement;\n const newPageSize = Number(el.value);\n\n const currentFirstRecord = (this.page - 1) * this.pageSize + 1;\n const newPageNum = Math.ceil(currentFirstRecord / newPageSize);\n\n this.updatePagination(newPageNum, newPageSize);\n }\n\n updatePagination(page = this.page, pageSize = this.pageSize) {\n this.dispatchEvent(\n new CustomEvent('updatePagination', {\n detail: {\n page,\n pageSize,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n render() {\n const back = this.page > 1;\n const next = this.recordCount > this.page * this.pageSize;\n return html` <div class=\"pagination\">\n <div>\n <p class=\"rows-per-page\" data-testid=\"ix-pagination-rows-per-page\">\n ${copy.rowsPerPage}:\n </p>\n <ix-select\n wide-menu\n menu-positioning=\"fixed\"\n class=\"pagination__select-input\"\n @request-selection=${this.handlePageSizeSelection}\n selected-index=${this.pageSizes.indexOf(this.pageSize)}\n filled\n >\n ${this.pageSizes.map(\n option => html`\n <ix-select-option\n class=\"select-option\"\n value=${option}\n ?selected=${option === this.pageSize}\n >\n <div slot=\"headline\">${option}</div>\n </ix-select-option>\n `\n )}\n </ix-select>\n </div>\n <div>\n <p data-testid=\"ix-pagination-page-of-page\">\n ${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -\n ${this.page * this.pageSize > this.recordCount\n ? html`${this.recordCount}`\n : html`${this.page * this.pageSize}`}\n of ${this.recordCount > 0 ? this.recordCount : 0}\n </p>\n <div class=\"pagination-nav\">\n <ix-icon-button\n ?disabled=${!back}\n @click=${() => back && this.changePage(-1)}\n icon=\"chevron_left\"\n data-testid=\"ix-pagination-prev\"\n >\n </ix-icon-button>\n <ix-icon-button\n ?disabled=${!next}\n @click=${() => next && this.changePage(+1)}\n icon=\"chevron_right\"\n data-testid=\"ix-pagination-next\"\n >\n </ix-icon-button>\n </div>\n </div>\n </div>`;\n }\n}\n"]}
|
package/dist/ix-grid.min.js
CHANGED
|
@@ -10,7 +10,7 @@ import{__decorate}from"tslib";import"@digital-realty/grid";import{columnHeaderRe
|
|
|
10
10
|
#1456e0
|
|
11
11
|
);--md-filled-select-text-field-focus-active-indicator-color:var(
|
|
12
12
|
--md-filled-select-text-field-focus-trailing-icon-color
|
|
13
|
-
)}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}@media only screen and (max-width:600px){.pagination{justify-content:space-between}.pagination>div{gap:0}}`),IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}handlePageSizeSelection(e){var e=e.target,e=Number(e.value),t=(this.page-1)*this.pageSize+1,t=Math.ceil(t/e);this.updatePagination(t,e)}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><div><p class="rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${this.handlePageSizeSelection}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}" ?selected="${e===this.pageSize}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select></div><div><p>${0<this.recordCount?(this.page-1)*this.pageSize+1:0} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${0<this.recordCount?this.recordCount:0}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left" data-testid="ix-pagination-prev"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right" data-testid="ix-pagination-next"></ix-icon-button></div></div></div>`}};IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination);class IxGrid extends LitElement{constructor(){super(...arguments),this.defaultPageSize=10,this.defaultPage=1,this.originalSearchParams=void 0,this.columnReorderingAllowed=!1,this.variantClass="",this.theme="no-border",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=this.defaultPage,this.pageSize=this.defaultPageSize,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.isDownloading=!1,this.isLoading=!1,this.downloadMenuItems=[],this.addParamsToURL=!0,this.readParamsFromURL=!1,this.refreshDataOnColumnVisibilityChange=!0,this.filterValueChangeDebounceTime=300,this.hideColumnHeaders=!1,this.preservedQueryParamKeys=[],this.filterMaxDate=formatDate(new Date,"yyyy-MM-dd"),this.hashedTableState="",this.hideViewMoreLessButtonIcon=!0,this.showAddButton=!1,this.disableAddButton=!1,this.addButtonLabel=copy.add,this.showRemoveAllButton=!1,this.disableRemoveAllButton=!1,this.removeAllButtonLabel=copy.removeAll,this.filters=[],this.isColumnsReordering=!1,this.isExpanded=!1,this.displayColumns=[],this.defaultFilterKeys=["sort","order","page","size"],this.initialised=!1,this.handlePopState=()=>{this.updateSearchParamsFromUri(!0),this.dispatchChangeEvent()},this.dispatchChangeEvent=()=>{var e=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:e,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))},this.renderColumnHeader=(e,t,i,r)=>{i=classMap({header:!0,frozen:!!e.frozenToEnd,first:0===i,last:i===r-1,border:!(null!=t&&t.frozenToEnd)});return html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="${i}"><span class="header-label">${e.header}</span> ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon>`:nothing}</div>`},this.columnRenderer=(e,t,i,r)=>{render(nothing,t);r=e.bodyRenderer(r.item,r,i);let o=r;i=!!e.maxWidth;let a="column-max-width-set";i&&(o=html`<div class="${a}" style="max-width:${e.maxWidth}">${r}</div>`),render(o,t),i&&requestAnimationFrame(()=>{let e,i=t.querySelector("."+a);if(i&&i.scrollWidth>i.clientWidth&&!i.querySelector(".custom-tooltip")&&null!=(e=i.textContent)&&e.trim()){let t=document.createElement("div");t.className="custom-tooltip",t.style.cssText=`
|
|
13
|
+
)}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}@media only screen and (max-width:600px){.pagination{justify-content:space-between}.pagination>div{gap:0}}`),IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}handlePageSizeSelection(e){var e=e.target,e=Number(e.value),t=(this.page-1)*this.pageSize+1,t=Math.ceil(t/e);this.updatePagination(t,e)}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><div><p class="rows-per-page" data-testid="ix-pagination-rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${this.handlePageSizeSelection}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}" ?selected="${e===this.pageSize}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select></div><div><p data-testid="ix-pagination-page-of-page">${0<this.recordCount?(this.page-1)*this.pageSize+1:0} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${0<this.recordCount?this.recordCount:0}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left" data-testid="ix-pagination-prev"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right" data-testid="ix-pagination-next"></ix-icon-button></div></div></div>`}};IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination);class IxGrid extends LitElement{constructor(){super(...arguments),this.defaultPageSize=10,this.defaultPage=1,this.originalSearchParams=void 0,this.columnReorderingAllowed=!1,this.variantClass="",this.theme="no-border",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=this.defaultPage,this.pageSize=this.defaultPageSize,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.isDownloading=!1,this.isLoading=!1,this.downloadMenuItems=[],this.addParamsToURL=!0,this.readParamsFromURL=!1,this.refreshDataOnColumnVisibilityChange=!0,this.filterValueChangeDebounceTime=300,this.hideColumnHeaders=!1,this.preservedQueryParamKeys=[],this.filterMaxDate=formatDate(new Date,"yyyy-MM-dd"),this.hashedTableState="",this.hideViewMoreLessButtonIcon=!0,this.showAddButton=!1,this.disableAddButton=!1,this.addButtonLabel=copy.add,this.showRemoveAllButton=!1,this.disableRemoveAllButton=!1,this.removeAllButtonLabel=copy.removeAll,this.filters=[],this.isColumnsReordering=!1,this.isExpanded=!1,this.displayColumns=[],this.defaultFilterKeys=["sort","order","page","size"],this.initialised=!1,this.handlePopState=()=>{this.updateSearchParamsFromUri(!0),this.dispatchChangeEvent()},this.dispatchChangeEvent=()=>{var e=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:e,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))},this.renderColumnHeader=(e,t,i,r)=>{i=classMap({header:!0,frozen:!!e.frozenToEnd,first:0===i,last:i===r-1,border:!(null!=t&&t.frozenToEnd)});return html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="${i}"><span class="header-label">${e.header}</span> ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon>`:nothing}</div>`},this.columnRenderer=(e,t,i,r)=>{render(nothing,t);r=e.bodyRenderer(r.item,r,i);let o=r;i=!!e.maxWidth;let a="column-max-width-set";i&&(o=html`<div class="${a}" style="max-width:${e.maxWidth}">${r}</div>`),render(o,t),i&&requestAnimationFrame(()=>{let e,i=t.querySelector("."+a);if(i&&i.scrollWidth>i.clientWidth&&!i.querySelector(".custom-tooltip")&&null!=(e=i.textContent)&&e.trim()){let t=document.createElement("div");t.className="custom-tooltip",t.style.cssText=`
|
|
14
14
|
background-color: #092241;
|
|
15
15
|
font-size: 0.75rem;
|
|
16
16
|
color: white;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-grid following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.3.
|
|
6
|
+
"version": "1.3.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@digital-realty/grid": "^1.1.
|
|
33
|
-
"@digital-realty/ix-button": "^3.4.
|
|
34
|
-
"@digital-realty/ix-date": "^1.2.
|
|
35
|
-
"@digital-realty/ix-icon": "^1.2.
|
|
36
|
-
"@digital-realty/ix-icon-button": "^1.2.
|
|
37
|
-
"@digital-realty/ix-menu": "^1.2.
|
|
38
|
-
"@digital-realty/ix-progress": "^1.3.
|
|
39
|
-
"@digital-realty/ix-select": "^1.2.
|
|
40
|
-
"@digital-realty/ix-switch": "^2.3.
|
|
32
|
+
"@digital-realty/grid": "^1.1.2",
|
|
33
|
+
"@digital-realty/ix-button": "^3.4.2",
|
|
34
|
+
"@digital-realty/ix-date": "^1.2.2",
|
|
35
|
+
"@digital-realty/ix-icon": "^1.2.2",
|
|
36
|
+
"@digital-realty/ix-icon-button": "^1.2.2",
|
|
37
|
+
"@digital-realty/ix-menu": "^1.2.2",
|
|
38
|
+
"@digital-realty/ix-progress": "^1.3.2",
|
|
39
|
+
"@digital-realty/ix-select": "^1.2.3",
|
|
40
|
+
"@digital-realty/ix-switch": "^2.3.2",
|
|
41
41
|
"@lit/react": "^1.0.5",
|
|
42
42
|
"date-fns": "^4.1.0",
|
|
43
43
|
"lit": "^3.2.1",
|
|
@@ -112,5 +112,5 @@
|
|
|
112
112
|
"prettier --write"
|
|
113
113
|
]
|
|
114
114
|
},
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "bbcb2805555472c26b6590241ee4478c7d7c2302"
|
|
116
116
|
}
|
|
@@ -57,7 +57,9 @@ export class IxGridNoRows extends LitElement {
|
|
|
57
57
|
return html`
|
|
58
58
|
<div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
|
|
59
59
|
<ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
|
|
60
|
-
<h2 class="dlr-text-heading"
|
|
60
|
+
<h2 class="dlr-text-heading" data-testid="ix-grid-no-rows-heading">
|
|
61
|
+
${this.message}
|
|
62
|
+
</h2>
|
|
61
63
|
</div>
|
|
62
64
|
`;
|
|
63
65
|
}
|
|
@@ -51,7 +51,9 @@ export class IxPagination extends LitElement {
|
|
|
51
51
|
const next = this.recordCount > this.page * this.pageSize;
|
|
52
52
|
return html` <div class="pagination">
|
|
53
53
|
<div>
|
|
54
|
-
<p class="rows-per-page"
|
|
54
|
+
<p class="rows-per-page" data-testid="ix-pagination-rows-per-page">
|
|
55
|
+
${copy.rowsPerPage}:
|
|
56
|
+
</p>
|
|
55
57
|
<ix-select
|
|
56
58
|
wide-menu
|
|
57
59
|
menu-positioning="fixed"
|
|
@@ -74,7 +76,7 @@ export class IxPagination extends LitElement {
|
|
|
74
76
|
</ix-select>
|
|
75
77
|
</div>
|
|
76
78
|
<div>
|
|
77
|
-
<p>
|
|
79
|
+
<p data-testid="ix-pagination-page-of-page">
|
|
78
80
|
${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -
|
|
79
81
|
${this.page * this.pageSize > this.recordCount
|
|
80
82
|
? html`${this.recordCount}`
|