otimus-library 0.3.44 → 0.3.46
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.
|
@@ -559,11 +559,11 @@ class OcCardComponent {
|
|
|
559
559
|
return this.ocClickable() ? 'oc-card-clickable' : '';
|
|
560
560
|
}
|
|
561
561
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
562
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcCardComponent, isStandalone: true, selector: "oc-card", inputs: { ocSelected: { classPropertyName: "ocSelected", publicName: "ocSelected", isSignal: true, isRequired: false, transformFunction: null }, ocColor: { classPropertyName: "ocColor", publicName: "ocColor", isSignal: true, isRequired: false, transformFunction: null }, ocClickable: { classPropertyName: "ocClickable", publicName: "ocClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocClick: "ocClick" }, ngImport: i0, template: "<div\n class=\"oc-card\"\n [ngClass]=\"[color, isSelected, isClickable]\"\n (click)=\"onClick()\"\n>\n <div class=\"oc-card-header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"oc-card-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"oc-card-footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;
|
|
562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcCardComponent, isStandalone: true, selector: "oc-card", inputs: { ocSelected: { classPropertyName: "ocSelected", publicName: "ocSelected", isSignal: true, isRequired: false, transformFunction: null }, ocColor: { classPropertyName: "ocColor", publicName: "ocColor", isSignal: true, isRequired: false, transformFunction: null }, ocClickable: { classPropertyName: "ocClickable", publicName: "ocClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocClick: "ocClick" }, ngImport: i0, template: "<div\n class=\"oc-card\"\n [ngClass]=\"[color, isSelected, isClickable]\"\n (click)=\"onClick()\"\n>\n <div class=\"oc-card-header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"oc-card-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"oc-card-footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;position:relative;z-index:1}.oc-card-selected:after{content:\"\\2713\";position:absolute;top:10px;right:10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#00dda3;box-shadow:0 3px 6px #0000001f}.oc-card-clickable{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-left-width .18s,outline-offset .18s,background-color .18s;cursor:pointer}.oc-card-clickable:active{transform:translateY(1px) scale(.998)}.oc-card-clickable:focus-visible{outline:3px solid rgba(0,0,0,.06);outline-offset:4px}.oc-card-clickable:not(.oc-card-selected):hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 40px #00000024,0 8px 18px #0000000f}.oc-card-clickable.oc-card-selected:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 48px #00000026,0 10px 20px #0000000f}.oc-card.disabled{cursor:default;pointer-events:none;opacity:.7}@media (prefers-reduced-motion: reduce){.oc-card-clickable,.oc-card-clickable:not(.oc-card-selected):hover,.oc-card-clickable.oc-card-selected:hover{transition:none!important;transform:none!important;box-shadow:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
563
563
|
}
|
|
564
564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCardComponent, decorators: [{
|
|
565
565
|
type: Component,
|
|
566
|
-
args: [{ selector: 'oc-card', standalone: true, imports: [CommonModule], template: "<div\n class=\"oc-card\"\n [ngClass]=\"[color, isSelected, isClickable]\"\n (click)=\"onClick()\"\n>\n <div class=\"oc-card-header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"oc-card-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"oc-card-footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;
|
|
566
|
+
args: [{ selector: 'oc-card', standalone: true, imports: [CommonModule], template: "<div\n class=\"oc-card\"\n [ngClass]=\"[color, isSelected, isClickable]\"\n (click)=\"onClick()\"\n>\n <div class=\"oc-card-header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"oc-card-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"oc-card-footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;position:relative;z-index:1}.oc-card-selected:after{content:\"\\2713\";position:absolute;top:10px;right:10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#00dda3;box-shadow:0 3px 6px #0000001f}.oc-card-clickable{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-left-width .18s,outline-offset .18s,background-color .18s;cursor:pointer}.oc-card-clickable:active{transform:translateY(1px) scale(.998)}.oc-card-clickable:focus-visible{outline:3px solid rgba(0,0,0,.06);outline-offset:4px}.oc-card-clickable:not(.oc-card-selected):hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 40px #00000024,0 8px 18px #0000000f}.oc-card-clickable.oc-card-selected:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 48px #00000026,0 10px 20px #0000000f}.oc-card.disabled{cursor:default;pointer-events:none;opacity:.7}@media (prefers-reduced-motion: reduce){.oc-card-clickable,.oc-card-clickable:not(.oc-card-selected):hover,.oc-card-clickable.oc-card-selected:hover{transition:none!important;transform:none!important;box-shadow:none!important}}\n"] }]
|
|
567
567
|
}], propDecorators: { ocSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSelected", required: false }] }], ocColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocColor", required: false }] }], ocClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClickable", required: false }] }], ocClick: [{
|
|
568
568
|
type: Output
|
|
569
569
|
}] } });
|
|
@@ -1575,6 +1575,7 @@ class OcPaginationComponent {
|
|
|
1575
1575
|
this.styleThemeService = styleThemeService;
|
|
1576
1576
|
this.ocPage = 1;
|
|
1577
1577
|
this.ocStyle = 'otimus';
|
|
1578
|
+
this.ocItemName = 'Página';
|
|
1578
1579
|
this.ocGetPage = new EventEmitter();
|
|
1579
1580
|
}
|
|
1580
1581
|
ngOnInit() {
|
|
@@ -1605,17 +1606,19 @@ class OcPaginationComponent {
|
|
|
1605
1606
|
this.ocGetPage.emit(this.ocPage);
|
|
1606
1607
|
}
|
|
1607
1608
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcPaginationComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1608
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcPaginationComponent, isStandalone: true, selector: "oc-pagination", inputs: { ocPage: "ocPage", ocMaxPage: "ocMaxPage", ocStyle: "ocStyle" }, outputs: { ocGetPage: "ocGetPage" }, ngImport: i0, template: "<div\n class=\"oc-pagination\"\n [ngClass]=\"ocStyle\"\n>\n <p class=\"oc-pagination-text\">\n
|
|
1609
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcPaginationComponent, isStandalone: true, selector: "oc-pagination", inputs: { ocPage: "ocPage", ocMaxPage: "ocMaxPage", ocStyle: "ocStyle", ocItemName: "ocItemName" }, outputs: { ocGetPage: "ocGetPage" }, ngImport: i0, template: "<div\n class=\"oc-pagination\"\n [ngClass]=\"ocStyle\"\n>\n <p class=\"oc-pagination-text\">\n {{ ocItemName }}\n <span>{{ ocPage }}</span>\n de\n <span>{{ ocMaxPage }}</span>\n </p>\n <div class=\"oc-pagination-buttons\">\n <button\n (click)=\"firstPage()\"\n [ngClass]=\"{\n disabled: ocPage === 1,\n }\"\n >\n <span class=\"material-symbols-outlined\">keyboard_double_arrow_left</span>\n </button>\n <button\n (click)=\"decrementPage()\"\n [ngClass]=\"{\n disabled: ocPage === 1,\n }\"\n >\n <span class=\"material-symbols-outlined\">navigate_before</span>\n </button>\n <button\n (click)=\"incrementPage()\"\n [ngClass]=\"{\n disabled: ocPage === ocMaxPage,\n }\"\n >\n <span class=\"material-symbols-outlined\">navigate_next</span>\n </button>\n <button\n (click)=\"lastPage()\"\n [ngClass]=\"{\n disabled: ocPage === ocMaxPage,\n }\"\n >\n <span class=\"material-symbols-outlined\"> keyboard_double_arrow_right </span>\n </button>\n </div>\n</div>\n", styles: [".oc-pagination{display:flex;align-items:center;justify-content:flex-end;gap:1rem;border:none;overflow:hidden}.oc-pagination .oc-pagination-buttons{display:flex;align-items:center;gap:0;border:2px solid #f7f7f7;border-radius:.5rem;transition:.3s ease}.oc-pagination .oc-pagination-buttons:hover{border-color:#d1d5db}.oc-pagination .oc-pagination-buttons button{margin:0;transition:.15s ease;border-radius:.5rem;cursor:pointer;border:none;height:3rem;padding:0 1rem;display:flex;align-items:center;justify-content:center;background-color:transparent;color:#7e8485;font-weight:700}.oc-pagination .oc-pagination-buttons button:hover{background-color:#f7f7f7;color:#7737b5}.oc-pagination .oc-pagination-buttons button:active{transform:translateY(2px)}.oc-pagination .oc-pagination-text{font-weight:500;font-size:1rem;margin:0;color:#8f9596}.oc-pagination .oc-pagination-text span{font-weight:700;color:#5505a2}.disabled{cursor:not-allowed!important;opacity:.4;pointer-events:none}.oc-pagination.shui .oc-pagination-buttons{border-radius:.25rem}.oc-pagination.shui .oc-pagination-buttons button{border-radius:.25rem;background-color:transparent;color:#000000bf}.oc-pagination.shui .oc-pagination-buttons button:hover{background-color:#c8c8c8;color:#099}.oc-pagination.shui .oc-pagination-buttons button:active{transform:translateY(1px)}.oc-pagination.shui .oc-pagination-text{color:#000000bf}.oc-pagination.shui .oc-pagination-text span{color:#099}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1609
1610
|
}
|
|
1610
1611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcPaginationComponent, decorators: [{
|
|
1611
1612
|
type: Component,
|
|
1612
|
-
args: [{ selector: 'oc-pagination', imports: [CommonModule], template: "<div\n class=\"oc-pagination\"\n [ngClass]=\"ocStyle\"\n>\n <p class=\"oc-pagination-text\">\n
|
|
1613
|
+
args: [{ selector: 'oc-pagination', imports: [CommonModule], standalone: true, template: "<div\n class=\"oc-pagination\"\n [ngClass]=\"ocStyle\"\n>\n <p class=\"oc-pagination-text\">\n {{ ocItemName }}\n <span>{{ ocPage }}</span>\n de\n <span>{{ ocMaxPage }}</span>\n </p>\n <div class=\"oc-pagination-buttons\">\n <button\n (click)=\"firstPage()\"\n [ngClass]=\"{\n disabled: ocPage === 1,\n }\"\n >\n <span class=\"material-symbols-outlined\">keyboard_double_arrow_left</span>\n </button>\n <button\n (click)=\"decrementPage()\"\n [ngClass]=\"{\n disabled: ocPage === 1,\n }\"\n >\n <span class=\"material-symbols-outlined\">navigate_before</span>\n </button>\n <button\n (click)=\"incrementPage()\"\n [ngClass]=\"{\n disabled: ocPage === ocMaxPage,\n }\"\n >\n <span class=\"material-symbols-outlined\">navigate_next</span>\n </button>\n <button\n (click)=\"lastPage()\"\n [ngClass]=\"{\n disabled: ocPage === ocMaxPage,\n }\"\n >\n <span class=\"material-symbols-outlined\"> keyboard_double_arrow_right </span>\n </button>\n </div>\n</div>\n", styles: [".oc-pagination{display:flex;align-items:center;justify-content:flex-end;gap:1rem;border:none;overflow:hidden}.oc-pagination .oc-pagination-buttons{display:flex;align-items:center;gap:0;border:2px solid #f7f7f7;border-radius:.5rem;transition:.3s ease}.oc-pagination .oc-pagination-buttons:hover{border-color:#d1d5db}.oc-pagination .oc-pagination-buttons button{margin:0;transition:.15s ease;border-radius:.5rem;cursor:pointer;border:none;height:3rem;padding:0 1rem;display:flex;align-items:center;justify-content:center;background-color:transparent;color:#7e8485;font-weight:700}.oc-pagination .oc-pagination-buttons button:hover{background-color:#f7f7f7;color:#7737b5}.oc-pagination .oc-pagination-buttons button:active{transform:translateY(2px)}.oc-pagination .oc-pagination-text{font-weight:500;font-size:1rem;margin:0;color:#8f9596}.oc-pagination .oc-pagination-text span{font-weight:700;color:#5505a2}.disabled{cursor:not-allowed!important;opacity:.4;pointer-events:none}.oc-pagination.shui .oc-pagination-buttons{border-radius:.25rem}.oc-pagination.shui .oc-pagination-buttons button{border-radius:.25rem;background-color:transparent;color:#000000bf}.oc-pagination.shui .oc-pagination-buttons button:hover{background-color:#c8c8c8;color:#099}.oc-pagination.shui .oc-pagination-buttons button:active{transform:translateY(1px)}.oc-pagination.shui .oc-pagination-text{color:#000000bf}.oc-pagination.shui .oc-pagination-text span{color:#099}\n"] }]
|
|
1613
1614
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocPage: [{
|
|
1614
1615
|
type: Input
|
|
1615
1616
|
}], ocMaxPage: [{
|
|
1616
1617
|
type: Input
|
|
1617
1618
|
}], ocStyle: [{
|
|
1618
1619
|
type: Input
|
|
1620
|
+
}], ocItemName: [{
|
|
1621
|
+
type: Input
|
|
1619
1622
|
}], ocGetPage: [{
|
|
1620
1623
|
type: Output
|
|
1621
1624
|
}] } });
|