s4y-ui 2.4.1 → 2.6.1
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/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -962,11 +962,11 @@ class DrawerComponent {
|
|
|
962
962
|
}
|
|
963
963
|
}
|
|
964
964
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
965
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DrawerComponent, isStandalone: true, selector: "s4y-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "closeOnPressEscapeKey($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "@if(isVisible()){\r\n<div\r\n
|
|
965
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DrawerComponent, isStandalone: true, selector: "s4y-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "closeOnPressEscapeKey($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "@if (isVisible()) {\r\n <div\r\n [@drawerAnimation]=\"{\r\n value: '',\r\n params: {\r\n transformFrom: transformFrom(),\r\n transformTo: transformTo(),\r\n },\r\n }\"\r\n [class.s4y-overlay]=\"backdrop()\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n [style.maxWidth]=\"drawerSize().width\"\r\n [style.maxHeight]=\"drawerSize().height\"\r\n [ngClass]=\"{\r\n 's4y-drawer-left': position() === 'left',\r\n 's4y-drawer-right': position() === 'right',\r\n 's4y-drawer-top': position() === 'top',\r\n 's4y-drawer-bottom': position() === 'bottom',\r\n }\"\r\n class=\"s4y-drawer-container\"\r\n >\r\n <header class=\"s4y-header\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n <!-- -->\r\n @else {\r\n <p class=\"s4y-header__title\">{{ title() }}</p>\r\n @if (hasCloseButton()) {\r\n <button (click)=\"close()\">×</button>\r\n }\r\n }\r\n </header>\r\n\r\n <div class=\"s4y-body-content\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n @if (footerTemplate) {\r\n <div class=\"s4y-footer-content\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header .s4y-header__title{font-size:1.8rem;font-weight:700}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [drawerAnimation] });
|
|
966
966
|
}
|
|
967
967
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
968
968
|
type: Component,
|
|
969
|
-
args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if(isVisible()){\r\n<div\r\n
|
|
969
|
+
args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if (isVisible()) {\r\n <div\r\n [@drawerAnimation]=\"{\r\n value: '',\r\n params: {\r\n transformFrom: transformFrom(),\r\n transformTo: transformTo(),\r\n },\r\n }\"\r\n [class.s4y-overlay]=\"backdrop()\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n [style.maxWidth]=\"drawerSize().width\"\r\n [style.maxHeight]=\"drawerSize().height\"\r\n [ngClass]=\"{\r\n 's4y-drawer-left': position() === 'left',\r\n 's4y-drawer-right': position() === 'right',\r\n 's4y-drawer-top': position() === 'top',\r\n 's4y-drawer-bottom': position() === 'bottom',\r\n }\"\r\n class=\"s4y-drawer-container\"\r\n >\r\n <header class=\"s4y-header\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n <!-- -->\r\n @else {\r\n <p class=\"s4y-header__title\">{{ title() }}</p>\r\n @if (hasCloseButton()) {\r\n <button (click)=\"close()\">×</button>\r\n }\r\n }\r\n </header>\r\n\r\n <div class=\"s4y-body-content\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n @if (footerTemplate) {\r\n <div class=\"s4y-footer-content\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header .s4y-header__title{font-size:1.8rem;font-weight:700}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"] }]
|
|
970
970
|
}], ctorParameters: () => [], propDecorators: { headerTemplate: [{
|
|
971
971
|
type: ContentChild,
|
|
972
972
|
args: ['headerTemplate']
|
|
@@ -1389,41 +1389,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1389
1389
|
}] });
|
|
1390
1390
|
|
|
1391
1391
|
class PaginationComponent {
|
|
1392
|
-
currentPage = model(
|
|
1392
|
+
currentPage = model(0);
|
|
1393
1393
|
totalResults = input(0);
|
|
1394
1394
|
rowsPerPageOptions = input([5, 10, 15, 20]);
|
|
1395
1395
|
rowsPerPage = signal(5);
|
|
1396
1396
|
onChange = output();
|
|
1397
1397
|
totalPages = computed(() => Math.ceil(this.totalResults() / this.rowsPerPage()));
|
|
1398
1398
|
// offset = computed(() => Math.max(0, this.limit() - this.rowsPerPage() + 1));
|
|
1399
|
-
offset = computed(() => this.totalResults() === 0
|
|
1400
|
-
|
|
1401
|
-
: (this.currentPage() - 1) * this.rowsPerPage() + 1);
|
|
1402
|
-
limit = computed(() => Math.min(this.rowsPerPage() * this.currentPage(), this.totalResults()));
|
|
1399
|
+
offset = computed(() => this.totalResults() === 0 ? 0 : this.currentPage() * this.rowsPerPage() + 1);
|
|
1400
|
+
limit = computed(() => Math.min((this.currentPage() + 1) * this.rowsPerPage(), this.totalResults()));
|
|
1403
1401
|
smartPageArray = computed(() => {
|
|
1404
1402
|
const total = this.totalPages();
|
|
1405
1403
|
const current = this.currentPage();
|
|
1406
1404
|
const windowSize = 5;
|
|
1407
1405
|
const pages = [];
|
|
1408
1406
|
if (total <= windowSize + 2) {
|
|
1409
|
-
|
|
1410
|
-
for (let i = 1; i <= total; i++)
|
|
1407
|
+
for (let i = 0; i < total; i++)
|
|
1411
1408
|
pages.push(i);
|
|
1412
1409
|
return pages;
|
|
1413
1410
|
}
|
|
1414
|
-
const start = Math.max(
|
|
1415
|
-
const end = Math.min(total -
|
|
1416
|
-
pages.push(
|
|
1417
|
-
if (start >
|
|
1411
|
+
const start = Math.max(1, current - 1);
|
|
1412
|
+
const end = Math.min(total - 2, current + 1);
|
|
1413
|
+
pages.push(0); // sempre mostra a primeira página
|
|
1414
|
+
if (start > 1)
|
|
1418
1415
|
pages.push('...');
|
|
1419
1416
|
for (let i = start; i <= end; i++) {
|
|
1420
1417
|
pages.push(i);
|
|
1421
1418
|
}
|
|
1422
|
-
if (end < total -
|
|
1419
|
+
if (end < total - 2)
|
|
1423
1420
|
pages.push('...');
|
|
1424
|
-
pages.push(total); //
|
|
1421
|
+
pages.push(total - 1); // última página
|
|
1425
1422
|
return pages;
|
|
1426
1423
|
});
|
|
1424
|
+
// limit = computed(() =>
|
|
1425
|
+
// Math.min(this.rowsPerPage() * this.currentPage(), this.totalResults()),
|
|
1426
|
+
// );
|
|
1427
|
+
// smartPageArray = computed(() => {
|
|
1428
|
+
// const total = this.totalPages();
|
|
1429
|
+
// const current = this.currentPage();
|
|
1430
|
+
// const windowSize = 5;
|
|
1431
|
+
// const pages: (number | '...')[] = [];
|
|
1432
|
+
// if (total <= windowSize + 2) {
|
|
1433
|
+
// // mostra todas as páginas se for pequeno
|
|
1434
|
+
// for (let i = 1; i <= total; i++) pages.push(i);
|
|
1435
|
+
// return pages;
|
|
1436
|
+
// }
|
|
1437
|
+
// const start = Math.max(2, current - 1);
|
|
1438
|
+
// const end = Math.min(total - 1, current + 1);
|
|
1439
|
+
// pages.push(1); // sempre mostra a primeira página
|
|
1440
|
+
// if (start > 2) pages.push('...');
|
|
1441
|
+
// for (let i = start; i <= end; i++) {
|
|
1442
|
+
// pages.push(i);
|
|
1443
|
+
// }
|
|
1444
|
+
// if (end < total - 1) pages.push('...');
|
|
1445
|
+
// pages.push(total); // sempre mostra a última página
|
|
1446
|
+
// return pages;
|
|
1447
|
+
// });
|
|
1427
1448
|
// totalPageArr = computed(() => {
|
|
1428
1449
|
// let arr: number[] = [];
|
|
1429
1450
|
// let calculateTotalPages = this.totalPages() + 1;
|
|
@@ -1436,10 +1457,14 @@ class PaginationComponent {
|
|
|
1436
1457
|
this.currentPage.set(selectedPage);
|
|
1437
1458
|
this.emitChangeValue();
|
|
1438
1459
|
}
|
|
1439
|
-
prevButtonDisabled = computed(() => this.currentPage() <=
|
|
1440
|
-
nextButtonDisabled = computed(() => this.currentPage()
|
|
1460
|
+
prevButtonDisabled = computed(() => this.currentPage() <= 0);
|
|
1461
|
+
nextButtonDisabled = computed(() => this.currentPage() >= this.totalPages() - 1);
|
|
1462
|
+
// prevButtonDisabled = computed(
|
|
1463
|
+
// () => this.currentPage() <= -1 || this.currentPage() == 1,
|
|
1464
|
+
// );
|
|
1465
|
+
// nextButtonDisabled = computed(() => this.currentPage() == this.totalPages());
|
|
1441
1466
|
prevPage() {
|
|
1442
|
-
if (this.currentPage() <=
|
|
1467
|
+
if (this.currentPage() <= 0)
|
|
1443
1468
|
return;
|
|
1444
1469
|
this.currentPage.update((prevValue) => prevValue - 1);
|
|
1445
1470
|
this.emitChangeValue();
|
|
@@ -1454,6 +1479,7 @@ class PaginationComponent {
|
|
|
1454
1479
|
const selectElement = event.target;
|
|
1455
1480
|
const value = Number(selectElement.value);
|
|
1456
1481
|
this.rowsPerPage.set(value ?? 5);
|
|
1482
|
+
this.currentPage.set(0);
|
|
1457
1483
|
this.recalcCurrentPage();
|
|
1458
1484
|
}
|
|
1459
1485
|
recalcCurrentPage() {
|
|
@@ -1477,11 +1503,11 @@ class PaginationComponent {
|
|
|
1477
1503
|
});
|
|
1478
1504
|
}
|
|
1479
1505
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1480
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "s4y-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalResults: { classPropertyName: "totalResults", publicName: "totalResults", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n
|
|
1506
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "s4y-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalResults: { classPropertyName: "totalResults", publicName: "totalResults", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n @if (totalResults() > 0) {\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n <div class=\"flex justify-between align-center\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view select{border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;width:80px;padding:1.2rem;display:block;font-size:1.4rem}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
1481
1507
|
}
|
|
1482
1508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1483
1509
|
type: Component,
|
|
1484
|
-
args: [{ selector: 's4y-pagination', imports: [NgTemplateOutlet, CommonModule, FormsModule], template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n
|
|
1510
|
+
args: [{ selector: 's4y-pagination', imports: [NgTemplateOutlet, CommonModule, FormsModule], template: "<div class=\"s4y-pagination-container desktop\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n @if (totalResults() > 0) {\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n <div class=\"flex justify-between align-center\">\r\n <div class=\"s4y-pagination-wrapper-view\">\r\n <select\r\n [value]=\"rowsPerPage()\"\r\n (change)=\"selectRowsPerPage($event)\"\r\n name=\"quantity-view-results\"\r\n id=\"quantity-view-results\"\r\n >\r\n @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n <option [value]=\"rowsPerPageOption\">\r\n {{ rowsPerPageOption }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-details\">\r\n <p>\r\n {{ offset() }}\r\n </p>\r\n <span>-</span>\r\n <p>{{ limit() }}</p>\r\n <strong>of</strong>\r\n <p>\r\n {{ totalResults() }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-pagination-wrapper\">\r\n <button\r\n [disabled]=\"prevButtonDisabled()\"\r\n (click)=\"prevPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n </button>\r\n\r\n <div class=\"s4y-pagination-pages\">\r\n @for (item of smartPageArray(); track $index) {\r\n <button\r\n *ngIf=\"item !== '...'; else ellipsis\"\r\n (click)=\"changePage(item)\"\r\n [class.selected]=\"item === currentPage()\"\r\n class=\"s4y-pagination-pages__item\"\r\n >\r\n {{ item + 1 }}\r\n </button>\r\n <ng-template #ellipsis>\r\n <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n </ng-template>\r\n }\r\n </div>\r\n\r\n <button\r\n [disabled]=\"nextButtonDisabled()\"\r\n (click)=\"nextPage()\"\r\n type=\"button\"\r\n class=\"s4y-pagination-button\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view select{border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;width:80px;padding:1.2rem;display:block;font-size:1.4rem}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"] }]
|
|
1485
1511
|
}] });
|
|
1486
1512
|
|
|
1487
1513
|
const selectAnimation = trigger('selectAnimation', [
|
|
@@ -1523,7 +1549,6 @@ class SelectComponent {
|
|
|
1523
1549
|
maxScreen = input(false);
|
|
1524
1550
|
isLoading = input(false);
|
|
1525
1551
|
hasError = input(false);
|
|
1526
|
-
optionLabel = input('');
|
|
1527
1552
|
label = input();
|
|
1528
1553
|
errorMessageDefault = input('Erro ao carregar as opções. Tente novamente mais tarde.');
|
|
1529
1554
|
emptyMessageDefault = input('Nenhuma opção disponível');
|
|
@@ -1572,7 +1597,7 @@ class SelectComponent {
|
|
|
1572
1597
|
}
|
|
1573
1598
|
includeSelectedProperty() {
|
|
1574
1599
|
return this.options().map((option) => ({
|
|
1575
|
-
|
|
1600
|
+
option: option,
|
|
1576
1601
|
selected: false,
|
|
1577
1602
|
}));
|
|
1578
1603
|
}
|
|
@@ -1580,13 +1605,13 @@ class SelectComponent {
|
|
|
1580
1605
|
this.transformedOptions.forEach((option) => (option['selected'] = false));
|
|
1581
1606
|
}
|
|
1582
1607
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1583
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null },
|
|
1608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch" }, providers: [
|
|
1584
1609
|
{
|
|
1585
1610
|
multi: true,
|
|
1586
1611
|
provide: NG_VALUE_ACCESSOR,
|
|
1587
1612
|
useExisting: forwardRef(() => SelectComponent),
|
|
1588
1613
|
},
|
|
1589
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption
|
|
1614
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n (input)=\"handleSearch($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions; track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select__svg,:host.ng-invalid.ng-dirty .s4y-select__svg{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__placeholder,:host.ng-invalid.ng-dirty .s4y-select-container__placeholder{color:var(--danger-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }], animations: [selectAnimation] });
|
|
1590
1615
|
}
|
|
1591
1616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1592
1617
|
type: Component,
|
|
@@ -1596,7 +1621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1596
1621
|
provide: NG_VALUE_ACCESSOR,
|
|
1597
1622
|
useExisting: forwardRef(() => SelectComponent),
|
|
1598
1623
|
},
|
|
1599
|
-
], template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption
|
|
1624
|
+
], template: "<label\r\n class=\"s4y-select-container\"\r\n [style.maxWidth]=\"widthStyle()\"\r\n s4yClickOutside\r\n (clickOutside)=\"isOpened = false\"\r\n>\r\n <p class=\"s4y-select-label\">\r\n {{ label() }}\r\n </p>\r\n\r\n <div\r\n class=\"s4y-select-container__wrapper\"\r\n [class.disabled]=\"isDisabled\"\r\n (click)=\"isOpened = !isOpened\"\r\n [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n tabindex=\"0\"\r\n aria-controls=\"select-options-container\"\r\n >\r\n <div class=\"s4y-select-container__placeholder\">\r\n @if (selectedOptionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"\r\n ></ng-container>\r\n } @else {\r\n @if (!selectedOption) {\r\n <p>Selecione...</p>\r\n } @else {\r\n <p>{{ selectedOption }}</p>\r\n }\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n }\r\n @if (!isOpened) {\r\n <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n }\r\n </div>\r\n <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n <div class=\"s4y-select-options\">\r\n @if (isLoading()) {\r\n <div class=\"s4y-select-container__loading\">\r\n <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n </div>\r\n } @else if (hasError()) {\r\n @if (errorTemplate) {\r\n <p class=\"s4y-select-options__message\">\r\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p class=\"s4y-select-options__message\">\r\n {{ errorMessageDefault() }}\r\n </p>\r\n }\r\n } @else {\r\n @if (withSearch()) {\r\n <div class=\"s4y-select-options__search\">\r\n <input\r\n (input)=\"handleSearch($event)\"\r\n placeholder=\"Pesquisar...\"\r\n type=\"text\"\r\n name=\"search-option\"\r\n id=\"search-option\"\r\n autocomplete=\"off\"\r\n />\r\n <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n </div>\r\n }\r\n <div\r\n class=\"s4y-select-options__scroll\"\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n >\r\n @for (option of transformedOptions; track $index) {\r\n <p\r\n [class.selected]=\"option.selected\"\r\n class=\"s4y-select-options__item\"\r\n role=\"option\"\r\n aria-selected=\"false\"\r\n tabindex=\"0\"\r\n (click)=\"setSelectedOption(option)\"\r\n (keyup.enter)=\"setSelectedOption(option)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n optionTemplate;\r\n context: { $implicit: option }\r\n \"\r\n ></ng-container>\r\n </p>\r\n } @empty {\r\n @if (emptyTemplate) {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n </p>\r\n } @else {\r\n <p\r\n class=\"s4y-select-options__message\"\r\n role=\"status\"\r\n aria-live=\"assertive\"\r\n >\r\n {{ emptyMessageDefault() }}\r\n </p>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n <svg\r\n class=\"s4y-select__svg\"\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n <svg\r\n width=\"18px\"\r\n height=\"18px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select__svg,:host.ng-invalid.ng-dirty .s4y-select__svg{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__placeholder,:host.ng-invalid.ng-dirty .s4y-select-container__placeholder{color:var(--danger-color)}\n"] }]
|
|
1600
1625
|
}], propDecorators: { optionTemplate: [{
|
|
1601
1626
|
type: ContentChild,
|
|
1602
1627
|
args: ['optionTemplate']
|