@tekus/design-system 5.8.1 → 5.8.2
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.
|
@@ -147,11 +147,11 @@ class PaginationComponent {
|
|
|
147
147
|
});
|
|
148
148
|
}
|
|
149
149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
|
|
151
151
|
}
|
|
152
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
|
-
args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:
|
|
154
|
+
args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
|
|
155
155
|
}], ctorParameters: () => [] });
|
|
156
156
|
|
|
157
157
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-pagination.mjs","sources":["../../../projects/design-system/components/pagination/src/pagination.component.ts","../../../projects/design-system/components/pagination/src/pagination.component.html","../../../projects/design-system/components/pagination/tekus-design-system-components-pagination.ts"],"sourcesContent":["import {\n Component,\n computed,\n input,\n output,\n signal,\n effect,\n} from '@angular/core';\nimport { PaginatorModule, PaginatorState } from 'primeng/paginator';\nimport { FormsModule } from '@angular/forms';\nimport { Select } from 'primeng/select';\n\n@Component({\n selector: 'tk-pagination',\n imports: [PaginatorModule, FormsModule, Select],\n templateUrl: './pagination.component.html',\n styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n /**\n * @property {boolean} hidden\n * @description\n * When true, hides the entire pagination component from view without affecting internal logic.\n * Useful when you need to keep the component in the DOM (e.g., for @ViewChildren queries)\n * but want to control its visibility externally.\n *\n * @default false\n */\n hidden = input<boolean>(false);\n\n /**\n * @property {number} pageIndex\n * @description\n * The index of the first record on the current page.\n * This value is used as the `[first]` input in the PrimeNG Paginator (zero-based).\n *\n * @default 0\n */\n pageIndex = input<number>(0);\n\n /**\n * @property {number} pageSize\n * @description\n * The number of items (rows) to display per page.\n *\n * @default 10\n */\n pageSize = input<number>(10);\n\n /**\n * @property {number} length\n * @description\n * The total number of records in the collection (`totalRecords`).\n *\n * @required\n */\n length = input.required<number>();\n\n /**\n * @property {number[]} pageSizeOptions\n * @description\n * Array of available options for the 'Items per page' selector.\n *\n * @default [5, 10, 20, 50]\n */\n pageSizeOptions = input<number[]>([5, 10, 20, 50]);\n\n /**\n * @property {Signal<number>} pageIndexInternal\n * @description\n * Internal, writable signal representing the current `first` index.\n * It is updated based on user interaction (page change).\n * Initialized with the value of `pageIndex()`.\n *\n * @internal\n */\n pageIndexInternal = signal<number>(this.pageIndex());\n\n /**\n * @property {Signal<number>} pageSizeInternal\n * @description\n * Internal, writable signal representing the current page size (`rows`).\n * It is updated based on user interaction (select change).\n * Initialized with the value of `pageSize()`.\n *\n * @internal\n */\n pageSizeInternal = signal<number>(this.pageSize());\n\n /**\n * @event pageChange\n * @description\n * Emits the complete pagination state (`PaginatorState`) when the user\n * changes the page or the page size.\n *\n * @payload {PaginatorState}\n * @example\n * <tk-pagination (pageChange)=\"loadData($event)\"></tk-pagination>\n */\n pageChange = output<PaginatorState>();\n\n constructor() {\n /**\n * @effect pageIndex → pageIndexInternal\n * @description\n * Synchronizes the `pageIndex` Input with the internal signal `pageIndexInternal`.\n * This allows the parent component to update the pagination state externally.\n */\n effect(() => {\n this.pageIndexInternal.set(this.pageIndex());\n });\n\n /**\n * @effect pageSize → pageSizeInternal\n * @description\n * Synchronizes the `pageSize` Input with the internal signal `pageSizeInternal`.\n * Allows the parent component to control the page size externally.\n */\n effect(() => {\n this.pageSizeInternal.set(this.pageSize());\n });\n }\n\n /**\n * @property {Signal<{label: string, value: number}[]>} options\n * @description\n * Computed signal that transforms the `pageSizeOptions` number array\n * into the `{label: string, value: number}` format required by the PrimeNG Select component.\n */\n options = computed(() =>\n this.pageSizeOptions().map(value => ({\n label: value.toString(),\n value: value,\n }))\n );\n\n // -----------------------------------\n // EVENT HANDLERS\n // -----------------------------------\n\n /**\n * @method onPageChange\n * @description\n * Handles the native `(onPageChange)` event emitted by the `p-paginator`.\n * Updates the internal state and notifies the parent component.\n *\n * @param {PaginatorState} event - The current pagination state.\n */\n onPageChange(event: PaginatorState) {\n this.pageIndexInternal.set(event.first ?? this.pageIndexInternal());\n this.pageSizeInternal.set(event.rows! ?? this.pageSizeInternal());\n this.pageChange.emit(event);\n }\n\n /**\n * @method onPageSizeChange\n * @description\n * Handles the `(ngModelChange)` event from the `p-select` when changing \"Items per page\".\n * Resets the `pageIndexInternal` to 0 to jump to the first page and emits the new state.\n *\n * @param {number} newSize - The newly selected page size.\n */\n onPageSizeChange(newSize: number) {\n this.pageSizeInternal.set(newSize);\n this.pageIndexInternal.set(0);\n\n // Emit the new state to the parent component\n this.pageChange.emit({\n first: 0,\n rows: newSize,\n page: 0,\n pageCount: Math.ceil(this.length() / newSize),\n } as PaginatorState);\n }\n}\n","<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAkBa,mBAAmB,CAAA;AAmF9B,IAAA,WAAA,GAAA;AAlFA;;;;;;;;AAQG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,KAAK,CAAC;AAE9B;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,CAAC,CAAC;AAE5B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,CAAC;AAE5B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAU;AAEjC;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAW,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAElD;;;;;;;;AAQG;QACH,IAAiB,CAAA,iBAAA,GAAG,MAAM,CAAS,IAAI,CAAC,SAAS,EAAE,CAAC;AAEpD;;;;;;;;AAQG;QACH,IAAgB,CAAA,gBAAA,GAAG,MAAM,CAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;AAElD;;;;;;;;;AASG;QACH,IAAU,CAAA,UAAA,GAAG,MAAM,EAAkB;AAwBrC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MACjB,IAAI,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK;AACnC,YAAA,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;AACvB,YAAA,KAAK,EAAE,KAAK;SACb,CAAC,CAAC,CACJ;AAhCC;;;;;AAKG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AAC9C,SAAC,CAAC;AAEF;;;;;AAKG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC5C,SAAC,CAAC;;;;;AAoBJ;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAqB,EAAA;AAChC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACnE,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACjE,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG7B;;;;;;;AAOG;AACH,IAAA,gBAAgB,CAAC,OAAe,EAAA;AAC9B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;AAG7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,IAAI,EAAE,CAAC;YACP,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC;AAC5B,SAAA,CAAC;;+GA1JX,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,4wBClBhC,iuBAoBA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-pagination.mjs","sources":["../../../projects/design-system/components/pagination/src/pagination.component.ts","../../../projects/design-system/components/pagination/src/pagination.component.html","../../../projects/design-system/components/pagination/tekus-design-system-components-pagination.ts"],"sourcesContent":["import {\n Component,\n computed,\n input,\n output,\n signal,\n effect,\n} from '@angular/core';\nimport { PaginatorModule, PaginatorState } from 'primeng/paginator';\nimport { FormsModule } from '@angular/forms';\nimport { Select } from 'primeng/select';\n\n@Component({\n selector: 'tk-pagination',\n imports: [PaginatorModule, FormsModule, Select],\n templateUrl: './pagination.component.html',\n styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n /**\n * @property {boolean} hidden\n * @description\n * When true, hides the entire pagination component from view without affecting internal logic.\n * Useful when you need to keep the component in the DOM (e.g., for @ViewChildren queries)\n * but want to control its visibility externally.\n *\n * @default false\n */\n hidden = input<boolean>(false);\n\n /**\n * @property {number} pageIndex\n * @description\n * The index of the first record on the current page.\n * This value is used as the `[first]` input in the PrimeNG Paginator (zero-based).\n *\n * @default 0\n */\n pageIndex = input<number>(0);\n\n /**\n * @property {number} pageSize\n * @description\n * The number of items (rows) to display per page.\n *\n * @default 10\n */\n pageSize = input<number>(10);\n\n /**\n * @property {number} length\n * @description\n * The total number of records in the collection (`totalRecords`).\n *\n * @required\n */\n length = input.required<number>();\n\n /**\n * @property {number[]} pageSizeOptions\n * @description\n * Array of available options for the 'Items per page' selector.\n *\n * @default [5, 10, 20, 50]\n */\n pageSizeOptions = input<number[]>([5, 10, 20, 50]);\n\n /**\n * @property {Signal<number>} pageIndexInternal\n * @description\n * Internal, writable signal representing the current `first` index.\n * It is updated based on user interaction (page change).\n * Initialized with the value of `pageIndex()`.\n *\n * @internal\n */\n pageIndexInternal = signal<number>(this.pageIndex());\n\n /**\n * @property {Signal<number>} pageSizeInternal\n * @description\n * Internal, writable signal representing the current page size (`rows`).\n * It is updated based on user interaction (select change).\n * Initialized with the value of `pageSize()`.\n *\n * @internal\n */\n pageSizeInternal = signal<number>(this.pageSize());\n\n /**\n * @event pageChange\n * @description\n * Emits the complete pagination state (`PaginatorState`) when the user\n * changes the page or the page size.\n *\n * @payload {PaginatorState}\n * @example\n * <tk-pagination (pageChange)=\"loadData($event)\"></tk-pagination>\n */\n pageChange = output<PaginatorState>();\n\n constructor() {\n /**\n * @effect pageIndex → pageIndexInternal\n * @description\n * Synchronizes the `pageIndex` Input with the internal signal `pageIndexInternal`.\n * This allows the parent component to update the pagination state externally.\n */\n effect(() => {\n this.pageIndexInternal.set(this.pageIndex());\n });\n\n /**\n * @effect pageSize → pageSizeInternal\n * @description\n * Synchronizes the `pageSize` Input with the internal signal `pageSizeInternal`.\n * Allows the parent component to control the page size externally.\n */\n effect(() => {\n this.pageSizeInternal.set(this.pageSize());\n });\n }\n\n /**\n * @property {Signal<{label: string, value: number}[]>} options\n * @description\n * Computed signal that transforms the `pageSizeOptions` number array\n * into the `{label: string, value: number}` format required by the PrimeNG Select component.\n */\n options = computed(() =>\n this.pageSizeOptions().map(value => ({\n label: value.toString(),\n value: value,\n }))\n );\n\n // -----------------------------------\n // EVENT HANDLERS\n // -----------------------------------\n\n /**\n * @method onPageChange\n * @description\n * Handles the native `(onPageChange)` event emitted by the `p-paginator`.\n * Updates the internal state and notifies the parent component.\n *\n * @param {PaginatorState} event - The current pagination state.\n */\n onPageChange(event: PaginatorState) {\n this.pageIndexInternal.set(event.first ?? this.pageIndexInternal());\n this.pageSizeInternal.set(event.rows! ?? this.pageSizeInternal());\n this.pageChange.emit(event);\n }\n\n /**\n * @method onPageSizeChange\n * @description\n * Handles the `(ngModelChange)` event from the `p-select` when changing \"Items per page\".\n * Resets the `pageIndexInternal` to 0 to jump to the first page and emits the new state.\n *\n * @param {number} newSize - The newly selected page size.\n */\n onPageSizeChange(newSize: number) {\n this.pageSizeInternal.set(newSize);\n this.pageIndexInternal.set(0);\n\n // Emit the new state to the parent component\n this.pageChange.emit({\n first: 0,\n rows: newSize,\n page: 0,\n pageCount: Math.ceil(this.length() / newSize),\n } as PaginatorState);\n }\n}\n","<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
3
|
"description": "Tekus design system library",
|
|
4
|
-
"version": "5.8.
|
|
4
|
+
"version": "5.8.2",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/core": "^19.2.15",
|
|
@@ -43,14 +43,14 @@
|
|
|
43
43
|
"types": "./components/autocomplete/index.d.ts",
|
|
44
44
|
"default": "./fesm2022/tekus-design-system-components-autocomplete.mjs"
|
|
45
45
|
},
|
|
46
|
-
"./components/button": {
|
|
47
|
-
"types": "./components/button/index.d.ts",
|
|
48
|
-
"default": "./fesm2022/tekus-design-system-components-button.mjs"
|
|
49
|
-
},
|
|
50
46
|
"./components/checkbox": {
|
|
51
47
|
"types": "./components/checkbox/index.d.ts",
|
|
52
48
|
"default": "./fesm2022/tekus-design-system-components-checkbox.mjs"
|
|
53
49
|
},
|
|
50
|
+
"./components/button": {
|
|
51
|
+
"types": "./components/button/index.d.ts",
|
|
52
|
+
"default": "./fesm2022/tekus-design-system-components-button.mjs"
|
|
53
|
+
},
|
|
54
54
|
"./components/date-picker": {
|
|
55
55
|
"types": "./components/date-picker/index.d.ts",
|
|
56
56
|
"default": "./fesm2022/tekus-design-system-components-date-picker.mjs"
|