@kyndryl-design-system/shidoka-applications 1.26.6 → 1.26.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/components/reusable/modal/modal.scss.js +2 -1
- package/components/reusable/modal/modal.scss.js.map +1 -1
- package/components/reusable/pagination/Pagination.d.ts +6 -3
- package/components/reusable/pagination/Pagination.d.ts.map +1 -1
- package/components/reusable/pagination/Pagination.js +3 -3
- package/components/reusable/pagination/Pagination.js.map +1 -1
- package/components/reusable/pagination/pagination-navigation-buttons.js +1 -1
- package/components/reusable/pagination/pagination-navigation-buttons.js.map +1 -1
- package/components/reusable/pagination/pagination-page-size-dropdown.js +1 -1
- package/components/reusable/pagination/pagination-page-size-dropdown.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -17,12 +17,14 @@ export declare class Pagination extends LitElement {
|
|
|
17
17
|
static styles: import("lit").CSSResultGroup[];
|
|
18
18
|
/** Total number of items that need pagination. */
|
|
19
19
|
count: number;
|
|
20
|
-
/** Current active page number
|
|
20
|
+
/** Current active page number. */
|
|
21
21
|
pageNumber: number;
|
|
22
|
-
/** Number of items displayed per page
|
|
22
|
+
/** Number of items displayed per page. */
|
|
23
23
|
pageSize: number;
|
|
24
|
-
/** Available options for the page size
|
|
24
|
+
/** Available options for the page size. */
|
|
25
25
|
pageSizeOptions: number[];
|
|
26
|
+
/** Number of pages. */
|
|
27
|
+
_numberOfPages: number;
|
|
26
28
|
/** Label for the page size dropdown.*/
|
|
27
29
|
pageSizeLabel: string;
|
|
28
30
|
/** Option to hide the items range display. */
|
|
@@ -51,6 +53,7 @@ export declare class Pagination extends LitElement {
|
|
|
51
53
|
*/
|
|
52
54
|
private handlePageNumberChange;
|
|
53
55
|
render(): import("lit-html").TemplateResult<1>;
|
|
56
|
+
updated(changedProps: any): void;
|
|
54
57
|
}
|
|
55
58
|
declare global {
|
|
56
59
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAAY;IAElC,kDAAkD;IAElD,KAAK,SAAK;IAEV,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAAY;IAElC,kDAAkD;IAElD,KAAK,SAAK;IAEV,kCAAkC;IAElC,UAAU,SAAK;IAEf,0CAA0C;IAE1C,QAAQ,SAAK;IAEb,2CAA2C;IAE3C,eAAe,EAAE,MAAM,EAAE,CAAgC;IAEzD,uBAAuB;IAEvB,cAAc,SAAK;IAEnB,uCAAuC;IAEvC,aAAa,SAAmB;IAEhC,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B;;;OAGG;IAEH,QAAQ,UAAkC;IAE1C;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAIrB,MAAM;IAmCN,OAAO,CAAC,YAAY,EAAE,GAAG;CAOnC;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAC;KAC9B;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{PAGE_SIZE_LABEL as s,BREAKPOINT as p}from"./constants.js";import r from"./pagination.scss.js";import"./pagination-items-range.js";import"./pagination-page-size-dropdown.js";import"./pagination-navigation-buttons.js";let g=class extends i{constructor(){super(...arguments),this.count=0,this.pageNumber=1,this.pageSize=5,this.pageSizeOptions=[5,10,20,30,40,50,100],this.pageSizeLabel=s,this.hideItemsRange=!1,this.hidePageSizeDropdown=!1,this.hideNavigationButtons=!1,this.isMobile=window.innerWidth<p}handlePageSizeChange(e){this.pageSize=e.detail.value,this.pageNumber=this.count>0?1:0}handlePageNumberChange(e){this.pageNumber=e.detail.value}render(){
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{PAGE_SIZE_LABEL as s,BREAKPOINT as p}from"./constants.js";import r from"./pagination.scss.js";import"./pagination-items-range.js";import"./pagination-page-size-dropdown.js";import"./pagination-navigation-buttons.js";let g=class extends i{constructor(){super(...arguments),this.count=0,this.pageNumber=1,this.pageSize=5,this.pageSizeOptions=[5,10,20,30,40,50,100],this._numberOfPages=1,this.pageSizeLabel=s,this.hideItemsRange=!1,this.hidePageSizeDropdown=!1,this.hideNavigationButtons=!1,this.isMobile=window.innerWidth<p}handlePageSizeChange(e){this.pageSize=e.detail.value,this.pageNumber=this.count>0?1:0}handlePageNumberChange(e){this.pageNumber=e.detail.value}render(){return t`
|
|
2
2
|
${this.hideItemsRange?null:t`
|
|
3
3
|
<kyn-pagination-items-range
|
|
4
4
|
.pageNumber=${this.pageNumber}
|
|
@@ -17,9 +17,9 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
17
17
|
${this.hideNavigationButtons?null:t`
|
|
18
18
|
<kyn-pagination-navigation-buttons
|
|
19
19
|
.pageNumber=${this.pageNumber}
|
|
20
|
-
.numberOfPages=${
|
|
20
|
+
.numberOfPages=${this._numberOfPages}
|
|
21
21
|
@on-page-number-change=${this.handlePageNumberChange}
|
|
22
22
|
></kyn-pagination-navigation-buttons>
|
|
23
23
|
`}
|
|
24
|
-
`}};g.styles=[r],e([a({type:Number})],g.prototype,"count",void 0),e([a({type:Number,reflect:!0})],g.prototype,"pageNumber",void 0),e([a({type:Number})],g.prototype,"pageSize",void 0),e([a({type:Array})],g.prototype,"pageSizeOptions",void 0),e([a({type:String})],g.prototype,"pageSizeLabel",void 0),e([a({type:Boolean})],g.prototype,"hideItemsRange",void 0),e([a({type:Boolean})],g.prototype,"hidePageSizeDropdown",void 0),e([a({type:Boolean})],g.prototype,"hideNavigationButtons",void 0),e([n()],g.prototype,"isMobile",void 0),g=e([o("kyn-pagination")],g);export{g as Pagination};
|
|
24
|
+
`}updated(e){(e.has("count")||e.has("pageSize"))&&this.pageSize&&this.count&&(this._numberOfPages=Math.ceil(this.count/this.pageSize))}};g.styles=[r],e([a({type:Number})],g.prototype,"count",void 0),e([a({type:Number,reflect:!0})],g.prototype,"pageNumber",void 0),e([a({type:Number})],g.prototype,"pageSize",void 0),e([a({type:Array})],g.prototype,"pageSizeOptions",void 0),e([n()],g.prototype,"_numberOfPages",void 0),e([a({type:String})],g.prototype,"pageSizeLabel",void 0),e([a({type:Boolean})],g.prototype,"hideItemsRange",void 0),e([a({type:Boolean})],g.prototype,"hidePageSizeDropdown",void 0),e([a({type:Boolean})],g.prototype,"hideNavigationButtons",void 0),e([n()],g.prototype,"isMobile",void 0),g=e([o("kyn-pagination")],g);export{g as Pagination};
|
|
25
25
|
//# sourceMappingURL=Pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { PAGE_SIZE_LABEL, BREAKPOINT } from './constants';\nimport styles from './pagination.scss';\n\nimport './pagination-items-range';\nimport './pagination-page-size-dropdown';\nimport './pagination-navigation-buttons';\n\n/**\n * `kyn-pagination` Web Component.\n *\n * A component that provides pagination functionality, enabling the user to\n * navigate through large datasets by splitting them into discrete chunks.\n * Integrates with other utility components like items range display, page size dropdown,\n * and navigation buttons.\n * @fires on-page-size-change - Dispatched when the page size changes.\n * @fires on-page-number-change - Dispatched when the currently active page changes.\n *\n */\n@customElement('kyn-pagination')\nexport class Pagination extends LitElement {\n static override styles = [styles];\n\n /** Total number of items that need pagination. */\n @property({ type: Number })\n count = 0;\n\n /** Current active page number
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { PAGE_SIZE_LABEL, BREAKPOINT } from './constants';\nimport styles from './pagination.scss';\n\nimport './pagination-items-range';\nimport './pagination-page-size-dropdown';\nimport './pagination-navigation-buttons';\n\n/**\n * `kyn-pagination` Web Component.\n *\n * A component that provides pagination functionality, enabling the user to\n * navigate through large datasets by splitting them into discrete chunks.\n * Integrates with other utility components like items range display, page size dropdown,\n * and navigation buttons.\n * @fires on-page-size-change - Dispatched when the page size changes.\n * @fires on-page-number-change - Dispatched when the currently active page changes.\n *\n */\n@customElement('kyn-pagination')\nexport class Pagination extends LitElement {\n static override styles = [styles];\n\n /** Total number of items that need pagination. */\n @property({ type: Number })\n count = 0;\n\n /** Current active page number. */\n @property({ type: Number, reflect: true })\n pageNumber = 1;\n\n /** Number of items displayed per page. */\n @property({ type: Number })\n pageSize = 5;\n\n /** Available options for the page size. */\n @property({ type: Array })\n pageSizeOptions: number[] = [5, 10, 20, 30, 40, 50, 100];\n\n /** Number of pages. */\n @state()\n _numberOfPages = 1;\n\n /** Label for the page size dropdown.*/\n @property({ type: String })\n pageSizeLabel = PAGE_SIZE_LABEL;\n\n /** Option to hide the items range display. */\n @property({ type: Boolean })\n hideItemsRange = false;\n\n /** Option to hide the page size dropdown. */\n @property({ type: Boolean })\n hidePageSizeDropdown = false;\n\n /** Option to hide the navigation buttons. */\n @property({ type: Boolean })\n hideNavigationButtons = false;\n\n /**\n * Determines the device type the component is being rendered on.\n * @ignore\n */\n @state()\n isMobile = window.innerWidth < BREAKPOINT;\n\n /**\n * Handler for the event when the page size is changed by the user.\n * Updates the `pageSize` and resets the `pageNumber` to 1.\n *\n * @param e - The emitted custom event with the selected page size.\n */\n private handlePageSizeChange(e: CustomEvent) {\n this.pageSize = e.detail.value;\n this.pageNumber = this.count > 0 ? 1 : 0;\n }\n\n /**\n * Handler for the event when the page number is changed by the user.\n * Updates the `pageNumber`.\n *\n * @param e - The emitted custom event with the selected page number.\n */\n private handlePageNumberChange(e: CustomEvent) {\n this.pageNumber = e.detail.value;\n }\n\n override render() {\n return html`\n ${!this.hideItemsRange\n ? html`\n <kyn-pagination-items-range\n .pageNumber=${this.pageNumber}\n .pageSize=${this.pageSize}\n .count=${this.count}\n ></kyn-pagination-items-range>\n `\n : null}\n ${this.isMobile\n ? null\n : !this.hidePageSizeDropdown\n ? html`\n <kyn-pagination-page-size-dropdown\n .pageSize=${this.pageSize}\n .pageSizeOptions=${this.pageSizeOptions}\n .pageSizeLabel=${this.pageSizeLabel}\n @on-page-size-change=${this.handlePageSizeChange}\n ></kyn-pagination-page-size-dropdown>\n `\n : null}\n ${!this.hideNavigationButtons\n ? html`\n <kyn-pagination-navigation-buttons\n .pageNumber=${this.pageNumber}\n .numberOfPages=${this._numberOfPages}\n @on-page-number-change=${this.handlePageNumberChange}\n ></kyn-pagination-navigation-buttons>\n `\n : null}\n `;\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('count') || changedProps.has('pageSize')) {\n if (this.pageSize && this.count) {\n this._numberOfPages = Math.ceil(this.count / this.pageSize);\n }\n }\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-pagination': Pagination;\n }\n}\n"],"names":["Pagination","LitElement","constructor","this","count","pageNumber","pageSize","pageSizeOptions","_numberOfPages","pageSizeLabel","PAGE_SIZE_LABEL","hideItemsRange","hidePageSizeDropdown","hideNavigationButtons","isMobile","window","innerWidth","BREAKPOINT","handlePageSizeChange","e","detail","value","handlePageNumberChange","render","html","updated","changedProps","has","Math","ceil","styles","__decorate","property","type","Number","prototype","reflect","Array","state","String","Boolean","customElement"],"mappings":"y2BAsBO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAKLC,KAAKC,MAAG,EAIRD,KAAUE,WAAG,EAIbF,KAAQG,SAAG,EAIXH,KAAAI,gBAA4B,CAAC,EAAG,GAAI,GAAI,GAAI,GAAI,GAAI,KAIpDJ,KAAcK,eAAG,EAIjBL,KAAaM,cAAGC,EAIhBP,KAAcQ,gBAAG,EAIjBR,KAAoBS,sBAAG,EAIvBT,KAAqBU,uBAAG,EAOxBV,KAAAW,SAAWC,OAAOC,WAAaC,CAiEhC,CAzDS,oBAAAC,CAAqBC,GAC3BhB,KAAKG,SAAWa,EAAEC,OAAOC,MACzBlB,KAAKE,WAAaF,KAAKC,MAAQ,EAAI,EAAI,CACxC,CAQO,sBAAAkB,CAAuBH,GAC7BhB,KAAKE,WAAac,EAAEC,OAAOC,KAC5B,CAEQ,MAAAE,GACP,OAAOC,CAAI;QACNrB,KAAKQ,eAQJ,KAPAa,CAAI;;4BAEcrB,KAAKE;0BACPF,KAAKG;uBACRH,KAAKC;;;QAIpBD,KAAKW,UAEFX,KAAKS,qBADN,KAEAY,CAAI;;0BAEYrB,KAAKG;iCACEH,KAAKI;+BACPJ,KAAKM;qCACCN,KAAKe;;;QAIjCf,KAAKU,sBAQJ,KAPAW,CAAI;;4BAEcrB,KAAKE;+BACFF,KAAKK;uCACGL,KAAKmB;;;KAKzC,CAEQ,OAAAG,CAAQC,IACXA,EAAaC,IAAI,UAAYD,EAAaC,IAAI,cAC5CxB,KAAKG,UAAYH,KAAKC,QACxBD,KAAKK,eAAiBoB,KAAKC,KAAK1B,KAAKC,MAAQD,KAAKG,UAGvD,GA3GeN,EAAA8B,OAAS,CAACA,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACRlC,EAAAmC,UAAA,aAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KACpBpC,EAAAmC,UAAA,kBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACLlC,EAAAmC,UAAA,gBAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,SACuCrC,EAAAmC,UAAA,uBAAA,GAIzDJ,EAAA,CADCO,KACkBtC,EAAAmC,UAAA,sBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMM,UACcvC,EAAAmC,UAAA,qBAAA,GAIhCJ,EAAA,CADCC,EAAS,CAAEC,KAAMO,WACKxC,EAAAmC,UAAA,sBAAA,GAIvBJ,EAAA,CADCC,EAAS,CAAEC,KAAMO,WACWxC,EAAAmC,UAAA,4BAAA,GAI7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMO,WACYxC,EAAAmC,UAAA,6BAAA,GAO9BJ,EAAA,CADCO,KACyCtC,EAAAmC,UAAA,gBAAA,GA5C/BnC,EAAU+B,EAAA,CADtBU,EAAc,mBACFzC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--left/16.js';import m from'./../../../external/@carbon/icons/es/chevron--right/16.js';import l from"./pagination-navigation-buttons.scss.js";import{BREAKPOINT as a,OF_TEXT as d,PAGES_TEXT as c}from"./constants.js";let p=class extends o{constructor(){super(...arguments),this.pageNumber=
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--left/16.js';import m from'./../../../external/@carbon/icons/es/chevron--right/16.js';import l from"./pagination-navigation-buttons.scss.js";import{BREAKPOINT as a,OF_TEXT as d,PAGES_TEXT as c}from"./constants.js";let p=class extends o{constructor(){super(...arguments),this.pageNumber=1,this.numberOfPages=1,this.isMobile=window.innerWidth<a,this.SMALLEST_PAGE_NUMBER=1}handleButtonClick(e){const t=e?this.pageNumber+1:this.pageNumber-1;this.pageNumber=t,this.dispatchEvent(new CustomEvent("on-page-number-change",{detail:{value:t},bubbles:!0,composed:!0}))}render(){const e=this.pageNumber<=this.SMALLEST_PAGE_NUMBER,o=this.pageNumber>=this.numberOfPages;return t`
|
|
2
2
|
<kd-button
|
|
3
3
|
iconposition="center"
|
|
4
4
|
kind="tertiary"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-navigation-buttons.js","sources":["../../../../src/components/reusable/pagination/pagination-navigation-buttons.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\n\n// Import required components and icons\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport chevLeftIcon from '@carbon/icons/es/chevron--left/16';\nimport chevRightIcon from '@carbon/icons/es/chevron--right/16';\n\nimport styles from './pagination-navigation-buttons.scss';\nimport { OF_TEXT, PAGES_TEXT, BREAKPOINT } from './constants';\n\n/**\n * `kyn-pagination-navigation-buttons` Web Component.\n *\n * This component provides navigational controls for pagination.\n * It includes back and next buttons, along with displaying the current page and total pages.\n *\n * @fires on-page-number-change - Dispatched when the page number is changed.\n */\n@customElement('kyn-pagination-navigation-buttons')\nexport class PaginationNavigationButtons extends LitElement {\n static override styles = [styles];\n\n // Current page number, defaults to 0\n @property({ type: Number, reflect: true })\n pageNumber =
|
|
1
|
+
{"version":3,"file":"pagination-navigation-buttons.js","sources":["../../../../src/components/reusable/pagination/pagination-navigation-buttons.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\n\n// Import required components and icons\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport chevLeftIcon from '@carbon/icons/es/chevron--left/16';\nimport chevRightIcon from '@carbon/icons/es/chevron--right/16';\n\nimport styles from './pagination-navigation-buttons.scss';\nimport { OF_TEXT, PAGES_TEXT, BREAKPOINT } from './constants';\n\n/**\n * `kyn-pagination-navigation-buttons` Web Component.\n *\n * This component provides navigational controls for pagination.\n * It includes back and next buttons, along with displaying the current page and total pages.\n *\n * @fires on-page-number-change - Dispatched when the page number is changed.\n */\n@customElement('kyn-pagination-navigation-buttons')\nexport class PaginationNavigationButtons extends LitElement {\n static override styles = [styles];\n\n // Current page number, defaults to 0\n @property({ type: Number, reflect: true })\n pageNumber = 1;\n\n // Total number of pages, defaults to 0\n @property({ type: Number, reflect: true })\n numberOfPages = 1;\n\n /**\n * Determines the device type the component is being rendered on.\n * @ignore\n */\n @state()\n isMobile = window.innerWidth < BREAKPOINT;\n\n // Constant representing the smallest possible page number\n private readonly SMALLEST_PAGE_NUMBER = 1;\n\n /**\n * Handles the button click event, either moving to the next page or previous page\n * @param {boolean} next - If true, will move to the next page, otherwise to the previous page\n */\n private handleButtonClick(next: boolean) {\n const currentPage = next ? this.pageNumber + 1 : this.pageNumber - 1;\n this.pageNumber = currentPage;\n\n // Dispatch a custom event to notify about the page change\n this.dispatchEvent(\n new CustomEvent('on-page-number-change', {\n detail: { value: currentPage },\n bubbles: true, // Allows parent components to catch it\n composed: true, // Required for the event to pass through the Shadow DOM boundary\n })\n );\n }\n\n override render() {\n const disableBackButton = this.pageNumber <= this.SMALLEST_PAGE_NUMBER;\n const disableNextButton = this.pageNumber >= this.numberOfPages;\n\n // Render back button, current page number, and next button\n return html`\n <kd-button\n iconposition=\"center\"\n kind=\"tertiary\"\n type=\"button\"\n size=\"small\"\n ?disabled=${disableBackButton}\n @on-click=${() => this.handleButtonClick(false)}\n description=\"Previous page\"\n >\n <kd-icon slot=\"icon\" .icon=${chevLeftIcon}></kd-icon>\n </kd-button>\n ${this.isMobile\n ? null\n : html` <span role=\"status\" aria-live=\"polite\">\n ${this.pageNumber} ${OF_TEXT} ${this.numberOfPages}\n ${PAGES_TEXT}</span\n >`}\n <kd-button\n iconposition=\"center\"\n kind=\"tertiary\"\n type=\"button\"\n size=\"small\"\n ?disabled=${disableNextButton}\n @on-click=${() => this.handleButtonClick(true)}\n description=\"Next page\"\n >\n <kd-icon slot=\"icon\" .icon=${chevRightIcon}></kd-icon>\n </kd-button>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-pagination-navigation-buttons': PaginationNavigationButtons;\n }\n}\n"],"names":["PaginationNavigationButtons","LitElement","constructor","this","pageNumber","numberOfPages","isMobile","window","innerWidth","BREAKPOINT","SMALLEST_PAGE_NUMBER","handleButtonClick","next","currentPage","dispatchEvent","CustomEvent","detail","value","bubbles","composed","render","disableBackButton","disableNextButton","html","chevLeftIcon","OF_TEXT","PAGES_TEXT","chevRightIcon","styles","__decorate","property","type","Number","reflect","prototype","state","customElement"],"mappings":"qiCAqBO,IAAMA,EAAN,cAA0CC,EAA1C,WAAAC,uBAKLC,KAAUC,WAAG,EAIbD,KAAaE,cAAG,EAOhBF,KAAAG,SAAWC,OAAOC,WAAaC,EAGdN,KAAoBO,qBAAG,CAwDzC,CAlDS,iBAAAC,CAAkBC,GACxB,MAAMC,EAAcD,EAAOT,KAAKC,WAAa,EAAID,KAAKC,WAAa,EACnED,KAAKC,WAAaS,EAGlBV,KAAKW,cACH,IAAIC,YAAY,wBAAyB,CACvCC,OAAQ,CAAEC,MAAOJ,GACjBK,SAAS,EACTC,UAAU,IAGf,CAEQ,MAAAC,GACP,MAAMC,EAAoBlB,KAAKC,YAAcD,KAAKO,qBAC5CY,EAAoBnB,KAAKC,YAAcD,KAAKE,cAGlD,OAAOkB,CAAI;;;;;;oBAMKF;oBACA,IAAMlB,KAAKQ,mBAAkB;;;qCAGZa;;QAE7BrB,KAAKG,SACH,KACAiB,CAAI;cACApB,KAAKC,cAAcqB,KAAWtB,KAAKE;cACnCqB;;;;;;;oBAOMJ;oBACA,IAAMnB,KAAKQ,mBAAkB;;;qCAGZgB;;KAGlC,GAzEe3B,EAAA4B,OAAS,CAACA,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACpBjC,EAAAkC,UAAA,kBAAA,GAIfL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACjBjC,EAAAkC,UAAA,qBAAA,GAOlBL,EAAA,CADCM,KACyCnC,EAAAkC,UAAA,gBAAA,GAhB/BlC,EAA2B6B,EAAA,CADvCO,EAAc,sCACFpC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as n}from'./../../../external/@lit/reactive-element/decorators/property.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import"../dropdown/dropdown.js";import"../dropdown/dropdownOption.js";import s from"./pagination-page-size-dropdown.scss.js";import{PAGE_SIZE_LABEL as p}from"./constants.js";let r=class extends o{constructor(){super(...arguments),this.pageSize=5,this.pageSizeLabel=p,this.pageSizeOptions=[5,10,20,30,40,50]}handleChange(e){this.pageSize=e.detail.value,this.dispatchEvent(new CustomEvent("on-page-size-change",{detail:{value:e.detail.value},bubbles:!0,composed:!0}))}render(){return t`
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as n}from'./../../../external/@lit/reactive-element/decorators/property.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import"../dropdown/dropdown.js";import"../dropdown/dropdownOption.js";import s from"./pagination-page-size-dropdown.scss.js";import{PAGE_SIZE_LABEL as p}from"./constants.js";let r=class extends o{constructor(){super(...arguments),this.pageSize=5,this.pageSizeLabel=p,this.pageSizeOptions=[5,10,20,30,40,50]}handleChange(e){this.pageSize=e.detail.value,this.dispatchEvent(new CustomEvent("on-page-size-change",{detail:{value:Number(e.detail.value)},bubbles:!0,composed:!0}))}render(){return t`
|
|
2
2
|
<label> ${this.pageSizeLabel} </label>
|
|
3
3
|
<kyn-dropdown
|
|
4
4
|
inline
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-page-size-dropdown.js","sources":["../../../../src/components/reusable/pagination/pagination-page-size-dropdown.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '../dropdown/dropdown';\nimport '../dropdown/dropdownOption';\n\nimport styles from './pagination-page-size-dropdown.scss';\nimport { PAGE_SIZE_LABEL } from './constants';\n\n/**\n * `kyn-pagination-page-size-dropdown` Web Component.\n *\n * This component provides a dropdown to select the page size for pagination.\n * It emits events when the selected page size changes.\n *\n * @fires on-page-size-change - The event fired when the page size changes.\n */\n@customElement('kyn-pagination-page-size-dropdown')\nexport class PaginationPageSizeDropdown extends LitElement {\n static override styles = [styles];\n\n /** Current page size. */\n @property({ type: Number })\n pageSize = 5;\n\n /** Label for the page size dropdown. */\n @property({ type: String })\n pageSizeLabel = PAGE_SIZE_LABEL;\n\n /** Available options for the page size. */\n @property({ type: Array })\n pageSizeOptions: Array<number> = [5, 10, 20, 30, 40, 50];\n\n /**\n * Handles the dropdown change event.\n * @param {CustomEvent} event - The dropdown change event.\n */\n private handleChange(event: CustomEvent) {\n this.pageSize = event.detail.value;\n\n // this.shadowRoot?.querySelector('kyn-dropdown')?.resetSelection();\n\n this.dispatchEvent(\n new CustomEvent('on-page-size-change', {\n detail: { value: event.detail.value },\n bubbles: true, // So that parent components can catch it\n composed: true, // Required for the event to pass through the Shadow DOM boundary\n })\n );\n }\n\n override render() {\n return html`\n <label> ${this.pageSizeLabel} </label>\n <kyn-dropdown\n inline\n size=\"sm\"\n updateByValue\n value=${this.pageSize}\n @on-change=${(e: CustomEvent) => this.handleChange(e)}\n >\n ${this.pageSizeOptions.map((option) => {\n return html`\n <kyn-dropdown-option value=${option}>\n ${option}\n </kyn-dropdown-option>\n `;\n })}\n </kyn-dropdown>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-pagination-page-size-dropdown': PaginationPageSizeDropdown;\n }\n}\n"],"names":["PaginationPageSizeDropdown","LitElement","constructor","this","pageSize","pageSizeLabel","PAGE_SIZE_LABEL","pageSizeOptions","handleChange","event","detail","value","dispatchEvent","CustomEvent","bubbles","composed","render","html","e","map","option","styles","__decorate","property","type","
|
|
1
|
+
{"version":3,"file":"pagination-page-size-dropdown.js","sources":["../../../../src/components/reusable/pagination/pagination-page-size-dropdown.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '../dropdown/dropdown';\nimport '../dropdown/dropdownOption';\n\nimport styles from './pagination-page-size-dropdown.scss';\nimport { PAGE_SIZE_LABEL } from './constants';\n\n/**\n * `kyn-pagination-page-size-dropdown` Web Component.\n *\n * This component provides a dropdown to select the page size for pagination.\n * It emits events when the selected page size changes.\n *\n * @fires on-page-size-change - The event fired when the page size changes.\n */\n@customElement('kyn-pagination-page-size-dropdown')\nexport class PaginationPageSizeDropdown extends LitElement {\n static override styles = [styles];\n\n /** Current page size. */\n @property({ type: Number })\n pageSize = 5;\n\n /** Label for the page size dropdown. */\n @property({ type: String })\n pageSizeLabel = PAGE_SIZE_LABEL;\n\n /** Available options for the page size. */\n @property({ type: Array })\n pageSizeOptions: Array<number> = [5, 10, 20, 30, 40, 50];\n\n /**\n * Handles the dropdown change event.\n * @param {CustomEvent} event - The dropdown change event.\n */\n private handleChange(event: CustomEvent) {\n this.pageSize = event.detail.value;\n\n // this.shadowRoot?.querySelector('kyn-dropdown')?.resetSelection();\n\n this.dispatchEvent(\n new CustomEvent('on-page-size-change', {\n detail: { value: Number(event.detail.value) },\n bubbles: true, // So that parent components can catch it\n composed: true, // Required for the event to pass through the Shadow DOM boundary\n })\n );\n }\n\n override render() {\n return html`\n <label> ${this.pageSizeLabel} </label>\n <kyn-dropdown\n inline\n size=\"sm\"\n updateByValue\n value=${this.pageSize}\n @on-change=${(e: CustomEvent) => this.handleChange(e)}\n >\n ${this.pageSizeOptions.map((option) => {\n return html`\n <kyn-dropdown-option value=${option}>\n ${option}\n </kyn-dropdown-option>\n `;\n })}\n </kyn-dropdown>\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-pagination-page-size-dropdown': PaginationPageSizeDropdown;\n }\n}\n"],"names":["PaginationPageSizeDropdown","LitElement","constructor","this","pageSize","pageSizeLabel","PAGE_SIZE_LABEL","pageSizeOptions","handleChange","event","detail","value","dispatchEvent","CustomEvent","Number","bubbles","composed","render","html","e","map","option","styles","__decorate","property","type","prototype","String","Array","customElement"],"mappings":"guBAkBO,IAAMA,EAAN,cAAyCC,EAAzC,WAAAC,uBAKLC,KAAQC,SAAG,EAIXD,KAAaE,cAAGC,EAIhBH,KAAAI,gBAAiC,CAAC,EAAG,GAAI,GAAI,GAAI,GAAI,GAwCtD,CAlCS,YAAAC,CAAaC,GACnBN,KAAKC,SAAWK,EAAMC,OAAOC,MAI7BR,KAAKS,cACH,IAAIC,YAAY,sBAAuB,CACrCH,OAAQ,CAAEC,MAAOG,OAAOL,EAAMC,OAAOC,QACrCI,SAAS,EACTC,UAAU,IAGf,CAEQ,MAAAC,GACP,OAAOC,CAAI;gBACCf,KAAKE;;;;;gBAKLF,KAAKC;qBACCe,GAAmBhB,KAAKK,aAAaW;;UAEjDhB,KAAKI,gBAAgBa,KAAKC,GACnBH,CAAI;yCACoBG;gBACzBA;;;;KAMb,GAnDerB,EAAAsB,OAAS,CAACA,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMX,UACLd,EAAA0B,UAAA,gBAAA,GAIbH,EAAA,CADCC,EAAS,CAAEC,KAAME,UACc3B,EAAA0B,UAAA,qBAAA,GAIhCH,EAAA,CADCC,EAAS,CAAEC,KAAMG,SACuC5B,EAAA0B,UAAA,uBAAA,GAb9C1B,EAA0BuB,EAAA,CADtCM,EAAc,sCACF7B"}
|