@aquera/nile-elements 0.1.57-beta-1.3 → 0.1.57-beta-1.5
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/index.js +58 -43
- package/dist/nile-empty-state/nile-empty-state.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.cjs.js.map +1 -1
- package/dist/nile-empty-state/nile-empty-state.esm.js +12 -12
- package/dist/nile-pagination/nile-pagination.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.css.cjs.js +1 -1
- package/dist/nile-pagination/nile-pagination.css.cjs.js.map +1 -1
- package/dist/nile-pagination/nile-pagination.css.esm.js +50 -33
- package/dist/nile-pagination/nile-pagination.esm.js +16 -18
- package/dist/src/nile-empty-state/nile-empty-state.js +10 -10
- package/dist/src/nile-empty-state/nile-empty-state.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.css.js +48 -31
- package/dist/src/nile-pagination/nile-pagination.css.js.map +1 -1
- package/dist/src/nile-pagination/nile-pagination.js +0 -2
- package/dist/src/nile-pagination/nile-pagination.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-empty-state/nile-empty-state.ts +10 -10
- package/src/nile-pagination/nile-pagination.css.ts +48 -31
- package/src/nile-pagination/nile-pagination.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-pagination.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-pagination.css';\nimport NileElement from '../internal/nile-element';\nimport {\n calculateTotalPages,\n getPaginationItems,\n getHiddenPages,\n getRangeText,\n} from './nile-pagination-utils';\n\n@customElement('nile-pagination')\nexport class NilePagination extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({attribute: 'totalitems',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;\n },\n },\n })totalItems: number = 0;\n\n @property({attribute: 'currentpage', reflect: true, converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;\n },\n },\n })currentPage: number = 1;\n\n @property({attribute: 'pagesize',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;\n },\n },\n })pageSize: number = 50;\n\n @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {\n try {\n const arr = JSON.parse(v);\n if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {\n return arr as number[];\n }\n } catch {}\n return [10, 25, 50, 100];\n }}})\n pageSizeOptions: number[] = [10, 25, 50, 100];\n\n @property({ type: String })variant: 'fluid' | 'compact' = 'fluid';\n @property({ type: Boolean }) disabled = false;\n @property({ type: Boolean }) showTitle = true;\n\n @state() private _pageSizeOpen = false;\n @state() private _pageOpen = false;\n @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;\n\n firstUpdated() {\n if (this._pageSizeDropdown) { \n this._pageSizeDropdown.addEventListener('nile-show', () => {\n this._pageSizeOpen = true;\n });\n this._pageSizeDropdown.addEventListener('nile-after-hide', () => {\n this._pageSizeOpen = false;\n });\n }\n }\n\n private get totalPages(): number {\n return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));\n }\n\n private goToPage(newPage: number) {\n \n if (this.disabled) return;\n const previousPage = this.currentPage;\n this.currentPage = newPage;\n this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });\n }\n\n private onPageSizeSelect(newSize: number) {\n if (this.disabled || this.pageSize === newSize) return;\n\n const previousPage = this.currentPage;\n this.pageSize = newSize;\n this.currentPage = 1;\n this.emit('nile-change', {\n page: 1,\n previousPage,\n pageSize: newSize\n });\n}\n\nprivate renderCompactRangeText(): TemplateResult {\n const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);\n const trimmed = full.replace(/^Showing\\s*/, ''); \n return html`<div class=\"range-text\">${trimmed}</div>`;\n}\n\n\n private renderRangeText(): TemplateResult {\n if (this.totalItems === 0) {\n return html`<div class=\"range-text\">Showing 0 of 0</div>`;\n }\n return html`\n <div part=\"range-text\" class=\"range-text\">\n ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}\n </div>\n `;\n }\n\n private renderPageSizeSelect(): TemplateResult | null {\n if (this.variant !== 'fluid') return null;\n return html`\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?disabled=${this.disabled}>\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"chevrondown\"\n size=\"14\"\n color=\"var(--nile-colors-dark-500)\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n `;\n }\n\n\n private renderCompactPageSize(): TemplateResult {\n return html`\n <nile-dropdown\n class=\"compact-dropdown\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageSizeOpen = true)}\n @nile-after-hide=${() => (this._pageSizeOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"chevrondown\"\n size=\"14\"\n color=\"var(--nile-colors-dark-500)\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n `;\n }\n \n\n private renderPrevButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === 1 || this.disabled}\n @click=${() => this.goToPage(this.currentPage - 1)}\n >\n <nile-icon name=\"arrowleft\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderNextButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === this.totalPages || this.disabled}\n @click=${() => this.goToPage(this.currentPage + 1)}\n >\n <nile-icon name=\"arrowright\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderPageItem(\n item: number | string,\n idx: number,\n items: (number | string)[]\n ): TemplateResult {\n if (item === '…') {\n return html`\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=${this.disabled}>\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=${this.disabled}>\n …\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ${getHiddenPages(\n this.totalPages,\n items,\n this.currentPage,\n idx < items.indexOf(this.currentPage) ? 'left' : 'right'\n ).map(\n page => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(page)}\n >\n ${page}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n `;\n }\n return html`\n <li>\n <nile-button\n variant=${item === this.currentPage ? 'primary' : 'ghost'}\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(item as number)}\n >\n ${item}\n </nile-button>\n </li>\n `;\n }\n\n private renderPageList(): TemplateResult {\n if (this.variant === 'compact') {\n return html`\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ${this.renderPrevButton()}\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageOpen = true)}\n @nile-after-hide=${() => (this._pageOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ${this._pageOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.currentPage}\n <nile-icon\n name=\"chevrondown\"\n size=\"14\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n p => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(p)}\n >\n ${p}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n const items = getPaginationItems(this.totalPages, this.currentPage);\n return html`\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ${this.renderPrevButton()}\n ${items.map((item, idx) => this.renderPageItem(item, idx, items))}\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n\n public render(): TemplateResult {\n return html`\n <div part=\"wrapper\" class=\"pagination-wrapper ${this.variant}\">\n <div part=\"pager-container\" class=\"pager-container\">\n ${this.variant === 'fluid' && this.showTitle\n ? this.renderRangeText()\n : this.variant === 'compact'\n ? this.renderCompactRangeText()\n : null}\n ${this.variant === 'fluid'\n ? this.renderPageSizeSelect()\n : this.renderCompactPageSize()}\n </div>\n ${this.renderPageList()}\n </div>\n `;\n}\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-pagination': NilePagination;\n }\n}\n"],"names":["NilePagination","p","constructor","this","totalItems","currentPage","pageSize","pageSizeOptions","variant","disabled","showTitle","_pageSizeOpen","_pageOpen","_this","_inherits","_l","_createClass","key","value","firstUpdated","_pageSizeDropdown","addEventListener","get","Math","max","calculateTotalPages","goToPage","newPage","previousPage","emit","page","onPageSizeSelect","newSize","renderCompactRangeText","trimmed","getRangeText","replace","html","_templateObject","_taggedTemplateLiteral","renderRangeText","_templateObject2","_templateObject3","renderPageSizeSelect","_this3","_templateObject4","map","size","_templateObject5","renderCompactPageSize","_this4","_templateObject6","_templateObject7","renderPrevButton","_this5","_templateObject8","renderNextButton","_this6","_templateObject9","totalPages","renderPageItem","item","idx","items","_templateObject10","getHiddenPages","indexOf","_templateObject11","_templateObject12","renderPageList","_this8","_templateObject13","Array","from","length","_","i","_templateObject14","getPaginationItems","_templateObject15","render","_templateObject16","__decorate","styles","NileElement","property","attribute","reflect","converter","fromAttribute","v","n","Number","isFinite","floor","prototype","arr","JSON","parse","isArray","every","x","_unused","type","String","Boolean","state","query","_export","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nile-pagination.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-pagination.css';\nimport NileElement from '../internal/nile-element';\nimport {\n calculateTotalPages,\n getPaginationItems,\n getHiddenPages,\n getRangeText,\n} from './nile-pagination-utils';\n\n@customElement('nile-pagination')\nexport class NilePagination extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({attribute: 'totalitems',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;\n },\n },\n })totalItems: number = 0;\n\n @property({attribute: 'currentpage', reflect: true, converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;\n },\n },\n })currentPage: number = 1;\n\n @property({attribute: 'pagesize',reflect: true,converter: {\n fromAttribute: (v: string) => {\n const n = Number(v);\n return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;\n },\n },\n })pageSize: number = 50;\n\n @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {\n try {\n const arr = JSON.parse(v);\n if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {\n return arr as number[];\n }\n } catch {}\n return [10, 25, 50, 100];\n }}})\n pageSizeOptions: number[] = [10, 25, 50, 100];\n\n @property({ type: String })variant: 'fluid' | 'compact' = 'fluid';\n @property({ type: Boolean }) disabled = false;\n @property({ type: Boolean }) showTitle = true;\n\n @state() private _pageSizeOpen = false;\n @state() private _pageOpen = false;\n @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;\n\n firstUpdated() {\n if (this._pageSizeDropdown) { \n this._pageSizeDropdown.addEventListener('nile-show', () => {\n this._pageSizeOpen = true;\n });\n this._pageSizeDropdown.addEventListener('nile-after-hide', () => {\n this._pageSizeOpen = false;\n });\n }\n }\n\n private get totalPages(): number {\n return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));\n }\n\n private goToPage(newPage: number) {\n \n if (this.disabled) return;\n const previousPage = this.currentPage;\n this.currentPage = newPage;\n this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });\n }\n\n private onPageSizeSelect(newSize: number) {\n if (this.disabled || this.pageSize === newSize) return;\n\n const previousPage = this.currentPage;\n this.pageSize = newSize;\n this.currentPage = 1;\n this.emit('nile-change', {\n page: 1,\n previousPage,\n pageSize: newSize\n });\n}\n\nprivate renderCompactRangeText(): TemplateResult {\n const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);\n const trimmed = full.replace(/^Showing\\s*/, ''); \n return html`<div class=\"range-text\">${trimmed}</div>`;\n}\n\n\n private renderRangeText(): TemplateResult {\n if (this.totalItems === 0) {\n return html`<div class=\"range-text\">Showing 0 of 0</div>`;\n }\n return html`\n <div part=\"range-text\" class=\"range-text\">\n ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}\n </div>\n `;\n }\n\n private renderPageSizeSelect(): TemplateResult | null {\n if (this.variant !== 'fluid') return null;\n return html`\n <div class=\"page-size-select\">\n <nile-dropdown class=\"page-size-dropdown\" ?disabled=${this.disabled}>\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"chevrondown\"\n size=\"14\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"down-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n </div>\n `;\n }\n\n\n private renderCompactPageSize(): TemplateResult {\n return html`\n <nile-dropdown\n class=\"compact-dropdown\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageSizeOpen = true)}\n @nile-after-hide=${() => (this._pageSizeOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.pageSize}\n <nile-icon\n name=\"chevrondown\"\n size=\"14\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper\">\n ${this.pageSizeOptions.map(\n size => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.onPageSizeSelect(size)}\n >\n ${size}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n `;\n }\n \n\n private renderPrevButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === 1 || this.disabled}\n @click=${() => this.goToPage(this.currentPage - 1)}\n >\n <nile-icon name=\"arrowleft\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderNextButton(): TemplateResult {\n return html`\n <li>\n <nile-button\n variant=\"tertiary\"\n ?disabled=${this.currentPage === this.totalPages || this.disabled}\n @click=${() => this.goToPage(this.currentPage + 1)}\n >\n <nile-icon name=\"arrowright\" size=\"14\"></nile-icon>\n </nile-button>\n </li>\n `;\n }\n\n private renderPageItem(\n item: number | string,\n idx: number,\n items: (number | string)[]\n ): TemplateResult {\n if (item === '…') {\n return html`\n <li>\n <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=${this.disabled}>\n <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=${this.disabled}>\n …\n </nile-button>\n <nile-menu>\n <div class=\"ellipsis-scroll-wrapper\">\n ${getHiddenPages(\n this.totalPages,\n items,\n this.currentPage,\n idx < items.indexOf(this.currentPage) ? 'left' : 'right'\n ).map(\n page => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(page)}\n >\n ${page}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n `;\n }\n return html`\n <li>\n <nile-button\n variant=${item === this.currentPage ? 'primary' : 'ghost'}\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(item as number)}\n >\n ${item}\n </nile-button>\n </li>\n `;\n }\n\n private renderPageList(): TemplateResult {\n if (this.variant === 'compact') {\n return html`\n <nav aria-label=\"Pagination\">\n <ul class=\"pagination compact-pagination\">\n ${this.renderPrevButton()}\n <li>\n <nile-dropdown\n class=\"compact-dropdown1\"\n ?disabled=${this.disabled}\n @nile-show=${() => (this._pageOpen = true)}\n @nile-after-hide=${() => (this._pageOpen = false)}\n >\n <nile-button\n slot=\"trigger\"\n variant=\"tertiary\"\n class=\"current-page-btn ${this._pageOpen ? 'open' : ''}\"\n ?disabled=${this.disabled}\n >\n ${this.currentPage}\n <nile-icon\n name=\"chevrondown\"\n size=\"14\"\n class=\"chevron\"\n ></nile-icon>\n </nile-button>\n <nile-menu>\n <div class=\"compact-scroll-wrapper1\">\n ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n p => html`\n <nile-menu-item\n ?disabled=${this.disabled}\n @click=${() => this.goToPage(p)}\n >\n ${p}\n </nile-menu-item>\n `\n )}\n </div>\n </nile-menu>\n </nile-dropdown>\n </li>\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n const items = getPaginationItems(this.totalPages, this.currentPage);\n return html`\n <nav aria-label=\"Pagination\">\n <ul part=\"page-list\" class=\"pagination\">\n ${this.renderPrevButton()}\n ${items.map((item, idx) => this.renderPageItem(item, idx, items))}\n ${this.renderNextButton()}\n </ul>\n </nav>\n `;\n }\n\n public render(): TemplateResult {\n return html`\n <div part=\"wrapper\" class=\"pagination-wrapper ${this.variant}\">\n <div part=\"pager-container\" class=\"pager-container\">\n ${this.variant === 'fluid' && this.showTitle\n ? this.renderRangeText()\n : this.variant === 'compact'\n ? this.renderCompactRangeText()\n : null}\n ${this.variant === 'fluid'\n ? this.renderPageSizeSelect()\n : this.renderCompactPageSize()}\n </div>\n ${this.renderPageList()}\n </div>\n `;\n}\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-pagination': NilePagination;\n }\n}\n"],"names":["NilePagination","p","constructor","this","totalItems","currentPage","pageSize","pageSizeOptions","variant","disabled","showTitle","_pageSizeOpen","_pageOpen","_this","_inherits","_l","_createClass","key","value","firstUpdated","_pageSizeDropdown","addEventListener","get","Math","max","calculateTotalPages","goToPage","newPage","previousPage","emit","page","onPageSizeSelect","newSize","renderCompactRangeText","trimmed","getRangeText","replace","html","_templateObject","_taggedTemplateLiteral","renderRangeText","_templateObject2","_templateObject3","renderPageSizeSelect","_this3","_templateObject4","map","size","_templateObject5","renderCompactPageSize","_this4","_templateObject6","_templateObject7","renderPrevButton","_this5","_templateObject8","renderNextButton","_this6","_templateObject9","totalPages","renderPageItem","item","idx","items","_templateObject10","getHiddenPages","indexOf","_templateObject11","_templateObject12","renderPageList","_this8","_templateObject13","Array","from","length","_","i","_templateObject14","getPaginationItems","_templateObject15","render","_templateObject16","__decorate","styles","NileElement","property","attribute","reflect","converter","fromAttribute","v","n","Number","isFinite","floor","prototype","arr","JSON","parse","isArray","every","x","_unused","type","String","Boolean","state","query","_export","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",a=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n }\n\n .pagination-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n \n .pagination-wrapper.v2 .pager-container {\n flex-direction: row;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); \n }\n\n .pagination-wrapper.v2 .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n \n .pagination-wrapper.compact {\n min-width: 324px;\n justify-content: space-between;\n }\n\n\n\n.pagination-wrapper.compact .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .pagination-wrapper.compact .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0 6px;\n }\n\n .pagination-wrapper.compact .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n\n .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n display: none;\n }\n\n .compact-pagination {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .page-dropdown .current-page-btn {\n padding: 2px;\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n }\n\n nile-button.current-page-btn::part(base){\n min-width: 51px;\n }\n\n nile-button.current-page-btn::part(base):active {\n min-width: 51px;\n}\n\n .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;\n}\n\n .range-text {\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );\n white-space: nowrap;\n }\n\n .page-size-select {\n display: inline-flex;\n align-items: center;\n }\n\n ul.pagination {\n display: flex;\n list-style: none;\n padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));\n }\n\n ul.pagination li {\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n }\n\n .ellipsis-scroll-wrapper {\n max-height: 194px;\n overflow-y: auto;\n width: 66px;\n }\n .down-scroll-wrapper {\n max-height: 150px;\n overflow-y: auto;\n width: 60px;\n }\n\n\n .compact-scroll-wrapper {\n max-height: 160px;\n overflow-y: auto;\n width: 60px;\n }\n .compact-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .page-size-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .compact-scroll-wrapper1 {\n max-height: 164px;\n overflow-y: auto;\n width: 60px;\n }\n\n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n\n .ellipsis-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .page-size-menu {\n max-height: 144px;\n overflow-y: auto;\n }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .page-size-label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); \n }\n\n nile-button::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n }\n \n nile-button.down::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n nile-button.down::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n\n nile-button.current-page-btn::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); \n }\n\n nile-button.current-page-btn::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n \n nile-button::part(base):active {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n border: none;\n }\n\n nile-button.down::part(base) {\n min-width: 62px;\n }\n\n nile-button.compactbtn:part(base){\n background-color: red;\n }\n .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n \n .pagination-wrapper.compact .compact-dropdown .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n transform: rotate(180deg);\n }\n\n\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-pagination.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-pagination.css.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Pagination CSS\n */\nexport const styles = css`\n :host {\n }\n\n .pagination-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;\n }\n\n \n .pagination-wrapper.v2 .pager-container {\n flex-direction: row;\n align-items: center;\n gap: var(--nile-spacing-spacing-md);\n margin-right: var(--nile-spacing-spacing-xl)
|
|
1
|
+
{"version":3,"file":"nile-pagination.css.cjs.js","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Pagination CSS\n */\nexport const styles = css`\n :host {\n }\n\n .pagination-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n \n .pagination-wrapper.v2 .pager-container {\n flex-direction: row;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)); \n }\n\n .pagination-wrapper.v2 .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n \n .pagination-wrapper.compact {\n min-width: 324px;\n justify-content: space-between;\n }\n\n\n\n.pagination-wrapper.compact .range-text {\n margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .pagination-wrapper.compact .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n }\n\n .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0 6px;\n }\n\n .pagination-wrapper.compact .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n\n .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n display: none;\n }\n\n .compact-pagination {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .page-dropdown .current-page-btn {\n padding: 2px;\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n }\n\n nile-button.current-page-btn::part(base){\n min-width: 51px;\n }\n\n nile-button.current-page-btn::part(base):active {\n min-width: 51px;\n}\n\n .pager-container {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n.pagination-wrapper.compact .pager-container {\n gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;\n}\n\n .range-text {\n font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );\n white-space: nowrap;\n }\n\n .page-size-select {\n display: inline-flex;\n align-items: center;\n }\n\n ul.pagination {\n display: flex;\n list-style: none;\n padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));\n }\n\n ul.pagination li {\n margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n }\n\n .ellipsis-scroll-wrapper {\n max-height: 194px;\n overflow-y: auto;\n width: 66px;\n }\n .down-scroll-wrapper {\n max-height: 150px;\n overflow-y: auto;\n width: 60px;\n }\n\n\n .compact-scroll-wrapper {\n max-height: 160px;\n overflow-y: auto;\n width: 60px;\n }\n .compact-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .page-size-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .compact-scroll-wrapper1 {\n max-height: 164px;\n overflow-y: auto;\n width: 60px;\n }\n\n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n \n .compact-dropdown1 nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n\n .ellipsis-dropdown nile-menu {\n overflow-y: auto;\n padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .page-size-menu {\n max-height: 144px;\n overflow-y: auto;\n }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n}\n\n\n .page-size-label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));\n margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n font-feature-settings: 'liga' off, 'clig' off;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular)); \n }\n\n nile-button::part(base) {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n }\n \n nile-button.down::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n nile-button.down::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n\n\n nile-button.current-page-btn::part(base) {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary)); \n }\n\n nile-button.current-page-btn::part(base):active {\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n }\n \n nile-button::part(base):active {\n min-width: 32px;\n height: 32px;\n padding: 0px 6px;\n box-shadow: none;\n border: none;\n }\n\n nile-button.down::part(base) {\n min-width: 62px;\n }\n\n nile-button.compactbtn:part(base){\n background-color: red;\n }\n .page-size-dropdown .chevron {\n transition: transform 0.2s;\n }\n .page-size-dropdown .open .chevron {\n transform: rotate(180deg);\n }\n \n .pagination-wrapper.compact .compact-dropdown .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .chevron {\n transition: transform 0.2s;\n }\n .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n transform: rotate(180deg);\n }\n\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as n}from"lit";const a=n`
|
|
2
2
|
:host {
|
|
3
3
|
}
|
|
4
4
|
|
|
@@ -6,23 +6,23 @@ import{css as a}from"lit";const n=a`
|
|
|
6
6
|
display: flex;
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: space-between;
|
|
9
|
-
padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
|
|
9
|
+
padding: var(--nile-spacing-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) ;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
.pagination-wrapper.v2 .pager-container {
|
|
14
14
|
flex-direction: row;
|
|
15
15
|
align-items: center;
|
|
16
|
-
gap: var(--nile-spacing-spacing-md);
|
|
17
|
-
margin-right: var(--nile-spacing-spacing-xl);
|
|
16
|
+
gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
17
|
+
margin-right: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.pagination-wrapper.v2 .range-text {
|
|
21
|
-
margin-right: var(--nile-spacing-spacing-md);
|
|
22
|
-
font-size: var(--nile-font-size-small);
|
|
23
|
-
color: var(--nile-colors-dark-900);
|
|
21
|
+
margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
22
|
+
font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
|
|
23
|
+
color: var(--nile-colors-dark-900, var( --ng-colors-text-primary-900));
|
|
24
24
|
font-feature-settings: 'liga' off, 'clig' off;
|
|
25
|
-
font-weight: var(--nile-font-weight-regular);
|
|
25
|
+
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
|
|
@@ -34,20 +34,20 @@ import{css as a}from"lit";const n=a`
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
.pagination-wrapper.compact .range-text {
|
|
37
|
-
margin-right: var(--nile-spacing-spacing-md);
|
|
37
|
+
margin-right: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
38
38
|
white-space: nowrap;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
.pagination-wrapper.compact .pager-container {
|
|
43
|
-
gap: var(--nile-spacing-spacing-md);
|
|
43
|
+
gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
.pagination-wrapper.compact .pager-container {
|
|
48
48
|
display: flex;
|
|
49
49
|
align-items: center;
|
|
50
|
-
gap: var(--nile-spacing-spacing-md);
|
|
50
|
+
gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.pagination-wrapper.compact .page-size-dropdown ::part(base) {
|
|
@@ -70,14 +70,14 @@ import{css as a}from"lit";const n=a`
|
|
|
70
70
|
.compact-pagination {
|
|
71
71
|
display: flex;
|
|
72
72
|
align-items: center;
|
|
73
|
-
gap: var(--nile-spacing-spacing-xs);
|
|
73
|
+
gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
|
|
74
74
|
list-style: none;
|
|
75
75
|
margin: 0;
|
|
76
76
|
padding: 0;
|
|
77
77
|
}
|
|
78
78
|
.page-dropdown .current-page-btn {
|
|
79
79
|
padding: 2px;
|
|
80
|
-
font-size: var(--nile-font-size-small);
|
|
80
|
+
font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
nile-button.current-page-btn::part(base){
|
|
@@ -91,16 +91,16 @@ import{css as a}from"lit";const n=a`
|
|
|
91
91
|
.pager-container {
|
|
92
92
|
display: flex;
|
|
93
93
|
align-items: center;
|
|
94
|
-
gap: var(--nile-spacing-spacing-3xl);
|
|
94
|
+
gap: var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.pagination-wrapper.compact .pager-container {
|
|
98
|
-
gap: var(--nile-spacing-xxs) !important;
|
|
98
|
+
gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) !important;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
.range-text {
|
|
102
|
-
font-size: var(--nile-font-size-small);
|
|
103
|
-
color: var(--nile-colors-dark-900);
|
|
102
|
+
font-size: var(--nile-font-size-small, var(--ng-font-weight-regular));
|
|
103
|
+
color: var(--nile-colors-dark-900,var( --ng-colors-text-primary-900) );
|
|
104
104
|
white-space: nowrap;
|
|
105
105
|
}
|
|
106
106
|
|
|
@@ -112,13 +112,13 @@ import{css as a}from"lit";const n=a`
|
|
|
112
112
|
ul.pagination {
|
|
113
113
|
display: flex;
|
|
114
114
|
list-style: none;
|
|
115
|
-
padding: var(--nile-spacing-spacing-none);
|
|
116
|
-
margin: var(--nile-spacing-spacing-none);
|
|
117
|
-
gap: var(--nile-radius-radius-xxs);
|
|
115
|
+
padding: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
116
|
+
margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
117
|
+
gap: var(--nile-radius-radius-xxs, var(--ng-radius-xxs));
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
ul.pagination li {
|
|
121
|
-
margin: var(--nile-spacing-spacing-none);
|
|
121
|
+
margin: var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
.ellipsis-scroll-wrapper {
|
|
@@ -140,13 +140,13 @@ import{css as a}from"lit";const n=a`
|
|
|
140
140
|
}
|
|
141
141
|
.compact-dropdown nile-menu {
|
|
142
142
|
overflow-y: auto;
|
|
143
|
-
padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
|
|
143
|
+
padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
144
144
|
box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
.page-size-dropdown nile-menu {
|
|
148
148
|
overflow-y: auto;
|
|
149
|
-
padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
|
|
149
|
+
padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
150
150
|
box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
|
|
151
151
|
}
|
|
152
152
|
|
|
@@ -158,20 +158,20 @@ import{css as a}from"lit";const n=a`
|
|
|
158
158
|
|
|
159
159
|
.compact-dropdown1 nile-menu {
|
|
160
160
|
overflow-y: auto;
|
|
161
|
-
padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
|
|
161
|
+
padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
162
162
|
box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
.compact-dropdown1 nile-menu {
|
|
166
166
|
overflow-y: auto;
|
|
167
|
-
padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
|
|
167
|
+
padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
168
168
|
box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
.ellipsis-dropdown nile-menu {
|
|
173
173
|
overflow-y: auto;
|
|
174
|
-
padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
|
|
174
|
+
padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-none, var(--ng-spacing-none));
|
|
175
175
|
box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
|
|
176
176
|
}
|
|
177
177
|
|
|
@@ -181,19 +181,19 @@ import{css as a}from"lit";const n=a`
|
|
|
181
181
|
}
|
|
182
182
|
|
|
183
183
|
.pagination-wrapper.fluid ul.pagination li:first-child {
|
|
184
|
-
margin-right: var(--nile-spacing-spacing-xs);
|
|
184
|
+
margin-right: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
|
|
185
185
|
}
|
|
186
186
|
.pagination-wrapper.fluid ul.pagination li:last-child {
|
|
187
|
-
margin-left: var(--nile-spacing-spacing-md);
|
|
187
|
+
margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
|
|
191
191
|
.page-size-label {
|
|
192
|
-
font-size: var(--nile-type-scale-3);
|
|
193
|
-
color: var(--nile-colors-dark-500);
|
|
194
|
-
margin-left: var(--nile-spacing-spacing-md);
|
|
192
|
+
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
|
|
193
|
+
color: var(--nile-colors-dark-500, var(--ng-colors-text-primary-500));
|
|
194
|
+
margin-left: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
|
|
195
195
|
font-feature-settings: 'liga' off, 'clig' off;
|
|
196
|
-
font-weight: var(--nile-font-weight-regular);
|
|
196
|
+
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
nile-button::part(base) {
|
|
@@ -202,7 +202,24 @@ import{css as a}from"lit";const n=a`
|
|
|
202
202
|
padding: 0px 6px;
|
|
203
203
|
box-shadow: none;
|
|
204
204
|
}
|
|
205
|
+
|
|
206
|
+
nile-button.down::part(base) {
|
|
207
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
nile-button.down::part(base):active {
|
|
211
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
212
|
+
}
|
|
213
|
+
|
|
205
214
|
|
|
215
|
+
nile-button.current-page-btn::part(base) {
|
|
216
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
nile-button.current-page-btn::part(base):active {
|
|
220
|
+
border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
221
|
+
}
|
|
222
|
+
|
|
206
223
|
nile-button::part(base):active {
|
|
207
224
|
min-width: 32px;
|
|
208
225
|
height: 32px;
|
|
@@ -235,4 +252,4 @@ import{css as a}from"lit";const n=a`
|
|
|
235
252
|
}
|
|
236
253
|
|
|
237
254
|
|
|
238
|
-
`;export{
|
|
255
|
+
`;export{a as s};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{__decorate as i}from"tslib";import{html as
|
|
1
|
+
import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as e,state as n,query as s,customElement as r}from"lit/decorators.js";import{s as a}from"./nile-pagination.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{c as o,g as h,a as d,b as c}from"./nile-pagination-utils.esm.js";let p=class extends l{constructor(){super(...arguments),this.totalItems=0,this.currentPage=1,this.pageSize=50,this.pageSizeOptions=[10,25,50,100],this.variant="fluid",this.disabled=!1,this.showTitle=!0,this._pageSizeOpen=!1,this._pageOpen=!1}static get styles(){return[a]}firstUpdated(){this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",(()=>{this._pageSizeOpen=!0})),this._pageSizeDropdown.addEventListener("nile-after-hide",(()=>{this._pageSizeOpen=!1})))}get totalPages(){return Math.max(1,o(this.totalItems,this.pageSize))}goToPage(i){if(this.disabled)return;const t=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:t,pageSize:this.pageSize})}onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;const t=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:t,pageSize:i})}renderCompactRangeText(){const i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return t`<div class="range-text">${i}</div>`}renderRangeText(){return 0===this.totalItems?t`<div class="range-text">Showing 0 of 0</div>`:t`
|
|
2
2
|
<div part="range-text" class="range-text">
|
|
3
3
|
${h(this.totalItems,this.pageSize,this.currentPage)}
|
|
4
4
|
</div>
|
|
5
|
-
`}renderPageSizeSelect(){return"fluid"!==this.variant?null:
|
|
5
|
+
`}renderPageSizeSelect(){return"fluid"!==this.variant?null:t`
|
|
6
6
|
<div class="page-size-select">
|
|
7
7
|
<nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
|
|
8
8
|
<nile-button
|
|
@@ -15,13 +15,12 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
15
15
|
<nile-icon
|
|
16
16
|
name="chevrondown"
|
|
17
17
|
size="14"
|
|
18
|
-
color="var(--nile-colors-dark-500)"
|
|
19
18
|
class="chevron"
|
|
20
19
|
></nile-icon>
|
|
21
20
|
</nile-button>
|
|
22
21
|
<nile-menu>
|
|
23
22
|
<div class="down-scroll-wrapper">
|
|
24
|
-
${this.pageSizeOptions.map((i=>
|
|
23
|
+
${this.pageSizeOptions.map((i=>t`
|
|
25
24
|
<nile-menu-item
|
|
26
25
|
?disabled=${this.disabled}
|
|
27
26
|
@click=${()=>this.onPageSizeSelect(i)}
|
|
@@ -34,7 +33,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
34
33
|
</nile-dropdown>
|
|
35
34
|
<span part="pagesize-label" class="page-size-label">Items per page</span>
|
|
36
35
|
</div>
|
|
37
|
-
`}renderCompactPageSize(){return
|
|
36
|
+
`}renderCompactPageSize(){return t`
|
|
38
37
|
<nile-dropdown
|
|
39
38
|
class="compact-dropdown"
|
|
40
39
|
?disabled=${this.disabled}
|
|
@@ -51,13 +50,12 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
51
50
|
<nile-icon
|
|
52
51
|
name="chevrondown"
|
|
53
52
|
size="14"
|
|
54
|
-
color="var(--nile-colors-dark-500)"
|
|
55
53
|
class="chevron"
|
|
56
54
|
></nile-icon>
|
|
57
55
|
</nile-button>
|
|
58
56
|
<nile-menu>
|
|
59
57
|
<div class="compact-scroll-wrapper">
|
|
60
|
-
${this.pageSizeOptions.map((i=>
|
|
58
|
+
${this.pageSizeOptions.map((i=>t`
|
|
61
59
|
<nile-menu-item
|
|
62
60
|
?disabled=${this.disabled}
|
|
63
61
|
@click=${()=>this.onPageSizeSelect(i)}
|
|
@@ -68,7 +66,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
68
66
|
</div>
|
|
69
67
|
</nile-menu>
|
|
70
68
|
</nile-dropdown>
|
|
71
|
-
`}renderPrevButton(){return
|
|
69
|
+
`}renderPrevButton(){return t`
|
|
72
70
|
<li>
|
|
73
71
|
<nile-button
|
|
74
72
|
variant="tertiary"
|
|
@@ -78,7 +76,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
78
76
|
<nile-icon name="arrowleft" size="14"></nile-icon>
|
|
79
77
|
</nile-button>
|
|
80
78
|
</li>
|
|
81
|
-
`}renderNextButton(){return
|
|
79
|
+
`}renderNextButton(){return t`
|
|
82
80
|
<li>
|
|
83
81
|
<nile-button
|
|
84
82
|
variant="tertiary"
|
|
@@ -88,7 +86,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
88
86
|
<nile-icon name="arrowright" size="14"></nile-icon>
|
|
89
87
|
</nile-button>
|
|
90
88
|
</li>
|
|
91
|
-
`}renderPageItem(i,
|
|
89
|
+
`}renderPageItem(i,e,n){return"…"===i?t`
|
|
92
90
|
<li>
|
|
93
91
|
<nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
|
|
94
92
|
<nile-button slot="trigger" variant="ghost" ?disabled=${this.disabled}>
|
|
@@ -96,7 +94,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
96
94
|
</nile-button>
|
|
97
95
|
<nile-menu>
|
|
98
96
|
<div class="ellipsis-scroll-wrapper">
|
|
99
|
-
${d(this.totalPages,n,this.currentPage,
|
|
97
|
+
${d(this.totalPages,n,this.currentPage,e<n.indexOf(this.currentPage)?"left":"right").map((i=>t`
|
|
100
98
|
<nile-menu-item
|
|
101
99
|
?disabled=${this.disabled}
|
|
102
100
|
@click=${()=>this.goToPage(i)}
|
|
@@ -108,7 +106,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
108
106
|
</nile-menu>
|
|
109
107
|
</nile-dropdown>
|
|
110
108
|
</li>
|
|
111
|
-
`:
|
|
109
|
+
`:t`
|
|
112
110
|
<li>
|
|
113
111
|
<nile-button
|
|
114
112
|
variant=${i===this.currentPage?"primary":"ghost"}
|
|
@@ -118,7 +116,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
118
116
|
${i}
|
|
119
117
|
</nile-button>
|
|
120
118
|
</li>
|
|
121
|
-
`}renderPageList(){if("compact"===this.variant)return
|
|
119
|
+
`}renderPageList(){if("compact"===this.variant)return t`
|
|
122
120
|
<nav aria-label="Pagination">
|
|
123
121
|
<ul class="pagination compact-pagination">
|
|
124
122
|
${this.renderPrevButton()}
|
|
@@ -144,7 +142,7 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
144
142
|
</nile-button>
|
|
145
143
|
<nile-menu>
|
|
146
144
|
<div class="compact-scroll-wrapper1">
|
|
147
|
-
${Array.from({length:this.totalPages},((i,
|
|
145
|
+
${Array.from({length:this.totalPages},((i,t)=>t+1)).map((i=>t`
|
|
148
146
|
<nile-menu-item
|
|
149
147
|
?disabled=${this.disabled}
|
|
150
148
|
@click=${()=>this.goToPage(i)}
|
|
@@ -159,15 +157,15 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
159
157
|
${this.renderNextButton()}
|
|
160
158
|
</ul>
|
|
161
159
|
</nav>
|
|
162
|
-
`;const i=c(this.totalPages,this.currentPage);return
|
|
160
|
+
`;const i=c(this.totalPages,this.currentPage);return t`
|
|
163
161
|
<nav aria-label="Pagination">
|
|
164
162
|
<ul part="page-list" class="pagination">
|
|
165
163
|
${this.renderPrevButton()}
|
|
166
|
-
${i.map(((e
|
|
164
|
+
${i.map(((t,e)=>this.renderPageItem(t,e,i)))}
|
|
167
165
|
${this.renderNextButton()}
|
|
168
166
|
</ul>
|
|
169
167
|
</nav>
|
|
170
|
-
`}render(){return
|
|
168
|
+
`}render(){return t`
|
|
171
169
|
<div part="wrapper" class="pagination-wrapper ${this.variant}">
|
|
172
170
|
<div part="pager-container" class="pager-container">
|
|
173
171
|
${"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null}
|
|
@@ -175,4 +173,4 @@ import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as
|
|
|
175
173
|
</div>
|
|
176
174
|
${this.renderPageList()}
|
|
177
175
|
</div>
|
|
178
|
-
`}};i([
|
|
176
|
+
`}};i([e({attribute:"totalitems",reflect:!0,converter:{fromAttribute:i=>{const t=Number(i);return Number.isFinite(t)&&t>=0?Math.floor(t):0}}})],p.prototype,"totalItems",void 0),i([e({attribute:"currentpage",reflect:!0,converter:{fromAttribute:i=>{const t=Number(i);return Number.isFinite(t)&&t>=1?Math.floor(t):1}}})],p.prototype,"currentPage",void 0),i([e({attribute:"pagesize",reflect:!0,converter:{fromAttribute:i=>{const t=Number(i);return Number.isFinite(t)&&t>=1?Math.floor(t):50}}})],p.prototype,"pageSize",void 0),i([e({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:i=>{try{const t=JSON.parse(i);if(Array.isArray(t)&&t.every((i=>"number"==typeof i)))return t}catch{}return[10,25,50,100]}}})],p.prototype,"pageSizeOptions",void 0),i([e({type:String})],p.prototype,"variant",void 0),i([e({type:Boolean})],p.prototype,"disabled",void 0),i([e({type:Boolean})],p.prototype,"showTitle",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),p=i([r("nile-pagination")],p);export{p as N};
|
|
@@ -44,18 +44,18 @@ let NileEmptyState = class NileEmptyState extends NileElement {
|
|
|
44
44
|
*/
|
|
45
45
|
render() {
|
|
46
46
|
return html `
|
|
47
|
-
<div class="${classMap({
|
|
47
|
+
<div part="container" class="${classMap({
|
|
48
48
|
'empty-state': true,
|
|
49
49
|
'empty-state--sm': this.size == 'sm',
|
|
50
50
|
'empty-state--md': this.size == 'md',
|
|
51
51
|
'empty-state--lg': this.size == 'lg'
|
|
52
52
|
})}">
|
|
53
|
-
<div class="${classMap({ 'empty-state__body': true })}">
|
|
53
|
+
<div part="body" class="${classMap({ 'empty-state__body': true })}">
|
|
54
54
|
|
|
55
55
|
${this.variant == 'content' ? html `
|
|
56
|
-
<div class="empty-state__body--content">
|
|
56
|
+
<div part="content-image" class="empty-state__body--content">
|
|
57
57
|
${!this.icon && !this.svgIconUrl ? nothing : html `
|
|
58
|
-
<div class="empty-state__img__icon">
|
|
58
|
+
<div part="icon-wrapper" class="empty-state__img__icon">
|
|
59
59
|
${this.svgIconUrl ? html `
|
|
60
60
|
<nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
|
|
61
61
|
<!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
|
|
@@ -66,7 +66,7 @@ let NileEmptyState = class NileEmptyState extends NileElement {
|
|
|
66
66
|
</div>` : nothing}
|
|
67
67
|
|
|
68
68
|
${this.variant == 'tonal' ? html `
|
|
69
|
-
<div class="empty-state__body--tonal">
|
|
69
|
+
<div part="tonal-body" class="empty-state__body--tonal">
|
|
70
70
|
${this.svgIconUrl ? html `
|
|
71
71
|
<nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
|
|
72
72
|
` : html `
|
|
@@ -75,7 +75,7 @@ let NileEmptyState = class NileEmptyState extends NileElement {
|
|
|
75
75
|
</div>` : nothing}
|
|
76
76
|
|
|
77
77
|
${this.variant == 'flat' ? html `
|
|
78
|
-
<div class="empty-state__body--flat">
|
|
78
|
+
<div part="flat-body" class="empty-state__body--flat">
|
|
79
79
|
<span class="nile-flat-type-icon">
|
|
80
80
|
${this.svgIconUrl ? html `
|
|
81
81
|
<nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
|
|
@@ -85,13 +85,13 @@ let NileEmptyState = class NileEmptyState extends NileElement {
|
|
|
85
85
|
</span>
|
|
86
86
|
</div>` : nothing}
|
|
87
87
|
|
|
88
|
-
<div class="empty__state__text-section">
|
|
89
|
-
<div class="empty-state__text">${this.text}</div>
|
|
90
|
-
<div class="empty-state__subtext">${this.subText}</div>
|
|
88
|
+
<div part="text-section" class="empty__state__text-section">
|
|
89
|
+
<div part="text" class="empty-state__text">${this.text}</div>
|
|
90
|
+
<div part="subtitle" class="empty-state__subtext">${this.subText}</div>
|
|
91
91
|
</div>
|
|
92
92
|
</div>
|
|
93
93
|
|
|
94
|
-
<div class="empty-state-actions">
|
|
94
|
+
<div part="actions" class="empty-state-actions">
|
|
95
95
|
<slot></slot>
|
|
96
96
|
</div>
|
|
97
97
|
</div>
|