@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
|
@@ -4004,16 +4004,32 @@ class AlertComponent {
|
|
|
4004
4004
|
*/
|
|
4005
4005
|
this.show = false;
|
|
4006
4006
|
/**
|
|
4007
|
-
* The heading text of the Alert.
|
|
4007
|
+
* The heading text of the Alert. Content can also be projected in the heading area using a `heading` directive.
|
|
4008
4008
|
*/
|
|
4009
4009
|
this.headingText = '';
|
|
4010
|
+
/**
|
|
4011
|
+
* The body text of the Alert. Content can also be projected into the body area using default projection.
|
|
4012
|
+
*/
|
|
4013
|
+
this.bodyText = '';
|
|
4014
|
+
/**
|
|
4015
|
+
* By default, an Alert is a "floating" notification. When set to "inline", these "floating" styles are replaced.
|
|
4016
|
+
*/
|
|
4017
|
+
this.inline = false;
|
|
4018
|
+
/**
|
|
4019
|
+
* Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
|
|
4020
|
+
*/
|
|
4021
|
+
this.hideIcon = false;
|
|
4022
|
+
/**
|
|
4023
|
+
* Allows the Alert to be dismissed.
|
|
4024
|
+
*/
|
|
4025
|
+
this.dismissible = true;
|
|
4010
4026
|
/**
|
|
4011
4027
|
* Event emitted when the Alert is dismissed.
|
|
4012
4028
|
*/
|
|
4013
4029
|
this.dismiss = new EventEmitter();
|
|
4014
4030
|
}
|
|
4015
|
-
get
|
|
4016
|
-
|
|
4031
|
+
get componentClasses() {
|
|
4032
|
+
const themeClass = this.theme === 'warning'
|
|
4017
4033
|
? 'alert-warning'
|
|
4018
4034
|
: this.theme === 'info'
|
|
4019
4035
|
? 'alert-info'
|
|
@@ -4022,23 +4038,48 @@ class AlertComponent {
|
|
|
4022
4038
|
: this.theme === 'success'
|
|
4023
4039
|
? 'alert-success'
|
|
4024
4040
|
: '';
|
|
4041
|
+
const inlineClass = this.inline ? ' alert-inline' : '';
|
|
4042
|
+
const dismissibleClass = this.dismissible ? ' alert-dismissible' : '';
|
|
4043
|
+
return themeClass + inlineClass + dismissibleClass;
|
|
4044
|
+
}
|
|
4045
|
+
get themeIconName() {
|
|
4046
|
+
return this.theme === 'warning'
|
|
4047
|
+
? 'exclamation-circle'
|
|
4048
|
+
: this.theme === 'info'
|
|
4049
|
+
? 'info-circle'
|
|
4050
|
+
: this.theme === 'danger'
|
|
4051
|
+
? 'times-circle'
|
|
4052
|
+
: this.theme === 'success'
|
|
4053
|
+
? 'check-circle'
|
|
4054
|
+
: '';
|
|
4025
4055
|
}
|
|
4026
4056
|
closeAlert() {
|
|
4057
|
+
if (!this.dismissible) {
|
|
4058
|
+
return;
|
|
4059
|
+
}
|
|
4027
4060
|
this.show = false;
|
|
4028
4061
|
this.dismiss.emit();
|
|
4029
4062
|
}
|
|
4030
4063
|
}
|
|
4031
4064
|
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4032
|
-
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=\"
|
|
4065
|
+
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"] }] });
|
|
4033
4066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
4034
4067
|
type: Component,
|
|
4035
|
-
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"
|
|
4068
|
+
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"] }]
|
|
4036
4069
|
}], propDecorators: { theme: [{
|
|
4037
4070
|
type: Input
|
|
4038
4071
|
}], show: [{
|
|
4039
4072
|
type: Input
|
|
4040
4073
|
}], headingText: [{
|
|
4041
4074
|
type: Input
|
|
4075
|
+
}], bodyText: [{
|
|
4076
|
+
type: Input
|
|
4077
|
+
}], inline: [{
|
|
4078
|
+
type: Input
|
|
4079
|
+
}], hideIcon: [{
|
|
4080
|
+
type: Input
|
|
4081
|
+
}], dismissible: [{
|
|
4082
|
+
type: Input
|
|
4042
4083
|
}], dismiss: [{
|
|
4043
4084
|
type: Output
|
|
4044
4085
|
}] } });
|
|
@@ -4046,14 +4087,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4046
4087
|
class AlertModule {
|
|
4047
4088
|
}
|
|
4048
4089
|
AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4049
|
-
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
|
|
4050
|
-
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule] });
|
|
4090
|
+
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] });
|
|
4091
|
+
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] });
|
|
4051
4092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
|
|
4052
4093
|
type: NgModule,
|
|
4053
4094
|
args: [{
|
|
4054
|
-
imports: [CommonModule],
|
|
4095
|
+
imports: [CommonModule, IconModule],
|
|
4055
4096
|
declarations: [AlertComponent],
|
|
4056
|
-
exports: [AlertComponent]
|
|
4097
|
+
exports: [IconModule, AlertComponent]
|
|
4057
4098
|
}]
|
|
4058
4099
|
}] });
|
|
4059
4100
|
|
|
@@ -7616,22 +7657,24 @@ class PaginationComponent {
|
|
|
7616
7657
|
return Math.ceil(this.total / this.perPage);
|
|
7617
7658
|
}
|
|
7618
7659
|
get firstPageResult() {
|
|
7619
|
-
|
|
7660
|
+
const page = this._getPageClamped();
|
|
7661
|
+
if (this.total < 1 || page < 1 || this.perPage < 1) {
|
|
7620
7662
|
return 0;
|
|
7621
7663
|
}
|
|
7622
|
-
if (
|
|
7664
|
+
if (page === 1) {
|
|
7623
7665
|
return 1;
|
|
7624
7666
|
}
|
|
7625
|
-
if (
|
|
7667
|
+
if (page > Math.ceil(this.total / this.perPage)) {
|
|
7626
7668
|
return this.total;
|
|
7627
7669
|
}
|
|
7628
|
-
return (
|
|
7670
|
+
return (page - 1) * this.perPage + 1;
|
|
7629
7671
|
}
|
|
7630
7672
|
get lastPageResult() {
|
|
7631
|
-
|
|
7673
|
+
const page = this._getPageClamped();
|
|
7674
|
+
if (this.total <= 0 || page < 1 || this.perPage < 1) {
|
|
7632
7675
|
return 0;
|
|
7633
7676
|
}
|
|
7634
|
-
if (
|
|
7677
|
+
if (page === 1) {
|
|
7635
7678
|
if (this.total < this.perPage) {
|
|
7636
7679
|
return this.total;
|
|
7637
7680
|
}
|
|
@@ -7639,26 +7682,38 @@ class PaginationComponent {
|
|
|
7639
7682
|
return this.perPage;
|
|
7640
7683
|
}
|
|
7641
7684
|
}
|
|
7642
|
-
if (this.total < this.perPage *
|
|
7685
|
+
if (this.total < this.perPage * page) {
|
|
7643
7686
|
return this.total;
|
|
7644
7687
|
}
|
|
7645
7688
|
else {
|
|
7646
|
-
return this.perPage *
|
|
7689
|
+
return this.perPage * page;
|
|
7647
7690
|
}
|
|
7648
7691
|
}
|
|
7692
|
+
_getPageClamped(page) {
|
|
7693
|
+
page = Number(page || this.page || 0);
|
|
7694
|
+
if (isNaN(page) || page < 1) {
|
|
7695
|
+
return 1;
|
|
7696
|
+
}
|
|
7697
|
+
if (page > this.totalPages) {
|
|
7698
|
+
return this.totalPages;
|
|
7699
|
+
}
|
|
7700
|
+
return page;
|
|
7701
|
+
}
|
|
7649
7702
|
goToPreviousPage() {
|
|
7650
|
-
|
|
7703
|
+
const page = this._getPageClamped();
|
|
7704
|
+
if (page <= 1) {
|
|
7651
7705
|
return;
|
|
7652
7706
|
}
|
|
7653
|
-
const previousPage =
|
|
7707
|
+
const previousPage = page - 1;
|
|
7654
7708
|
this.page = previousPage;
|
|
7655
7709
|
this.goToPage.emit(previousPage);
|
|
7656
7710
|
}
|
|
7657
7711
|
goToNextPage() {
|
|
7658
|
-
|
|
7712
|
+
const page = this._getPageClamped();
|
|
7713
|
+
if (page >= this.totalPages) {
|
|
7659
7714
|
return;
|
|
7660
7715
|
}
|
|
7661
|
-
const nextPage =
|
|
7716
|
+
const nextPage = page + 1;
|
|
7662
7717
|
this.page = nextPage;
|
|
7663
7718
|
this.goToPage.emit(nextPage);
|
|
7664
7719
|
}
|
|
@@ -7666,25 +7721,20 @@ class PaginationComponent {
|
|
|
7666
7721
|
this.goToExactPage(target === null || target === void 0 ? void 0 : target.value);
|
|
7667
7722
|
}
|
|
7668
7723
|
goToExactPage(page) {
|
|
7669
|
-
|
|
7670
|
-
|
|
7671
|
-
|
|
7672
|
-
|
|
7673
|
-
|
|
7674
|
-
|
|
7675
|
-
|
|
7676
|
-
if (allowedPageNumber > this.totalPages) {
|
|
7677
|
-
allowedPageNumber = this.totalPages;
|
|
7678
|
-
}
|
|
7679
|
-
this.page = allowedPageNumber;
|
|
7680
|
-
this.goToPage.emit(allowedPageNumber);
|
|
7724
|
+
this.page = this._getPageClamped(page);
|
|
7725
|
+
this.goToPage.emit(this.page);
|
|
7726
|
+
}
|
|
7727
|
+
preventDefaultAndBlur(event) {
|
|
7728
|
+
// prevents PRM form submit
|
|
7729
|
+
event.preventDefault();
|
|
7730
|
+
event.target.blur();
|
|
7681
7731
|
}
|
|
7682
7732
|
}
|
|
7683
7733
|
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7684
|
-
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
|
|
7734
|
+
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"] }] });
|
|
7685
7735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
7686
7736
|
type: Component,
|
|
7687
|
-
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
|
|
7737
|
+
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"] }]
|
|
7688
7738
|
}], propDecorators: { page: [{
|
|
7689
7739
|
type: Input
|
|
7690
7740
|
}], perPage: [{
|
|
@@ -7701,12 +7751,12 @@ class PaginationModule {
|
|
|
7701
7751
|
constructor() { }
|
|
7702
7752
|
}
|
|
7703
7753
|
PaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
7704
|
-
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] });
|
|
7705
|
-
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
|
|
7754
|
+
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] });
|
|
7755
|
+
PaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule, ButtonModule, ImpdcFormsModule] });
|
|
7706
7756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PaginationModule, decorators: [{
|
|
7707
7757
|
type: NgModule,
|
|
7708
7758
|
args: [{
|
|
7709
|
-
imports: [CommonModule, ButtonModule, ImpdcFormsModule],
|
|
7759
|
+
imports: [CommonModule, ButtonModule, FormsModule, ImpdcFormsModule],
|
|
7710
7760
|
declarations: [PaginationComponent],
|
|
7711
7761
|
exports: [ButtonModule, ImpdcFormsModule, PaginationComponent]
|
|
7712
7762
|
}]
|