otimus-library 0.3.25 → 0.3.27
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 +201 -10
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +19 -4
- package/package.json +1 -1
|
@@ -5,9 +5,11 @@ import { CdkMenuModule } from '@angular/cdk/menu';
|
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
import * as i2 from '@angular/platform-browser';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i5 from '@angular/forms';
|
|
9
9
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
10
10
|
import * as i1$1 from '@angular/common/http';
|
|
11
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
12
|
+
import * as i3 from '@angular/cdk/overlay';
|
|
11
13
|
|
|
12
14
|
class OtimusLibraryService {
|
|
13
15
|
constructor() { }
|
|
@@ -899,14 +901,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
899
901
|
}]
|
|
900
902
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }] });
|
|
901
903
|
|
|
904
|
+
class OcAutocompleteDropdownComponent {
|
|
905
|
+
constructor() {
|
|
906
|
+
this.filteredData = [];
|
|
907
|
+
this.ocLoading = false;
|
|
908
|
+
this.ocDisabled = false;
|
|
909
|
+
this.ocType = 'default';
|
|
910
|
+
this.selectedIndex = -1;
|
|
911
|
+
this.selectValue = new EventEmitter();
|
|
912
|
+
this.decrementCounter = new EventEmitter();
|
|
913
|
+
this.incrementCounter = new EventEmitter();
|
|
914
|
+
}
|
|
915
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
916
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteDropdownComponent, isStandalone: true, selector: "oc-autocomplete-dropdown", inputs: { filteredData: "filteredData", ocLoading: "ocLoading", ocDisabled: "ocDisabled", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocMaxResults: "ocMaxResults", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocType: "ocType", selectedIndex: "selectedIndex", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth" }, outputs: { selectValue: "selectValue", decrementCounter: "decrementCounter", incrementCounter: "incrementCounter" }, host: { styleAttribute: "width: 100%; display: block;", classAttribute: "oc-autocomplete-dropdown-container" }, ngImport: i0, template: "@if (!ocLoading && !ocDisabled) {\n <ul\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li class=\"li-option\">\n <button\n type=\"button\"\n (click)=\"selectValue.emit(data.value)\"\n [class.hover]=\"ocType !== 'counterSelect'\"\n [class.highlight]=\"selectedIndex === i\"\n >\n @if (data.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n 'font-size': data.iconSize || '1.2rem',\n }\"\n >\n {{ data.icon }}\n </span>\n }\n {{ data.name }}\n </button>\n @if (ocType === 'counterSelect') {\n <div class=\"oc-counter-select\">\n <button\n class=\"subtract\"\n (click)=\"decrementCounter.emit(data)\"\n >\n <span class=\"material-symbols-outlined\">remove</span>\n </button>\n <p class=\"counter\">{{ data.counter || 0 }}</p>\n <button\n class=\"add\"\n (click)=\"incrementCounter.emit(data)\"\n >\n <span class=\"material-symbols-outlined\">add</span>\n </button>\n </div>\n }\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n} @else if (ocLoading && !ocDisabled) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n}", styles: [".oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;margin:0;border-radius:.5rem;overflow:hidden;width:100%;min-width:100%;max-width:100%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
917
|
+
}
|
|
918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteDropdownComponent, decorators: [{
|
|
919
|
+
type: Component,
|
|
920
|
+
args: [{ selector: 'oc-autocomplete-dropdown', imports: [CommonModule, FormsModule], standalone: true, host: {
|
|
921
|
+
'class': 'oc-autocomplete-dropdown-container',
|
|
922
|
+
'style': 'width: 100%; display: block;'
|
|
923
|
+
}, template: "@if (!ocLoading && !ocDisabled) {\n <ul\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li class=\"li-option\">\n <button\n type=\"button\"\n (click)=\"selectValue.emit(data.value)\"\n [class.hover]=\"ocType !== 'counterSelect'\"\n [class.highlight]=\"selectedIndex === i\"\n >\n @if (data.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n 'font-size': data.iconSize || '1.2rem',\n }\"\n >\n {{ data.icon }}\n </span>\n }\n {{ data.name }}\n </button>\n @if (ocType === 'counterSelect') {\n <div class=\"oc-counter-select\">\n <button\n class=\"subtract\"\n (click)=\"decrementCounter.emit(data)\"\n >\n <span class=\"material-symbols-outlined\">remove</span>\n </button>\n <p class=\"counter\">{{ data.counter || 0 }}</p>\n <button\n class=\"add\"\n (click)=\"incrementCounter.emit(data)\"\n >\n <span class=\"material-symbols-outlined\">add</span>\n </button>\n </div>\n }\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n} @else if (ocLoading && !ocDisabled) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n}", styles: [".oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;margin:0;border-radius:.5rem;overflow:hidden;width:100%;min-width:100%;max-width:100%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
924
|
+
}], ctorParameters: () => [], propDecorators: { filteredData: [{
|
|
925
|
+
type: Input
|
|
926
|
+
}], ocLoading: [{
|
|
927
|
+
type: Input
|
|
928
|
+
}], ocDisabled: [{
|
|
929
|
+
type: Input
|
|
930
|
+
}], ocNoAvailableOptionsText: [{
|
|
931
|
+
type: Input
|
|
932
|
+
}], ocMaxResults: [{
|
|
933
|
+
type: Input
|
|
934
|
+
}], ocTypeForMoreResultsText: [{
|
|
935
|
+
type: Input
|
|
936
|
+
}], ocType: [{
|
|
937
|
+
type: Input
|
|
938
|
+
}], selectedIndex: [{
|
|
939
|
+
type: Input
|
|
940
|
+
}], ocOptionsMaxHeight: [{
|
|
941
|
+
type: Input
|
|
942
|
+
}], ocOptionsWidth: [{
|
|
943
|
+
type: Input
|
|
944
|
+
}], selectValue: [{
|
|
945
|
+
type: Output
|
|
946
|
+
}], decrementCounter: [{
|
|
947
|
+
type: Output
|
|
948
|
+
}], incrementCounter: [{
|
|
949
|
+
type: Output
|
|
950
|
+
}] } });
|
|
951
|
+
|
|
902
952
|
class OcAutocompleteComponent {
|
|
903
|
-
constructor(renderer, el, translateService, styleThemeService, cdr) {
|
|
953
|
+
constructor(renderer, el, translateService, styleThemeService, cdr, overlay) {
|
|
904
954
|
this.renderer = renderer;
|
|
905
955
|
this.el = el;
|
|
906
956
|
this.translateService = translateService;
|
|
907
957
|
this.styleThemeService = styleThemeService;
|
|
908
958
|
this.cdr = cdr;
|
|
959
|
+
this.overlay = overlay;
|
|
909
960
|
this._ocData = [];
|
|
961
|
+
this.ocPlaceholder = '';
|
|
910
962
|
this.ocSize = 'medium';
|
|
911
963
|
this.ocValue = '';
|
|
912
964
|
this.ocClearOnChange = false;
|
|
@@ -919,6 +971,7 @@ class OcAutocompleteComponent {
|
|
|
919
971
|
this.ocSelectByTyping = true;
|
|
920
972
|
this.ocDisabled = false;
|
|
921
973
|
this.ocType = 'default';
|
|
974
|
+
this.ocShowBackdrop = false;
|
|
922
975
|
this.ocHasDeleteButton = false;
|
|
923
976
|
this.ocEnableKeyboard = false;
|
|
924
977
|
this.ocValueChange = new EventEmitter();
|
|
@@ -929,12 +982,15 @@ class OcAutocompleteComponent {
|
|
|
929
982
|
this.hasSuffix = false;
|
|
930
983
|
this.hasPrefix = false;
|
|
931
984
|
this.isOptionsShown = false;
|
|
932
|
-
this.
|
|
985
|
+
this._filteredData = [];
|
|
933
986
|
this.selectedValue = {
|
|
934
987
|
name: '',
|
|
935
988
|
value: null,
|
|
936
989
|
};
|
|
937
990
|
this.selectedIndex = -1;
|
|
991
|
+
this.inputWidth = 'auto';
|
|
992
|
+
this.overlayRef = null;
|
|
993
|
+
this.dropdownComponentRef = null;
|
|
938
994
|
}
|
|
939
995
|
set ocData(value) {
|
|
940
996
|
this._ocData = value;
|
|
@@ -957,6 +1013,13 @@ class OcAutocompleteComponent {
|
|
|
957
1013
|
get ocStyle() {
|
|
958
1014
|
return this._ocStyle || this.styleThemeService.getStyleTheme() || 'otimus';
|
|
959
1015
|
}
|
|
1016
|
+
get filteredData() {
|
|
1017
|
+
return this._filteredData;
|
|
1018
|
+
}
|
|
1019
|
+
set filteredData(value) {
|
|
1020
|
+
this._filteredData = value;
|
|
1021
|
+
this.updateDropdownPortal();
|
|
1022
|
+
}
|
|
960
1023
|
get computedWidth() {
|
|
961
1024
|
return this.ocWidth ? this.ocWidth : null;
|
|
962
1025
|
}
|
|
@@ -995,6 +1058,9 @@ class OcAutocompleteComponent {
|
|
|
995
1058
|
this.formatOcValueType();
|
|
996
1059
|
this.loadOptions();
|
|
997
1060
|
this.translateService.getTranslationsByLanguage();
|
|
1061
|
+
setTimeout(() => {
|
|
1062
|
+
this.updateInputWidth();
|
|
1063
|
+
}, 0);
|
|
998
1064
|
this.cdr.detectChanges();
|
|
999
1065
|
}
|
|
1000
1066
|
formatOcValueType() {
|
|
@@ -1003,6 +1069,12 @@ class OcAutocompleteComponent {
|
|
|
1003
1069
|
}
|
|
1004
1070
|
return null;
|
|
1005
1071
|
}
|
|
1072
|
+
updateInputWidth() {
|
|
1073
|
+
if (this.input && this.input.nativeElement) {
|
|
1074
|
+
const inputElement = this.input.nativeElement;
|
|
1075
|
+
this.inputWidth = `${inputElement.offsetWidth}px`;
|
|
1076
|
+
}
|
|
1077
|
+
}
|
|
1006
1078
|
getTranslation(code) {
|
|
1007
1079
|
return this.translateService.getTranslation(code);
|
|
1008
1080
|
}
|
|
@@ -1031,9 +1103,11 @@ class OcAutocompleteComponent {
|
|
|
1031
1103
|
this.renderer.listen('window', 'click', (e) => {
|
|
1032
1104
|
const target = e.target;
|
|
1033
1105
|
const insideCounterSelect = this.ocType === 'counterSelect' && target.closest('.oc-counter-select');
|
|
1034
|
-
|
|
1035
|
-
|
|
1106
|
+
const insideDropdown = target.closest('.oc-autocomplete-dropdown-container');
|
|
1107
|
+
if (this.input && !insideCounterSelect && !insideDropdown) {
|
|
1108
|
+
if (target !== this.input.nativeElement && this.isOptionsShown) {
|
|
1036
1109
|
this.isOptionsShown = false;
|
|
1110
|
+
this.closeOverlay();
|
|
1037
1111
|
this.findByTyping();
|
|
1038
1112
|
}
|
|
1039
1113
|
}
|
|
@@ -1089,8 +1163,116 @@ class OcAutocompleteComponent {
|
|
|
1089
1163
|
}
|
|
1090
1164
|
toggleOptions() {
|
|
1091
1165
|
this.closeOnClickOut();
|
|
1166
|
+
this.updateInputWidth();
|
|
1167
|
+
if (this.isOptionsShown) {
|
|
1168
|
+
this.closeOverlay();
|
|
1169
|
+
}
|
|
1170
|
+
else {
|
|
1171
|
+
this.openOverlay();
|
|
1172
|
+
}
|
|
1092
1173
|
this.isOptionsShown = !this.isOptionsShown;
|
|
1093
1174
|
}
|
|
1175
|
+
openOverlay() {
|
|
1176
|
+
if (!this.input)
|
|
1177
|
+
return;
|
|
1178
|
+
const inputWidth = this.input.nativeElement.offsetWidth;
|
|
1179
|
+
const positionStrategy = this.overlay.position()
|
|
1180
|
+
.flexibleConnectedTo(this.input.nativeElement)
|
|
1181
|
+
.withPositions([
|
|
1182
|
+
{
|
|
1183
|
+
originX: 'start',
|
|
1184
|
+
originY: 'bottom',
|
|
1185
|
+
overlayX: 'start',
|
|
1186
|
+
overlayY: 'top'
|
|
1187
|
+
}
|
|
1188
|
+
]);
|
|
1189
|
+
// Create overlay config
|
|
1190
|
+
const overlayConfig = {
|
|
1191
|
+
positionStrategy,
|
|
1192
|
+
width: inputWidth,
|
|
1193
|
+
hasBackdrop: true,
|
|
1194
|
+
backdropClass: this.ocShowBackdrop ? undefined : 'cdk-overlay-transparent-backdrop',
|
|
1195
|
+
};
|
|
1196
|
+
// Create overlay
|
|
1197
|
+
this.overlayRef = this.overlay.create(overlayConfig);
|
|
1198
|
+
// Create portal
|
|
1199
|
+
const dropdownPortal = new ComponentPortal(OcAutocompleteDropdownComponent);
|
|
1200
|
+
// Attach portal to overlay
|
|
1201
|
+
const componentRef = this.overlayRef.attach(dropdownPortal);
|
|
1202
|
+
this.dropdownComponentRef = componentRef;
|
|
1203
|
+
// Set component properties
|
|
1204
|
+
this.setDropdownComponentInputs();
|
|
1205
|
+
// Subscribe to events
|
|
1206
|
+
componentRef.instance.selectValue.subscribe((value) => {
|
|
1207
|
+
this.selectValue(value);
|
|
1208
|
+
this.closeOverlay();
|
|
1209
|
+
});
|
|
1210
|
+
componentRef.instance.decrementCounter.subscribe((data) => {
|
|
1211
|
+
this.decrementCounter(data);
|
|
1212
|
+
});
|
|
1213
|
+
componentRef.instance.incrementCounter.subscribe((data) => {
|
|
1214
|
+
this.incrementCounter(data);
|
|
1215
|
+
});
|
|
1216
|
+
// Add scroll listener to update overlay position
|
|
1217
|
+
const scrollListener = this.renderer.listen('window', 'scroll', () => {
|
|
1218
|
+
if (this.overlayRef) {
|
|
1219
|
+
this.overlayRef.updatePosition();
|
|
1220
|
+
this.updateOverlayWidth();
|
|
1221
|
+
}
|
|
1222
|
+
});
|
|
1223
|
+
// Add resize listener to update overlay width and position
|
|
1224
|
+
const resizeListener = this.renderer.listen('window', 'resize', () => {
|
|
1225
|
+
if (this.overlayRef) {
|
|
1226
|
+
this.overlayRef.updatePosition();
|
|
1227
|
+
this.updateOverlayWidth();
|
|
1228
|
+
}
|
|
1229
|
+
});
|
|
1230
|
+
// Clean up listeners when overlay is disposed
|
|
1231
|
+
this.overlayRef.detachments().subscribe(() => {
|
|
1232
|
+
scrollListener();
|
|
1233
|
+
resizeListener();
|
|
1234
|
+
});
|
|
1235
|
+
}
|
|
1236
|
+
updateOverlayWidth() {
|
|
1237
|
+
if (this.overlayRef && this.input) {
|
|
1238
|
+
const inputWidth = this.input.nativeElement.offsetWidth;
|
|
1239
|
+
this.overlayRef.updateSize({ width: inputWidth });
|
|
1240
|
+
// Mark for check to update parent components with OnPush
|
|
1241
|
+
this.cdr.markForCheck();
|
|
1242
|
+
}
|
|
1243
|
+
}
|
|
1244
|
+
closeOverlay() {
|
|
1245
|
+
if (this.overlayRef) {
|
|
1246
|
+
this.overlayRef.dispose();
|
|
1247
|
+
this.overlayRef = null;
|
|
1248
|
+
this.dropdownComponentRef = null;
|
|
1249
|
+
}
|
|
1250
|
+
}
|
|
1251
|
+
updateDropdownPortal() {
|
|
1252
|
+
if (!this.dropdownComponentRef)
|
|
1253
|
+
return;
|
|
1254
|
+
this.dropdownComponentRef.instance.filteredData = this.filteredData;
|
|
1255
|
+
this.dropdownComponentRef.changeDetectorRef.detectChanges();
|
|
1256
|
+
// Mark for check to update parent components with OnPush
|
|
1257
|
+
this.cdr.markForCheck();
|
|
1258
|
+
}
|
|
1259
|
+
setDropdownComponentInputs() {
|
|
1260
|
+
if (!this.dropdownComponentRef)
|
|
1261
|
+
return;
|
|
1262
|
+
this.dropdownComponentRef.instance.filteredData = this.filteredData;
|
|
1263
|
+
this.dropdownComponentRef.instance.ocLoading = this.ocLoading;
|
|
1264
|
+
this.dropdownComponentRef.instance.ocDisabled = this.ocDisabled;
|
|
1265
|
+
this.dropdownComponentRef.instance.ocNoAvailableOptionsText = this.ocNoAvailableOptionsText;
|
|
1266
|
+
this.dropdownComponentRef.instance.ocMaxResults = this.ocMaxResults;
|
|
1267
|
+
this.dropdownComponentRef.instance.ocTypeForMoreResultsText = this.ocTypeForMoreResultsText;
|
|
1268
|
+
this.dropdownComponentRef.instance.ocType = this.ocType;
|
|
1269
|
+
this.dropdownComponentRef.instance.selectedIndex = this.selectedIndex;
|
|
1270
|
+
this.dropdownComponentRef.instance.ocOptionsMaxHeight = this.ocOptionsMaxHeight;
|
|
1271
|
+
this.dropdownComponentRef.instance.ocOptionsWidth = this.ocOptionsWidth;
|
|
1272
|
+
this.dropdownComponentRef.changeDetectorRef.detectChanges();
|
|
1273
|
+
// Mark for check to update parent components with OnPush
|
|
1274
|
+
this.cdr.markForCheck();
|
|
1275
|
+
}
|
|
1094
1276
|
selectValue(value) {
|
|
1095
1277
|
const foundValue = this.ocData.find((data) => data.value == value);
|
|
1096
1278
|
if (!foundValue) {
|
|
@@ -1099,6 +1281,8 @@ class OcAutocompleteComponent {
|
|
|
1099
1281
|
value: null,
|
|
1100
1282
|
};
|
|
1101
1283
|
this.selectedIndex = -1;
|
|
1284
|
+
this.closeOverlay();
|
|
1285
|
+
this.isOptionsShown = false;
|
|
1102
1286
|
this.cdr.detectChanges();
|
|
1103
1287
|
return;
|
|
1104
1288
|
}
|
|
@@ -1119,6 +1303,8 @@ class OcAutocompleteComponent {
|
|
|
1119
1303
|
this.selectedIndex = this.filteredData.indexOf(foundValue);
|
|
1120
1304
|
this.ocChange.emit(this.selectedValue.value);
|
|
1121
1305
|
this.cdr.detectChanges();
|
|
1306
|
+
// Mark for check to update parent components with OnPush
|
|
1307
|
+
this.cdr.markForCheck();
|
|
1122
1308
|
}
|
|
1123
1309
|
clearValue() {
|
|
1124
1310
|
this.selectedValue = {
|
|
@@ -1177,8 +1363,11 @@ class OcAutocompleteComponent {
|
|
|
1177
1363
|
e.stopPropagation();
|
|
1178
1364
|
}
|
|
1179
1365
|
}
|
|
1180
|
-
|
|
1181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading && !ocDisabled) {\n <ul\n #options\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li\n class=\"li-option\"\n #listOptionsRef\n >\n <button\n type=\"button\"\n (click)=\"selectValue(data.value)\"\n [class.hover]=\"ocType !== 'counterSelect'\"\n [class.highlight]=\"selectedIndex === i\"\n >\n @if (data.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n 'font-size': data.iconSize || '1.2rem',\n }\"\n >\n {{ data.icon }}\n </span>\n }\n {{ data.name }}\n </button>\n @if (ocType === 'counterSelect') {\n <div class=\"oc-counter-select\">\n <button\n class=\"subtract\"\n (click)=\"decrementCounter(data)\"\n >\n <span class=\"material-symbols-outlined\">remove</span>\n </button>\n <p class=\"counter\">{{ data.counter || 0 }}</p>\n <button\n class=\"add\"\n (click)=\"incrementCounter(data)\"\n >\n <span class=\"material-symbols-outlined\">add</span>\n </button>\n </div>\n }\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading && !ocDisabled) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1366
|
+
ngOnDestroy() {
|
|
1367
|
+
this.closeOverlay();
|
|
1368
|
+
}
|
|
1369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: InternationalizationService }, { token: StyleThemeService }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocShowBackdrop: "ocShowBackdrop", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1182
1371
|
}
|
|
1183
1372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
1184
1373
|
type: Component,
|
|
@@ -1186,8 +1375,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1186
1375
|
'[style.width]': 'computedWidth',
|
|
1187
1376
|
'[style.min-width]': 'computedMinWidth',
|
|
1188
1377
|
'[style.max-width]': 'computedMaxWidth',
|
|
1189
|
-
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading && !ocDisabled) {\n <ul\n #options\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li\n class=\"li-option\"\n #listOptionsRef\n >\n <button\n type=\"button\"\n (click)=\"selectValue(data.value)\"\n [class.hover]=\"ocType !== 'counterSelect'\"\n [class.highlight]=\"selectedIndex === i\"\n >\n @if (data.icon) {\n <span\n class=\"material-symbols-outlined\"\n [ngStyle]=\"{\n 'font-size': data.iconSize || '1.2rem',\n }\"\n >\n {{ data.icon }}\n </span>\n }\n {{ data.name }}\n </button>\n @if (ocType === 'counterSelect') {\n <div class=\"oc-counter-select\">\n <button\n class=\"subtract\"\n (click)=\"decrementCounter(data)\"\n >\n <span class=\"material-symbols-outlined\">remove</span>\n </button>\n <p class=\"counter\">{{ data.counter || 0 }}</p>\n <button\n class=\"add\"\n (click)=\"incrementCounter(data)\"\n >\n <span class=\"material-symbols-outlined\">add</span>\n </button>\n </div>\n }\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading && !ocDisabled) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1190
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
|
|
1378
|
+
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1379
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }], propDecorators: { input: [{
|
|
1191
1380
|
type: ViewChild,
|
|
1192
1381
|
args: ['input']
|
|
1193
1382
|
}], options: [{
|
|
@@ -1253,6 +1442,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1253
1442
|
type: Input
|
|
1254
1443
|
}], ocType: [{
|
|
1255
1444
|
type: Input
|
|
1445
|
+
}], ocShowBackdrop: [{
|
|
1446
|
+
type: Input
|
|
1256
1447
|
}], ocHasDeleteButton: [{
|
|
1257
1448
|
type: Input
|
|
1258
1449
|
}], ocEnableKeyboard: [{
|
|
@@ -1480,7 +1671,7 @@ class OcCheckboxComponent {
|
|
|
1480
1671
|
useExisting: forwardRef(() => OcCheckboxComponent),
|
|
1481
1672
|
multi: true,
|
|
1482
1673
|
},
|
|
1483
|
-
], ngImport: i0, template: "<button\n class=\"oc-checkbox-content cbx\"\n type=\"button\"\n (click)=\"toggleChecked(); onDoubleClick()\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n [tabIndex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n>\n <div\n class=\"oc-checkbox cbx\"\n [ngClass]=\"{\n checked: ocChecked,\n tiny: ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray',\n }\"\n >\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if (ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ ocLabel }}\n </span>\n }\n\n <ng-content> </ng-content>\n\n @if (formControl) {\n <input\n [formControl]=\"formControl\"\n [name]=\"ocName\"\n [checked]=\"ocChecked\"\n type=\"checkbox\"\n hidden\n [disabled]=\"ocDisabled\"\n />\n } @else {\n <input\n [name]=\"ocName\"\n [checked]=\"ocChecked\"\n type=\"checkbox\"\n hidden\n [disabled]=\"ocDisabled\"\n />\n }\n</button>\n", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type:
|
|
1674
|
+
], ngImport: i0, template: "<button\n class=\"oc-checkbox-content cbx\"\n type=\"button\"\n (click)=\"toggleChecked(); onDoubleClick()\"\n [ngClass]=\"{\n shui: ocStyle === 'shui',\n }\"\n [tabIndex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n>\n <div\n class=\"oc-checkbox cbx\"\n [ngClass]=\"{\n checked: ocChecked,\n tiny: ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray',\n }\"\n >\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if (ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ ocLabel }}\n </span>\n }\n\n <ng-content> </ng-content>\n\n @if (formControl) {\n <input\n [formControl]=\"formControl\"\n [name]=\"ocName\"\n [checked]=\"ocChecked\"\n type=\"checkbox\"\n hidden\n [disabled]=\"ocDisabled\"\n />\n } @else {\n <input\n [name]=\"ocName\"\n [checked]=\"ocChecked\"\n type=\"checkbox\"\n hidden\n [disabled]=\"ocDisabled\"\n />\n }\n</button>\n", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1484
1675
|
}
|
|
1485
1676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCheckboxComponent, decorators: [{
|
|
1486
1677
|
type: Component,
|