@seniorsistemas/angular-components 17.27.1-feature-sds-110-35ee9b4f → 17.27.1-fix-interactive-content-46e38731
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/button/lib/button/button.component.d.ts +1 -1
- package/checkbox/lib/checkbox/checkbox.component.d.ts +11 -13
- package/checkbox/public-api.d.ts +1 -4
- package/checkbox-list/index.d.ts +5 -0
- package/checkbox-list/lib/checkbox-list/checkbox-list.component.d.ts +21 -0
- package/checkbox-list/lib/checkbox-list/checkbox-list.module.d.ts +9 -0
- package/checkbox-list/lib/checkbox-list/models/checkbox-list-data.d.ts +5 -0
- package/checkbox-list/lib/checkbox-list/models/checkbox-list-state.d.ts +7 -0
- package/checkbox-list/package.json +3 -0
- package/checkbox-list/public-api.d.ts +4 -0
- package/dynamic-form/lib/dynamic-form/dynamic-form.module.d.ts +35 -36
- package/dynamic-form/lib/dynamic-form/form-field/configurations/fields/checkbox-field.d.ts +3 -3
- package/dynamic-form/lib/dynamic-form/form-field/configurations/fields/select-field.d.ts +2 -0
- package/fesm2022/seniorsistemas-angular-components-button.mjs +4 -2
- package/fesm2022/seniorsistemas-angular-components-button.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-checkbox-list.mjs +151 -0
- package/fesm2022/seniorsistemas-angular-components-checkbox-list.mjs.map +1 -0
- package/fesm2022/seniorsistemas-angular-components-checkbox.mjs +33 -110
- package/fesm2022/seniorsistemas-angular-components-checkbox.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs +19 -22
- package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-fieldset.mjs +7 -7
- package/fesm2022/seniorsistemas-angular-components-fieldset.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-interactive-content.mjs +65 -0
- package/fesm2022/seniorsistemas-angular-components-interactive-content.mjs.map +1 -0
- package/fesm2022/seniorsistemas-angular-components-paginator.mjs +145 -0
- package/fesm2022/seniorsistemas-angular-components-paginator.mjs.map +1 -0
- package/fesm2022/seniorsistemas-angular-components-select.mjs +741 -0
- package/fesm2022/seniorsistemas-angular-components-select.mjs.map +1 -0
- package/fesm2022/seniorsistemas-angular-components-star-rating.mjs +4 -5
- package/fesm2022/seniorsistemas-angular-components-star-rating.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-table-header.mjs +8 -8
- package/fesm2022/seniorsistemas-angular-components-table-header.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-thumbnails.mjs +7 -7
- package/fesm2022/seniorsistemas-angular-components-thumbnails.mjs.map +1 -1
- package/fieldset/lib/fieldset/fieldset.component.d.ts +1 -1
- package/fieldset/lib/fieldset/fieldset.module.d.ts +2 -2
- package/interactive-content/index.d.ts +5 -0
- package/interactive-content/lib/interactive-content/interactive-content.directive.d.ts +17 -0
- package/interactive-content/package.json +3 -0
- package/interactive-content/public-api.d.ts +1 -0
- package/package.json +35 -15
- package/paginator/index.d.ts +5 -0
- package/paginator/lib/models/paginator.models.d.ts +14 -0
- package/paginator/lib/paginator/paginator.component.d.ts +30 -0
- package/paginator/package.json +3 -0
- package/paginator/public-api.d.ts +2 -0
- package/table-header/lib/table-header/table-header-checkbox.component.d.ts +3 -3
- package/table-header/lib/table-header/table-header-checkox.module.d.ts +2 -2
- package/tailwind.css +263 -0
- package/thumbnails/lib/thumbnails/thumbnails.module.d.ts +2 -2
- package/accessibility-events/index.d.ts +0 -5
- package/accessibility-events/lib/accessibility-events/accessibility-events.module.d.ts +0 -8
- package/accessibility-events/lib/accessibility-events/directives/accessibility-event.directive.d.ts +0 -15
- package/accessibility-events/package.json +0 -3
- package/accessibility-events/public-api.d.ts +0 -2
- package/checkbox/lib/checkbox/checkbox.module.d.ts +0 -9
- package/checkbox/lib/checkbox/models/checkbox-data.d.ts +0 -5
- package/checkbox/lib/checkbox/models/checkbox-state.d.ts +0 -7
- package/fesm2022/seniorsistemas-angular-components-accessibility-events.mjs +0 -77
- package/fesm2022/seniorsistemas-angular-components-accessibility-events.mjs.map +0 -1
|
@@ -4,8 +4,8 @@ import { EventEmitter, Component, Input, ContentChild, Output, NgModule } from '
|
|
|
4
4
|
import { HeaderComponent } from '@seniorsistemas/angular-components/structure';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as i2 from '@seniorsistemas/angular-components/
|
|
8
|
-
import {
|
|
7
|
+
import * as i2 from '@seniorsistemas/angular-components/interactive-content';
|
|
8
|
+
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
|
|
9
9
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
10
10
|
|
|
11
11
|
class FieldsetComponent {
|
|
@@ -26,7 +26,7 @@ class FieldsetComponent {
|
|
|
26
26
|
this.afterToggle.next({ collapsed: this.active, originalEvent });
|
|
27
27
|
}
|
|
28
28
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FieldsetComponent, selector: "s-fieldset", inputs: { legend: "legend", toggleable: "toggleable", icon: "icon", destroyOnHide: "destroyOnHide" }, outputs: { beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderComponent, descendants: true }], ngImport: i0, template: "<fieldset
|
|
29
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FieldsetComponent, selector: "s-fieldset", inputs: { legend: "legend", toggleable: "toggleable", icon: "icon", destroyOnHide: "destroyOnHide" }, outputs: { beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderComponent, descendants: true }], ngImport: i0, template: "<fieldset\n class=\"fieldset\"\n [class.fieldset-togglable]=\"toggleable\"\n>\n <legend\n class=\"fieldset-title\" \n (sInteractiveContent)=\"toggleActive($event)\"\n >\n <ng-container *ngIf=\"toggleable\">\n @if (active) {\n <i class=\"fas fa-plus\"></i>\n } @else {\n <i class=\"fas fa-minus\"></i>\n }\n </ng-container>\n @if (headerTemplate && headerTemplate.template) {\n <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n } @else {\n <i\n *ngIf=\"icon\"\n [class]=\"icon\"\n ></i>\n {{ legend }}\n }\n </legend>\n @if (destroyOnHide ? (toggleable ? active : true) : true) {\n <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n <ng-content></ng-content>\n </div>\n }\n</fieldset>\n", styles: [".fieldset{background-color:#fff;border:1px solid #dedce5;border-radius:6px;margin-bottom:10px;min-height:4.5em;padding:6px 8px}.fieldset-title{align-items:center;color:#212533;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;display:flex;padding:0 4px;gap:4px;margin-left:16px;-webkit-user-select:none;user-select:none}.fieldset-togglable .fieldset-title,.fieldset-togglable .fieldset-title *{cursor:pointer}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled"], outputs: ["sInteractiveContent"] }], animations: [
|
|
30
30
|
trigger('toggleAnimation', [
|
|
31
31
|
transition(':enter', [
|
|
32
32
|
style({ opacity: 0, height: 0 }),
|
|
@@ -58,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
58
58
|
state('closed', style({ opacity: 0, height: 0 })),
|
|
59
59
|
transition('open <=> closed', animate('300ms ease')),
|
|
60
60
|
]),
|
|
61
|
-
], template: "<fieldset
|
|
61
|
+
], template: "<fieldset\n class=\"fieldset\"\n [class.fieldset-togglable]=\"toggleable\"\n>\n <legend\n class=\"fieldset-title\" \n (sInteractiveContent)=\"toggleActive($event)\"\n >\n <ng-container *ngIf=\"toggleable\">\n @if (active) {\n <i class=\"fas fa-plus\"></i>\n } @else {\n <i class=\"fas fa-minus\"></i>\n }\n </ng-container>\n @if (headerTemplate && headerTemplate.template) {\n <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n } @else {\n <i\n *ngIf=\"icon\"\n [class]=\"icon\"\n ></i>\n {{ legend }}\n }\n </legend>\n @if (destroyOnHide ? (toggleable ? active : true) : true) {\n <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n <ng-content></ng-content>\n </div>\n }\n</fieldset>\n", styles: [".fieldset{background-color:#fff;border:1px solid #dedce5;border-radius:6px;margin-bottom:10px;min-height:4.5em;padding:6px 8px}.fieldset-title{align-items:center;color:#212533;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;display:flex;padding:0 4px;gap:4px;margin-left:16px;-webkit-user-select:none;user-select:none}.fieldset-togglable .fieldset-title,.fieldset-togglable .fieldset-title *{cursor:pointer}.hidden{display:none}\n"] }]
|
|
62
62
|
}], propDecorators: { legend: [{
|
|
63
63
|
type: Input
|
|
64
64
|
}], toggleable: [{
|
|
@@ -78,13 +78,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
78
78
|
|
|
79
79
|
class FieldsetModule {
|
|
80
80
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
81
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FieldsetModule, declarations: [FieldsetComponent], imports: [CommonModule,
|
|
82
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetModule, imports: [CommonModule,
|
|
81
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FieldsetModule, declarations: [FieldsetComponent], imports: [CommonModule, InteractiveContentDirective, BrowserAnimationsModule], exports: [FieldsetComponent] });
|
|
82
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetModule, imports: [CommonModule, BrowserAnimationsModule] });
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetModule, decorators: [{
|
|
85
85
|
type: NgModule,
|
|
86
86
|
args: [{
|
|
87
|
-
imports: [CommonModule,
|
|
87
|
+
imports: [CommonModule, InteractiveContentDirective, BrowserAnimationsModule],
|
|
88
88
|
declarations: [FieldsetComponent],
|
|
89
89
|
exports: [FieldsetComponent],
|
|
90
90
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seniorsistemas-angular-components-fieldset.mjs","sources":["../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.ts","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.html","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.module.ts","../../projects/angular-components/fieldset/src/seniorsistemas-angular-components-fieldset.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from \"@angular/animations\";\nimport { Component, ContentChild, EventEmitter, Input, Output } from \"@angular/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-fieldset.mjs","sources":["../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.ts","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.html","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.module.ts","../../projects/angular-components/fieldset/src/seniorsistemas-angular-components-fieldset.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from \"@angular/animations\";\nimport { Component, ContentChild, EventEmitter, Input, Output } from \"@angular/core\";\n\nimport { HeaderComponent } from \"@seniorsistemas/angular-components/structure\";\n\nimport { FieldSetToggle } from \"./fieldset.models\";\n\n@Component({\n selector: \"s-fieldset\",\n templateUrl: \"./fieldset.component.html\",\n styleUrls: [\"./fieldset.component.scss\"],\n animations: [\n trigger('toggleAnimation', [\n transition(':enter', [\n style({ opacity: 0, height: 0 }),\n animate('300ms ease-out', style({ opacity: 1, height: '*' })),\n ]),\n transition(':leave', [\n style({ opacity: 1, height: '*' }),\n animate('300ms ease-in', style({ opacity: 0, height: 0 })),\n ]),\n state('open', style({ opacity: 1, height: '*' })),\n state('closed', style({ opacity: 0, height: 0 })),\n transition('open <=> closed', animate('300ms ease')),\n ]),\n ],\n})\nexport class FieldsetComponent {\n @Input() legend = '';\n @Input() toggleable = false;\n @Input() icon = '';\n @Input() destroyOnHide = true;\n @ContentChild(HeaderComponent) readonly headerTemplate: HeaderComponent | undefined;\n\n @Output() beforeToggle = new EventEmitter<FieldSetToggle>();\n @Output() afterToggle = new EventEmitter<FieldSetToggle>();\n active = true;\n\n toggleActive(originalEvent: PointerEvent | KeyboardEvent) {\n if (!this.toggleable) {\n return;\n }\n this.beforeToggle.next({ collapsed: this.active, originalEvent })\n this.active = !this.active;\n this.afterToggle.next({ collapsed: this.active, originalEvent })\n }\n}\n","<fieldset\n class=\"fieldset\"\n [class.fieldset-togglable]=\"toggleable\"\n>\n <legend\n class=\"fieldset-title\" \n (sInteractiveContent)=\"toggleActive($event)\"\n >\n <ng-container *ngIf=\"toggleable\">\n @if (active) {\n <i class=\"fas fa-plus\"></i>\n } @else {\n <i class=\"fas fa-minus\"></i>\n }\n </ng-container>\n @if (headerTemplate && headerTemplate.template) {\n <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n } @else {\n <i\n *ngIf=\"icon\"\n [class]=\"icon\"\n ></i>\n {{ legend }}\n }\n </legend>\n @if (destroyOnHide ? (toggleable ? active : true) : true) {\n <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n <ng-content></ng-content>\n </div>\n }\n</fieldset>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\n\nimport { FieldsetComponent } from './fieldset.component';\n\n@NgModule({\n imports: [CommonModule, InteractiveContentDirective, BrowserAnimationsModule],\n declarations: [FieldsetComponent],\n exports: [FieldsetComponent],\n})\nexport class FieldsetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MA2Ba,iBAAiB,CAAA;IACjB,MAAM,GAAG,EAAE,CAAC;IACZ,UAAU,GAAG,KAAK,CAAC;IACnB,IAAI,GAAG,EAAE,CAAC;IACV,aAAa,GAAG,IAAI,CAAC;AACU,IAAA,cAAc,CAA8B;AAE1E,IAAA,YAAY,GAAG,IAAI,YAAY,EAAkB,CAAC;AAClD,IAAA,WAAW,GAAG,IAAI,YAAY,EAAkB,CAAC;IAC3D,MAAM,GAAG,IAAI,CAAC;AAEd,IAAA,YAAY,CAAC,aAA2C,EAAA;AACpD,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,OAAO;SACV;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;AACjE,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;KACnE;wGAlBQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EAKZ,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,eAAe,EChCjC,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,w9BA+BA,EDpBgB,MAAA,EAAA,CAAA,gcAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA;YACR,OAAO,CAAC,iBAAiB,EAAE;gBACvB,UAAU,CAAC,QAAQ,EAAE;oBACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAChC,oBAAA,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;iBAChE,CAAC;gBACF,UAAU,CAAC,QAAQ,EAAE;oBACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAClC,oBAAA,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;iBAC7D,CAAC;AACF,gBAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;AACjD,gBAAA,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;AACjD,gBAAA,UAAU,CAAC,iBAAiB,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;aACvD,CAAC;AACL,SAAA,EAAA,CAAA,CAAA;;4FAEQ,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBApB7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAGV,UAAA,EAAA;wBACR,OAAO,CAAC,iBAAiB,EAAE;4BACvB,UAAU,CAAC,QAAQ,EAAE;gCACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAChC,gCAAA,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;6BAChE,CAAC;4BACF,UAAU,CAAC,QAAQ,EAAE;gCACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAClC,gCAAA,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC7D,CAAC;AACF,4BAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;AACjD,4BAAA,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;AACjD,4BAAA,UAAU,CAAC,iBAAiB,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;yBACvD,CAAC;AACL,qBAAA,EAAA,QAAA,EAAA,w9BAAA,EAAA,MAAA,EAAA,CAAA,gcAAA,CAAA,EAAA,CAAA;8BAGQ,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACkC,cAAc,EAAA,CAAA;sBAArD,YAAY;uBAAC,eAAe,CAAA;gBAEnB,YAAY,EAAA,CAAA;sBAArB,MAAM;gBACG,WAAW,EAAA,CAAA;sBAApB,MAAM;;;MEtBE,cAAc,CAAA;wGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAd,cAAc,EAAA,YAAA,EAAA,CAHR,iBAAiB,CADtB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,2BAA2B,EAAE,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAElE,iBAAiB,CAAA,EAAA,CAAA,CAAA;yGAElB,cAAc,EAAA,OAAA,EAAA,CAJb,YAAY,EAA+B,uBAAuB,CAAA,EAAA,CAAA,CAAA;;4FAInE,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,2BAA2B,EAAE,uBAAuB,CAAC;oBAC7E,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC/B,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { output, input, Directive } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class InteractiveContentDirective {
|
|
5
|
+
elementRef;
|
|
6
|
+
activated = output({ alias: 'sInteractiveContent' });
|
|
7
|
+
focusable = input(true);
|
|
8
|
+
disabled = input(false);
|
|
9
|
+
EVENT_LISTENER = (event) => {
|
|
10
|
+
if (this.disabled()) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
if (event instanceof KeyboardEvent) {
|
|
14
|
+
const key = event.key;
|
|
15
|
+
const validKeys = ['Enter', ' '];
|
|
16
|
+
if (!validKeys.includes(key)) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
this.activated.emit(event);
|
|
21
|
+
};
|
|
22
|
+
constructor(elementRef) {
|
|
23
|
+
this.elementRef = elementRef;
|
|
24
|
+
}
|
|
25
|
+
ngOnInit() {
|
|
26
|
+
this.setTabIndex();
|
|
27
|
+
this.checkAccessbilityEvents();
|
|
28
|
+
}
|
|
29
|
+
setTabIndex() {
|
|
30
|
+
if (this.disabled() || !this.focusable()) {
|
|
31
|
+
this.element.tabIndex = -1;
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (this.element.tabIndex === undefined || this.element.tabIndex < 0) {
|
|
35
|
+
this.element.tabIndex = 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
checkAccessbilityEvents() {
|
|
39
|
+
this.element.addEventListener('click', this.EVENT_LISTENER);
|
|
40
|
+
this.element.addEventListener('keydown', this.EVENT_LISTENER);
|
|
41
|
+
}
|
|
42
|
+
get element() {
|
|
43
|
+
return this.elementRef.nativeElement;
|
|
44
|
+
}
|
|
45
|
+
ngOnDestroy() {
|
|
46
|
+
this.element.removeEventListener('click', this.EVENT_LISTENER);
|
|
47
|
+
this.element.removeEventListener('keydown', this.EVENT_LISTENER);
|
|
48
|
+
}
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InteractiveContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
50
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: InteractiveContentDirective, isStandalone: true, selector: "[sInteractiveContent]", inputs: { focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "sInteractiveContent" }, ngImport: i0 });
|
|
51
|
+
}
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InteractiveContentDirective, decorators: [{
|
|
53
|
+
type: Directive,
|
|
54
|
+
args: [{
|
|
55
|
+
selector: '[sInteractiveContent]',
|
|
56
|
+
standalone: true,
|
|
57
|
+
}]
|
|
58
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Generated bundle index. Do not edit.
|
|
62
|
+
*/
|
|
63
|
+
|
|
64
|
+
export { InteractiveContentDirective };
|
|
65
|
+
//# sourceMappingURL=seniorsistemas-angular-components-interactive-content.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-interactive-content.mjs","sources":["../../projects/angular-components/interactive-content/src/lib/interactive-content/interactive-content.directive.ts","../../projects/angular-components/interactive-content/src/seniorsistemas-angular-components-interactive-content.ts"],"sourcesContent":["import { Directive, ElementRef, OnInit, OnDestroy, input, output } from '@angular/core';\n\n@Directive({\n selector: '[sInteractiveContent]',\n standalone: true,\n})\nexport class InteractiveContentDirective implements OnInit, OnDestroy {\n public activated = output<PointerEvent | KeyboardEvent>({ alias: 'sInteractiveContent' });\n public focusable = input(true);\n public disabled = input(false);\n\n private readonly EVENT_LISTENER = (event: Event) => {\n if (this.disabled()) {\n return;\n }\n\n if (event instanceof KeyboardEvent) {\n const key = event.key;\n const validKeys = ['Enter', ' '];\n if (!validKeys.includes(key)) {\n return;\n }\n }\n this.activated.emit(event as PointerEvent | KeyboardEvent);\n };\n\n constructor(private readonly elementRef: ElementRef<HTMLElement>) {}\n\n public ngOnInit(): void {\n this.setTabIndex();\n this.checkAccessbilityEvents();\n }\n\n private setTabIndex() {\n if (this.disabled() || !this.focusable()) {\n this.element.tabIndex = -1;\n return;\n }\n\n if (this.element.tabIndex === undefined || this.element.tabIndex < 0) {\n this.element.tabIndex = 0;\n }\n }\n\n private checkAccessbilityEvents() {\n this.element.addEventListener('click', this.EVENT_LISTENER);\n this.element.addEventListener('keydown', this.EVENT_LISTENER);\n }\n\n private get element() {\n return this.elementRef.nativeElement;\n }\n\n ngOnDestroy(): void {\n this.element.removeEventListener('click', this.EVENT_LISTENER);\n this.element.removeEventListener('keydown', this.EVENT_LISTENER);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,2BAA2B,CAAA;AAoBP,IAAA,UAAA,CAAA;IAnBtB,SAAS,GAAG,MAAM,CAA+B,EAAE,KAAK,EAAE,qBAAqB,EAAE,CAAC,CAAC;AACnF,IAAA,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACxB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AAEd,IAAA,cAAc,GAAG,CAAC,KAAY,KAAI;AAC/C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjB,OAAO;SACV;AAED,QAAA,IAAI,KAAK,YAAY,aAAa,EAAE;AAChC,YAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;AACtB,YAAA,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAC1B,OAAO;aACV;SACJ;AACD,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAqC,CAAC,CAAC;AAC/D,KAAC,CAAC;AAEF,IAAA,WAAA,CAA6B,UAAmC,EAAA;QAAnC,IAAU,CAAA,UAAA,GAAV,UAAU,CAAyB;KAAI;IAE7D,QAAQ,GAAA;QACX,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAEO,WAAW,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;AACtC,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC3B,OAAO;SACV;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,EAAE;AAClE,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;SAC7B;KACJ;IAEO,uBAAuB,GAAA;QAC3B,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACjE;AAED,IAAA,IAAY,OAAO,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;KACxC;IAED,WAAW,GAAA;QACP,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/D,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACpE;wGAlDQ,2BAA2B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;4FAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAJvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA,CAAA;;;ACLD;;AAEG;;;;"}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, model, output, effect, computed, signal, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/forms';
|
|
4
|
+
import { FormsModule } from '@angular/forms';
|
|
5
|
+
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
|
|
6
|
+
import { SelectComponent } from '@seniorsistemas/angular-components/select';
|
|
7
|
+
import * as i2 from '@ngx-translate/core';
|
|
8
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
9
|
+
|
|
10
|
+
class PaginatorComponent {
|
|
11
|
+
totalRecords = input.required();
|
|
12
|
+
rows = model(10);
|
|
13
|
+
rowsPerPageOptions = input([10, 20, 50, 100, 200]);
|
|
14
|
+
pageChange = output();
|
|
15
|
+
currentPageEffect = effect(() => {
|
|
16
|
+
const page = this.currentPage() - 1;
|
|
17
|
+
this.pageChange.emit({
|
|
18
|
+
page,
|
|
19
|
+
pageCount: this.totalPages(),
|
|
20
|
+
rows: this.rows(),
|
|
21
|
+
first: this.rows() * page,
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
MAX_PAGE_BUTTONS = 5;
|
|
25
|
+
hasPreviousPage = computed(() => {
|
|
26
|
+
const previousPage = this.currentPage() - 1;
|
|
27
|
+
return previousPage >= 1;
|
|
28
|
+
});
|
|
29
|
+
hasNextPage = computed(() => {
|
|
30
|
+
const nextPage = this.currentPage() + 1;
|
|
31
|
+
return nextPage <= this.totalPages();
|
|
32
|
+
});
|
|
33
|
+
currentPage = signal(1);
|
|
34
|
+
buttons = computed(() => {
|
|
35
|
+
const navigationPageButtons = [];
|
|
36
|
+
const maxPageButtons = this.MAX_PAGE_BUTTONS;
|
|
37
|
+
const currentPage = this.currentPage();
|
|
38
|
+
const middle = Math.floor(maxPageButtons / 2);
|
|
39
|
+
const _startPage = currentPage - middle;
|
|
40
|
+
let startPage = _startPage < 1 ? 1 : _startPage;
|
|
41
|
+
const _endPage = startPage + maxPageButtons - 1;
|
|
42
|
+
const endPageIsMoreThanTotalPages = _endPage > this.totalPages();
|
|
43
|
+
if (endPageIsMoreThanTotalPages) {
|
|
44
|
+
const diff = _endPage - this.totalPages();
|
|
45
|
+
const canModifyStartPage = startPage - diff >= 1;
|
|
46
|
+
if (canModifyStartPage) {
|
|
47
|
+
startPage = startPage - diff;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
const endPage = endPageIsMoreThanTotalPages ? this.totalPages() : _endPage;
|
|
51
|
+
for (let i = startPage; i <= endPage; i++) {
|
|
52
|
+
navigationPageButtons.push({
|
|
53
|
+
clicked: (page) => this.goToPage(page.pageIndex),
|
|
54
|
+
pageIndex: i,
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
return [
|
|
58
|
+
this.FIRST_PAGE_BUTTON,
|
|
59
|
+
this.PREVIOUS_PAGE_BUTTON,
|
|
60
|
+
...navigationPageButtons,
|
|
61
|
+
this.NEXT_PAGE_BUTTON,
|
|
62
|
+
this.LAST_PAGE_BUTTON,
|
|
63
|
+
];
|
|
64
|
+
});
|
|
65
|
+
FIRST_PAGE_BUTTON = {
|
|
66
|
+
clicked: this.goFirstPage.bind(this),
|
|
67
|
+
icon: 'fas fa-step-backward',
|
|
68
|
+
validate: computed(() => {
|
|
69
|
+
return !this.hasPreviousPage();
|
|
70
|
+
}),
|
|
71
|
+
};
|
|
72
|
+
PREVIOUS_PAGE_BUTTON = {
|
|
73
|
+
clicked: this.goPreviousPage.bind(this),
|
|
74
|
+
icon: 'fas fa-caret-left',
|
|
75
|
+
validate: computed(() => {
|
|
76
|
+
return !this.hasPreviousPage();
|
|
77
|
+
}),
|
|
78
|
+
};
|
|
79
|
+
LAST_PAGE_BUTTON = {
|
|
80
|
+
clicked: this.goLastPage.bind(this),
|
|
81
|
+
icon: 'fas fa-step-forward',
|
|
82
|
+
validate: computed(() => {
|
|
83
|
+
return !this.hasNextPage();
|
|
84
|
+
}),
|
|
85
|
+
};
|
|
86
|
+
NEXT_PAGE_BUTTON = {
|
|
87
|
+
clicked: this.goNextPage.bind(this),
|
|
88
|
+
icon: 'fas fa-caret-right',
|
|
89
|
+
validate: computed(() => {
|
|
90
|
+
return !this.hasNextPage();
|
|
91
|
+
}),
|
|
92
|
+
};
|
|
93
|
+
totalPages = computed(() => {
|
|
94
|
+
const totalRecords = this.totalRecords();
|
|
95
|
+
const _pages = totalRecords / this.rows();
|
|
96
|
+
const pages = Math.ceil(_pages);
|
|
97
|
+
const isExactPages = _pages === pages;
|
|
98
|
+
return isExactPages ? pages : pages + 1;
|
|
99
|
+
});
|
|
100
|
+
ngOnDestroy() {
|
|
101
|
+
this.currentPageEffect.destroy();
|
|
102
|
+
}
|
|
103
|
+
rowsPerPageChange() {
|
|
104
|
+
if (this.currentPage() !== 1) {
|
|
105
|
+
this.goToPage(1);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
activatedButton(button) {
|
|
109
|
+
button.clicked(button);
|
|
110
|
+
}
|
|
111
|
+
goFirstPage() {
|
|
112
|
+
this.goToPage(1);
|
|
113
|
+
}
|
|
114
|
+
goNextPage() {
|
|
115
|
+
if (!this.hasNextPage()) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
this.currentPage.update((value) => value + 1);
|
|
119
|
+
}
|
|
120
|
+
goPreviousPage() {
|
|
121
|
+
if (!this.hasPreviousPage()) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
this.currentPage.update((value) => value - 1);
|
|
125
|
+
}
|
|
126
|
+
goLastPage() {
|
|
127
|
+
this.goToPage(this.totalPages());
|
|
128
|
+
}
|
|
129
|
+
goToPage(pageIndex) {
|
|
130
|
+
this.currentPage.set(pageIndex);
|
|
131
|
+
}
|
|
132
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PaginatorComponent, isStandalone: true, selector: "s-paginator", inputs: { totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"flex justify-between\">\n <section class=\"flex items-center gap-2\">\n <div\n class=\"inline-block h-8 divide-x divide-grayscale-30 overflow-hidden rounded-md border border-grayscale-30\"\n >\n @for (btn of buttons(); track $index) {\n @let active = btn.pageIndex === currentPage();\n <button\n [class.bg-criticality-blue]=\"active\"\n [class.text-grayscale-0]=\"active\"\n [class.text-criticality-blue]=\"!active\"\n (sInteractiveContent)=\"activatedButton(btn)\"\n [disabled]=\"btn.disabled || (btn.validate && btn.validate()) || false\"\n class=\"group h-8 w-8 hover:bg-grayscale-20 hover:text-grayscale-100 disabled:hover:bg-[transparent] disabled:hover:text-criticality-blue\"\n >\n <div class=\"group-disabled:opacity-50\">\n @let page = btn.pageIndex;\n @let icon = btn.icon;\n @if (page !== undefined) {\n {{ page }}\n }\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n </div>\n </button>\n }\n </div>\n <s-select\n [options]=\"rowsPerPageOptions()\"\n [(ngModel)]=\"rows\"\n (ngModelChange)=\"rowsPerPageChange()\"\n ></s-select>\n </section>\n <section class=\"flex items-center gap-2\">\n @let text =\n totalRecords() === 0\n ? 'platform.angular_components.total_record'\n : 'platform.angular_components.total_records';\n <p class=\"text-[14px] text-[#212533]\">\n {{ text | translate: { count: totalRecords() } }}\n </p>\n <ng-content></ng-content>\n </section>\n</div>\n", dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled"], outputs: ["sInteractiveContent"] }, { kind: "component", type: SelectComponent, selector: "s-select", inputs: ["placeholder", "multiple", "options", "optionLabel", "optionValue", "showClear", "filter", "checkmark", "filterBy", "group", "virtualScroll", "virtualScrollItemSize", "emptyMessage", "useRawValue", "dataKey", "disabled"], outputs: ["disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
134
|
+
}
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
136
|
+
type: Component,
|
|
137
|
+
args: [{ selector: 's-paginator', standalone: true, imports: [InteractiveContentDirective, SelectComponent, FormsModule, TranslateModule], template: "<div class=\"flex justify-between\">\n <section class=\"flex items-center gap-2\">\n <div\n class=\"inline-block h-8 divide-x divide-grayscale-30 overflow-hidden rounded-md border border-grayscale-30\"\n >\n @for (btn of buttons(); track $index) {\n @let active = btn.pageIndex === currentPage();\n <button\n [class.bg-criticality-blue]=\"active\"\n [class.text-grayscale-0]=\"active\"\n [class.text-criticality-blue]=\"!active\"\n (sInteractiveContent)=\"activatedButton(btn)\"\n [disabled]=\"btn.disabled || (btn.validate && btn.validate()) || false\"\n class=\"group h-8 w-8 hover:bg-grayscale-20 hover:text-grayscale-100 disabled:hover:bg-[transparent] disabled:hover:text-criticality-blue\"\n >\n <div class=\"group-disabled:opacity-50\">\n @let page = btn.pageIndex;\n @let icon = btn.icon;\n @if (page !== undefined) {\n {{ page }}\n }\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n </div>\n </button>\n }\n </div>\n <s-select\n [options]=\"rowsPerPageOptions()\"\n [(ngModel)]=\"rows\"\n (ngModelChange)=\"rowsPerPageChange()\"\n ></s-select>\n </section>\n <section class=\"flex items-center gap-2\">\n @let text =\n totalRecords() === 0\n ? 'platform.angular_components.total_record'\n : 'platform.angular_components.total_records';\n <p class=\"text-[14px] text-[#212533]\">\n {{ text | translate: { count: totalRecords() } }}\n </p>\n <ng-content></ng-content>\n </section>\n</div>\n" }]
|
|
138
|
+
}] });
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* Generated bundle index. Do not edit.
|
|
142
|
+
*/
|
|
143
|
+
|
|
144
|
+
export { PaginatorComponent };
|
|
145
|
+
//# sourceMappingURL=seniorsistemas-angular-components-paginator.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-paginator.mjs","sources":["../../projects/angular-components/paginator/src/lib/paginator/paginator.component.ts","../../projects/angular-components/paginator/src/lib/paginator/paginator.component.html","../../projects/angular-components/paginator/src/seniorsistemas-angular-components-paginator.ts"],"sourcesContent":["import { Component, computed, effect, input, model, OnDestroy, output, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\nimport { SelectComponent } from '@seniorsistemas/angular-components/select';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { PageChange, PaginatorInternalButton } from '../models/paginator.models';\n@Component({\n selector: 's-paginator',\n standalone: true,\n imports: [InteractiveContentDirective, SelectComponent, FormsModule, TranslateModule],\n templateUrl: './paginator.component.html',\n})\nexport class PaginatorComponent implements OnDestroy {\n totalRecords = input.required<number>();\n rows = model(10);\n rowsPerPageOptions = input<number[]>([10, 20, 50, 100, 200]);\n pageChange = output<PageChange>();\n\n private readonly currentPageEffect = effect(() => {\n const page = this.currentPage() - 1;\n this.pageChange.emit({\n page,\n pageCount: this.totalPages(),\n rows: this.rows(),\n first: this.rows() * page,\n });\n });\n private readonly MAX_PAGE_BUTTONS = 5;\n private readonly hasPreviousPage = computed(() => {\n const previousPage = this.currentPage() - 1;\n return previousPage >= 1;\n });\n\n private readonly hasNextPage = computed(() => {\n const nextPage = this.currentPage() + 1;\n return nextPage <= this.totalPages();\n });\n\n protected readonly currentPage = signal(1);\n\n protected buttons = computed(() => {\n const navigationPageButtons: PaginatorInternalButton[] = [];\n const maxPageButtons = this.MAX_PAGE_BUTTONS;\n const currentPage = this.currentPage();\n const middle = Math.floor(maxPageButtons / 2);\n const _startPage = currentPage - middle;\n let startPage = _startPage < 1 ? 1 : _startPage;\n const _endPage = startPage + maxPageButtons - 1;\n const endPageIsMoreThanTotalPages = _endPage > this.totalPages();\n\n if (endPageIsMoreThanTotalPages) {\n const diff = _endPage - this.totalPages();\n const canModifyStartPage = startPage - diff >= 1;\n if (canModifyStartPage) {\n startPage = startPage - diff;\n }\n }\n const endPage = endPageIsMoreThanTotalPages ? this.totalPages() : _endPage;\n\n for (let i = startPage; i <= endPage; i++) {\n navigationPageButtons.push({\n clicked: (page) => this.goToPage(page.pageIndex as number),\n pageIndex: i,\n });\n }\n\n return [\n this.FIRST_PAGE_BUTTON,\n this.PREVIOUS_PAGE_BUTTON,\n ...navigationPageButtons,\n this.NEXT_PAGE_BUTTON,\n this.LAST_PAGE_BUTTON,\n ];\n });\n\n private readonly FIRST_PAGE_BUTTON: PaginatorInternalButton = {\n clicked: this.goFirstPage.bind(this),\n icon: 'fas fa-step-backward',\n validate: computed(() => {\n return !this.hasPreviousPage();\n }),\n };\n\n private readonly PREVIOUS_PAGE_BUTTON: PaginatorInternalButton = {\n clicked: this.goPreviousPage.bind(this),\n icon: 'fas fa-caret-left',\n validate: computed(() => {\n return !this.hasPreviousPage();\n }),\n };\n\n private readonly LAST_PAGE_BUTTON: PaginatorInternalButton = {\n clicked: this.goLastPage.bind(this),\n icon: 'fas fa-step-forward',\n validate: computed(() => {\n return !this.hasNextPage();\n }),\n };\n\n private readonly NEXT_PAGE_BUTTON: PaginatorInternalButton = {\n clicked: this.goNextPage.bind(this),\n icon: 'fas fa-caret-right',\n validate: computed(() => {\n return !this.hasNextPage();\n }),\n };\n\n private totalPages = computed(() => {\n const totalRecords = this.totalRecords();\n const _pages = totalRecords / this.rows();\n const pages = Math.ceil(_pages);\n const isExactPages = _pages === pages;\n return isExactPages ? pages : pages + 1;\n });\n\n public ngOnDestroy(): void {\n this.currentPageEffect.destroy();\n }\n\n protected rowsPerPageChange(): void {\n if (this.currentPage() !== 1) {\n this.goToPage(1);\n }\n }\n\n protected activatedButton(button: PaginatorInternalButton): void {\n button.clicked(button);\n }\n\n private goFirstPage(): void {\n this.goToPage(1);\n }\n\n private goNextPage(): void {\n if (!this.hasNextPage()) {\n return;\n }\n this.currentPage.update((value) => value + 1);\n }\n\n private goPreviousPage(): void {\n if (!this.hasPreviousPage()) {\n return;\n }\n this.currentPage.update((value) => value - 1);\n }\n\n private goLastPage(): void {\n this.goToPage(this.totalPages());\n }\n\n private goToPage(pageIndex: number): void {\n this.currentPage.set(pageIndex);\n }\n}\n","<div class=\"flex justify-between\">\n <section class=\"flex items-center gap-2\">\n <div\n class=\"inline-block h-8 divide-x divide-grayscale-30 overflow-hidden rounded-md border border-grayscale-30\"\n >\n @for (btn of buttons(); track $index) {\n @let active = btn.pageIndex === currentPage();\n <button\n [class.bg-criticality-blue]=\"active\"\n [class.text-grayscale-0]=\"active\"\n [class.text-criticality-blue]=\"!active\"\n (sInteractiveContent)=\"activatedButton(btn)\"\n [disabled]=\"btn.disabled || (btn.validate && btn.validate()) || false\"\n class=\"group h-8 w-8 hover:bg-grayscale-20 hover:text-grayscale-100 disabled:hover:bg-[transparent] disabled:hover:text-criticality-blue\"\n >\n <div class=\"group-disabled:opacity-50\">\n @let page = btn.pageIndex;\n @let icon = btn.icon;\n @if (page !== undefined) {\n {{ page }}\n }\n @if (icon) {\n <i [class]=\"icon\"></i>\n }\n </div>\n </button>\n }\n </div>\n <s-select\n [options]=\"rowsPerPageOptions()\"\n [(ngModel)]=\"rows\"\n (ngModelChange)=\"rowsPerPageChange()\"\n ></s-select>\n </section>\n <section class=\"flex items-center gap-2\">\n @let text =\n totalRecords() === 0\n ? 'platform.angular_components.total_record'\n : 'platform.angular_components.total_records';\n <p class=\"text-[14px] text-[#212533]\">\n {{ text | translate: { count: totalRecords() } }}\n </p>\n <ng-content></ng-content>\n </section>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|