otimus-library 0.2.52 → 0.2.56
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/esm2022/lib/components/oc-autocomplete/oc-autocomplete.component.mjs +6 -3
- package/esm2022/lib/directives/oc-tooltip/oc-tooltip.directive.mjs +90 -64
- package/esm2022/lib/interfaces/oc-autocomplete.mjs +1 -1
- package/fesm2022/otimus-library.mjs +94 -65
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/lib/components/oc-autocomplete/oc-autocomplete.component.d.ts +2 -1
- package/lib/directives/oc-tooltip/oc-tooltip.directive.d.ts +10 -7
- package/lib/interfaces/oc-autocomplete.d.ts +3 -0
- package/package.json +3 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, Input, Directive,
|
|
2
|
+
import { Injectable, Component, Input, Directive, ViewEncapsulation, ContentChild, HostBinding, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, forwardRef, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2$1 from '@angular/platform-browser';
|
|
@@ -196,23 +196,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
196
196
|
}] } });
|
|
197
197
|
|
|
198
198
|
class OcTooltipDirective {
|
|
199
|
-
constructor(elRef, renderer) {
|
|
199
|
+
constructor(elRef, renderer, zone, cdr) {
|
|
200
200
|
this.elRef = elRef;
|
|
201
201
|
this.renderer = renderer;
|
|
202
|
+
this.zone = zone;
|
|
203
|
+
this.cdr = cdr;
|
|
202
204
|
this.content = '';
|
|
203
205
|
this.side = 'mouse';
|
|
204
|
-
this.created = false;
|
|
205
206
|
this.tooltip = null;
|
|
206
|
-
this.
|
|
207
|
+
this.moveScheduled = false;
|
|
208
|
+
this.zone.runOutsideAngular(() => {
|
|
209
|
+
this.setupEvents();
|
|
210
|
+
});
|
|
207
211
|
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
212
|
+
setupEvents() {
|
|
213
|
+
this.elRef.nativeElement.addEventListener('mouseover', (e) => this.onMouseOver(e));
|
|
214
|
+
this.elRef.nativeElement.addEventListener('mousemove', (e) => this.onMouseMove(e));
|
|
215
|
+
this.elRef.nativeElement.addEventListener('mouseout', (e) => this.onMouseOut(e));
|
|
216
|
+
}
|
|
217
|
+
createTooltip() {
|
|
218
|
+
if (!this.tooltip) {
|
|
219
|
+
this.tooltip = this.renderer.createElement('div');
|
|
220
|
+
this.renderer.addClass(this.tooltip, 'oc-tooltip');
|
|
221
|
+
this.renderer.setStyle(this.tooltip, 'position', 'absolute');
|
|
222
|
+
this.renderer.setStyle(this.tooltip, 'pointer-events', 'none');
|
|
223
|
+
this.renderer.setStyle(this.tooltip, 'z-index', '1000');
|
|
224
|
+
this.renderer.setStyle(this.tooltip, 'display', 'none');
|
|
225
|
+
this.renderer.appendChild(document.body, this.tooltip);
|
|
211
226
|
}
|
|
212
|
-
this.tooltip =
|
|
213
|
-
const
|
|
214
|
-
if (
|
|
215
|
-
this.content = this.content.replace('>', ' style="margin: 0">');
|
|
227
|
+
this.tooltip.innerHTML = '';
|
|
228
|
+
const isHTML = new DOMParser().parseFromString(this.content, 'text/html').body.children.length > 0;
|
|
229
|
+
if (isHTML) {
|
|
216
230
|
this.renderer.setProperty(this.tooltip, 'innerHTML', this.content);
|
|
217
231
|
}
|
|
218
232
|
else {
|
|
@@ -220,74 +234,95 @@ class OcTooltipDirective {
|
|
|
220
234
|
this.renderer.appendChild(this.tooltip, text);
|
|
221
235
|
this.renderer.setStyle(this.tooltip, 'color', '#7E8485');
|
|
222
236
|
}
|
|
223
|
-
this.renderer.addClass(this.tooltip, 'oc-tooltip');
|
|
224
237
|
if (this.side === 'mouse') {
|
|
225
238
|
this.renderer.addClass(this.tooltip, 'mouse-tracking');
|
|
226
239
|
}
|
|
227
|
-
this.renderer.setStyle(this.tooltip, 'position', 'absolute');
|
|
228
|
-
this.renderer.setStyle(this.tooltip, 'pointer-events', 'none');
|
|
229
|
-
this.renderer.setStyle(this.tooltip, 'z-index', '1000');
|
|
230
|
-
document.body.appendChild(this.tooltip);
|
|
231
|
-
this.created = true;
|
|
232
240
|
return this.tooltip;
|
|
233
241
|
}
|
|
234
242
|
onMouseOver(event) {
|
|
235
|
-
if (!this.content)
|
|
243
|
+
if (!this.content)
|
|
236
244
|
return;
|
|
245
|
+
if (!this.tooltip)
|
|
246
|
+
this.createTooltip();
|
|
247
|
+
this.renderer.setStyle(this.tooltip, 'display', 'block');
|
|
248
|
+
if (this.side === 'mouse') {
|
|
249
|
+
this.updateTooltipPosition(event);
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
this.positionTooltipFixed();
|
|
237
253
|
}
|
|
238
|
-
this.
|
|
239
|
-
this.updateTooltipPosition(event);
|
|
254
|
+
this.cdr.markForCheck();
|
|
240
255
|
}
|
|
241
256
|
onMouseMove(event) {
|
|
242
|
-
if (this.tooltip)
|
|
243
|
-
|
|
257
|
+
if (!this.tooltip || this.side !== 'mouse')
|
|
258
|
+
return;
|
|
259
|
+
if (!this.moveScheduled) {
|
|
260
|
+
this.moveScheduled = true;
|
|
261
|
+
requestAnimationFrame(() => {
|
|
244
262
|
this.updateTooltipPosition(event);
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
this.positionTooltipFixed();
|
|
248
|
-
}
|
|
263
|
+
this.moveScheduled = false;
|
|
264
|
+
});
|
|
249
265
|
}
|
|
250
266
|
}
|
|
251
|
-
|
|
267
|
+
onMouseOut(event) {
|
|
268
|
+
if (this.tooltip &&
|
|
269
|
+
event.relatedTarget instanceof Node &&
|
|
270
|
+
this.tooltip.contains(event.relatedTarget)) {
|
|
271
|
+
return; // evita flicker se mouse entra no tooltip
|
|
272
|
+
}
|
|
252
273
|
if (this.tooltip) {
|
|
253
|
-
this.renderer.setStyle(this.tooltip, '
|
|
254
|
-
this.renderer.setStyle(this.tooltip, 'top', `${event.pageY + 12}px`);
|
|
274
|
+
this.renderer.setStyle(this.tooltip, 'display', 'none');
|
|
255
275
|
}
|
|
276
|
+
this.cdr.markForCheck();
|
|
277
|
+
}
|
|
278
|
+
updateTooltipPosition(event) {
|
|
279
|
+
if (!this.tooltip)
|
|
280
|
+
return;
|
|
281
|
+
const left = event.pageX + 12;
|
|
282
|
+
const top = event.pageY + 12;
|
|
283
|
+
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
|
|
284
|
+
this.renderer.setStyle(this.tooltip, 'top', `${top}px`);
|
|
256
285
|
}
|
|
257
286
|
positionTooltipFixed() {
|
|
258
|
-
if (!this.tooltip)
|
|
287
|
+
if (!this.tooltip)
|
|
259
288
|
return;
|
|
260
|
-
}
|
|
261
289
|
const rect = this.elRef.nativeElement.getBoundingClientRect();
|
|
262
290
|
const width = this.elRef.nativeElement.offsetWidth;
|
|
263
291
|
const height = this.elRef.nativeElement.offsetHeight;
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
292
|
+
const scrollX = window.scrollX;
|
|
293
|
+
const scrollY = window.scrollY;
|
|
294
|
+
let left = 0;
|
|
295
|
+
let top = 0;
|
|
296
|
+
switch (this.side) {
|
|
297
|
+
case 'right':
|
|
298
|
+
left = scrollX + rect.right + 10;
|
|
299
|
+
top = scrollY + rect.top + height / 2;
|
|
300
|
+
break;
|
|
301
|
+
case 'left':
|
|
302
|
+
left = scrollX + rect.left - this.tooltip.offsetWidth - 10;
|
|
303
|
+
top = scrollY + rect.top + height / 2;
|
|
304
|
+
break;
|
|
305
|
+
case 'upon':
|
|
306
|
+
case 'top':
|
|
307
|
+
left = scrollX + rect.left + width / 2;
|
|
308
|
+
top = scrollY + rect.top - this.tooltip.offsetHeight - 10;
|
|
309
|
+
break;
|
|
310
|
+
case 'bottom':
|
|
311
|
+
left = scrollX + rect.left + width / 2;
|
|
312
|
+
top = scrollY + rect.bottom + 10;
|
|
313
|
+
break;
|
|
279
314
|
}
|
|
315
|
+
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
|
|
316
|
+
this.renderer.setStyle(this.tooltip, 'top', `${top}px`);
|
|
280
317
|
}
|
|
281
|
-
|
|
282
|
-
if (this.tooltip) {
|
|
283
|
-
|
|
284
|
-
this.created = false;
|
|
318
|
+
ngOnDestroy() {
|
|
319
|
+
if (this.tooltip && this.tooltip.parentNode) {
|
|
320
|
+
this.tooltip.parentNode.removeChild(this.tooltip);
|
|
285
321
|
this.tooltip = null;
|
|
286
322
|
}
|
|
287
|
-
this.mouseingInterval = null;
|
|
288
323
|
}
|
|
289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
290
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: OcTooltipDirective, isStandalone: true, selector: "[ocTooltip]", inputs: { content: "content", side: "side" },
|
|
324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
325
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: OcTooltipDirective, isStandalone: true, selector: "[ocTooltip]", inputs: { content: "content", side: "side" }, ngImport: i0 }); }
|
|
291
326
|
}
|
|
292
327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcTooltipDirective, decorators: [{
|
|
293
328
|
type: Directive,
|
|
@@ -295,19 +330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
295
330
|
selector: '[ocTooltip]',
|
|
296
331
|
standalone: true,
|
|
297
332
|
}]
|
|
298
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { content: [{
|
|
333
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
|
|
299
334
|
type: Input
|
|
300
335
|
}], side: [{
|
|
301
336
|
type: Input
|
|
302
|
-
}], onMouseOver: [{
|
|
303
|
-
type: HostListener,
|
|
304
|
-
args: ['mouseover', ['$event']]
|
|
305
|
-
}], onMouseMove: [{
|
|
306
|
-
type: HostListener,
|
|
307
|
-
args: ['mousemove', ['$event']]
|
|
308
|
-
}], onMouseOut: [{
|
|
309
|
-
type: HostListener,
|
|
310
|
-
args: ['mouseout']
|
|
311
337
|
}] } });
|
|
312
338
|
|
|
313
339
|
class OcInputComponent {
|
|
@@ -648,6 +674,7 @@ class OcAutocompleteComponent {
|
|
|
648
674
|
this.ocLoading = false;
|
|
649
675
|
this.ocSemanticLike = false; // deprecated. Prefer using ocStyleTheme instead
|
|
650
676
|
this.ocStyle = 'otimus';
|
|
677
|
+
this.iconSize = 'medium';
|
|
651
678
|
this.ocHasDeleteButton = false;
|
|
652
679
|
this.ocValueChange = new EventEmitter();
|
|
653
680
|
this.ocChange = new EventEmitter();
|
|
@@ -813,7 +840,7 @@ class OcAutocompleteComponent {
|
|
|
813
840
|
this.filteredData = this.ocData;
|
|
814
841
|
}
|
|
815
842
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: InternationalizationService }, { token: StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
816
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocData: "ocData", 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", ocHasDeleteButton: "ocHasDeleteButton" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", 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 }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\r\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\r\n small: ocSize === 'small',\r\n large: ocSize === 'large',\r\n error: !!ocError,\r\n prefix: hasPrefix,\r\n suffix: hasSuffix || ocHasDeleteButton,\r\n shui: ocStyle === 'shui',\r\n 'shui-input-box': ocStyle === 'shui',\r\n }\">\r\n <ng-content></ng-content>\r\n <input [placeholder]=\"ocPlaceholder\" #input (click)=\"toggleOptions(); ocClick.emit()\" type=\"text\"\r\n (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\r\n [ngClass]=\"{\r\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\r\n }\" [tabindex]=\"ocTabIndex\" />\r\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\r\n <label>\r\n <span [innerHTML]=\"ocPlaceholder\"></span>\r\n @if (ocRequired) {\r\n <span class=\"oc color error\">*</span>\r\n }\r\n </label>\r\n }\r\n <small *ngIf=\"ocError\" class=\"error-msg\">{{ ocError }}</small>\r\n <ng-content select=\"ocPrefix\"></ng-content>\r\n @if (ocHasDeleteButton) {\r\n <button class=\"oc-has-close-button oc suffix\" (click)=\"clearValue()\">\r\n <span class=\"material-symbols-outlined\">backspace</span>\r\n </button>\r\n }\r\n <ng-content select=\"ocSuffix\"></ng-content>\r\n\r\n <div class=\"oc-options-div\">\r\n @if (isOptionsShown && !ocLoading) {\r\n <ul #options class=\"oc-options\" [ngStyle]=\"{\r\n 'max-height': ocOptionsMaxHeight,\r\n width: ocOptionsWidth,\r\n }\">\r\n @if (!filteredData.length) {\r\n <li class=\"no-options\">\r\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\r\n </li>\r\n } @else {\r\n @for (data of filteredData; track data.value; let i = $index) {\r\n @if (!ocMaxResults || i < ocMaxResults) { <li>\r\n <button type=\"button\" (click)=\"selectValue(data.value)\">\r\n {{ data.name }}\r\n </button>\r\n </li>\r\n }\r\n }\r\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\r\n <li class=\"no-options\">\r\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else if (isOptionsShown && ocLoading) {\r\n <div class=\"oc-options loader\">\r\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\r\n </div>\r\n }\r\n </div>\r\n</div>", 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:#ebebeb}.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:#ebebeb;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:#ebebeb;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-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}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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 }); }
|
|
843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocData: "ocData", 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", ocHasDeleteButton: "ocHasDeleteButton" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", 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 }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\r\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\r\n small: ocSize === 'small',\r\n large: ocSize === 'large',\r\n error: !!ocError,\r\n prefix: hasPrefix,\r\n suffix: hasSuffix || ocHasDeleteButton,\r\n shui: ocStyle === 'shui',\r\n 'shui-input-box': ocStyle === 'shui',\r\n }\">\r\n <ng-content></ng-content>\r\n <input [placeholder]=\"ocPlaceholder\" #input (click)=\"toggleOptions(); ocClick.emit()\" type=\"text\"\r\n (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\r\n [ngClass]=\"{\r\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\r\n }\" [tabindex]=\"ocTabIndex\" />\r\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\r\n <label>\r\n <span [innerHTML]=\"ocPlaceholder\"></span>\r\n @if (ocRequired) {\r\n <span class=\"oc color error\">*</span>\r\n }\r\n </label>\r\n }\r\n <small *ngIf=\"ocError\" class=\"error-msg\">{{ ocError }}</small>\r\n <ng-content select=\"ocPrefix\"></ng-content>\r\n @if (ocHasDeleteButton) {\r\n <button class=\"oc-has-close-button oc suffix\" (click)=\"clearValue()\">\r\n <span class=\"material-symbols-outlined\">backspace</span>\r\n </button>\r\n }\r\n <ng-content select=\"ocSuffix\"></ng-content>\r\n\r\n <div class=\"oc-options-div\">\r\n @if (isOptionsShown && !ocLoading) {\r\n <ul #options class=\"oc-options\" [ngStyle]=\"{\r\n 'max-height': ocOptionsMaxHeight,\r\n width: ocOptionsWidth,\r\n }\">\r\n @if (!filteredData.length) {\r\n <li class=\"no-options\">\r\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\r\n </li>\r\n } @else {\r\n @for (data of filteredData; track data.value; let i = $index) {\r\n @if (!ocMaxResults || i < ocMaxResults) { <li>\r\n <button type=\"button\" (click)=\"selectValue(data.value)\">\r\n @if(data.icon) {\r\n <span class=\"material-symbols-outlined\" [ngStyle]=\"{\r\n 'font-size': data.iconSize || '1.2rem'\r\n }\"> {{ data.icon }} </span>\r\n }\r\n {{ data.name }}\r\n </button>\r\n </li>\r\n }\r\n }\r\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\r\n <li class=\"no-options\">\r\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else if (isOptionsShown && ocLoading) {\r\n <div class=\"oc-options loader\">\r\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\r\n </div>\r\n }\r\n </div>\r\n</div>", 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:#ebebeb}.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:#ebebeb;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:#ebebeb;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-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}.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{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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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 }); }
|
|
817
844
|
}
|
|
818
845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
819
846
|
type: Component,
|
|
@@ -821,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
821
848
|
'[style.width]': 'computedWidth',
|
|
822
849
|
'[style.min-width]': 'computedMinWidth',
|
|
823
850
|
'[style.max-width]': 'computedMaxWidth',
|
|
824
|
-
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div [ngClass]=\"{\r\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\r\n small: ocSize === 'small',\r\n large: ocSize === 'large',\r\n error: !!ocError,\r\n prefix: hasPrefix,\r\n suffix: hasSuffix || ocHasDeleteButton,\r\n shui: ocStyle === 'shui',\r\n 'shui-input-box': ocStyle === 'shui',\r\n }\">\r\n <ng-content></ng-content>\r\n <input [placeholder]=\"ocPlaceholder\" #input (click)=\"toggleOptions(); ocClick.emit()\" type=\"text\"\r\n (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\r\n [ngClass]=\"{\r\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\r\n }\" [tabindex]=\"ocTabIndex\" />\r\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\r\n <label>\r\n <span [innerHTML]=\"ocPlaceholder\"></span>\r\n @if (ocRequired) {\r\n <span class=\"oc color error\">*</span>\r\n }\r\n </label>\r\n }\r\n <small *ngIf=\"ocError\" class=\"error-msg\">{{ ocError }}</small>\r\n <ng-content select=\"ocPrefix\"></ng-content>\r\n @if (ocHasDeleteButton) {\r\n <button class=\"oc-has-close-button oc suffix\" (click)=\"clearValue()\">\r\n <span class=\"material-symbols-outlined\">backspace</span>\r\n </button>\r\n }\r\n <ng-content select=\"ocSuffix\"></ng-content>\r\n\r\n <div class=\"oc-options-div\">\r\n @if (isOptionsShown && !ocLoading) {\r\n <ul #options class=\"oc-options\" [ngStyle]=\"{\r\n 'max-height': ocOptionsMaxHeight,\r\n width: ocOptionsWidth,\r\n }\">\r\n @if (!filteredData.length) {\r\n <li class=\"no-options\">\r\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\r\n </li>\r\n } @else {\r\n @for (data of filteredData; track data.value; let i = $index) {\r\n @if (!ocMaxResults || i < ocMaxResults) { <li>\r\n <button type=\"button\" (click)=\"selectValue(data.value)\">\r\n {{ data.name }}\r\n </button>\r\n </li>\r\n }\r\n }\r\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\r\n <li class=\"no-options\">\r\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else if (isOptionsShown && ocLoading) {\r\n <div class=\"oc-options loader\">\r\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\r\n </div>\r\n }\r\n </div>\r\n</div>", 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:#ebebeb}.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:#ebebeb;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:#ebebeb;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-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}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{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"] }]
|
|
851
|
+
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div [ngClass]=\"{\r\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\r\n small: ocSize === 'small',\r\n large: ocSize === 'large',\r\n error: !!ocError,\r\n prefix: hasPrefix,\r\n suffix: hasSuffix || ocHasDeleteButton,\r\n shui: ocStyle === 'shui',\r\n 'shui-input-box': ocStyle === 'shui',\r\n }\">\r\n <ng-content></ng-content>\r\n <input [placeholder]=\"ocPlaceholder\" #input (click)=\"toggleOptions(); ocClick.emit()\" type=\"text\"\r\n (input)=\"filterData(ocValue)\" [(ngModel)]=\"ocValue\" (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\r\n [ngClass]=\"{\r\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\r\n }\" [tabindex]=\"ocTabIndex\" />\r\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\r\n <label>\r\n <span [innerHTML]=\"ocPlaceholder\"></span>\r\n @if (ocRequired) {\r\n <span class=\"oc color error\">*</span>\r\n }\r\n </label>\r\n }\r\n <small *ngIf=\"ocError\" class=\"error-msg\">{{ ocError }}</small>\r\n <ng-content select=\"ocPrefix\"></ng-content>\r\n @if (ocHasDeleteButton) {\r\n <button class=\"oc-has-close-button oc suffix\" (click)=\"clearValue()\">\r\n <span class=\"material-symbols-outlined\">backspace</span>\r\n </button>\r\n }\r\n <ng-content select=\"ocSuffix\"></ng-content>\r\n\r\n <div class=\"oc-options-div\">\r\n @if (isOptionsShown && !ocLoading) {\r\n <ul #options class=\"oc-options\" [ngStyle]=\"{\r\n 'max-height': ocOptionsMaxHeight,\r\n width: ocOptionsWidth,\r\n }\">\r\n @if (!filteredData.length) {\r\n <li class=\"no-options\">\r\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\r\n </li>\r\n } @else {\r\n @for (data of filteredData; track data.value; let i = $index) {\r\n @if (!ocMaxResults || i < ocMaxResults) { <li>\r\n <button type=\"button\" (click)=\"selectValue(data.value)\">\r\n @if(data.icon) {\r\n <span class=\"material-symbols-outlined\" [ngStyle]=\"{\r\n 'font-size': data.iconSize || '1.2rem'\r\n }\"> {{ data.icon }} </span>\r\n }\r\n {{ data.name }}\r\n </button>\r\n </li>\r\n }\r\n }\r\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\r\n <li class=\"no-options\">\r\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else if (isOptionsShown && ocLoading) {\r\n <div class=\"oc-options loader\">\r\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\r\n </div>\r\n }\r\n </div>\r\n</div>", 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:#ebebeb}.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:#ebebeb;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:#ebebeb;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-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}.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{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"] }]
|
|
825
852
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
|
|
826
853
|
type: ViewChild,
|
|
827
854
|
args: ['input']
|
|
@@ -877,6 +904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
877
904
|
type: Input
|
|
878
905
|
}], ocTabIndex: [{
|
|
879
906
|
type: Input
|
|
907
|
+
}], iconSize: [{
|
|
908
|
+
type: Input
|
|
880
909
|
}], ocHasDeleteButton: [{
|
|
881
910
|
type: Input
|
|
882
911
|
}], ocValueChange: [{
|