@trendyol/baklava 2.0.0-beta.35 → 2.0.0-beta.36
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/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
1
3
|
# Baklava Design System
|
|
2
4
|
|
|
3
5
|
[](https://www.npmjs.com/package/@trendyol/baklava) [](https://www.jsdelivr.com/package/npm/@trendyol/baklava) [](https://github.com/semantic-release/semantic-release)
|
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as c}from"./chunk-
|
|
1
|
+
import{a as c}from"./chunk-BUIS2EQI.js";import{a as l}from"./chunk-YZQVPLSP.js";import{a as d}from"./chunk-OJVJFWT3.js";import{a as n}from"./chunk-GBFJ2WUI.js";import{a as m}from"./chunk-KWTSWXUL.js";import{a as s}from"./chunk-C5HFLPOK.js";import{a as p}from"./chunk-IDG5M2QP.js";import{a as f}from"./chunk-EX6STMCI.js";import{a as u}from"./chunk-6WS7INIM.js";import"./chunk-VNGNBBSS.js";import{a as B}from"./chunk-SI4AOUS5.js";import{a as r}from"./chunk-54XXQVFL.js";import{a}from"./chunk-KMWDOTWV.js";import"./chunk-2TVOKUHE.js";import"./chunk-ENFFFE4I.js";import{a as x}from"./chunk-N6FF6F3Y.js";import"./chunk-KQBKSEYJ.js";import{a as t,b as o,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,a as BlButton,x as BlCheckbox,e as BlIcon,l as BlInput,c as BlPagination,d as BlProgressIndicator,n as BlSelect,m as BlSelectOption,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,o as getIconPath,t as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as h}from"./chunk-23UFIOHV.js";import{a as p,b as a,f as u,g,h as s,i as c}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=p`:host{width:max-content}.pagination{display:flex}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\B7 \\B7 \\B7';color:var(--bl-color-secondary)}.pagination-helpers{display:flex;align-items:center;margin-right:var(--bl-size-s);gap:var(--bl-size-m)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}`,o=m;var b=[{text:"100",value:100},{text:"250",value:250},{text:"500",value:500},{text:"1000",value:1e3}],t=class extends u{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=100;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.optionText="Items";this.pages=[]}static get styles(){return[o]}updated(e){(e.has("currentPage")||e.has("itemsPerPage"))&&(this._paginate(),this.onChange({selectedPage:this.currentPage,prevPage:e.get("currentPage")}))}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(i,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){this.currentPage=e}_pageBack(){this.currentPage!==1&&this.currentPage--}_pageForward(){this.currentPage!==this._getLastPage()&&this.currentPage++}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){let i=+e.target.value,l=i>0?Math.min(this._getLastPage(),i):1;this._changePage(l)}_selectHandler(e){var i;this.itemsPerPage=((i=e==null?void 0:e.detail[0])==null?void 0:i.value)||100,this.currentPage=1}renderSinglePage(e){return typeof e=="string"?a`<span class="dots"></span>`:a` <li>
|
|
1
|
+
import{a as h}from"./chunk-23UFIOHV.js";import{a as p,b as a,f as u,g,h as s,i as c}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=p`:host{width:max-content}.pagination{display:flex}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\B7 \\B7 \\B7';color:var(--bl-color-secondary)}.pagination-helpers{display:flex;align-items:center;margin-right:var(--bl-size-s);gap:var(--bl-size-m)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}`,o=m;var b=[{text:"100",value:100},{text:"250",value:250},{text:"500",value:500},{text:"1000",value:1e3}],t=class extends u{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=100;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.optionText="Items";this.pages=[]}static get styles(){return[o]}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&(this._paginate(),this.onChange({selectedPage:this.currentPage,prevPage:e.get("currentPage")}))}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(i,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){this.currentPage=e}_pageBack(){this.currentPage!==1&&this.currentPage--}_pageForward(){this.currentPage!==this._getLastPage()&&this.currentPage++}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){let i=+e.target.value,l=i>0?Math.min(this._getLastPage(),i):1;this._changePage(l)}_selectHandler(e){var i;this.itemsPerPage=((i=e==null?void 0:e.detail[0])==null?void 0:i.value)||100,this.currentPage=1}renderSinglePage(e){return typeof e=="string"?a`<span class="dots"></span>`:a` <li>
|
|
2
2
|
<bl-button
|
|
3
3
|
@click="${()=>this._changePage(e)}"
|
|
4
4
|
variant=${this.currentPage===e?"primary":"tertiary"}
|
|
@@ -45,4 +45,4 @@ import{a as h}from"./chunk-23UFIOHV.js";import{a as p,b as a,f as u,g,h as s,i a
|
|
|
45
45
|
</div>`:null;return a` <div class="pagination">${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return a`
|
|
46
46
|
<div class="pagination-helpers">${e} ${i}</div>
|
|
47
47
|
`})()} ${this.renderPages()}</div>`}};r([s({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),r([s({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),r([s({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),r([s({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),r([s({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),r([s({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),r([s({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),r([s({attribute:"option-text",type:String})],t.prototype,"optionText",2),r([c()],t.prototype,"pages",2),r([h("bl-change")],t.prototype,"onChange",2),t=r([g("bl-pagination")],t);export{t as a};
|
|
48
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-BUIS2EQI.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:max-content}.pagination{display:flex}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-secondary)}.pagination-helpers{display:flex;align-items:center;margin-right:var(--bl-size-s);gap:var(--bl-size-m)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\nconst selectOptions = [\n {\n text: '100',\n value: 100,\n },\n {\n text: '250',\n value: 250,\n },\n {\n text: '500',\n value: 500,\n },\n {\n text: '1000',\n value: 1000,\n },\n];\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the current page\n */\n @property({ attribute: 'current-page', type: Number, reflect: true })\n currentPage = 1;\n\n /**\n * Sets the total items to be paginated\n */\n @property({ attribute: 'total-items', type: Number })\n totalItems = 0;\n\n /**\n * Sets the number of items per page\n */\n @property({ attribute: 'items-per-page', type: Number, reflect: true })\n itemsPerPage = 100;\n\n /**\n * Adds jumper element if provided as true\n */\n @property({ attribute: 'has-jumper', type: Boolean })\n hasJumper = false;\n\n /**\n * Sets the jumper label\n */\n @property({ attribute: 'jumper-label', type: String })\n jumperLabel = 'Go To';\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'has-select', type: Boolean })\n hasSelect = false;\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'select-label', type: String })\n selectLabel = 'Show';\n\n /**\n * Sets the option texts.\n */\n @property({ attribute: 'option-text', type: String })\n optionText = 'Items';\n\n @state() private pages: Array<number | string> = [];\n\n /**\n * Fires when the current page changes\n */\n @event('bl-change') private onChange: EventDispatcher<{ selectedPage: number; prevPage: number }>;\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('currentPage') || changedProperties.has('itemsPerPage') || changedProperties.has('totalItems') ) {\n this._paginate();\n this.onChange({\n selectedPage: this.currentPage,\n prevPage: changedProperties.get('currentPage'),\n });\n }\n }\n\n private _paginate() {\n this.pages = [];\n const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n if (pageListLength <= 8) {\n this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n return;\n }\n\n this.pages.push(1);\n\n if (this.currentPage < 5) {\n this.pages.push(2, 3, 4, 5, '...');\n } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n } else {\n this.pages.push(\n '...',\n pageListLength - 4,\n pageListLength - 3,\n pageListLength - 2,\n pageListLength - 1\n );\n }\n\n this.pages.push(pageListLength);\n }\n\n private _changePage(page: number): void {\n this.currentPage = page;\n }\n\n private _pageBack(): void {\n if (this.currentPage === 1) return;\n this.currentPage--;\n }\n\n private _pageForward(): void {\n if (this.currentPage === this._getLastPage()) return;\n this.currentPage++;\n }\n\n private _getLastPage(): number {\n return +this.pages[this.pages.length - 1];\n }\n\n private _inputHandler(event: CustomEvent) {\n const inputValue = +(event.target as HTMLInputElement).value;\n const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n this._changePage(newPage);\n }\n\n private _selectHandler(event: CustomEvent) {\n this.itemsPerPage = event?.detail[0]?.value || 100;\n this.currentPage = 1;\n }\n\n private renderSinglePage(page: number | string) {\n if (typeof page === 'string') {\n return html`<span class=\"dots\"></span>`;\n }\n return html` <li>\n <bl-button\n @click=\"${() => this._changePage(page)}\"\n variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n kind=\"neutral\"\n >\n ${page}\n </bl-button>\n </li>`;\n }\n\n private renderPages() {\n return html`\n <div class=\"page-container\">\n <bl-button\n @click=\"${this._pageBack}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_left\"\n class=\"previous\"\n ?disabled=${this.currentPage === 1}\n ></bl-button>\n <ul class=\"page-list\">\n ${this.pages.map(page => html`${this.renderSinglePage(page)}`)}\n </ul>\n <bl-button\n @click=\"${this._pageForward}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_right\"\n class=\"next\"\n ?disabled=${this.currentPage === this._getLastPage()}\n ></bl-button>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const selectEl = this.hasSelect ? html`\n <div class=\"select\">\n <label>${this.selectLabel}</label>\n <bl-select @bl-select=\"${this._selectHandler}\">\n ${selectOptions.map(option => {\n return html`<bl-select-option\n value=\"${option.value}\"\n ?selected=${option.value === this.itemsPerPage}\n >${option.text} ${this.optionText}</bl-select-option\n >`;\n })}\n </bl-select>\n </div>\n ` : null;\n\n const jumperEl = this.hasJumper\n ? html` <div class=\"jumper\">\n <label>${this.jumperLabel}</label>\n <bl-input value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n </div>`\n : null;\n\n const getHelperElements = () => {\n if (!this.hasSelect && !this.hasJumper) return;\n return html`\n <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div>\n `;\n };\n\n return html` <div class=\"pagination\">${getHelperElements()} ${this.renderPages()}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-pagination': BlPagination;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "r", "bl_pagination_default", "selectOptions", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "page", "event", "inputValue", "newPage", "_a", "$", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t", "n"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-BUIS2EQI.js";import"../../chunk-YZQVPLSP.js";import"../../chunk-GBFJ2WUI.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-VNGNBBSS.js";import"../../chunk-KMWDOTWV.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-pagination.js.map
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:max-content}.pagination{display:flex}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-secondary)}.pagination-helpers{display:flex;align-items:center;margin-right:var(--bl-size-s);gap:var(--bl-size-m)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\nconst selectOptions = [\n {\n text: '100',\n value: 100,\n },\n {\n text: '250',\n value: 250,\n },\n {\n text: '500',\n value: 500,\n },\n {\n text: '1000',\n value: 1000,\n },\n];\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the current page\n */\n @property({ attribute: 'current-page', type: Number, reflect: true })\n currentPage = 1;\n\n /**\n * Sets the total items to be paginated\n */\n @property({ attribute: 'total-items', type: Number })\n totalItems = 0;\n\n /**\n * Sets the number of items per page\n */\n @property({ attribute: 'items-per-page', type: Number, reflect: true })\n itemsPerPage = 100;\n\n /**\n * Adds jumper element if provided as true\n */\n @property({ attribute: 'has-jumper', type: Boolean })\n hasJumper = false;\n\n /**\n * Sets the jumper label\n */\n @property({ attribute: 'jumper-label', type: String })\n jumperLabel = 'Go To';\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'has-select', type: Boolean })\n hasSelect = false;\n\n /**\n * Adds select element to choose the items per page\n */\n @property({ attribute: 'select-label', type: String })\n selectLabel = 'Show';\n\n /**\n * Sets the option texts.\n */\n @property({ attribute: 'option-text', type: String })\n optionText = 'Items';\n\n @state() private pages: Array<number | string> = [];\n\n /**\n * Fires when the current page changes\n */\n @event('bl-change') private onChange: EventDispatcher<{ selectedPage: number; prevPage: number }>;\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('currentPage') || changedProperties.has('itemsPerPage')) {\n this._paginate();\n this.onChange({\n selectedPage: this.currentPage,\n prevPage: changedProperties.get('currentPage'),\n });\n }\n }\n\n private _paginate() {\n this.pages = [];\n const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n if (pageListLength <= 8) {\n this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n return;\n }\n\n this.pages.push(1);\n\n if (this.currentPage < 5) {\n this.pages.push(2, 3, 4, 5, '...');\n } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n } else {\n this.pages.push(\n '...',\n pageListLength - 4,\n pageListLength - 3,\n pageListLength - 2,\n pageListLength - 1\n );\n }\n\n this.pages.push(pageListLength);\n }\n\n private _changePage(page: number): void {\n this.currentPage = page;\n }\n\n private _pageBack(): void {\n if (this.currentPage === 1) return;\n this.currentPage--;\n }\n\n private _pageForward(): void {\n if (this.currentPage === this._getLastPage()) return;\n this.currentPage++;\n }\n\n private _getLastPage(): number {\n return +this.pages[this.pages.length - 1];\n }\n\n private _inputHandler(event: CustomEvent) {\n const inputValue = +(event.target as HTMLInputElement).value;\n const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n this._changePage(newPage);\n }\n\n private _selectHandler(event: CustomEvent) {\n this.itemsPerPage = event?.detail[0]?.value || 100;\n this.currentPage = 1;\n }\n\n private renderSinglePage(page: number | string) {\n if (typeof page === 'string') {\n return html`<span class=\"dots\"></span>`;\n }\n return html` <li>\n <bl-button\n @click=\"${() => this._changePage(page)}\"\n variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n kind=\"neutral\"\n >\n ${page}\n </bl-button>\n </li>`;\n }\n\n private renderPages() {\n return html`\n <div class=\"page-container\">\n <bl-button\n @click=\"${this._pageBack}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_left\"\n class=\"previous\"\n ?disabled=${this.currentPage === 1}\n ></bl-button>\n <ul class=\"page-list\">\n ${this.pages.map(page => html`${this.renderSinglePage(page)}`)}\n </ul>\n <bl-button\n @click=\"${this._pageForward}\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"arrow_right\"\n class=\"next\"\n ?disabled=${this.currentPage === this._getLastPage()}\n ></bl-button>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const selectEl = this.hasSelect ? html`\n <div class=\"select\">\n <label>${this.selectLabel}</label>\n <bl-select @bl-select=\"${this._selectHandler}\">\n ${selectOptions.map(option => {\n return html`<bl-select-option\n value=\"${option.value}\"\n ?selected=${option.value === this.itemsPerPage}\n >${option.text} ${this.optionText}</bl-select-option\n >`;\n })}\n </bl-select>\n </div>\n ` : null;\n\n const jumperEl = this.hasJumper\n ? html` <div class=\"jumper\">\n <label>${this.jumperLabel}</label>\n <bl-input value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n </div>`\n : null;\n\n const getHelperElements = () => {\n if (!this.hasSelect && !this.hasJumper) return;\n return html`\n <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div>\n `;\n };\n\n return html` <div class=\"pagination\">${getHelperElements()} ${this.renderPages()}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-pagination': BlPagination;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "r", "bl_pagination_default", "selectOptions", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "page", "event", "inputValue", "newPage", "_a", "$", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t", "n"]
|
|
7
|
-
}
|