@impartner/design-components 1.0.4 → 1.1.0
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/esm2020/lib/alert/alert.component.mjs +48 -6
- package/esm2020/lib/alert/alert.module.mjs +6 -5
- package/esm2020/lib/pagination/pagination.component.mjs +38 -28
- package/esm2020/lib/pagination/pagination.module.mjs +5 -4
- package/fesm2015/impartner-design-components.mjs +88 -38
- package/fesm2015/impartner-design-components.mjs.map +1 -1
- package/fesm2020/impartner-design-components.mjs +88 -38
- package/fesm2020/impartner-design-components.mjs.map +1 -1
- package/lib/alert/alert.component.d.ts +20 -3
- package/lib/alert/alert.module.d.ts +2 -1
- package/lib/pagination/pagination.component.d.ts +2 -0
- package/lib/pagination/pagination.module.d.ts +3 -2
- package/package.json +1 -1
|
@@ -4000,16 +4000,32 @@ class AlertComponent {
|
|
|
4000
4000
|
*/
|
|
4001
4001
|
this.show = false;
|
|
4002
4002
|
/**
|
|
4003
|
-
* The heading text of the Alert.
|
|
4003
|
+
* The heading text of the Alert. Content can also be projected in the heading area using a `heading` directive.
|
|
4004
4004
|
*/
|
|
4005
4005
|
this.headingText = '';
|
|
4006
|
+
/**
|
|
4007
|
+
* The body text of the Alert. Content can also be projected into the body area using default projection.
|
|
4008
|
+
*/
|
|
4009
|
+
this.bodyText = '';
|
|
4010
|
+
/**
|
|
4011
|
+
* By default, an Alert is a "floating" notification. When set to "inline", these "floating" styles are replaced.
|
|
4012
|
+
*/
|
|
4013
|
+
this.inline = false;
|
|
4014
|
+
/**
|
|
4015
|
+
* Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
|
|
4016
|
+
*/
|
|
4017
|
+
this.hideIcon = false;
|
|
4018
|
+
/**
|
|
4019
|
+
* Allows the Alert to be dismissed.
|
|
4020
|
+
*/
|
|
4021
|
+
this.dismissible = true;
|
|
4006
4022
|
/**
|
|
4007
4023
|
* Event emitted when the Alert is dismissed.
|
|
4008
4024
|
*/
|
|
4009
4025
|
this.dismiss = new EventEmitter();
|
|
4010
4026
|
}
|
|
4011
|
-
get
|
|
4012
|
-
|
|
4027
|
+
get componentClasses() {
|
|
4028
|
+
const themeClass = this.theme === 'warning'
|
|
4013
4029
|
? 'alert-warning'
|
|
4014
4030
|
: this.theme === 'info'
|
|
4015
4031
|
? 'alert-info'
|
|
@@ -4018,23 +4034,48 @@ class AlertComponent {
|
|
|
4018
4034
|
: this.theme === 'success'
|
|
4019
4035
|
? 'alert-success'
|
|
4020
4036
|
: '';
|
|
4037
|
+
const inlineClass = this.inline ? ' alert-inline' : '';
|
|
4038
|
+
const dismissibleClass = this.dismissible ? ' alert-dismissible' : '';
|
|
4039
|
+
return themeClass + inlineClass + dismissibleClass;
|
|
4040
|
+
}
|
|
4041
|
+
get themeIconName() {
|
|
4042
|
+
return this.theme === 'warning'
|
|
4043
|
+
? 'exclamation-circle'
|
|
4044
|
+
: this.theme === 'info'
|
|
4045
|
+
? 'info-circle'
|
|
4046
|
+
: this.theme === 'danger'
|
|
4047
|
+
? 'times-circle'
|
|
4048
|
+
: this.theme === 'success'
|
|
4049
|
+
? 'check-circle'
|
|
4050
|
+
: '';
|
|
4021
4051
|
}
|
|
4022
4052
|
closeAlert() {
|
|
4053
|
+
if (!this.dismissible) {
|
|
4054
|
+
return;
|
|
4055
|
+
}
|
|
4023
4056
|
this.show = false;
|
|
4024
4057
|
this.dismiss.emit();
|
|
4025
4058
|
}
|
|
4026
4059
|
}
|
|
4027
4060
|
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4028
|
-
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"
|
|
4061
|
+
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n <ng-container *ngIf=\"!hideIcon\">\n <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n <span impdc-icon [name]=\"themeIconName\"></span>\n </span>\n </ng-container>\n\n <div class=\"alert-content\">\n <div class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n <span *ngIf=\"headingText\">{{ headingText }}</span>\n </div>\n\n <div\n #bodyContent\n class=\"alert-body\"\n [hidden]=\"!bodyContent.children.length\">\n <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n <ng-content></ng-content>\n\n <div\n #alertActions\n [hidden]=\"!alertActions.children.length\"\n class=\"alert-actions\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n </div>\n </div>\n\n <a\n *ngIf=\"dismissible\"\n class=\"close-icon\"\n (click)=\"closeAlert()\"\n data-bs-dismiss=\"alert\"\n aria-label=\"Close\">\n <span impdc-icon name=\"times\" theme=\"regular\"></span>\n </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
|
|
4029
4062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
4030
4063
|
type: Component,
|
|
4031
|
-
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"
|
|
4064
|
+
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n <ng-container *ngIf=\"!hideIcon\">\n <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n <span impdc-icon [name]=\"themeIconName\"></span>\n </span>\n </ng-container>\n\n <div class=\"alert-content\">\n <div class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n <span *ngIf=\"headingText\">{{ headingText }}</span>\n </div>\n\n <div\n #bodyContent\n class=\"alert-body\"\n [hidden]=\"!bodyContent.children.length\">\n <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n <ng-content></ng-content>\n\n <div\n #alertActions\n [hidden]=\"!alertActions.children.length\"\n class=\"alert-actions\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n </div>\n </div>\n\n <a\n *ngIf=\"dismissible\"\n class=\"close-icon\"\n (click)=\"closeAlert()\"\n data-bs-dismiss=\"alert\"\n aria-label=\"Close\">\n <span impdc-icon name=\"times\" theme=\"regular\"></span>\n </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"] }]
|
|
4032
4065
|
}], propDecorators: { theme: [{
|
|
4033
4066
|
type: Input
|
|
4034
4067
|
}], show: [{
|
|
4035
4068
|
type: Input
|
|
4036
4069
|
}], headingText: [{
|
|
4037
4070
|
type: Input
|
|
4071
|
+
}], bodyText: [{
|
|
4072
|
+
type: Input
|
|
4073
|
+
}], inline: [{
|
|
4074
|
+
type: Input
|
|
4075
|
+
}], hideIcon: [{
|
|
4076
|
+
type: Input
|
|
4077
|
+
}], dismissible: [{
|
|
4078
|
+
type: Input
|
|
4038
4079
|
}], dismiss: [{
|
|
4039
4080
|
type: Output
|
|
4040
4081
|
}] } });
|
|
@@ -4042,14 +4083,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4042
4083
|
class AlertModule {
|
|
4043
4084
|
}
|
|
4044
4085
|
AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4045
|
-
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
|
|
4046
|
-
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule] });
|
|
4086
|
+
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] });
|
|
4087
|
+
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] });
|
|
4047
4088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
|
|
4048
4089
|
type: NgModule,
|
|
4049
4090
|
args: [{
|
|
4050
|
-
imports: [CommonModule],
|
|
4091
|
+
imports: [CommonModule, IconModule],
|
|
4051
4092
|
declarations: [AlertComponent],
|
|
4052
|
-
exports: [AlertComponent]
|
|
4093
|
+
exports: [IconModule, AlertComponent]
|
|
4053
4094
|
}]
|
|
4054
4095
|
}] });
|
|
4055
4096
|
|
|
@@ -7590,22 +7631,24 @@ class PaginationComponent {
|
|
|
7590
7631
|
return Math.ceil(this.total / this.perPage);
|
|
7591
7632
|
}
|
|
7592
7633
|
get firstPageResult() {
|
|
7593
|
-
|
|
7634
|
+
const page = this._getPageClamped();
|
|
7635
|
+
if (this.total < 1 || page < 1 || this.perPage < 1) {
|
|
7594
7636
|
return 0;
|
|
7595
7637
|
}
|
|
7596
|
-
if (
|
|
7638
|
+
if (page === 1) {
|
|
7597
7639
|
return 1;
|
|
7598
7640
|
}
|
|
7599
|
-
if (
|
|
7641
|
+
if (page > Math.ceil(this.total / this.perPage)) {
|
|
7600
7642
|
return this.total;
|
|
7601
7643
|
}
|
|
7602
|
-
return (
|
|
7644
|
+
return (page - 1) * this.perPage + 1;
|
|
7603
7645
|
}
|
|
7604
7646
|
get lastPageResult() {
|
|
7605
|
-
|
|
7647
|
+
const page = this._getPageClamped();
|
|
7648
|
+
if (this.total <= 0 || page < 1 || this.perPage < 1) {
|
|
7606
7649
|
return 0;
|
|
7607
7650
|
}
|
|
7608
|
-
if (
|
|
7651
|
+
if (page === 1) {
|
|
7609
7652
|
if (this.total < this.perPage) {
|
|
7610
7653
|
return this.total;
|
|
7611
7654
|
}
|
|
@@ -7613,26 +7656,38 @@ class PaginationComponent {
|
|
|
7613
7656
|
return this.perPage;
|
|
7614
7657
|
}
|
|
7615
7658
|
}
|
|
7616
|
-
if (this.total < this.perPage *
|
|
7659
|
+
if (this.total < this.perPage * page) {
|
|
7617
7660
|
return this.total;
|
|
7618
7661
|
}
|
|
7619
7662
|
else {
|
|
7620
|
-
return this.perPage *
|
|
7663
|
+
return this.perPage * page;
|
|
7621
7664
|
}
|
|
7622
7665
|
}
|
|
7666
|
+
_getPageClamped(page) {
|
|
7667
|
+
page = Number(page || this.page || 0);
|
|
7668
|
+
if (isNaN(page) || page < 1) {
|
|
7669
|
+
return 1;
|
|
7670
|
+
}
|
|
7671
|
+
if (page > this.totalPages) {
|
|
7672
|
+
return this.totalPages;
|
|
7673
|
+
}
|
|
7674
|
+
return page;
|
|
7675
|
+
}
|
|
7623
7676
|
goToPreviousPage() {
|
|
7624
|
-
|
|
7677
|
+
const page = this._getPageClamped();
|
|
7678
|
+
if (page <= 1) {
|
|
7625
7679
|
return;
|
|
7626
7680
|
}
|
|
7627
|
-
const previousPage =
|
|
7681
|
+
const previousPage = page - 1;
|
|
7628
7682
|
this.page = previousPage;
|
|
7629
7683
|
this.goToPage.emit(previousPage);
|
|
7630
7684
|
}
|
|
7631
7685
|
goToNextPage() {
|
|
7632
|
-
|
|
7686
|
+
const page = this._getPageClamped();
|
|
7687
|
+
if (page >= this.totalPages) {
|
|
7633
7688
|
return;
|
|
7634
7689
|
}
|
|
7635
|
-
const nextPage =
|
|
7690
|
+
const nextPage = page + 1;
|
|
7636
7691
|
this.page = nextPage;
|
|
7637
7692
|
this.goToPage.emit(nextPage);
|
|
7638
7693
|
}
|
|
@@ -7640,25 +7695,20 @@ class PaginationComponent {
|
|
|
7640
7695
|
this.goToExactPage(target?.value);
|
|
7641
7696
|
}
|
|
7642
7697
|
goToExactPage(page) {
|
|
7643
|
-
|
|
7644
|
-
|
|
7645
|
-
|
|
7646
|
-
|
|
7647
|
-
|
|
7648
|
-
|
|
7649
|
-
|
|
7650
|
-
if (allowedPageNumber > this.totalPages) {
|
|
7651
|
-
allowedPageNumber = this.totalPages;
|
|
7652
|
-
}
|
|
7653
|
-
this.page = allowedPageNumber;
|
|
7654
|
-
this.goToPage.emit(allowedPageNumber);
|
|
7698
|
+
this.page = this._getPageClamped(page);
|
|
7699
|
+
this.goToPage.emit(this.page);
|
|
7700
|
+
}
|
|
7701
|
+
preventDefaultAndBlur(event) {
|
|
7702
|
+
// prevents PRM form submit
|
|
7703
|
+
event.preventDefault();
|
|
7704
|
+
event.target.blur();
|
|
7655
7705
|
}
|
|
7656
7706
|
}
|
|
7657
7707
|
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7658
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary" }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n
|
|
7708
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PaginationComponent, selector: "impdc-pagination, div[impdc-pagination]", inputs: { page: "page", perPage: "perPage", total: "total", summary: "summary" }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n [(ngModel)]=\"page\"\n maxlength=\"4\"\n (blur)=\"goToExactPageFromEvent($event)\"\n (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n <span class=\"total-pages\"> / {{ totalPages }} </span>\n </div>\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"Next\"\n (click)=\"goToNextPage()\"\n [disabled]=\"page >= totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"pagination-first-last-btns\"\n aria-label=\"Last Page\"\n (click)=\"goToExactPage(totalPages)\"\n [disabled]=\"page === totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n <i class=\"fas fa-chevron-right last\"></i>\n <!-- {{ totalPages }} -->\n </button>\n </div>\n </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }] });
|
|
7659
7709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
7660
7710
|
type: Component,
|
|
7661
|
-
args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n
|
|
7711
|
+
args: [{ selector: 'impdc-pagination, div[impdc-pagination]', template: "<div class=\"pagination-container\">\n <div class=\"mobile-pagination\">\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPreviousPage()\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n [disabled]=\"page === totalPages\"\n (click)=\"goToNextPage()\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n </div>\n\n <div class=\"desktop-pagination\">\n <div>\n <span class=\"summary\" [innerHTML]=\"summary\"></span>\n </div>\n <div class=\"pagination-actions\">\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"First Page\"\n class=\"pagination-first-last-btns\"\n (click)=\"goToExactPage(1)\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left first\"></i>\n <i class=\"fas fa-chevron-left\"></i>\n <!-- 1 -->\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"previous\"\n aria-label=\"Previous\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"page <= 1\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n <div class=\"page-change\">\n <input\n impdcInput\n [(ngModel)]=\"page\"\n maxlength=\"4\"\n (blur)=\"goToExactPageFromEvent($event)\"\n (keydown.enter)=\"preventDefaultAndBlur($event)\" />\n <span class=\"total-pages\"> / {{ totalPages }} </span>\n </div>\n <button\n impdcButton\n theme=\"secondary\"\n aria-label=\"Next\"\n (click)=\"goToNextPage()\"\n [disabled]=\"page >= totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n </button>\n <button\n impdcButton\n theme=\"secondary\"\n class=\"pagination-first-last-btns\"\n aria-label=\"Last Page\"\n (click)=\"goToExactPage(totalPages)\"\n [disabled]=\"page === totalPages\">\n <i class=\"fas fa-chevron-right\"></i>\n <i class=\"fas fa-chevron-right last\"></i>\n <!-- {{ totalPages }} -->\n </button>\n </div>\n </div>\n</div>\n", styles: [".pagination-container{background-color:var(--impd-color-white);padding:var(--impd-size-3) var(--impd-size-6);gap:1rem;color:var(--impd-color-gray-700, #374151)}@media (min-width: 640px){.pagination-container{padding-left:var(--impd-size-6);padding-right:var(--impd-size-6)}}.mobile-pagination{display:flex;gap:2rem;justify-content:space-between;align-items:center}@media (min-width: 640px){.mobile-pagination{display:none}}.desktop-pagination{display:none}@media (min-width: 640px){.desktop-pagination{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between;gap:2rem;flex-flow:wrap}}.summary{font-size:var(--impd-font-size-sm);line-height:var(--impd-size-5);font-weight:400;color:var(--impd-color-gray-700)}.pagination-actions{display:flex;flex-direction:row;gap:.4rem;flex-flow:wrap}.pagination-actions .first{margin-right:-1.2rem}.pagination-actions .last{margin-left:-1.2rem}.page-change{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:var(--impd-size-3_5, 1.4rem)}.page-change .form-control{min-width:4.275rem;max-width:6.3rem;text-align:center}.page-change .total-pages{padding:0 1.2rem}.pagination-first-last-btns{padding-left:1.325rem;padding-right:1.325rem}\n"] }]
|
|
7662
7712
|
}], propDecorators: { page: [{
|
|
7663
7713
|
type: Input
|
|
7664
7714
|
}], perPage: [{
|
|
@@ -7675,12 +7725,12 @@ class PaginationModule {
|
|
|
7675
7725
|
constructor() { }
|
|
7676
7726
|
}
|
|
7677
7727
|
PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
7678
|
-
PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule, ButtonModule, ImpdcFormsModule], exports: [ButtonModule, ImpdcFormsModule, PaginationComponent] });
|
|
7679
|
-
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
|
|
7728
|
+
PaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule], exports: [ButtonModule, ImpdcFormsModule, PaginationComponent] });
|
|
7729
|
+
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
|
|
7680
7730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, decorators: [{
|
|
7681
7731
|
type: NgModule,
|
|
7682
7732
|
args: [{
|
|
7683
|
-
imports: [CommonModule, ButtonModule, ImpdcFormsModule],
|
|
7733
|
+
imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule],
|
|
7684
7734
|
declarations: [PaginationComponent],
|
|
7685
7735
|
exports: [ButtonModule, ImpdcFormsModule, PaginationComponent]
|
|
7686
7736
|
}]
|