otimus-library 0.3.45 → 0.3.47
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/otimus-library.mjs +39 -20
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +7 -4
- package/package.json +1 -1
|
@@ -1020,6 +1020,7 @@ class OcAutocompleteComponent {
|
|
|
1020
1020
|
this.inputWidth = 'auto';
|
|
1021
1021
|
this.overlayRef = null;
|
|
1022
1022
|
this.dropdownComponentRef = null;
|
|
1023
|
+
this.clickOutListener = null;
|
|
1023
1024
|
}
|
|
1024
1025
|
set ocData(value) {
|
|
1025
1026
|
this._ocData = value;
|
|
@@ -1129,18 +1130,25 @@ class OcAutocompleteComponent {
|
|
|
1129
1130
|
}, 50);
|
|
1130
1131
|
}
|
|
1131
1132
|
closeOnClickOut() {
|
|
1132
|
-
this.
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1133
|
+
if (this.clickOutListener) {
|
|
1134
|
+
this.clickOutListener();
|
|
1135
|
+
this.clickOutListener = null;
|
|
1136
|
+
}
|
|
1137
|
+
setTimeout(() => {
|
|
1138
|
+
this.clickOutListener = this.renderer.listen('window', 'click', (e) => {
|
|
1139
|
+
const target = e.target;
|
|
1140
|
+
const insideCounterSelect = this.ocType === 'counterSelect' && target.closest('.oc-counter-select');
|
|
1141
|
+
const insideDropdown = target.closest('.oc-autocomplete-dropdown-container');
|
|
1142
|
+
const insideInput = this.input?.nativeElement?.contains(target);
|
|
1143
|
+
if (this.input && !insideCounterSelect && !insideDropdown && !insideInput) {
|
|
1144
|
+
if (target !== this.input.nativeElement && this.isOptionsShown) {
|
|
1145
|
+
this.isOptionsShown = false;
|
|
1146
|
+
this.closeOverlay();
|
|
1147
|
+
this.findByTyping();
|
|
1148
|
+
}
|
|
1141
1149
|
}
|
|
1142
|
-
}
|
|
1143
|
-
});
|
|
1150
|
+
});
|
|
1151
|
+
}, 0);
|
|
1144
1152
|
}
|
|
1145
1153
|
findByTyping() {
|
|
1146
1154
|
if (!this.ocValue || !this.ocValue?.toString().trim().length) {
|
|
@@ -1190,6 +1198,16 @@ class OcAutocompleteComponent {
|
|
|
1190
1198
|
.normalize('NFD')
|
|
1191
1199
|
.replace(/[\u0300-\u036f]/g, ''); // Remove marcas diacríticas
|
|
1192
1200
|
}
|
|
1201
|
+
open() {
|
|
1202
|
+
if (!this.isOptionsShown) {
|
|
1203
|
+
this.toggleOptions();
|
|
1204
|
+
}
|
|
1205
|
+
}
|
|
1206
|
+
close() {
|
|
1207
|
+
if (this.isOptionsShown) {
|
|
1208
|
+
this.toggleOptions();
|
|
1209
|
+
}
|
|
1210
|
+
}
|
|
1193
1211
|
toggleOptions() {
|
|
1194
1212
|
this.closeOnClickOut();
|
|
1195
1213
|
this.updateInputWidth();
|
|
@@ -1205,7 +1223,8 @@ class OcAutocompleteComponent {
|
|
|
1205
1223
|
if (!this.input)
|
|
1206
1224
|
return;
|
|
1207
1225
|
const inputWidth = this.input.nativeElement.offsetWidth;
|
|
1208
|
-
const positionStrategy = this.overlay
|
|
1226
|
+
const positionStrategy = this.overlay
|
|
1227
|
+
.position()
|
|
1209
1228
|
.flexibleConnectedTo(this.input.nativeElement)
|
|
1210
1229
|
.withPositions([
|
|
1211
1230
|
// Primary position: below the input
|
|
@@ -1213,15 +1232,15 @@ class OcAutocompleteComponent {
|
|
|
1213
1232
|
originX: 'start',
|
|
1214
1233
|
originY: 'bottom',
|
|
1215
1234
|
overlayX: 'start',
|
|
1216
|
-
overlayY: 'top'
|
|
1235
|
+
overlayY: 'top',
|
|
1217
1236
|
},
|
|
1218
1237
|
// Fallback position: above the input
|
|
1219
1238
|
{
|
|
1220
1239
|
originX: 'start',
|
|
1221
1240
|
originY: 'top',
|
|
1222
1241
|
overlayX: 'start',
|
|
1223
|
-
overlayY: 'bottom'
|
|
1224
|
-
}
|
|
1242
|
+
overlayY: 'bottom',
|
|
1243
|
+
},
|
|
1225
1244
|
])
|
|
1226
1245
|
.withFlexibleDimensions(false);
|
|
1227
1246
|
// Create overlay config
|
|
@@ -1230,7 +1249,7 @@ class OcAutocompleteComponent {
|
|
|
1230
1249
|
width: inputWidth,
|
|
1231
1250
|
hasBackdrop: true,
|
|
1232
1251
|
backdropClass: this.ocShowBackdrop ? undefined : 'cdk-overlay-transparent-backdrop',
|
|
1233
|
-
scrollStrategy: this.overlay.scrollStrategies.reposition()
|
|
1252
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
1234
1253
|
};
|
|
1235
1254
|
// Create overlay
|
|
1236
1255
|
this.overlayRef = this.overlay.create(overlayConfig);
|
|
@@ -1575,7 +1594,7 @@ class OcPaginationComponent {
|
|
|
1575
1594
|
this.styleThemeService = styleThemeService;
|
|
1576
1595
|
this.ocPage = 1;
|
|
1577
1596
|
this.ocStyle = 'otimus';
|
|
1578
|
-
this.
|
|
1597
|
+
this.ocItemName = 'Página';
|
|
1579
1598
|
this.ocGetPage = new EventEmitter();
|
|
1580
1599
|
}
|
|
1581
1600
|
ngOnInit() {
|
|
@@ -1606,18 +1625,18 @@ class OcPaginationComponent {
|
|
|
1606
1625
|
this.ocGetPage.emit(this.ocPage);
|
|
1607
1626
|
}
|
|
1608
1627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcPaginationComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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",
|
|
1628
|
+
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"] }] }); }
|
|
1610
1629
|
}
|
|
1611
1630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcPaginationComponent, decorators: [{
|
|
1612
1631
|
type: Component,
|
|
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 {{
|
|
1632
|
+
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"] }]
|
|
1614
1633
|
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocPage: [{
|
|
1615
1634
|
type: Input
|
|
1616
1635
|
}], ocMaxPage: [{
|
|
1617
1636
|
type: Input
|
|
1618
1637
|
}], ocStyle: [{
|
|
1619
1638
|
type: Input
|
|
1620
|
-
}],
|
|
1639
|
+
}], ocItemName: [{
|
|
1621
1640
|
type: Input
|
|
1622
1641
|
}], ocGetPage: [{
|
|
1623
1642
|
type: Output
|