@masterkeymaterial/ui 1.0.0 → 1.0.3
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, model, input, output, effect, Component, HostBinding, ChangeDetectionStrategy, viewChild, ElementRef, inject, ViewContainerRef, contentChild, TemplateRef, HostListener, Directive, Injectable, InjectionToken, Injector, Pipe, Optional, Inject } from '@angular/core';
|
|
2
|
+
import { signal, computed, model, input, output, effect, Component, HostBinding, ChangeDetectionStrategy, viewChild, ElementRef, inject, ChangeDetectorRef, ViewContainerRef, contentChild, TemplateRef, HostListener, Directive, Injectable, InjectionToken, Injector, Pipe, Optional, Inject } from '@angular/core';
|
|
3
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
3
4
|
import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
|
|
4
|
-
import { TemplatePortal,
|
|
5
|
+
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
5
6
|
import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
|
|
6
7
|
import { RouterLink } from '@angular/router';
|
|
7
8
|
import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
|
|
8
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
9
9
|
import * as i1 from '@angular/cdk/drag-drop';
|
|
10
10
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
11
11
|
|
|
@@ -3457,8 +3457,8 @@ class UiButton {
|
|
|
3457
3457
|
this.corFrente.set(`var(--sys-on-black)`);
|
|
3458
3458
|
break;
|
|
3459
3459
|
case "card":
|
|
3460
|
-
this.corFundo.set(`var(--sys-
|
|
3461
|
-
this.corFrente.set(`var(--sys-on-
|
|
3460
|
+
this.corFundo.set(`var(--sys-surface)`);
|
|
3461
|
+
this.corFrente.set(`var(--sys-on-surface)`);
|
|
3462
3462
|
break;
|
|
3463
3463
|
case "": // Sem Tema
|
|
3464
3464
|
default: // Tema Desconhecido
|
|
@@ -3707,6 +3707,7 @@ class UiFilePreview {
|
|
|
3707
3707
|
removivel = input(false, /* @ts-ignore */
|
|
3708
3708
|
...(ngDevMode ? [{ debugName: "removivel" }] : /* istanbul ignore next */ []));
|
|
3709
3709
|
remover = output();
|
|
3710
|
+
sanitizer = inject(DomSanitizer);
|
|
3710
3711
|
tipoDisplay = computed(() => {
|
|
3711
3712
|
const type = (this.arquivo().type ?? '').toLowerCase();
|
|
3712
3713
|
const ext = (this.arquivo().extension ?? '').toLowerCase();
|
|
@@ -3728,15 +3729,23 @@ class UiFilePreview {
|
|
|
3728
3729
|
...(ngDevMode ? [{ debugName: "isImage" }] : /* istanbul ignore next */ []));
|
|
3729
3730
|
isPdf = computed(() => this.tipoDisplay() === 'pdf', /* @ts-ignore */
|
|
3730
3731
|
...(ngDevMode ? [{ debugName: "isPdf" }] : /* istanbul ignore next */ []));
|
|
3732
|
+
// <embed src> usa SecurityContext.RESOURCE_URL — requer SafeResourceUrl explícito
|
|
3733
|
+
safePdfUrl = computed(() => {
|
|
3734
|
+
const b64 = this.arquivo().base64;
|
|
3735
|
+
if (!b64)
|
|
3736
|
+
return null;
|
|
3737
|
+
return this.sanitizer.bypassSecurityTrustResourceUrl(b64);
|
|
3738
|
+
}, /* @ts-ignore */
|
|
3739
|
+
...(ngDevMode ? [{ debugName: "safePdfUrl" }] : /* istanbul ignore next */ []));
|
|
3731
3740
|
onRemover() {
|
|
3732
3741
|
this.remover.emit(this.arquivo());
|
|
3733
3742
|
}
|
|
3734
3743
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3735
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiFilePreview, isStandalone: true, selector: "ui-file-preview", inputs: { arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: true, transformFunction: null }, removivel: { classPropertyName: "removivel", publicName: "removivel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remover: "remover" }, ngImport: i0, template: "<div class=\"preview-container\">\n\t@if (isImage()) {\n\t\t<img [src]=\"arquivo().base64\" [alt]=\"arquivo().name\" class=\"preview-img\" />\n\t} @else if (isPdf()) {\n\t\t<embed [src]=\"
|
|
3744
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiFilePreview, isStandalone: true, selector: "ui-file-preview", inputs: { arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: true, transformFunction: null }, removivel: { classPropertyName: "removivel", publicName: "removivel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remover: "remover" }, ngImport: i0, template: "<div class=\"preview-container\">\n\t@if (isImage()) {\n\t\t<img [src]=\"arquivo().base64\" [alt]=\"arquivo().name\" class=\"preview-img\" />\n\t} @else if (isPdf()) {\n\t\t@if (safePdfUrl()) {\n\t\t\t<embed [src]=\"safePdfUrl()\" type=\"application/pdf\" class=\"preview-embed\" />\n\t\t} @else {\n\t\t\t<div class=\"preview-other\">\n\t\t\t\t<ui-icon name=\"file-earmark\"></ui-icon>\n\t\t\t\t<span class=\"preview-ext\">pdf</span>\n\t\t\t</div>\n\t\t}\n\t} @else {\n\t\t<div class=\"preview-other\">\n\t\t\t<ui-icon name=\"file-earmark\"></ui-icon>\n\t\t\t<span class=\"preview-ext\">{{ arquivo().extension.slice(1) }}</span>\n\t\t</div>\n\t}\n\t@if (removivel()) {\n\t\t<button class=\"btn-remover\" (click)=\"onRemover()\" type=\"button\" title=\"Remover\">\n\t\t\t<ui-icon name=\"x\"></ui-icon>\n\t\t</button>\n\t}\n</div>\n", styles: [":host{display:inline-flex;position:relative;height:var(--ui-altura-miniatura, 80px);width:auto;overflow:hidden;border-radius:var(--sys-border-radius, 8px);background-color:var(--sys-primary-15, rgba(0, 0, 0, .06));flex-shrink:0}.preview-container{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-img{height:100%;width:auto;object-fit:cover;display:block}.preview-embed{height:100%;width:80px;pointer-events:none}.preview-other{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:4px;min-width:60px;font-size:1.8rem;color:var(--sys-primary, #666)}.preview-ext{font-size:.65rem;color:var(--sys-primary, #666);font-weight:600;text-transform:uppercase}.btn-remover{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background-color:#0000008c;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:.8rem;opacity:0;transition:opacity .15s ease;z-index:2;line-height:1}.preview-container:hover .btn-remover{opacity:1}@media(hover:none){.btn-remover{opacity:1}}\n"], dependencies: [{ kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3736
3745
|
}
|
|
3737
3746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiFilePreview, decorators: [{
|
|
3738
3747
|
type: Component,
|
|
3739
|
-
args: [{ selector: 'ui-file-preview', imports: [UiIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-container\">\n\t@if (isImage()) {\n\t\t<img [src]=\"arquivo().base64\" [alt]=\"arquivo().name\" class=\"preview-img\" />\n\t} @else if (isPdf()) {\n\t\t<embed [src]=\"
|
|
3748
|
+
args: [{ selector: 'ui-file-preview', imports: [UiIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-container\">\n\t@if (isImage()) {\n\t\t<img [src]=\"arquivo().base64\" [alt]=\"arquivo().name\" class=\"preview-img\" />\n\t} @else if (isPdf()) {\n\t\t@if (safePdfUrl()) {\n\t\t\t<embed [src]=\"safePdfUrl()\" type=\"application/pdf\" class=\"preview-embed\" />\n\t\t} @else {\n\t\t\t<div class=\"preview-other\">\n\t\t\t\t<ui-icon name=\"file-earmark\"></ui-icon>\n\t\t\t\t<span class=\"preview-ext\">pdf</span>\n\t\t\t</div>\n\t\t}\n\t} @else {\n\t\t<div class=\"preview-other\">\n\t\t\t<ui-icon name=\"file-earmark\"></ui-icon>\n\t\t\t<span class=\"preview-ext\">{{ arquivo().extension.slice(1) }}</span>\n\t\t</div>\n\t}\n\t@if (removivel()) {\n\t\t<button class=\"btn-remover\" (click)=\"onRemover()\" type=\"button\" title=\"Remover\">\n\t\t\t<ui-icon name=\"x\"></ui-icon>\n\t\t</button>\n\t}\n</div>\n", styles: [":host{display:inline-flex;position:relative;height:var(--ui-altura-miniatura, 80px);width:auto;overflow:hidden;border-radius:var(--sys-border-radius, 8px);background-color:var(--sys-primary-15, rgba(0, 0, 0, .06));flex-shrink:0}.preview-container{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-img{height:100%;width:auto;object-fit:cover;display:block}.preview-embed{height:100%;width:80px;pointer-events:none}.preview-other{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:4px;min-width:60px;font-size:1.8rem;color:var(--sys-primary, #666)}.preview-ext{font-size:.65rem;color:var(--sys-primary, #666);font-weight:600;text-transform:uppercase}.btn-remover{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background-color:#0000008c;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:.8rem;opacity:0;transition:opacity .15s ease;z-index:2;line-height:1}.preview-container:hover .btn-remover{opacity:1}@media(hover:none){.btn-remover{opacity:1}}\n"] }]
|
|
3740
3749
|
}], propDecorators: { arquivo: [{ type: i0.Input, args: [{ isSignal: true, alias: "arquivo", required: true }] }], removivel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removivel", required: false }] }], remover: [{ type: i0.Output, args: ["remover"] }] } });
|
|
3741
3750
|
|
|
3742
3751
|
class UiMicroGallery {
|
|
@@ -3768,6 +3777,14 @@ class UiArquivos {
|
|
|
3768
3777
|
...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
|
|
3769
3778
|
temArquivos = computed(() => this.arquivos().length > 0, /* @ts-ignore */
|
|
3770
3779
|
...(ngDevMode ? [{ debugName: "temArquivos" }] : /* istanbul ignore next */ []));
|
|
3780
|
+
_cdr = inject(ChangeDetectorRef);
|
|
3781
|
+
constructor() {
|
|
3782
|
+
// Garante que o OnPush re-renderiza quando arquivos muda (ex.: input inicial do pai)
|
|
3783
|
+
effect(() => {
|
|
3784
|
+
this.arquivos();
|
|
3785
|
+
this._cdr.markForCheck();
|
|
3786
|
+
});
|
|
3787
|
+
}
|
|
3771
3788
|
onDropChanged(dropOutput) {
|
|
3772
3789
|
if (dropOutput.tipo === 'file' && Array.isArray(dropOutput.data)) {
|
|
3773
3790
|
this.arquivos.set(dropOutput.data);
|
|
@@ -3816,7 +3833,7 @@ class UiArquivos {
|
|
|
3816
3833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiArquivos, decorators: [{
|
|
3817
3834
|
type: Component,
|
|
3818
3835
|
args: [{ selector: 'ui-arquivos', imports: [UiDropZone, UiMicroGallery], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input #fileInput type=\"file\" class=\"file-input-hidden\"\n\t[accept]=\"accept()\" [multiple]=\"multiple()\" [disabled]=\"disabled()\"\n\t(change)=\"onFileInputChange($event)\" />\n\n<ui-drop-zone [sobrepor]=\"temArquivos()\" [disabled]=\"disabled()\"\n\t(changed)=\"onDropChanged($event)\" (clicked)=\"onDropClicked()\">\n\t@if (temArquivos()) {\n\t\t<ui-micro-gallery [arquivos]=\"arquivos()\" (remover)=\"onRemover($event)\">\n\t\t</ui-micro-gallery>\n\t}\n</ui-drop-zone>\n", styles: [":host{display:flex;flex:1;min-height:var(--ui-min-height, 200px);min-width:var(--ui-min-width, 200px)}.file-input-hidden{display:none}\n"] }]
|
|
3819
|
-
}], propDecorators: { arquivos: [{ type: i0.Input, args: [{ isSignal: true, alias: "arquivos", required: false }] }, { type: i0.Output, args: ["arquivosChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
3836
|
+
}], ctorParameters: () => [], propDecorators: { arquivos: [{ type: i0.Input, args: [{ isSignal: true, alias: "arquivos", required: false }] }, { type: i0.Output, args: ["arquivosChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
3820
3837
|
|
|
3821
3838
|
/**
|
|
3822
3839
|
* Cria um OverlayRef conectado a um elemento trigger com FlexibleConnectedPositionStrategy.
|
|
@@ -4317,11 +4334,11 @@ class UiSlide {
|
|
|
4317
4334
|
this.focused.set(false);
|
|
4318
4335
|
}
|
|
4319
4336
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiSlide, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: UiSlide, isStandalone: true, selector: "ui-slide", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focusedChange", changed: "changed" }, host: { properties: { "class.focused": "focused()" } }, viewQueries: [{ propertyName: "sliderbox", first: true, predicate: ["sliderbox"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #sliderbox class=\"sliderbox\" tabindex=\"0\" (click)=\"onClickSlide()\" [class.ativo]=\"ativo()\"\n\t[class.disabled]=\"disabled()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" [class.can-animate]=\"hasInteracted()\">\n\t<div class=\"slidercircle\">\n\t\t<div class=\"checkmark\" [class.ativo]=\"ativo()\"></div>\n\t</div>\n</div>", styles: [".sliderbox{--height: 28px;min-width:calc(var(--height) * 2.2);display:flex;align-items:center;cursor:pointer;height:var(--height);width:calc(var(--height) * 2.2);border-radius:calc(var(--height) / 2);background-color:var(--sys-primary-15);transition:background-color .3s ease}.sliderbox.ativo{background-color:var(--sys-primary)}.slidercircle{height:calc(var(--height) - 6px);width:calc(var(--height) - 6px);background-color:var(--sys-
|
|
4337
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: UiSlide, isStandalone: true, selector: "ui-slide", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focusedChange", changed: "changed" }, host: { properties: { "class.focused": "focused()" } }, viewQueries: [{ propertyName: "sliderbox", first: true, predicate: ["sliderbox"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #sliderbox class=\"sliderbox\" tabindex=\"0\" (click)=\"onClickSlide()\" [class.ativo]=\"ativo()\"\n\t[class.disabled]=\"disabled()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" [class.can-animate]=\"hasInteracted()\">\n\t<div class=\"slidercircle\">\n\t\t<div class=\"checkmark\" [class.ativo]=\"ativo()\"></div>\n\t</div>\n</div>", styles: [".sliderbox{--height: 28px;min-width:calc(var(--height) * 2.2);display:flex;align-items:center;cursor:pointer;height:var(--height);width:calc(var(--height) * 2.2);border-radius:calc(var(--height) / 2);background-color:var(--sys-primary-15);transition:background-color .3s ease}.sliderbox.ativo{background-color:var(--sys-primary)}.slidercircle{height:calc(var(--height) - 6px);width:calc(var(--height) - 6px);background-color:var(--sys-surface);border-radius:50%;margin:3px;transition:transform .3s ease;outline:1px dashed var(--sys-primary);display:flex;align-items:center;justify-content:center}.sliderbox.ativo .slidercircle{transform:translate(calc(var(--height) * 1.2)) scale(1.1);outline:2px solid var(--sys-primary)}.sliderbox.disabled{cursor:not-allowed;opacity:.6;filter:grayscale(1);pointer-events:none}.checkmark{width:55%;height:35%;border-left:2px solid var(--sys-primary);border-bottom:2px solid var(--sys-primary);transform:rotate(-45deg) translate(1px) scale(0);opacity:0}.checkmark.ativo{transform:rotate(-45deg) translate(1px) scale(1);opacity:1}.can-animate .checkmark{transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .15s ease}.sliderbox:focus-visible{outline:none}.sliderbox:focus-visible .slidercircle,.sliderbox:hover .slidercircle{outline:1px solid var(--sys-primary)}\n"] });
|
|
4321
4338
|
}
|
|
4322
4339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiSlide, decorators: [{
|
|
4323
4340
|
type: Component,
|
|
4324
|
-
args: [{ selector: 'ui-slide', host: { '[class.focused]': 'focused()' }, template: "<div #sliderbox class=\"sliderbox\" tabindex=\"0\" (click)=\"onClickSlide()\" [class.ativo]=\"ativo()\"\n\t[class.disabled]=\"disabled()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" [class.can-animate]=\"hasInteracted()\">\n\t<div class=\"slidercircle\">\n\t\t<div class=\"checkmark\" [class.ativo]=\"ativo()\"></div>\n\t</div>\n</div>", styles: [".sliderbox{--height: 28px;min-width:calc(var(--height) * 2.2);display:flex;align-items:center;cursor:pointer;height:var(--height);width:calc(var(--height) * 2.2);border-radius:calc(var(--height) / 2);background-color:var(--sys-primary-15);transition:background-color .3s ease}.sliderbox.ativo{background-color:var(--sys-primary)}.slidercircle{height:calc(var(--height) - 6px);width:calc(var(--height) - 6px);background-color:var(--sys-
|
|
4341
|
+
args: [{ selector: 'ui-slide', host: { '[class.focused]': 'focused()' }, template: "<div #sliderbox class=\"sliderbox\" tabindex=\"0\" (click)=\"onClickSlide()\" [class.ativo]=\"ativo()\"\n\t[class.disabled]=\"disabled()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\" [class.can-animate]=\"hasInteracted()\">\n\t<div class=\"slidercircle\">\n\t\t<div class=\"checkmark\" [class.ativo]=\"ativo()\"></div>\n\t</div>\n</div>", styles: [".sliderbox{--height: 28px;min-width:calc(var(--height) * 2.2);display:flex;align-items:center;cursor:pointer;height:var(--height);width:calc(var(--height) * 2.2);border-radius:calc(var(--height) / 2);background-color:var(--sys-primary-15);transition:background-color .3s ease}.sliderbox.ativo{background-color:var(--sys-primary)}.slidercircle{height:calc(var(--height) - 6px);width:calc(var(--height) - 6px);background-color:var(--sys-surface);border-radius:50%;margin:3px;transition:transform .3s ease;outline:1px dashed var(--sys-primary);display:flex;align-items:center;justify-content:center}.sliderbox.ativo .slidercircle{transform:translate(calc(var(--height) * 1.2)) scale(1.1);outline:2px solid var(--sys-primary)}.sliderbox.disabled{cursor:not-allowed;opacity:.6;filter:grayscale(1);pointer-events:none}.checkmark{width:55%;height:35%;border-left:2px solid var(--sys-primary);border-bottom:2px solid var(--sys-primary);transform:rotate(-45deg) translate(1px) scale(0);opacity:0}.checkmark.ativo{transform:rotate(-45deg) translate(1px) scale(1);opacity:1}.can-animate .checkmark{transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .15s ease}.sliderbox:focus-visible{outline:none}.sliderbox:focus-visible .slidercircle,.sliderbox:hover .slidercircle{outline:1px solid var(--sys-primary)}\n"] }]
|
|
4325
4342
|
}], ctorParameters: () => [], propDecorators: { sliderbox: [{ type: i0.ViewChild, args: ['sliderbox', { ...{ read: ElementRef }, isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }, { type: i0.Output, args: ["focusedChange"] }], focus: [{ type: i0.Input, args: [{ isSignal: true, alias: "focus", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
4326
4343
|
|
|
4327
4344
|
class UiCheckBox {
|
|
@@ -4484,6 +4501,13 @@ class UiMenu {
|
|
|
4484
4501
|
const closestTrigger = target.closest('.e-menu-trigger[id]');
|
|
4485
4502
|
const isOwnTrigger = closestTrigger === this.menuTrigger()?.nativeElement;
|
|
4486
4503
|
if (closestTrigger && !isOwnTrigger) {
|
|
4504
|
+
// Fechar submenus irmãos que estejam abertos antes de abrir o clicado
|
|
4505
|
+
const container = event.currentTarget;
|
|
4506
|
+
container.querySelectorAll('.e-menu-trigger.open').forEach(openTrigger => {
|
|
4507
|
+
if (openTrigger !== closestTrigger) {
|
|
4508
|
+
openTrigger.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape', bubbles: false }));
|
|
4509
|
+
}
|
|
4510
|
+
});
|
|
4487
4511
|
// Um trigger de submenu filho foi clicado — não fechar ainda, aguardar o filho fechar
|
|
4488
4512
|
if (this.autoCloseInCascade()) {
|
|
4489
4513
|
closestTrigger.addEventListener('menu-closed', () => this.closeOverlay(), { once: true });
|
|
@@ -4552,11 +4576,11 @@ class UiMenu {
|
|
|
4552
4576
|
mediaQuery.addEventListener('change', this.onChangeMediaQuery.bind(this));
|
|
4553
4577
|
}
|
|
4554
4578
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, autoCloseInCascade: { classPropertyName: "autoCloseInCascade", publicName: "autoCloseInCascade", isSignal: true, isRequired: false, transformFunction: null }, posicao: { classPropertyName: "posicao", publicName: "posicao", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { autoCloseInCascade: "autoCloseInCascadeChange", posicao: "posicaoChange", isOpened: "isOpenedChange" }, host: { properties: { "class.opened": "isOpened()" } }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, isSignal: true }, { propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #menuTrigger class=\"e-menu-trigger\" (click)=\"onClickSlotBotao($event)\" (keyup.Enter)=\"onOpenOrCloseOptions()\"\n\t(keydown.ArrowDown)=\"onArrowDown($event)\" (keyup.ArrowUp)=\"onArrowUp($event)\" (keyup.Escape)=\"closeOverlay()\"\n\t[id]=\"'tr'+id()\" [class.open]=\"isOpened()\">\n\t<ng-content select=\"[slot='botao']\">\n\t\t@if(icone()) {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\" [icone]=\"icone()\"></ui-button>\n\t\t} @else {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n\t\t\t\taria-hidden=\"true\">\n\t\t\t\t<circle cx=\"12\" cy=\"5\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"19\" r=\"2\" />\n\t\t\t</svg>\n\t\t</ui-button>\n\t\t}\n\t</ng-content>\n</div>\n\n<ng-template #menuTemplate>\n\t<div #menuContainer class=\"e-menu-container\" [class.smallScreen]=\"isSmallScreen()\"\n\t\t(click)=\"onClickContainer($event)\">\n\t\t<div [style.minWidth.px]=\"optionMinWidth()\" class=\"e-menu-area\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [".e-menu-area{background-color:var(--sys-
|
|
4579
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, autoCloseInCascade: { classPropertyName: "autoCloseInCascade", publicName: "autoCloseInCascade", isSignal: true, isRequired: false, transformFunction: null }, posicao: { classPropertyName: "posicao", publicName: "posicao", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { autoCloseInCascade: "autoCloseInCascadeChange", posicao: "posicaoChange", isOpened: "isOpenedChange" }, host: { properties: { "class.opened": "isOpened()" } }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, isSignal: true }, { propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #menuTrigger class=\"e-menu-trigger\" (click)=\"onClickSlotBotao($event)\" (keyup.Enter)=\"onOpenOrCloseOptions()\"\n\t(keydown.ArrowDown)=\"onArrowDown($event)\" (keyup.ArrowUp)=\"onArrowUp($event)\" (keyup.Escape)=\"closeOverlay()\"\n\t[id]=\"'tr'+id()\" [class.open]=\"isOpened()\">\n\t<ng-content select=\"[slot='botao']\">\n\t\t@if(icone()) {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\" [icone]=\"icone()\"></ui-button>\n\t\t} @else {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n\t\t\t\taria-hidden=\"true\">\n\t\t\t\t<circle cx=\"12\" cy=\"5\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"19\" r=\"2\" />\n\t\t\t</svg>\n\t\t</ui-button>\n\t\t}\n\t</ng-content>\n</div>\n\n<ng-template #menuTemplate>\n\t<div #menuContainer class=\"e-menu-container\" [class.smallScreen]=\"isSmallScreen()\"\n\t\t(click)=\"onClickContainer($event)\">\n\t\t<div [style.minWidth.px]=\"optionMinWidth()\" class=\"e-menu-area\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [".e-menu-area{background-color:var(--sys-surface, hsla(0, 0%, 100%, .5));border-radius:4px;box-shadow:0 2px 10px #0003;padding:8px 0;display:flex;flex-direction:column;gap:var(--ui-gap, 4px);-webkit-user-select:none;user-select:none}.e-menu-trigger{flex:1;display:block}.e-menu-container{width:max-content;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;color:var(--sys-on-surface);background:var(--sys-surface, hsla(0, 0%, 100%, .5));outline:1px solid var(--sys-outline);box-shadow:0 2px 8px #00000026;transform-origin:top left;transform:scale(.8) translateY(-10%);opacity:0;visibility:hidden;transition:all .15s ease-in-out}.e-menu-container.open{visibility:visible;opacity:1;transform:scale(1)}.e-menu-container.smallScreen{width:90vw}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }] });
|
|
4556
4580
|
}
|
|
4557
4581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiMenu, decorators: [{
|
|
4558
4582
|
type: Component,
|
|
4559
|
-
args: [{ selector: 'ui-menu', imports: [UiButton], host: { '[class.opened]': 'isOpened()' }, template: "<div #menuTrigger class=\"e-menu-trigger\" (click)=\"onClickSlotBotao($event)\" (keyup.Enter)=\"onOpenOrCloseOptions()\"\n\t(keydown.ArrowDown)=\"onArrowDown($event)\" (keyup.ArrowUp)=\"onArrowUp($event)\" (keyup.Escape)=\"closeOverlay()\"\n\t[id]=\"'tr'+id()\" [class.open]=\"isOpened()\">\n\t<ng-content select=\"[slot='botao']\">\n\t\t@if(icone()) {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\" [icone]=\"icone()\"></ui-button>\n\t\t} @else {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n\t\t\t\taria-hidden=\"true\">\n\t\t\t\t<circle cx=\"12\" cy=\"5\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"19\" r=\"2\" />\n\t\t\t</svg>\n\t\t</ui-button>\n\t\t}\n\t</ng-content>\n</div>\n\n<ng-template #menuTemplate>\n\t<div #menuContainer class=\"e-menu-container\" [class.smallScreen]=\"isSmallScreen()\"\n\t\t(click)=\"onClickContainer($event)\">\n\t\t<div [style.minWidth.px]=\"optionMinWidth()\" class=\"e-menu-area\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [".e-menu-area{background-color:var(--sys-
|
|
4583
|
+
args: [{ selector: 'ui-menu', imports: [UiButton], host: { '[class.opened]': 'isOpened()' }, template: "<div #menuTrigger class=\"e-menu-trigger\" (click)=\"onClickSlotBotao($event)\" (keyup.Enter)=\"onOpenOrCloseOptions()\"\n\t(keydown.ArrowDown)=\"onArrowDown($event)\" (keyup.ArrowUp)=\"onArrowUp($event)\" (keyup.Escape)=\"closeOverlay()\"\n\t[id]=\"'tr'+id()\" [class.open]=\"isOpened()\">\n\t<ng-content select=\"[slot='botao']\">\n\t\t@if(icone()) {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\" [icone]=\"icone()\"></ui-button>\n\t\t} @else {\n\t\t<ui-button tipo=\"icon\" tema=\"primary\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n\t\t\t\taria-hidden=\"true\">\n\t\t\t\t<circle cx=\"12\" cy=\"5\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"2\" />\n\t\t\t\t<circle cx=\"12\" cy=\"19\" r=\"2\" />\n\t\t\t</svg>\n\t\t</ui-button>\n\t\t}\n\t</ng-content>\n</div>\n\n<ng-template #menuTemplate>\n\t<div #menuContainer class=\"e-menu-container\" [class.smallScreen]=\"isSmallScreen()\"\n\t\t(click)=\"onClickContainer($event)\">\n\t\t<div [style.minWidth.px]=\"optionMinWidth()\" class=\"e-menu-area\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [".e-menu-area{background-color:var(--sys-surface, hsla(0, 0%, 100%, .5));border-radius:4px;box-shadow:0 2px 10px #0003;padding:8px 0;display:flex;flex-direction:column;gap:var(--ui-gap, 4px);-webkit-user-select:none;user-select:none}.e-menu-trigger{flex:1;display:block}.e-menu-container{width:max-content;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;color:var(--sys-on-surface);background:var(--sys-surface, hsla(0, 0%, 100%, .5));outline:1px solid var(--sys-outline);box-shadow:0 2px 8px #00000026;transform-origin:top left;transform:scale(.8) translateY(-10%);opacity:0;visibility:hidden;transition:all .15s ease-in-out}.e-menu-container.open{visibility:visible;opacity:1;transform:scale(1)}.e-menu-container.smallScreen{width:90vw}\n"] }]
|
|
4560
4584
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: false }] }], autoCloseInCascade: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCloseInCascade", required: false }] }, { type: i0.Output, args: ["autoCloseInCascadeChange"] }], posicao: [{ type: i0.Input, args: [{ isSignal: true, alias: "posicao", required: false }] }, { type: i0.Output, args: ["posicaoChange"] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], menuTrigger: [{ type: i0.ViewChild, args: ['menuTrigger', { isSignal: true }] }], menuTemplate: [{ type: i0.ViewChild, args: ['menuTemplate', { isSignal: true }] }] } });
|
|
4561
4585
|
|
|
4562
4586
|
class UiDivider {
|
|
@@ -4875,6 +4899,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4875
4899
|
args: [{ selector: 'ui-pagination', imports: [UiIcon], template: "<div class=\"pagination\">\n\t<div class=\"pagination-info\">\n\t\t<select class=\"pg-tamanho\" (change)=\"mudarTamanho($event)\">\n\t\t\t@for(op of opcoesTamanho(); track op) {\n\t\t\t<option [value]=\"op\" [selected]=\"op === tamanhoPagina()\">{{ op }} / p\u00E1g.</option>\n\t\t\t}\n\t\t</select>\n\t\t<span class=\"pg-total\">{{ total() }} itens</span>\n\t</div>\n\n\t<div class=\"pagination-controles\">\n\t\t<button class=\"pg-btn\" type=\"button\" (click)=\"irPara(1)\" [disabled]=\"pagina() === 1\" title=\"Primeira\">\n\t\t\t<ui-icon name=\"chevron-double-left\"></ui-icon>\n\t\t</button>\n\t\t<button class=\"pg-btn\" type=\"button\" (click)=\"irPara(pagina() - 1)\" [disabled]=\"pagina() === 1\" title=\"Anterior\">\n\t\t\t<ui-icon name=\"chevron-left\"></ui-icon>\n\t\t</button>\n\n\t\t@for(p of paginasVisiveis(); track $index) {\n\t\t@if(p === '...') {\n\t\t<span class=\"pg-ellipsis\">\u2026</span>\n\t\t} @else {\n\t\t<button class=\"pg-btn pg-num\" type=\"button\" [class.ativo]=\"pagina() === p\" (click)=\"irPara(+p)\">{{ p }}</button>\n\t\t}\n\t\t}\n\n\t\t<button class=\"pg-btn\" type=\"button\" (click)=\"irPara(pagina() + 1)\" [disabled]=\"pagina() === totalPaginas()\"\n\t\t\ttitle=\"Pr\u00F3xima\">\n\t\t\t<ui-icon name=\"chevron-right\"></ui-icon>\n\t\t</button>\n\t\t<button class=\"pg-btn\" type=\"button\" (click)=\"irPara(totalPaginas())\" [disabled]=\"pagina() === totalPaginas()\"\n\t\t\ttitle=\"\u00DAltima\">\n\t\t\t<ui-icon name=\"chevron-double-right\"></ui-icon>\n\t\t</button>\n\t</div>\n</div>", styles: [":host{display:block}.pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 0;font-size:.875em}.pagination-info{display:flex;align-items:center;gap:12px}.pg-tamanho{border:1px solid var(--sys-outline, #ccc);background:var(--sys-surface, #fff);border-radius:var(--sys-border-radius, 6px);padding:4px 8px;font-size:inherit;color:inherit;cursor:pointer}.pg-total{opacity:.55}.pagination-controles{display:flex;align-items:center;gap:2px}.pg-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--sys-outline, #ccc);background:var(--sys-surface, #fff);border-radius:var(--sys-border-radius, 6px);cursor:pointer;font-size:.875em;color:inherit;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.pg-btn:hover:not(:disabled){background:var(--sys-surface-variant, rgba(0, 0, 0, .05))}.pg-btn:disabled{opacity:.35;cursor:not-allowed}.pg-btn.ativo{background:var(--sys-primary);color:var(--sys-on-primary, #fff);border-color:var(--sys-primary);font-weight:700}.pg-ellipsis{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;opacity:.4}\n"] }]
|
|
4876
4900
|
}], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pagina: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagina", required: false }] }, { type: i0.Output, args: ["paginaChange"] }], tamanhoPagina: [{ type: i0.Input, args: [{ isSignal: true, alias: "tamanhoPagina", required: false }] }, { type: i0.Output, args: ["tamanhoPaginaChange"] }], opcoesTamanho: [{ type: i0.Input, args: [{ isSignal: true, alias: "opcoesTamanho", required: false }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
|
|
4877
4901
|
|
|
4902
|
+
/** Componente interno — não exportar via public-api.ts */
|
|
4903
|
+
class UiTooltipBubble {
|
|
4904
|
+
texto = input('', /* @ts-ignore */
|
|
4905
|
+
...(ngDevMode ? [{ debugName: "texto" }] : /* istanbul ignore next */ []));
|
|
4906
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiTooltipBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4907
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: UiTooltipBubble, isStandalone: true, selector: "ui-tooltip-bubble", inputs: { texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ui-tooltip-bubble" }, ngImport: i0, template: `{{ texto() }}`, isInline: true, styles: [":host{display:block;pointer-events:none;background:var(--sys-tooltip-bg, rgba(30, 30, 30, .9));color:var(--sys-tooltip-color, #fff);font-size:12px;font-weight:500;padding:5px 10px;border-radius:5px;white-space:normal;max-width:260px;box-shadow:0 2px 8px #0003;opacity:0;transition:opacity .15s ease}:host.visible{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4908
|
+
}
|
|
4909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiTooltipBubble, decorators: [{
|
|
4910
|
+
type: Component,
|
|
4911
|
+
args: [{ selector: 'ui-tooltip-bubble', host: { class: 'ui-tooltip-bubble' }, template: `{{ texto() }}`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;pointer-events:none;background:var(--sys-tooltip-bg, rgba(30, 30, 30, .9));color:var(--sys-tooltip-color, #fff);font-size:12px;font-weight:500;padding:5px 10px;border-radius:5px;white-space:normal;max-width:260px;box-shadow:0 2px 8px #0003;opacity:0;transition:opacity .15s ease}:host.visible{opacity:1}\n"] }]
|
|
4912
|
+
}], propDecorators: { texto: [{ type: i0.Input, args: [{ isSignal: true, alias: "texto", required: false }] }] } });
|
|
4913
|
+
|
|
4878
4914
|
class UiTooltip {
|
|
4879
4915
|
uiTooltip = input('', /* @ts-ignore */
|
|
4880
4916
|
...(ngDevMode ? [{ debugName: "uiTooltip" }] : /* istanbul ignore next */ []));
|
|
@@ -4897,12 +4933,9 @@ class UiTooltip {
|
|
|
4897
4933
|
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
4898
4934
|
panelClass: 'ui-tooltip-panel',
|
|
4899
4935
|
});
|
|
4900
|
-
const
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
document.body.appendChild(tooltipEl);
|
|
4904
|
-
this.overlayRef.attach(new DomPortal(tooltipEl));
|
|
4905
|
-
requestAnimationFrame(() => tooltipEl.classList.add('visible'));
|
|
4936
|
+
const ref = this.overlayRef.attach(new ComponentPortal(UiTooltipBubble));
|
|
4937
|
+
ref.setInput('texto', this.uiTooltip());
|
|
4938
|
+
requestAnimationFrame(() => ref.location.nativeElement.classList.add('visible'));
|
|
4906
4939
|
}
|
|
4907
4940
|
hide() {
|
|
4908
4941
|
this.overlayRef?.dispose();
|
|
@@ -5007,14 +5040,14 @@ class UiModalBox {
|
|
|
5007
5040
|
this.data.close();
|
|
5008
5041
|
}
|
|
5009
5042
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiModalBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5010
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiModalBox, isStandalone: true, selector: "ui-modal-box", host: { attributes: { "role": "dialog", "aria-modal": "true" } }, ngImport: i0, template: "<div class=\"modal-box\" [attr.data-tamanho]=\"config.tamanho ?? 'md'\">\n\n\t@if(config.titulo || config.closeable !== false) {\n\t<div class=\"modal-header\">\n\t\t@if(config.titulo) { <h2 class=\"modal-titulo\">{{ config.titulo }}</h2> }\n\t\t@if(config.closeable !== false) {\n\t\t<button class=\"modal-close\" type=\"button\" (click)=\"fechar()\" aria-label=\"Fechar\">\n\t\t\t<ui-icon name=\"x-lg\"></ui-icon>\n\t\t</button>\n\t\t}\n\t</div>\n\t}\n\n\t@if(config.mensagem) {\n\t<div class=\"modal-body\">\n\t\t<p>{{ config.mensagem }}</p>\n\t</div>\n\t}\n\n\t@if(conteudoComponent) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngComponentOutlet=\"conteudoComponent\"></ng-container>\n\t</div>\n\t}\n\n\t@if(conteudoTemplate) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngTemplateOutlet=\"conteudoTemplate\"></ng-container>\n\t</div>\n\t}\n\n\t@if(config.acoes && config.acoes.length > 0) {\n\t<div class=\"modal-footer\">\n\t\t@for(acao of config.acoes; track $index) {\n\t\t<ui-button [tema]=\"acao.tema\" tipo=\"fill\"\n\t\t\t(clicked)=\"acao.callback && acao.callback(); fechar()\">\n\t\t\t{{ acao.label }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n</div>\n", styles: ["
|
|
5043
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiModalBox, isStandalone: true, selector: "ui-modal-box", host: { attributes: { "role": "dialog", "aria-modal": "true" } }, ngImport: i0, template: "<div class=\"modal-box\" [attr.data-tamanho]=\"config.tamanho ?? 'md'\">\n\n\t@if(config.titulo || config.closeable !== false) {\n\t<div class=\"modal-header\">\n\t\t@if(config.titulo) { <h2 class=\"modal-titulo\">{{ config.titulo }}</h2> }\n\t\t@if(config.closeable !== false) {\n\t\t<button class=\"modal-close\" type=\"button\" (click)=\"fechar()\" aria-label=\"Fechar\">\n\t\t\t<ui-icon name=\"x-lg\"></ui-icon>\n\t\t</button>\n\t\t}\n\t</div>\n\t}\n\n\t@if(config.mensagem) {\n\t<div class=\"modal-body\">\n\t\t<p>{{ config.mensagem }}</p>\n\t</div>\n\t}\n\n\t@if(conteudoComponent) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngComponentOutlet=\"conteudoComponent\"></ng-container>\n\t</div>\n\t}\n\n\t@if(conteudoTemplate) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngTemplateOutlet=\"conteudoTemplate\"></ng-container>\n\t</div>\n\t}\n\n\t@if(config.acoes && config.acoes.length > 0) {\n\t<div class=\"modal-footer\">\n\t\t@for(acao of config.acoes; track $index) {\n\t\t<ui-button [tema]=\"acao.tema\" tipo=\"fill\"\n\t\t\t(clicked)=\"acao.callback && acao.callback(); fechar()\">\n\t\t\t{{ acao.label }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n</div>\n", styles: [".ui-modal-panel{padding:16px;box-sizing:border-box;max-height:90vh;display:flex;align-items:center;justify-content:center}.cdk-overlay-dark-backdrop{background:#00000073;animation:overlay-in .2s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.modal-box{background:var(--sys-surface, #fff);border-radius:var(--sys-border-radius, 12px);box-shadow:0 8px 40px #00000040;display:flex;flex-direction:column;overflow:hidden;animation:box-in .2s ease;max-height:90vh;width:100%}@keyframes box-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-box[data-tamanho=sm]{max-width:360px}.modal-box[data-tamanho=md]{max-width:520px}.modal-box[data-tamanho=lg]{max-width:720px}.modal-box[data-tamanho=xl]{max-width:960px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--sys-outline, #eee)}.modal-titulo{margin:0;font-size:1.1em;font-weight:600}.modal-close{background:none;border:none;cursor:pointer;font-size:18px;padding:4px;opacity:.55;color:inherit;line-height:1;border-radius:4px;transition:opacity .15s}.modal-close:hover{opacity:1}.modal-body{padding:20px;overflow-y:auto;flex:1}.modal-body p{margin:0;line-height:1.6}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--sys-outline, #eee)}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5011
5044
|
}
|
|
5012
5045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiModalBox, decorators: [{
|
|
5013
5046
|
type: Component,
|
|
5014
5047
|
args: [{ selector: 'ui-modal-box', imports: [UiButton, UiIcon, NgComponentOutlet, NgTemplateOutlet], host: {
|
|
5015
5048
|
'role': 'dialog',
|
|
5016
5049
|
'aria-modal': 'true',
|
|
5017
|
-
}, template: "<div class=\"modal-box\" [attr.data-tamanho]=\"config.tamanho ?? 'md'\">\n\n\t@if(config.titulo || config.closeable !== false) {\n\t<div class=\"modal-header\">\n\t\t@if(config.titulo) { <h2 class=\"modal-titulo\">{{ config.titulo }}</h2> }\n\t\t@if(config.closeable !== false) {\n\t\t<button class=\"modal-close\" type=\"button\" (click)=\"fechar()\" aria-label=\"Fechar\">\n\t\t\t<ui-icon name=\"x-lg\"></ui-icon>\n\t\t</button>\n\t\t}\n\t</div>\n\t}\n\n\t@if(config.mensagem) {\n\t<div class=\"modal-body\">\n\t\t<p>{{ config.mensagem }}</p>\n\t</div>\n\t}\n\n\t@if(conteudoComponent) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngComponentOutlet=\"conteudoComponent\"></ng-container>\n\t</div>\n\t}\n\n\t@if(conteudoTemplate) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngTemplateOutlet=\"conteudoTemplate\"></ng-container>\n\t</div>\n\t}\n\n\t@if(config.acoes && config.acoes.length > 0) {\n\t<div class=\"modal-footer\">\n\t\t@for(acao of config.acoes; track $index) {\n\t\t<ui-button [tema]=\"acao.tema\" tipo=\"fill\"\n\t\t\t(clicked)=\"acao.callback && acao.callback(); fechar()\">\n\t\t\t{{ acao.label }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n</div>\n", styles: ["
|
|
5050
|
+
}, template: "<div class=\"modal-box\" [attr.data-tamanho]=\"config.tamanho ?? 'md'\">\n\n\t@if(config.titulo || config.closeable !== false) {\n\t<div class=\"modal-header\">\n\t\t@if(config.titulo) { <h2 class=\"modal-titulo\">{{ config.titulo }}</h2> }\n\t\t@if(config.closeable !== false) {\n\t\t<button class=\"modal-close\" type=\"button\" (click)=\"fechar()\" aria-label=\"Fechar\">\n\t\t\t<ui-icon name=\"x-lg\"></ui-icon>\n\t\t</button>\n\t\t}\n\t</div>\n\t}\n\n\t@if(config.mensagem) {\n\t<div class=\"modal-body\">\n\t\t<p>{{ config.mensagem }}</p>\n\t</div>\n\t}\n\n\t@if(conteudoComponent) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngComponentOutlet=\"conteudoComponent\"></ng-container>\n\t</div>\n\t}\n\n\t@if(conteudoTemplate) {\n\t<div class=\"modal-body\">\n\t\t<ng-container *ngTemplateOutlet=\"conteudoTemplate\"></ng-container>\n\t</div>\n\t}\n\n\t@if(config.acoes && config.acoes.length > 0) {\n\t<div class=\"modal-footer\">\n\t\t@for(acao of config.acoes; track $index) {\n\t\t<ui-button [tema]=\"acao.tema\" tipo=\"fill\"\n\t\t\t(clicked)=\"acao.callback && acao.callback(); fechar()\">\n\t\t\t{{ acao.label }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n</div>\n", styles: [".ui-modal-panel{padding:16px;box-sizing:border-box;max-height:90vh;display:flex;align-items:center;justify-content:center}.cdk-overlay-dark-backdrop{background:#00000073;animation:overlay-in .2s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.modal-box{background:var(--sys-surface, #fff);border-radius:var(--sys-border-radius, 12px);box-shadow:0 8px 40px #00000040;display:flex;flex-direction:column;overflow:hidden;animation:box-in .2s ease;max-height:90vh;width:100%}@keyframes box-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-box[data-tamanho=sm]{max-width:360px}.modal-box[data-tamanho=md]{max-width:520px}.modal-box[data-tamanho=lg]{max-width:720px}.modal-box[data-tamanho=xl]{max-width:960px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--sys-outline, #eee)}.modal-titulo{margin:0;font-size:1.1em;font-weight:600}.modal-close{background:none;border:none;cursor:pointer;font-size:18px;padding:4px;opacity:.55;color:inherit;line-height:1;border-radius:4px;transition:opacity .15s}.modal-close:hover{opacity:1}.modal-body{padding:20px;overflow-y:auto;flex:1}.modal-body p{margin:0;line-height:1.6}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--sys-outline, #eee)}\n"] }]
|
|
5018
5051
|
}] });
|
|
5019
5052
|
|
|
5020
5053
|
class UiModalService {
|
|
@@ -5185,6 +5218,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5185
5218
|
}, imports: [UiIcon], template: "<div class=\"rating\" (mouseleave)=\"onMouseLeave()\">\n\t@for(i of estrelas(); track i) {\n\t<button class=\"estrela\" type=\"button\" [class.full]=\"pontuacaoEstrela(i) === 'full'\"\n\t\t[class.half]=\"pontuacaoEstrela(i) === 'half'\" [disabled]=\"readonly()\" (mousemove)=\"onMouseMove($event, i)\"\n\t\t(click)=\"selecionar(i, $event)\" [attr.aria-label]=\"'Avaliar ' + i + ' de ' + max()\">\n\t\t<ui-icon name=\"star-fill\" class=\"icone-fundo\"></ui-icon>\n\t\t<ui-icon name=\"star-fill\" class=\"icone-frente\"></ui-icon>\n\t</button>\n\t}\n</div>", styles: [":host{display:inline-flex}.rating{display:flex;align-items:center;gap:2px}.estrela{background:none;border:none;cursor:pointer;padding:2px;position:relative;font-size:24px;color:var(--sys-warning, #f5c518);line-height:1;overflow:hidden;display:inline-block}:host(.readonly) .estrela{cursor:default}.icone-fundo{opacity:.2}.icone-frente{position:absolute;left:2px;top:2px;width:0%;overflow:hidden;white-space:nowrap;transition:width .1s}.estrela.full .icone-frente{width:100%}.estrela.half .icone-frente{width:50%}.estrela.empty .icone-frente{width:0%}\n"] }]
|
|
5186
5219
|
}], propDecorators: { valor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valor", required: false }] }, { type: i0.Output, args: ["valorChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], meiaPasso: [{ type: i0.Input, args: [{ isSignal: true, alias: "meiaPasso", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
5187
5220
|
|
|
5221
|
+
const UI_TREE_CTX = new InjectionToken('UI_TREE_CTX');
|
|
5222
|
+
|
|
5223
|
+
class UiTreeNo {
|
|
5224
|
+
no = input.required(/* @ts-ignore */
|
|
5225
|
+
...(ngDevMode ? [{ debugName: "no" }] : /* istanbul ignore next */ []));
|
|
5226
|
+
nivel = input(0, /* @ts-ignore */
|
|
5227
|
+
...(ngDevMode ? [{ debugName: "nivel" }] : /* istanbul ignore next */ []));
|
|
5228
|
+
ctx = inject(UI_TREE_CTX);
|
|
5229
|
+
ehCategoria = computed(() => this.no().filhos !== undefined, /* @ts-ignore */
|
|
5230
|
+
...(ngDevMode ? [{ debugName: "ehCategoria" }] : /* istanbul ignore next */ []));
|
|
5231
|
+
eExpandido = computed(() => this.ctx.isExpandido(this.no().id), /* @ts-ignore */
|
|
5232
|
+
...(ngDevMode ? [{ debugName: "eExpandido" }] : /* istanbul ignore next */ []));
|
|
5233
|
+
eSelecionado = computed(() => this.ctx.isSelecionado(this.no().id), /* @ts-ignore */
|
|
5234
|
+
...(ngDevMode ? [{ debugName: "eSelecionado" }] : /* istanbul ignore next */ []));
|
|
5235
|
+
eIndeterminado = computed(() => {
|
|
5236
|
+
if (!this.ehCategoria())
|
|
5237
|
+
return false;
|
|
5238
|
+
const todos = this.ctx.coletarTodosFilhos(this.no());
|
|
5239
|
+
if (!todos.length)
|
|
5240
|
+
return false;
|
|
5241
|
+
const sel = todos.filter(id => this.ctx.isSelecionado(id)).length;
|
|
5242
|
+
return sel > 0 && sel < todos.length;
|
|
5243
|
+
}, /* @ts-ignore */
|
|
5244
|
+
...(ngDevMode ? [{ debugName: "eIndeterminado" }] : /* istanbul ignore next */ []));
|
|
5245
|
+
onClickRow() {
|
|
5246
|
+
const no = this.no();
|
|
5247
|
+
if (no.desabilitado)
|
|
5248
|
+
return;
|
|
5249
|
+
if (this.ehCategoria()) {
|
|
5250
|
+
this.ctx.toggleExpandir(no);
|
|
5251
|
+
if (!this.ctx.multiplo()) {
|
|
5252
|
+
this.ctx.toggleSelecionar(no);
|
|
5253
|
+
}
|
|
5254
|
+
}
|
|
5255
|
+
else {
|
|
5256
|
+
this.ctx.toggleSelecionar(no);
|
|
5257
|
+
}
|
|
5258
|
+
}
|
|
5259
|
+
onCheckChanged(valor) {
|
|
5260
|
+
if (valor) {
|
|
5261
|
+
this.ctx.selecionarTodos(this.no());
|
|
5262
|
+
}
|
|
5263
|
+
else {
|
|
5264
|
+
this.ctx.desselecionarTodos(this.no());
|
|
5265
|
+
}
|
|
5266
|
+
}
|
|
5267
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiTreeNo, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiTreeNo, isStandalone: true, selector: "ui-tree-no", inputs: { no: { classPropertyName: "no", publicName: "no", isSignal: true, isRequired: true, transformFunction: null }, nivel: { classPropertyName: "nivel", publicName: "nivel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<li class=\"tree-no\" [class.desabilitado]=\"no().desabilitado\">\n\t<div class=\"tree-row\" [class.selecionado]=\"eSelecionado()\" (click)=\"onClickRow()\">\n\t\t@if (ehCategoria()) {\n\t\t\t<button class=\"tree-toggle\" type=\"button\"\n\t\t\t\t(click)=\"$event.stopPropagation(); ctx.toggleExpandir(no())\"\n\t\t\t\t[attr.aria-expanded]=\"eExpandido()\">\n\t\t\t\t<ui-icon [name]=\"eExpandido() ? 'chevron-down' : 'chevron-right'\" />\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"tree-toggle-space\"></span>\n\t\t}\n\t\t@if (ctx.multiplo() && ehCategoria()) {\n\t\t\t<ui-check-box\n\t\t\t\t[value]=\"eSelecionado()\"\n\t\t\t\t[hasDash]=\"eIndeterminado()\"\n\t\t\t\t[disabled]=\"no().desabilitado\"\n\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t(changed)=\"onCheckChanged($event)\"\n\t\t\t/>\n\t\t}\n\t\t@if (no().icone) {\n\t\t\t<i class=\"tree-icone\" [class]=\"no().icone\"></i>\n\t\t}\n\t\t<span class=\"tree-label\">{{ no().label }}</span>\n\t</div>\n\t@if (ehCategoria() && eExpandido()) {\n\t\t<ul class=\"tree-list tree-filhos\">\n\t\t\t@for (filho of no().filhos!; track filho.id) {\n\t\t\t\t<ui-tree-no [no]=\"filho\" [nivel]=\"nivel() + 1\" />\n\t\t\t}\n\t\t</ul>\n\t}\n</li>\n", styles: [":host{display:contents}.tree-list{list-style:none;margin:0;padding:0}.tree-filhos{padding-left:20px}.tree-no{-webkit-user-select:none;user-select:none}.tree-no.desabilitado{opacity:.4;pointer-events:none}.tree-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--sys-border-radius, 6px);cursor:pointer;transition:background .12s;font-size:.9em;--ui-size: 16px}.tree-row:hover{background:var(--sys-surface-variant, rgba(0, 0, 0, .05))}.tree-row.selecionado{background:color-mix(in srgb,var(--sys-primary) 12%,transparent);color:var(--sys-primary);font-weight:500}.tree-toggle{background:none;border:none;cursor:pointer;padding:0;color:inherit;opacity:.5;width:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.tree-toggle:hover{opacity:1}.tree-toggle-space{width:16px;flex-shrink:0}.tree-icone{font-size:14px;opacity:.6;flex-shrink:0}.tree-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: UiTreeNo, selector: "ui-tree-no", inputs: ["no", "nivel"] }, { kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }] });
|
|
5269
|
+
}
|
|
5270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiTreeNo, decorators: [{
|
|
5271
|
+
type: Component,
|
|
5272
|
+
args: [{ selector: 'ui-tree-no', imports: [UiTreeNo, UiCheckBox, UiIcon], template: "<li class=\"tree-no\" [class.desabilitado]=\"no().desabilitado\">\n\t<div class=\"tree-row\" [class.selecionado]=\"eSelecionado()\" (click)=\"onClickRow()\">\n\t\t@if (ehCategoria()) {\n\t\t\t<button class=\"tree-toggle\" type=\"button\"\n\t\t\t\t(click)=\"$event.stopPropagation(); ctx.toggleExpandir(no())\"\n\t\t\t\t[attr.aria-expanded]=\"eExpandido()\">\n\t\t\t\t<ui-icon [name]=\"eExpandido() ? 'chevron-down' : 'chevron-right'\" />\n\t\t\t</button>\n\t\t} @else {\n\t\t\t<span class=\"tree-toggle-space\"></span>\n\t\t}\n\t\t@if (ctx.multiplo() && ehCategoria()) {\n\t\t\t<ui-check-box\n\t\t\t\t[value]=\"eSelecionado()\"\n\t\t\t\t[hasDash]=\"eIndeterminado()\"\n\t\t\t\t[disabled]=\"no().desabilitado\"\n\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t(changed)=\"onCheckChanged($event)\"\n\t\t\t/>\n\t\t}\n\t\t@if (no().icone) {\n\t\t\t<i class=\"tree-icone\" [class]=\"no().icone\"></i>\n\t\t}\n\t\t<span class=\"tree-label\">{{ no().label }}</span>\n\t</div>\n\t@if (ehCategoria() && eExpandido()) {\n\t\t<ul class=\"tree-list tree-filhos\">\n\t\t\t@for (filho of no().filhos!; track filho.id) {\n\t\t\t\t<ui-tree-no [no]=\"filho\" [nivel]=\"nivel() + 1\" />\n\t\t\t}\n\t\t</ul>\n\t}\n</li>\n", styles: [":host{display:contents}.tree-list{list-style:none;margin:0;padding:0}.tree-filhos{padding-left:20px}.tree-no{-webkit-user-select:none;user-select:none}.tree-no.desabilitado{opacity:.4;pointer-events:none}.tree-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--sys-border-radius, 6px);cursor:pointer;transition:background .12s;font-size:.9em;--ui-size: 16px}.tree-row:hover{background:var(--sys-surface-variant, rgba(0, 0, 0, .05))}.tree-row.selecionado{background:color-mix(in srgb,var(--sys-primary) 12%,transparent);color:var(--sys-primary);font-weight:500}.tree-toggle{background:none;border:none;cursor:pointer;padding:0;color:inherit;opacity:.5;width:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.tree-toggle:hover{opacity:1}.tree-toggle-space{width:16px;flex-shrink:0}.tree-icone{font-size:14px;opacity:.6;flex-shrink:0}.tree-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
5273
|
+
}], propDecorators: { no: [{ type: i0.Input, args: [{ isSignal: true, alias: "no", required: true }] }], nivel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nivel", required: false }] }] } });
|
|
5274
|
+
|
|
5188
5275
|
class UiTree {
|
|
5189
5276
|
nos = input([], /* @ts-ignore */
|
|
5190
5277
|
...(ngDevMode ? [{ debugName: "nos" }] : /* istanbul ignore next */ []));
|
|
@@ -5195,6 +5282,12 @@ class UiTree {
|
|
|
5195
5282
|
expandidos = signal(new Set(), /* @ts-ignore */
|
|
5196
5283
|
...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
|
|
5197
5284
|
carregarFilhos = output();
|
|
5285
|
+
isExpandido(id) {
|
|
5286
|
+
return this.expandidos().has(id);
|
|
5287
|
+
}
|
|
5288
|
+
isSelecionado(id) {
|
|
5289
|
+
return this.selecionado().includes(id);
|
|
5290
|
+
}
|
|
5198
5291
|
toggleExpandir(no) {
|
|
5199
5292
|
const set = new Set(this.expandidos());
|
|
5200
5293
|
if (set.has(no.id)) {
|
|
@@ -5202,39 +5295,46 @@ class UiTree {
|
|
|
5202
5295
|
}
|
|
5203
5296
|
else {
|
|
5204
5297
|
set.add(no.id);
|
|
5205
|
-
if (!no.filhos || no.filhos.length === 0)
|
|
5298
|
+
if (!no.filhos || no.filhos.length === 0) {
|
|
5206
5299
|
this.carregarFilhos.emit(no);
|
|
5300
|
+
}
|
|
5207
5301
|
}
|
|
5208
5302
|
this.expandidos.set(set);
|
|
5209
5303
|
}
|
|
5210
|
-
isExpandido(id) {
|
|
5211
|
-
return this.expandidos().has(id);
|
|
5212
|
-
}
|
|
5213
5304
|
toggleSelecionar(no) {
|
|
5214
5305
|
if (no.desabilitado)
|
|
5215
5306
|
return;
|
|
5216
5307
|
const atual = this.selecionado();
|
|
5217
5308
|
if (this.multiplo()) {
|
|
5218
|
-
|
|
5219
|
-
this.selecionado.set(atual.filter(id => id !== no.id));
|
|
5220
|
-
}
|
|
5221
|
-
else {
|
|
5222
|
-
this.selecionado.set([...atual, no.id]);
|
|
5223
|
-
}
|
|
5309
|
+
this.selecionado.set(atual.includes(no.id) ? atual.filter(id => id !== no.id) : [...atual, no.id]);
|
|
5224
5310
|
}
|
|
5225
5311
|
else {
|
|
5226
5312
|
this.selecionado.set(atual.includes(no.id) ? [] : [no.id]);
|
|
5227
5313
|
}
|
|
5228
5314
|
}
|
|
5229
|
-
|
|
5230
|
-
|
|
5315
|
+
coletarTodosFilhos(no) {
|
|
5316
|
+
const ids = [];
|
|
5317
|
+
const visitar = (n) => {
|
|
5318
|
+
ids.push(n.id);
|
|
5319
|
+
n.filhos?.forEach(f => visitar(f));
|
|
5320
|
+
};
|
|
5321
|
+
no.filhos?.forEach(f => visitar(f));
|
|
5322
|
+
return ids;
|
|
5323
|
+
}
|
|
5324
|
+
selecionarTodos(no) {
|
|
5325
|
+
const filhos = this.coletarTodosFilhos(no);
|
|
5326
|
+
this.selecionado.set([...new Set([...this.selecionado(), no.id, ...filhos])]);
|
|
5327
|
+
}
|
|
5328
|
+
desselecionarTodos(no) {
|
|
5329
|
+
const paraRemover = new Set([no.id, ...this.coletarTodosFilhos(no)]);
|
|
5330
|
+
this.selecionado.set(this.selecionado().filter(id => !paraRemover.has(id)));
|
|
5231
5331
|
}
|
|
5232
5332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiTree, isStandalone: true, selector: "ui-tree", inputs: { nos: { classPropertyName: "nos", publicName: "nos", isSignal: true, isRequired: false, transformFunction: null }, multiplo: { classPropertyName: "multiplo", publicName: "multiplo", isSignal: true, isRequired: false, transformFunction: null }, selecionado: { classPropertyName: "selecionado", publicName: "selecionado", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selecionado: "selecionadoChange", carregarFilhos: "carregarFilhos" }, ngImport: i0, template: "<ul class=\"tree-list\">\n\t@for(no of nos(); track no.id) {\n\t
|
|
5333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: UiTree, isStandalone: true, selector: "ui-tree", inputs: { nos: { classPropertyName: "nos", publicName: "nos", isSignal: true, isRequired: false, transformFunction: null }, multiplo: { classPropertyName: "multiplo", publicName: "multiplo", isSignal: true, isRequired: false, transformFunction: null }, selecionado: { classPropertyName: "selecionado", publicName: "selecionado", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selecionado: "selecionadoChange", carregarFilhos: "carregarFilhos" }, providers: [{ provide: UI_TREE_CTX, useExisting: UiTree }], ngImport: i0, template: "<ul class=\"tree-list\">\n\t@for (no of nos(); track no.id) {\n\t\t<ui-tree-no [no]=\"no\" [nivel]=\"0\" />\n\t}\n</ul>\n", styles: [":host{display:block}.tree-list{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "component", type: UiTreeNo, selector: "ui-tree-no", inputs: ["no", "nivel"] }] });
|
|
5234
5334
|
}
|
|
5235
5335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UiTree, decorators: [{
|
|
5236
5336
|
type: Component,
|
|
5237
|
-
args: [{ selector: 'ui-tree', imports: [
|
|
5337
|
+
args: [{ selector: 'ui-tree', imports: [UiTreeNo], providers: [{ provide: UI_TREE_CTX, useExisting: UiTree }], template: "<ul class=\"tree-list\">\n\t@for (no of nos(); track no.id) {\n\t\t<ui-tree-no [no]=\"no\" [nivel]=\"0\" />\n\t}\n</ul>\n", styles: [":host{display:block}.tree-list{list-style:none;margin:0;padding:0}\n"] }]
|
|
5238
5338
|
}], propDecorators: { nos: [{ type: i0.Input, args: [{ isSignal: true, alias: "nos", required: false }] }], multiplo: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplo", required: false }] }], selecionado: [{ type: i0.Input, args: [{ isSignal: true, alias: "selecionado", required: false }] }, { type: i0.Output, args: ["selecionadoChange"] }], carregarFilhos: [{ type: i0.Output, args: ["carregarFilhos"] }] } });
|
|
5239
5339
|
|
|
5240
5340
|
class UiTimeline {
|
|
@@ -5451,11 +5551,11 @@ class FieldsAutocomplete extends BaseFieldsForm {
|
|
|
5451
5551
|
this.overlayRef = null;
|
|
5452
5552
|
}
|
|
5453
5553
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5454
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsAutocomplete, isStandalone: true, selector: "fields-autocomplete", viewQueries: [{ propertyName: "triggerElement", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div #triggerElement class=\"fieldField FieldAutoComplete\">\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\">\n\t\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" (keyup)=\"markKey($event)\" (keydown.tab)=\"closeOverlay()\" [class.outlined]=\"true\"\n\t\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>\n\n<ng-template #optionsTemplate>\n\t<div class=\"select-options-container\">\n\t\t<div class=\"options-list\">\n\t\t\t@for(option of optionsFiltered(); track option.k) {\n\t\t\t<div class=\"option-item\" [class.selected]=\"option.selected\" [style.width.px]=\"offsetWidth()\" [title]=\"option.v\"\n\t\t\t\t(click)=\"onSelectOption(option)\" (keyup.Enter)=\"onSelectOption(option)\" tabindex=\"-1\"\n\t\t\t\t[class.choosing]=\"option.choosing\">\n\t\t\t\t<div class=\"option-item-check\"></div>\n\t\t\t\t<div class=\"option-item-text\" [innerHTML]=\"option.html\"></div>\n\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5554
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsAutocomplete, isStandalone: true, selector: "fields-autocomplete", viewQueries: [{ propertyName: "triggerElement", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div #triggerElement class=\"fieldField FieldAutoComplete\">\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\">\n\t\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" (keyup)=\"markKey($event)\" (keydown.tab)=\"closeOverlay()\" [class.outlined]=\"true\"\n\t\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>\n\n<ng-template #optionsTemplate>\n\t<div class=\"select-options-container\">\n\t\t<div class=\"options-list\">\n\t\t\t@for(option of optionsFiltered(); track option.k) {\n\t\t\t<div class=\"option-item\" [class.selected]=\"option.selected\" [style.width.px]=\"offsetWidth()\" [title]=\"option.v\"\n\t\t\t\t(click)=\"onSelectOption(option)\" (keyup.Enter)=\"onSelectOption(option)\" tabindex=\"-1\"\n\t\t\t\t[class.choosing]=\"option.choosing\">\n\t\t\t\t<div class=\"option-item-check\"></div>\n\t\t\t\t<div class=\"option-item-text\" [innerHTML]=\"option.html\"></div>\n\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldAutoComplete{position:relative;display:flex}.FieldAutoComplete>div:first-child{flex:1;display:flex;align-items:center;justify-content:space-between}.FieldAutoComplete>div:first-child:focus{outline:2px solid var(--campoCor)}.menuTrigger{width:100%;height:0px}.select-options-container{width:max-content;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;color:var(--sys-on-background);background:var(--sys-background);outline:1px solid var(--sys-outline);box-shadow:0 2px 8px #00000026}.options-list{padding:0;max-height:300px;overflow-y:auto}.option-item{display:flex;align-items:center;justify-content:space-between;padding:15px 5px;margin-top:3px;cursor:pointer;transition:background-color .2s}.option-item.selected{background:color-mix(in srgb,var(--sys-primary) 50%,var(--sys-background) 50%);color:var(--sys-on-background);font-weight:500}.option-item.choosing{outline:none;background:color-mix(in srgb,var(--sys-primary) 20%,var(--sys-background) 80%);color:var(--sys-on-background)}.option-item:hover{background:color-mix(in srgb,var(--sys-primary) 20%,var(--sys-background) 80%);color:var(--sys-on-background)}.option-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.option-item-check{width:16px;height:16px;margin:auto 2px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;visibility:hidden}.option-item.selected .option-item-check{visibility:visible}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5455
5555
|
}
|
|
5456
5556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsAutocomplete, decorators: [{
|
|
5457
5557
|
type: Component,
|
|
5458
|
-
args: [{ selector: 'fields-autocomplete', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div #triggerElement class=\"fieldField FieldAutoComplete\">\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\">\n\t\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" (keyup)=\"markKey($event)\" (keydown.tab)=\"closeOverlay()\" [class.outlined]=\"true\"\n\t\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>\n\n<ng-template #optionsTemplate>\n\t<div class=\"select-options-container\">\n\t\t<div class=\"options-list\">\n\t\t\t@for(option of optionsFiltered(); track option.k) {\n\t\t\t<div class=\"option-item\" [class.selected]=\"option.selected\" [style.width.px]=\"offsetWidth()\" [title]=\"option.v\"\n\t\t\t\t(click)=\"onSelectOption(option)\" (keyup.Enter)=\"onSelectOption(option)\" tabindex=\"-1\"\n\t\t\t\t[class.choosing]=\"option.choosing\">\n\t\t\t\t<div class=\"option-item-check\"></div>\n\t\t\t\t<div class=\"option-item-text\" [innerHTML]=\"option.html\"></div>\n\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5558
|
+
args: [{ selector: 'fields-autocomplete', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div #triggerElement class=\"fieldField FieldAutoComplete\">\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\">\n\t\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" (keyup)=\"markKey($event)\" (keydown.tab)=\"closeOverlay()\" [class.outlined]=\"true\"\n\t\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>\n\n<ng-template #optionsTemplate>\n\t<div class=\"select-options-container\">\n\t\t<div class=\"options-list\">\n\t\t\t@for(option of optionsFiltered(); track option.k) {\n\t\t\t<div class=\"option-item\" [class.selected]=\"option.selected\" [style.width.px]=\"offsetWidth()\" [title]=\"option.v\"\n\t\t\t\t(click)=\"onSelectOption(option)\" (keyup.Enter)=\"onSelectOption(option)\" tabindex=\"-1\"\n\t\t\t\t[class.choosing]=\"option.choosing\">\n\t\t\t\t<div class=\"option-item-check\"></div>\n\t\t\t\t<div class=\"option-item-text\" [innerHTML]=\"option.html\"></div>\n\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldAutoComplete{position:relative;display:flex}.FieldAutoComplete>div:first-child{flex:1;display:flex;align-items:center;justify-content:space-between}.FieldAutoComplete>div:first-child:focus{outline:2px solid var(--campoCor)}.menuTrigger{width:100%;height:0px}.select-options-container{width:max-content;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;color:var(--sys-on-background);background:var(--sys-background);outline:1px solid var(--sys-outline);box-shadow:0 2px 8px #00000026}.options-list{padding:0;max-height:300px;overflow-y:auto}.option-item{display:flex;align-items:center;justify-content:space-between;padding:15px 5px;margin-top:3px;cursor:pointer;transition:background-color .2s}.option-item.selected{background:color-mix(in srgb,var(--sys-primary) 50%,var(--sys-background) 50%);color:var(--sys-on-background);font-weight:500}.option-item.choosing{outline:none;background:color-mix(in srgb,var(--sys-primary) 20%,var(--sys-background) 80%);color:var(--sys-on-background)}.option-item:hover{background:color-mix(in srgb,var(--sys-primary) 20%,var(--sys-background) 80%);color:var(--sys-on-background)}.option-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.option-item-check{width:16px;height:16px;margin:auto 2px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;visibility:hidden}.option-item.selected .option-item-check{visibility:visible}\n"] }]
|
|
5459
5559
|
}], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], optionsTemplate: [{ type: i0.ViewChild, args: ['optionsTemplate', { isSignal: true }] }] } });
|
|
5460
5560
|
|
|
5461
5561
|
class FieldsButton extends BaseFieldsForm {
|
|
@@ -5481,11 +5581,11 @@ class FieldsButton extends BaseFieldsForm {
|
|
|
5481
5581
|
this.onChangeEmit();
|
|
5482
5582
|
}
|
|
5483
5583
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5484
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsButton, isStandalone: true, selector: "fields-button", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo ?? ' ' }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldButton\">\n\t\t\t\t<ui-button [tipo]=\"campo()?.tipoBotao\" [tema]=\"campo()?.tema\" [style]=\"campo()?.style\"\n\t\t\t\t\t(click)=\"onClickButton($event)\" [disabled]=\"campo()?.disabled\" [icone]=\"campo()?.icone\">\n\t\t\t\t\t<div [innerHTML]=\"campo()?.tituloClicavel\"></div>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5584
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsButton, isStandalone: true, selector: "fields-button", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo ?? ' ' }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldButton\">\n\t\t\t\t<ui-button [tipo]=\"campo()?.tipoBotao\" [tema]=\"campo()?.tema\" [style]=\"campo()?.style\"\n\t\t\t\t\t(click)=\"onClickButton($event)\" [disabled]=\"campo()?.disabled\" [icone]=\"campo()?.icone\">\n\t\t\t\t\t<div [innerHTML]=\"campo()?.tituloClicavel\"></div>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldField.FieldButton{border:none}.FieldButton ui-button{width:100%}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5485
5585
|
}
|
|
5486
5586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsButton, decorators: [{
|
|
5487
5587
|
type: Component,
|
|
5488
|
-
args: [{ selector: 'fields-button', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo ?? ' ' }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldButton\">\n\t\t\t\t<ui-button [tipo]=\"campo()?.tipoBotao\" [tema]=\"campo()?.tema\" [style]=\"campo()?.style\"\n\t\t\t\t\t(click)=\"onClickButton($event)\" [disabled]=\"campo()?.disabled\" [icone]=\"campo()?.icone\">\n\t\t\t\t\t<div [innerHTML]=\"campo()?.tituloClicavel\"></div>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5588
|
+
args: [{ selector: 'fields-button', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo ?? ' ' }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldButton\">\n\t\t\t\t<ui-button [tipo]=\"campo()?.tipoBotao\" [tema]=\"campo()?.tema\" [style]=\"campo()?.style\"\n\t\t\t\t\t(click)=\"onClickButton($event)\" [disabled]=\"campo()?.disabled\" [icone]=\"campo()?.icone\">\n\t\t\t\t\t<div [innerHTML]=\"campo()?.tituloClicavel\"></div>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldField.FieldButton{border:none}.FieldButton ui-button{width:100%}\n"] }]
|
|
5489
5589
|
}], ctorParameters: () => [] });
|
|
5490
5590
|
|
|
5491
5591
|
class FieldsCheckbox extends BaseFieldsForm {
|
|
@@ -5516,11 +5616,11 @@ class FieldsCheckbox extends BaseFieldsForm {
|
|
|
5516
5616
|
}, 1);
|
|
5517
5617
|
}
|
|
5518
5618
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5519
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsCheckbox, isStandalone: true, selector: "fields-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldCheckbox microPos4\">\n\t\t\t\t<ui-check-box [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-check-box>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsCheckbox, isStandalone: true, selector: "fields-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldCheckbox microPos4\">\n\t\t\t\t<ui-check-box [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-check-box>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldCheckbox{padding-left:10px;display:flex;flex-wrap:nowrap;align-items:center;transition:outline 0s;transition-delay:.2s}.tituloClicavel{display:flex;align-items:center;padding-left:10px;padding-right:10px;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;line-height:30px;text-align:var(--ui-text-align, center)}.FieldCheckbox:has(ui-check-box.focused){outline:2px solid var(--sys-primary);transition:outline 0s}\n"], dependencies: [{ kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5520
5620
|
}
|
|
5521
5621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsCheckbox, decorators: [{
|
|
5522
5622
|
type: Component,
|
|
5523
|
-
args: [{ selector: 'fields-checkbox', imports: [UiCheckBox, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldCheckbox microPos4\">\n\t\t\t\t<ui-check-box [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-check-box>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5623
|
+
args: [{ selector: 'fields-checkbox', imports: [UiCheckBox, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldCheckbox microPos4\">\n\t\t\t\t<ui-check-box [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-check-box>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldCheckbox{padding-left:10px;display:flex;flex-wrap:nowrap;align-items:center;transition:outline 0s;transition-delay:.2s}.tituloClicavel{display:flex;align-items:center;padding-left:10px;padding-right:10px;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;line-height:30px;text-align:var(--ui-text-align, center)}.FieldCheckbox:has(ui-check-box.focused){outline:2px solid var(--sys-primary);transition:outline 0s}\n"] }]
|
|
5524
5624
|
}], ctorParameters: () => [] });
|
|
5525
5625
|
|
|
5526
5626
|
class CirculoColorido {
|
|
@@ -5582,11 +5682,11 @@ class FieldsColor extends BaseFieldsForm {
|
|
|
5582
5682
|
this.campo()?.onInput?.(this.form());
|
|
5583
5683
|
}
|
|
5584
5684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsColor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5585
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsColor, isStandalone: true, selector: "fields-color", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<field-color-circulocolorido [valor]=\"value()\"></field-color-circulocolorido>\n\t\t<div class=\"fieldComRange\">\n\t\t\t<div class=\"fieldEffect\">\n\t\t\t\t<div class=\"fieldField FieldColor\">\n\t\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" min=\"0\" max=\"360\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type=\"range\" [value]=\"value() ?? 0\" (input)=\"onInputRange($event)\" min=\"0\" max=\"360\"\n\t\t\t\t[disabled]=\"campo()?.disabled\" (change)=\"onChangeEmit()\" />\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsColor, isStandalone: true, selector: "fields-color", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<field-color-circulocolorido [valor]=\"value()\"></field-color-circulocolorido>\n\t\t<div class=\"fieldComRange\">\n\t\t\t<div class=\"fieldEffect\">\n\t\t\t\t<div class=\"fieldField FieldColor\">\n\t\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" min=\"0\" max=\"360\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type=\"range\" [value]=\"value() ?? 0\" (input)=\"onInputRange($event)\" min=\"0\" max=\"360\"\n\t\t\t\t[disabled]=\"campo()?.disabled\" (change)=\"onChangeEmit()\" />\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldComRange{display:flex;align-items:center;width:100%;gap:.5rem;flex-direction:column}input[type=range]{opacity:.7}input[type=range]:disabled{opacity:.1}\n"], dependencies: [{ kind: "component", type: CirculoColorido, selector: "field-color-circulocolorido", inputs: ["valor"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5586
5686
|
}
|
|
5587
5687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsColor, decorators: [{
|
|
5588
5688
|
type: Component,
|
|
5589
|
-
args: [{ selector: 'fields-color', imports: [CirculoColorido, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<field-color-circulocolorido [valor]=\"value()\"></field-color-circulocolorido>\n\t\t<div class=\"fieldComRange\">\n\t\t\t<div class=\"fieldEffect\">\n\t\t\t\t<div class=\"fieldField FieldColor\">\n\t\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" min=\"0\" max=\"360\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type=\"range\" [value]=\"value() ?? 0\" (input)=\"onInputRange($event)\" min=\"0\" max=\"360\"\n\t\t\t\t[disabled]=\"campo()?.disabled\" (change)=\"onChangeEmit()\" />\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5689
|
+
args: [{ selector: 'fields-color', imports: [CirculoColorido, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<field-color-circulocolorido [valor]=\"value()\"></field-color-circulocolorido>\n\t\t<div class=\"fieldComRange\">\n\t\t\t<div class=\"fieldEffect\">\n\t\t\t\t<div class=\"fieldField FieldColor\">\n\t\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t\t[style]=\"campo()?.style\" min=\"0\" max=\"360\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type=\"range\" [value]=\"value() ?? 0\" (input)=\"onInputRange($event)\" min=\"0\" max=\"360\"\n\t\t\t\t[disabled]=\"campo()?.disabled\" (change)=\"onChangeEmit()\" />\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldComRange{display:flex;align-items:center;width:100%;gap:.5rem;flex-direction:column}input[type=range]{opacity:.7}input[type=range]:disabled{opacity:.1}\n"] }]
|
|
5590
5690
|
}], ctorParameters: () => [] });
|
|
5591
5691
|
|
|
5592
5692
|
class FieldsDate extends BaseFieldsForm {
|
|
@@ -5605,11 +5705,11 @@ class FieldsDate extends BaseFieldsForm {
|
|
|
5605
5705
|
this.campo()?.onInput?.(this.form());
|
|
5606
5706
|
}
|
|
5607
5707
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsDate, isStandalone: true, selector: "fields-date", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"date\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5708
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsDate, isStandalone: true, selector: "fields-date", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"date\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5609
5709
|
}
|
|
5610
5710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsDate, decorators: [{
|
|
5611
5711
|
type: Component,
|
|
5612
|
-
args: [{ selector: 'fields-date', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"date\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5712
|
+
args: [{ selector: 'fields-date', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"date\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
5613
5713
|
}], ctorParameters: () => [] });
|
|
5614
5714
|
|
|
5615
5715
|
class FieldsDatetime extends BaseFieldsForm {
|
|
@@ -5628,11 +5728,11 @@ class FieldsDatetime extends BaseFieldsForm {
|
|
|
5628
5728
|
this.campo()?.onInput?.(this.form());
|
|
5629
5729
|
}
|
|
5630
5730
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsDatetime, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5631
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsDatetime, isStandalone: true, selector: "fields-datetime", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"datetime-local\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsDatetime, isStandalone: true, selector: "fields-datetime", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"datetime-local\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5632
5732
|
}
|
|
5633
5733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsDatetime, decorators: [{
|
|
5634
5734
|
type: Component,
|
|
5635
|
-
args: [{ selector: 'fields-datetime', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"datetime-local\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5735
|
+
args: [{ selector: 'fields-datetime', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDate\">\n\t\t\t\t<input type=\"datetime-local\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
5636
5736
|
}], ctorParameters: () => [] });
|
|
5637
5737
|
|
|
5638
5738
|
class JsonColoridoPipe {
|
|
@@ -5674,11 +5774,11 @@ class FieldsDisplay extends BaseFieldsForm {
|
|
|
5674
5774
|
});
|
|
5675
5775
|
}
|
|
5676
5776
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsDisplay, isStandalone: true, selector: "fields-display", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isEmpty]=\"campo()?.empty\" (click)=\"onClickEmit()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDisplay\">\n\t\t\t\t@if(campo()?.classe == 'displayJson') {\n\t\t\t\t<pre class=\"p-2\" [innerHTML]=\"value() | jsonColorido\"></pre>\n\t\t\t\t}@else {\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [innerHTML]=\"displayValue()\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5777
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsDisplay, isStandalone: true, selector: "fields-display", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isEmpty]=\"campo()?.empty\" (click)=\"onClickEmit()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDisplay\">\n\t\t\t\t@if(campo()?.classe == 'displayJson') {\n\t\t\t\t<pre class=\"p-2\" [innerHTML]=\"value() | jsonColorido\"></pre>\n\t\t\t\t}@else {\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [innerHTML]=\"displayValue()\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldField.FieldDisplay{border:0px;min-height:auto;padding:0 5px;background:transparent;outline:0px solid transparent}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }, { kind: "pipe", type: JsonColoridoPipe, name: "jsonColorido" }] });
|
|
5678
5778
|
}
|
|
5679
5779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsDisplay, decorators: [{
|
|
5680
5780
|
type: Component,
|
|
5681
|
-
args: [{ selector: 'fields-display', imports: [UiListErrors, JsonColoridoPipe], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isEmpty]=\"campo()?.empty\" (click)=\"onClickEmit()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDisplay\">\n\t\t\t\t@if(campo()?.classe == 'displayJson') {\n\t\t\t\t<pre class=\"p-2\" [innerHTML]=\"value() | jsonColorido\"></pre>\n\t\t\t\t}@else {\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [innerHTML]=\"displayValue()\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5781
|
+
args: [{ selector: 'fields-display', imports: [UiListErrors, JsonColoridoPipe], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isEmpty]=\"campo()?.empty\" (click)=\"onClickEmit()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldDisplay\">\n\t\t\t\t@if(campo()?.classe == 'displayJson') {\n\t\t\t\t<pre class=\"p-2\" [innerHTML]=\"value() | jsonColorido\"></pre>\n\t\t\t\t}@else {\n\t\t\t\t<div [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [innerHTML]=\"displayValue()\"></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldField.FieldDisplay{border:0px;min-height:auto;padding:0 5px;background:transparent;outline:0px solid transparent}\n"] }]
|
|
5682
5782
|
}], ctorParameters: () => [] });
|
|
5683
5783
|
|
|
5684
5784
|
class FieldsEditor extends BaseFieldsForm {
|
|
@@ -5874,11 +5974,11 @@ class FieldsEditor extends BaseFieldsForm {
|
|
|
5874
5974
|
}
|
|
5875
5975
|
}
|
|
5876
5976
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5877
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsEditor, isStandalone: true, selector: "fields-editor", viewQueries: [{ propertyName: "editavel", first: true, predicate: ["editavel"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField fieldEditor\">\n\t\t\t\t@if(campo()?.showToolbar !== false) {\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isNegrito\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onNegrito()\" [iconeNome]=\"iconeNegrito\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isItalico\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onItalico()\" [iconeNome]=\"iconeItalico\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isSublinhado\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onSublinhado()\" [iconeNome]=\"iconeUnderline\"></ui-button>\n\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone espaco\" [class.ativo]=\"currentJustify === 'left'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('left')\" [iconeNome]=\"iconeJustifyLeft\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'center'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('center')\" [iconeNome]=\"iconeJustifyCenter\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'right'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('right')\" [iconeNome]=\"iconeJustifyRight\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [disabled]=\"campo()?.disabled\" (click)=\"onClearFormat()\"\n\t\t\t\t\t\t[iconeNome]=\"iconeClearFormat\"></ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div #editavel [class.corpo]=\"true\" [contentEditable]=\"!campo()?.disabled && !campo()?.readonly\"\n\t\t\t\t\t[class]=\"campo()?.classe\" [style]=\"campo()?.style\" (input)=\"onInput($event)\" [innerHTML]=\"safeValue()\"\n\t\t\t\t\t(blur)=\"onChange()\" (drop)=\"onDragEvent($event)\" (keydown)=\"onKeyDown($event)\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsEditor, isStandalone: true, selector: "fields-editor", viewQueries: [{ propertyName: "editavel", first: true, predicate: ["editavel"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField fieldEditor\">\n\t\t\t\t@if(campo()?.showToolbar !== false) {\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isNegrito\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onNegrito()\" [iconeNome]=\"iconeNegrito\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isItalico\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onItalico()\" [iconeNome]=\"iconeItalico\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isSublinhado\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onSublinhado()\" [iconeNome]=\"iconeUnderline\"></ui-button>\n\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone espaco\" [class.ativo]=\"currentJustify === 'left'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('left')\" [iconeNome]=\"iconeJustifyLeft\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'center'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('center')\" [iconeNome]=\"iconeJustifyCenter\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'right'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('right')\" [iconeNome]=\"iconeJustifyRight\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [disabled]=\"campo()?.disabled\" (click)=\"onClearFormat()\"\n\t\t\t\t\t\t[iconeNome]=\"iconeClearFormat\"></ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div #editavel [class.corpo]=\"true\" [contentEditable]=\"!campo()?.disabled && !campo()?.readonly\"\n\t\t\t\t\t[class]=\"campo()?.classe\" [style]=\"campo()?.style\" (input)=\"onInput($event)\" [innerHTML]=\"safeValue()\"\n\t\t\t\t\t(blur)=\"onChange()\" (drop)=\"onDragEvent($event)\" (keydown)=\"onKeyDown($event)\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldField.fieldEditor{display:flex;flex-direction:column;border:0px;padding:2px}.fieldField.fieldEditor .corpo{min-height:100px;overflow:auto;padding:8px;width:100%;line-height:20px;border-radius:var(--sys-border-radius);border:1px solid var(--outlineColor)}.fieldField.fieldEditor .corpo:focus-visible{outline:2px solid var(--campoCor)}.fieldField.fieldEditor .toolbar{display:flex;gap:5px;padding:4px}.fieldField.fieldEditor .toolbar .icone{outline:1px outset color-mix(in srgb,var(--sys-outline) 20%,transparent 80%);height:30px;width:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden}.toolbar .ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);transform:scale(.9)}.toolbar .espaco{margin-left:10px}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5878
5978
|
}
|
|
5879
5979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsEditor, decorators: [{
|
|
5880
5980
|
type: Component,
|
|
5881
|
-
args: [{ selector: 'fields-editor', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField fieldEditor\">\n\t\t\t\t@if(campo()?.showToolbar !== false) {\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isNegrito\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onNegrito()\" [iconeNome]=\"iconeNegrito\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isItalico\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onItalico()\" [iconeNome]=\"iconeItalico\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isSublinhado\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onSublinhado()\" [iconeNome]=\"iconeUnderline\"></ui-button>\n\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone espaco\" [class.ativo]=\"currentJustify === 'left'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('left')\" [iconeNome]=\"iconeJustifyLeft\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'center'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('center')\" [iconeNome]=\"iconeJustifyCenter\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'right'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('right')\" [iconeNome]=\"iconeJustifyRight\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [disabled]=\"campo()?.disabled\" (click)=\"onClearFormat()\"\n\t\t\t\t\t\t[iconeNome]=\"iconeClearFormat\"></ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div #editavel [class.corpo]=\"true\" [contentEditable]=\"!campo()?.disabled && !campo()?.readonly\"\n\t\t\t\t\t[class]=\"campo()?.classe\" [style]=\"campo()?.style\" (input)=\"onInput($event)\" [innerHTML]=\"safeValue()\"\n\t\t\t\t\t(blur)=\"onChange()\" (drop)=\"onDragEvent($event)\" (keydown)=\"onKeyDown($event)\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
5981
|
+
args: [{ selector: 'fields-editor', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField fieldEditor\">\n\t\t\t\t@if(campo()?.showToolbar !== false) {\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isNegrito\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onNegrito()\" [iconeNome]=\"iconeNegrito\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isItalico\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t(click)=\"onItalico()\" [iconeNome]=\"iconeItalico\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"isSublinhado\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onSublinhado()\" [iconeNome]=\"iconeUnderline\"></ui-button>\n\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone espaco\" [class.ativo]=\"currentJustify === 'left'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('left')\" [iconeNome]=\"iconeJustifyLeft\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'center'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('center')\" [iconeNome]=\"iconeJustifyCenter\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [class.ativo]=\"currentJustify === 'right'\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\" (click)=\"onJustify('right')\" [iconeNome]=\"iconeJustifyRight\"></ui-button>\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" class=\"icone\" [disabled]=\"campo()?.disabled\" (click)=\"onClearFormat()\"\n\t\t\t\t\t\t[iconeNome]=\"iconeClearFormat\"></ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div #editavel [class.corpo]=\"true\" [contentEditable]=\"!campo()?.disabled && !campo()?.readonly\"\n\t\t\t\t\t[class]=\"campo()?.classe\" [style]=\"campo()?.style\" (input)=\"onInput($event)\" [innerHTML]=\"safeValue()\"\n\t\t\t\t\t(blur)=\"onChange()\" (drop)=\"onDragEvent($event)\" (keydown)=\"onKeyDown($event)\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".fieldField.fieldEditor{display:flex;flex-direction:column;border:0px;padding:2px}.fieldField.fieldEditor .corpo{min-height:100px;overflow:auto;padding:8px;width:100%;line-height:20px;border-radius:var(--sys-border-radius);border:1px solid var(--outlineColor)}.fieldField.fieldEditor .corpo:focus-visible{outline:2px solid var(--campoCor)}.fieldField.fieldEditor .toolbar{display:flex;gap:5px;padding:4px}.fieldField.fieldEditor .toolbar .icone{outline:1px outset color-mix(in srgb,var(--sys-outline) 20%,transparent 80%);height:30px;width:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;overflow:hidden}.toolbar .ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);transform:scale(.9)}.toolbar .espaco{margin-left:10px}\n"] }]
|
|
5882
5982
|
}], ctorParameters: () => [], propDecorators: { editavel: [{ type: i0.ViewChild, args: ['editavel', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
5883
5983
|
|
|
5884
5984
|
class FieldsEmail extends BaseFieldsForm {
|
|
@@ -5897,11 +5997,11 @@ class FieldsEmail extends BaseFieldsForm {
|
|
|
5897
5997
|
this.campo()?.onInput?.(this.form());
|
|
5898
5998
|
}
|
|
5899
5999
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsEmail, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5900
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsEmail, isStandalone: true, selector: "fields-email", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldEmail\">\n\t\t\t\t<input type=\"email\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6000
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsEmail, isStandalone: true, selector: "fields-email", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldEmail\">\n\t\t\t\t<input type=\"email\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5901
6001
|
}
|
|
5902
6002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsEmail, decorators: [{
|
|
5903
6003
|
type: Component,
|
|
5904
|
-
args: [{ selector: 'fields-email', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldEmail\">\n\t\t\t\t<input type=\"email\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6004
|
+
args: [{ selector: 'fields-email', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldEmail\">\n\t\t\t\t<input type=\"email\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
5905
6005
|
}], ctorParameters: () => [] });
|
|
5906
6006
|
|
|
5907
6007
|
class FieldsHidden extends BaseFieldsForm {
|
|
@@ -5937,11 +6037,11 @@ class FieldsIcon extends BaseFieldsForm {
|
|
|
5937
6037
|
this.campo()?.onInput?.(this.form());
|
|
5938
6038
|
}
|
|
5939
6039
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsIcon, isStandalone: true, selector: "fields-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<ui-button tipo=\"raised\" tema=\"secondary\" (clicked)=\"onClickEmit()\" [disabled]=\"campo()?.disabled\"\n\t\t\t[style.width.px]=\"100\">\n\t\t\t@if(value()){\n\t\t\t<i [class]=\"value()\" [style.fontSize]=\"'25px'\"></i>\n\t\t\t}@else {\n\t\t\t<div class=\"noIcon\">ICO</div>\n\t\t\t}\n\t\t</ui-button>\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldIconType\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsIcon, isStandalone: true, selector: "fields-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<ui-button tipo=\"raised\" tema=\"secondary\" (clicked)=\"onClickEmit()\" [disabled]=\"campo()?.disabled\"\n\t\t\t[style.width.px]=\"100\">\n\t\t\t@if(value()){\n\t\t\t<i [class]=\"value()\" [style.fontSize]=\"'25px'\"></i>\n\t\t\t}@else {\n\t\t\t<div class=\"noIcon\">ICO</div>\n\t\t\t}\n\t\t</ui-button>\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldIconType\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".noIcon{display:inline-block;transform:rotate(-10deg) skew(-15deg) skewY(-15deg) translateY(-5px);font-size:16px;position:relative}.noIcon:after{content:\"ICO\";position:absolute;bottom:0;left:0;transform:scaleY(-1) skew(-50deg);transform-origin:bottom;background:linear-gradient(180deg,#0000,#0009);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
5941
6041
|
}
|
|
5942
6042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsIcon, decorators: [{
|
|
5943
6043
|
type: Component,
|
|
5944
|
-
args: [{ selector: 'fields-icon', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<ui-button tipo=\"raised\" tema=\"secondary\" (clicked)=\"onClickEmit()\" [disabled]=\"campo()?.disabled\"\n\t\t\t[style.width.px]=\"100\">\n\t\t\t@if(value()){\n\t\t\t<i [class]=\"value()\" [style.fontSize]=\"'25px'\"></i>\n\t\t\t}@else {\n\t\t\t<div class=\"noIcon\">ICO</div>\n\t\t\t}\n\t\t</ui-button>\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldIconType\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6044
|
+
args: [{ selector: 'fields-icon', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<ui-button tipo=\"raised\" tema=\"secondary\" (clicked)=\"onClickEmit()\" [disabled]=\"campo()?.disabled\"\n\t\t\t[style.width.px]=\"100\">\n\t\t\t@if(value()){\n\t\t\t<i [class]=\"value()\" [style.fontSize]=\"'25px'\"></i>\n\t\t\t}@else {\n\t\t\t<div class=\"noIcon\">ICO</div>\n\t\t\t}\n\t\t</ui-button>\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldIconType\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".noIcon{display:inline-block;transform:rotate(-10deg) skew(-15deg) skewY(-15deg) translateY(-5px);font-size:16px;position:relative}.noIcon:after{content:\"ICO\";position:absolute;bottom:0;left:0;transform:scaleY(-1) skew(-50deg);transform-origin:bottom;background:linear-gradient(180deg,#0000,#0009);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}\n"] }]
|
|
5945
6045
|
}], ctorParameters: () => [] });
|
|
5946
6046
|
|
|
5947
6047
|
class FieldsMultifactor extends BaseFieldsForm {
|
|
@@ -6028,11 +6128,11 @@ class FieldsMultifactor extends BaseFieldsForm {
|
|
|
6028
6128
|
ev.target?.select();
|
|
6029
6129
|
}
|
|
6030
6130
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsMultifactor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6031
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsMultifactor, isStandalone: true, selector: "fields-multifactor", viewQueries: [{ propertyName: "controle", first: true, predicate: ["controle"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultifactor\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [hidden]=\"true\" [readOnly]=\"true\" />\n\n\t\t\t\t<div class=\"gridFactor\">\n\t\t\t\t\t<input #controle class=\"fieldSingleInput\" name=\"a\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"b\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"c\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"d\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"e\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"f\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6131
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsMultifactor, isStandalone: true, selector: "fields-multifactor", viewQueries: [{ propertyName: "controle", first: true, predicate: ["controle"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultifactor\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [hidden]=\"true\" [readOnly]=\"true\" />\n\n\t\t\t\t<div class=\"gridFactor\">\n\t\t\t\t\t<input #controle class=\"fieldSingleInput\" name=\"a\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"b\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"c\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"d\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"e\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"f\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".gridFactor{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;padding:5px;width:100%}.fieldField.FieldMultifactor{border:0}.fieldField.FieldMultifactor input{text-align:center;outline:1px solid var(--sys-outline);height:37px}.fieldField.FieldMultifactor .corpo:focus-visible{outline:2px solid var(--campoCor)}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6032
6132
|
}
|
|
6033
6133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsMultifactor, decorators: [{
|
|
6034
6134
|
type: Component,
|
|
6035
|
-
args: [{ selector: 'fields-multifactor', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultifactor\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [hidden]=\"true\" [readOnly]=\"true\" />\n\n\t\t\t\t<div class=\"gridFactor\">\n\t\t\t\t\t<input #controle class=\"fieldSingleInput\" name=\"a\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"b\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"c\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"d\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"e\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"f\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6135
|
+
args: [{ selector: 'fields-multifactor', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultifactor\">\n\t\t\t\t<input type=\"text\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [hidden]=\"true\" [readOnly]=\"true\" />\n\n\t\t\t\t<div class=\"gridFactor\">\n\t\t\t\t\t<input #controle class=\"fieldSingleInput\" name=\"a\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"b\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"c\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"d\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"e\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t\t<input class=\"fieldSingleInput\" name=\"f\" size=\"1\" type=\"text\" [maxLength]=\"1\" min=\"0\" max=\"9\"\n\t\t\t\t\t\tpattern=\"\\d{1,1}\" (input)=\"onInputChar($event)\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus($event)\"\n\t\t\t\t\t\t[class.corpo]=\"true\" [class.input]=\"true\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".gridFactor{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;padding:5px;width:100%}.fieldField.FieldMultifactor{border:0}.fieldField.FieldMultifactor input{text-align:center;outline:1px solid var(--sys-outline);height:37px}.fieldField.FieldMultifactor .corpo:focus-visible{outline:2px solid var(--campoCor)}\n"] }]
|
|
6036
6136
|
}], ctorParameters: () => [], propDecorators: { controle: [{ type: i0.ViewChild, args: ['controle', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
6037
6137
|
|
|
6038
6138
|
class FieldsMultiText extends BaseFieldsForm {
|
|
@@ -6095,11 +6195,11 @@ class FieldsMultiText extends BaseFieldsForm {
|
|
|
6095
6195
|
this.onChangeEmit();
|
|
6096
6196
|
}
|
|
6097
6197
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsMultiText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6098
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsMultiText, isStandalone: true, selector: "fields-multitext", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiText\">\n\t\t\t\t@if(campo()?.showHeader){\n\t\t\t\t<div>Itens</div>\n\t\t\t\t<div class=\"action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInput($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6198
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsMultiText, isStandalone: true, selector: "fields-multitext", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiText\">\n\t\t\t\t@if(campo()?.showHeader){\n\t\t\t\t<div>Itens</div>\n\t\t\t\t<div class=\"action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInput($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldMultiText{display:grid;grid-template-columns:1fr auto;grid-template-rows:40px;gap:8px;align-items:center;padding:8px;border:0}.fieldField.FieldMultiText .input{outline:1px solid var(--sys-outline)}.fieldField.FieldMultiText .input:focus-visible{outline:2px solid var(--campoCor)}.index{text-align:center;font-weight:700;min-width:18px}.add{grid-area:auto / auto / auto / span 2}.input{height:40px}.action{min-width:32px;min-height:32px}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6099
6199
|
}
|
|
6100
6200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsMultiText, decorators: [{
|
|
6101
6201
|
type: Component,
|
|
6102
|
-
args: [{ selector: 'fields-multitext', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiText\">\n\t\t\t\t@if(campo()?.showHeader){\n\t\t\t\t<div>Itens</div>\n\t\t\t\t<div class=\"action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInput($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6202
|
+
args: [{ selector: 'fields-multitext', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiText\">\n\t\t\t\t@if(campo()?.showHeader){\n\t\t\t\t<div>Itens</div>\n\t\t\t\t<div class=\"action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInput($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldMultiText{display:grid;grid-template-columns:1fr auto;grid-template-rows:40px;gap:8px;align-items:center;padding:8px;border:0}.fieldField.FieldMultiText .input{outline:1px solid var(--sys-outline)}.fieldField.FieldMultiText .input:focus-visible{outline:2px solid var(--campoCor)}.index{text-align:center;font-weight:700;min-width:18px}.add{grid-area:auto / auto / auto / span 2}.input{height:40px}.action{min-width:32px;min-height:32px}\n"] }]
|
|
6103
6203
|
}], ctorParameters: () => [] });
|
|
6104
6204
|
|
|
6105
6205
|
class FieldsNumber extends BaseFieldsForm {
|
|
@@ -6124,11 +6224,11 @@ class FieldsNumber extends BaseFieldsForm {
|
|
|
6124
6224
|
this.campo()?.onInput?.(this.form());
|
|
6125
6225
|
}
|
|
6126
6226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsNumber, isStandalone: true, selector: "fields-number", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [readOnly]=\"campo()?.readonly ?? false\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsNumber, isStandalone: true, selector: "fields-number", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [readOnly]=\"campo()?.readonly ?? false\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6128
6228
|
}
|
|
6129
6229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsNumber, decorators: [{
|
|
6130
6230
|
type: Component,
|
|
6131
|
-
args: [{ selector: 'fields-number', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [readOnly]=\"campo()?.readonly ?? false\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6231
|
+
args: [{ selector: 'fields-number', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"number\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [readOnly]=\"campo()?.readonly ?? false\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
6132
6232
|
}], ctorParameters: () => [] });
|
|
6133
6233
|
|
|
6134
6234
|
class FieldsPassword extends BaseFieldsForm {
|
|
@@ -6154,11 +6254,11 @@ class FieldsPassword extends BaseFieldsForm {
|
|
|
6154
6254
|
event.stopPropagation();
|
|
6155
6255
|
}
|
|
6156
6256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsPassword, isStandalone: true, selector: "fields-password", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldPassword\">\n\t\t\t\t<input [type]=\"hide() ? 'password' : 'text'\" [value]=\"value()\" (input)=\"onInput($event.target.value)\"\n\t\t\t\t\t(change)=\"onChangeEmit()\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" (click)=\"_aoClicarVerSenha($event)\" aria-label=\"Oculta ou Exibe Senha\"\n\t\t\t\t\ttitle=\"Oculta ou Exibe Senha\" [aria-pressed]=\"hide()\">\n\t\t\t\t\t<ui-icon [name]=\"hide() ? 'eye-slash' : 'eye'\"></ui-icon>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsPassword, isStandalone: true, selector: "fields-password", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldPassword\">\n\t\t\t\t<input [type]=\"hide() ? 'password' : 'text'\" [value]=\"value()\" (input)=\"onInput($event.target.value)\"\n\t\t\t\t\t(change)=\"onChangeEmit()\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" (click)=\"_aoClicarVerSenha($event)\" aria-label=\"Oculta ou Exibe Senha\"\n\t\t\t\t\ttitle=\"Oculta ou Exibe Senha\" [aria-pressed]=\"hide()\">\n\t\t\t\t\t<ui-icon [name]=\"hide() ? 'eye-slash' : 'eye'\"></ui-icon>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }] });
|
|
6158
6258
|
}
|
|
6159
6259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsPassword, decorators: [{
|
|
6160
6260
|
type: Component,
|
|
6161
|
-
args: [{ selector: 'fields-password', imports: [UiButton, UiListErrors, UiIcon], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldPassword\">\n\t\t\t\t<input [type]=\"hide() ? 'password' : 'text'\" [value]=\"value()\" (input)=\"onInput($event.target.value)\"\n\t\t\t\t\t(change)=\"onChangeEmit()\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" (click)=\"_aoClicarVerSenha($event)\" aria-label=\"Oculta ou Exibe Senha\"\n\t\t\t\t\ttitle=\"Oculta ou Exibe Senha\" [aria-pressed]=\"hide()\">\n\t\t\t\t\t<ui-icon [name]=\"hide() ? 'eye-slash' : 'eye'\"></ui-icon>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6261
|
+
args: [{ selector: 'fields-password', imports: [UiButton, UiListErrors, UiIcon], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldPassword\">\n\t\t\t\t<input [type]=\"hide() ? 'password' : 'text'\" [value]=\"value()\" (input)=\"onInput($event.target.value)\"\n\t\t\t\t\t(change)=\"onChangeEmit()\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.outlined]=\"true\"\n\t\t\t\t\t[class.input]=\"true\" />\n\t\t\t\t<ui-button tipo=\"icon\" tema=\"primary\" (click)=\"_aoClicarVerSenha($event)\" aria-label=\"Oculta ou Exibe Senha\"\n\t\t\t\t\ttitle=\"Oculta ou Exibe Senha\" [aria-pressed]=\"hide()\">\n\t\t\t\t\t<ui-icon [name]=\"hide() ? 'eye-slash' : 'eye'\"></ui-icon>\n\t\t\t\t</ui-button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
6162
6262
|
}], ctorParameters: () => [] });
|
|
6163
6263
|
|
|
6164
6264
|
class FieldsSearch extends BaseFieldsForm {
|
|
@@ -6198,11 +6298,11 @@ class FieldsSearch extends BaseFieldsForm {
|
|
|
6198
6298
|
this.onChangeEmit();
|
|
6199
6299
|
}
|
|
6200
6300
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsSearch, isStandalone: true, selector: "fields-search", viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\"\n\t[class.isCollapsed]=\"isCollapsed()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSearch\">\n\t\t\t\t<ui-procurar [value]=\"value()\" [name]=\"campo()?.prop\" (inputed)=\"onInput($event)\" (changed)=\"onChangeEmit()\"\n\t\t\t\t\t[colapsed]=\"isCollapsed()\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? 'Procurar...'\"></ui-procurar>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6301
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsSearch, isStandalone: true, selector: "fields-search", viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\"\n\t[class.isCollapsed]=\"isCollapsed()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSearch\">\n\t\t\t\t<ui-procurar [value]=\"value()\" [name]=\"campo()?.prop\" (inputed)=\"onInput($event)\" (changed)=\"onChangeEmit()\"\n\t\t\t\t\t[colapsed]=\"isCollapsed()\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? 'Procurar...'\"></ui-procurar>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ""], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }, { kind: "component", type: UiProcurar, selector: "ui-procurar", inputs: ["value", "colapsed", "autoColapse", "name", "placeholder", "disabled"], outputs: ["inputed", "changed", "valueChange", "colapsedChange", "autoColapseChange"] }] });
|
|
6202
6302
|
}
|
|
6203
6303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsSearch, decorators: [{
|
|
6204
6304
|
type: Component,
|
|
6205
|
-
args: [{ selector: 'fields-search', imports: [UiListErrors, UiProcurar], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\"\n\t[class.isCollapsed]=\"isCollapsed()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSearch\">\n\t\t\t\t<ui-procurar [value]=\"value()\" [name]=\"campo()?.prop\" (inputed)=\"onInput($event)\" (changed)=\"onChangeEmit()\"\n\t\t\t\t\t[colapsed]=\"isCollapsed()\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? 'Procurar...'\"></ui-procurar>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6305
|
+
args: [{ selector: 'fields-search', imports: [UiListErrors, UiProcurar], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\"\n\t[class.isCollapsed]=\"isCollapsed()\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSearch\">\n\t\t\t\t<ui-procurar [value]=\"value()\" [name]=\"campo()?.prop\" (inputed)=\"onInput($event)\" (changed)=\"onChangeEmit()\"\n\t\t\t\t\t[colapsed]=\"isCollapsed()\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? 'Procurar...'\"></ui-procurar>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
6206
6306
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
6207
6307
|
|
|
6208
6308
|
class FieldsSelect extends BaseFieldsForm {
|
|
@@ -6236,11 +6336,11 @@ class FieldsSelect extends BaseFieldsForm {
|
|
|
6236
6336
|
this.onChangeEmit();
|
|
6237
6337
|
}
|
|
6238
6338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6239
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsSelect, isStandalone: true, selector: "fields-select", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSelect\">\n\t\t\t\t<ui-select [value]=\"this.value()\" [options]=\"fieldOptions()\" (changed)=\"onChange($event)\"\n\t\t\t\t\t[multiple]=\"this.campo()?.multiple ?? false\" [name]=\"this.campo()?.prop\" [textEmpty]=\"this.campo()?.textEmpty\"\n\t\t\t\t\t[canUnselect]=\"campo()?.canUnselect\"></ui-select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsSelect, isStandalone: true, selector: "fields-select", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSelect\">\n\t\t\t\t<ui-select [value]=\"this.value()\" [options]=\"fieldOptions()\" (changed)=\"onChange($event)\"\n\t\t\t\t\t[multiple]=\"this.campo()?.multiple ?? false\" [name]=\"this.campo()?.prop\" [textEmpty]=\"this.campo()?.textEmpty\"\n\t\t\t\t\t[canUnselect]=\"campo()?.canUnselect\"></ui-select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldSelect{width:100%;padding:0 4px 0 8px}.FieldSelect ui-select{width:100%;display:flex;justify-content:center;align-items:center}.fieldField:has(ui-select.opened){outline:2px solid var(--campoCor)}\n"], dependencies: [{ kind: "component", type: UiSelect, selector: "ui-select", inputs: ["value", "options", "name", "placeholder", "disabled", "multiple", "canUnselect", "textEmpty"], outputs: ["valueChange", "changed"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6240
6340
|
}
|
|
6241
6341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsSelect, decorators: [{
|
|
6242
6342
|
type: Component,
|
|
6243
|
-
args: [{ selector: 'fields-select', imports: [UiSelect, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSelect\">\n\t\t\t\t<ui-select [value]=\"this.value()\" [options]=\"fieldOptions()\" (changed)=\"onChange($event)\"\n\t\t\t\t\t[multiple]=\"this.campo()?.multiple ?? false\" [name]=\"this.campo()?.prop\" [textEmpty]=\"this.campo()?.textEmpty\"\n\t\t\t\t\t[canUnselect]=\"campo()?.canUnselect\"></ui-select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6343
|
+
args: [{ selector: 'fields-select', imports: [UiSelect, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSelect\">\n\t\t\t\t<ui-select [value]=\"this.value()\" [options]=\"fieldOptions()\" (changed)=\"onChange($event)\"\n\t\t\t\t\t[multiple]=\"this.campo()?.multiple ?? false\" [name]=\"this.campo()?.prop\" [textEmpty]=\"this.campo()?.textEmpty\"\n\t\t\t\t\t[canUnselect]=\"campo()?.canUnselect\"></ui-select>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldSelect{width:100%;padding:0 4px 0 8px}.FieldSelect ui-select{width:100%;display:flex;justify-content:center;align-items:center}.fieldField:has(ui-select.opened){outline:2px solid var(--campoCor)}\n"] }]
|
|
6244
6344
|
}], ctorParameters: () => [] });
|
|
6245
6345
|
|
|
6246
6346
|
class FieldsSlide extends BaseFieldsForm {
|
|
@@ -6271,11 +6371,11 @@ class FieldsSlide extends BaseFieldsForm {
|
|
|
6271
6371
|
}, 1);
|
|
6272
6372
|
}
|
|
6273
6373
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsSlide, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsSlide, isStandalone: true, selector: "fields-slide", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSlide microPos4\">\n\t\t\t\t<ui-slide [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-slide>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsSlide, isStandalone: true, selector: "fields-slide", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSlide microPos4\">\n\t\t\t\t<ui-slide [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-slide>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldSlide{padding-left:4px;display:flex;flex-wrap:nowrap;align-items:center;transition:outline 0s;transition-delay:.2s}.tituloClicavel{display:flex;align-items:center;padding-left:8px;padding-right:8px;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;line-height:30px;text-align:var(--ui-text-align, center)}.FieldSlide:has(ui-slide.focused){outline:2px solid var(--sys-primary);transition:outline 0s}\n"], dependencies: [{ kind: "component", type: UiSlide, selector: "ui-slide", inputs: ["value", "disabled", "focused", "focus"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6275
6375
|
}
|
|
6276
6376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsSlide, decorators: [{
|
|
6277
6377
|
type: Component,
|
|
6278
|
-
args: [{ selector: 'fields-slide', imports: [UiSlide, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSlide microPos4\">\n\t\t\t\t<ui-slide [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-slide>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6378
|
+
args: [{ selector: 'fields-slide', imports: [UiSlide, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldSlide microPos4\">\n\t\t\t\t<ui-slide [value]=\"value()\" (changed)=\"onChange($event)\" [focus]=\"signalFocus()\"></ui-slide>\n\t\t\t\t<div class=\"tituloClicavel\" (click)=\"toogleAtivo()\">\n\t\t\t\t\t{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??\n\t\t\t\t\tcampo()?.tituloClicavel) }}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldSlide{padding-left:4px;display:flex;flex-wrap:nowrap;align-items:center;transition:outline 0s;transition-delay:.2s}.tituloClicavel{display:flex;align-items:center;padding-left:8px;padding-right:8px;font-size:.875rem;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;line-height:30px;text-align:var(--ui-text-align, center)}.FieldSlide:has(ui-slide.focused){outline:2px solid var(--sys-primary);transition:outline 0s}\n"] }]
|
|
6279
6379
|
}], ctorParameters: () => [] });
|
|
6280
6380
|
|
|
6281
6381
|
class FieldsText extends BaseFieldsForm {
|
|
@@ -6294,11 +6394,11 @@ class FieldsText extends BaseFieldsForm {
|
|
|
6294
6394
|
this.campo()?.onInput?.(this.form());
|
|
6295
6395
|
}
|
|
6296
6396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6297
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsText, isStandalone: true, selector: "fields-text", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"text\" [value]=\"value() ?? ''\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsText, isStandalone: true, selector: "fields-text", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"text\" [value]=\"value() ?? ''\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6298
6398
|
}
|
|
6299
6399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsText, decorators: [{
|
|
6300
6400
|
type: Component,
|
|
6301
|
-
args: [{ selector: 'fields-text', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"text\" [value]=\"value() ?? ''\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6401
|
+
args: [{ selector: 'fields-text', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldText\">\n\t\t\t\t<input type=\"text\" [value]=\"value() ?? ''\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
6302
6402
|
}], ctorParameters: () => [] });
|
|
6303
6403
|
|
|
6304
6404
|
class FieldsUpload extends BaseFieldsForm {
|
|
@@ -6429,11 +6529,11 @@ class FieldsUpload extends BaseFieldsForm {
|
|
|
6429
6529
|
}
|
|
6430
6530
|
}
|
|
6431
6531
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsUpload, isStandalone: true, selector: "fields-upload", viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldUpload\">\n\n\t\t\t\t<ui-drop-zone (changed)=\"onDropped($event)\" [disabled]=\"campo()?.disabled\" (clicked)=\"onClickUpload()\"\n\t\t\t\t\t[sobrepor]=\"sobrepondo()\">\n\t\t\t\t\t@if(filesList().length > 0) {\n\n\t\t\t\t\t<ui-file-list [filesList]=\"filesList()\" (remove)=\"onRemove($event)\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\"></ui-file-list>\n\n\t\t\t\t\t} @else {\n\n\t\t\t\t\t<div class=\"fieldDidplayUpload\">\n\t\t\t\t\t\t<ui-icon name=\"cloud-upload\"></ui-icon>\n\t\t\t\t\t\t<div class=\"f-s-16\"><span class=\"text-primary\">Solte</span> seu arquivo aqui</div>\n\t\t\t\t\t\t<div class=\"f-s-14\"><span class=\"text-primary\">ou clique</span> para procurar</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t}\n\t\t\t\t</ui-drop-zone>\n\n\t\t\t\t<div [style.display]=\"'none'\">\n\t\t\t\t\t<input #inputFile type=\"file\" [accept]=\"acceptFormats\" [multiple]=\"campo()?.multiple\"\n\t\t\t\t\t\t(change)=\"onChangedInputFile($event)\" [disabled]=\"campo()?.disabled\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t@if(acceptFormats){\n\t<div class=\"dica\">Formatos: {{ acceptFormatsShow() }}</div>\n\t}\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsUpload, isStandalone: true, selector: "fields-upload", viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldUpload\">\n\n\t\t\t\t<ui-drop-zone (changed)=\"onDropped($event)\" [disabled]=\"campo()?.disabled\" (clicked)=\"onClickUpload()\"\n\t\t\t\t\t[sobrepor]=\"sobrepondo()\">\n\t\t\t\t\t@if(filesList().length > 0) {\n\n\t\t\t\t\t<ui-file-list [filesList]=\"filesList()\" (remove)=\"onRemove($event)\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\"></ui-file-list>\n\n\t\t\t\t\t} @else {\n\n\t\t\t\t\t<div class=\"fieldDidplayUpload\">\n\t\t\t\t\t\t<ui-icon name=\"cloud-upload\"></ui-icon>\n\t\t\t\t\t\t<div class=\"f-s-16\"><span class=\"text-primary\">Solte</span> seu arquivo aqui</div>\n\t\t\t\t\t\t<div class=\"f-s-14\"><span class=\"text-primary\">ou clique</span> para procurar</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t}\n\t\t\t\t</ui-drop-zone>\n\n\t\t\t\t<div [style.display]=\"'none'\">\n\t\t\t\t\t<input #inputFile type=\"file\" [accept]=\"acceptFormats\" [multiple]=\"campo()?.multiple\"\n\t\t\t\t\t\t(change)=\"onChangedInputFile($event)\" [disabled]=\"campo()?.disabled\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t@if(acceptFormats){\n\t<div class=\"dica\">Formatos: {{ acceptFormatsShow() }}</div>\n\t}\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldUpload:has(ui-drop-zone){outline:none;border:0}.fieldDidplayUpload{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px}.fieldDidplayUpload i{font-size:48px}.dica{margin-top:4px;font-size:12px;filter:grayscale();opacity:.7}\n"], dependencies: [{ kind: "component", type: UiDropZone, selector: "ui-drop-zone", inputs: ["value", "disabled", "sobrepor"], outputs: ["valueChange", "clicked", "changed"] }, { kind: "component", type: UiFileList, selector: "ui-file-list", inputs: ["disabled", "filesList"], outputs: ["remove"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }] });
|
|
6433
6533
|
}
|
|
6434
6534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsUpload, decorators: [{
|
|
6435
6535
|
type: Component,
|
|
6436
|
-
args: [{ selector: 'fields-upload', imports: [UiDropZone, UiFileList, UiListErrors, UiIcon], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldUpload\">\n\n\t\t\t\t<ui-drop-zone (changed)=\"onDropped($event)\" [disabled]=\"campo()?.disabled\" (clicked)=\"onClickUpload()\"\n\t\t\t\t\t[sobrepor]=\"sobrepondo()\">\n\t\t\t\t\t@if(filesList().length > 0) {\n\n\t\t\t\t\t<ui-file-list [filesList]=\"filesList()\" (remove)=\"onRemove($event)\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\"></ui-file-list>\n\n\t\t\t\t\t} @else {\n\n\t\t\t\t\t<div class=\"fieldDidplayUpload\">\n\t\t\t\t\t\t<ui-icon name=\"cloud-upload\"></ui-icon>\n\t\t\t\t\t\t<div class=\"f-s-16\"><span class=\"text-primary\">Solte</span> seu arquivo aqui</div>\n\t\t\t\t\t\t<div class=\"f-s-14\"><span class=\"text-primary\">ou clique</span> para procurar</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t}\n\t\t\t\t</ui-drop-zone>\n\n\t\t\t\t<div [style.display]=\"'none'\">\n\t\t\t\t\t<input #inputFile type=\"file\" [accept]=\"acceptFormats\" [multiple]=\"campo()?.multiple\"\n\t\t\t\t\t\t(change)=\"onChangedInputFile($event)\" [disabled]=\"campo()?.disabled\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t@if(acceptFormats){\n\t<div class=\"dica\">Formatos: {{ acceptFormatsShow() }}</div>\n\t}\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6536
|
+
args: [{ selector: 'fields-upload', imports: [UiDropZone, UiFileList, UiListErrors, UiIcon], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldUpload\">\n\n\t\t\t\t<ui-drop-zone (changed)=\"onDropped($event)\" [disabled]=\"campo()?.disabled\" (clicked)=\"onClickUpload()\"\n\t\t\t\t\t[sobrepor]=\"sobrepondo()\">\n\t\t\t\t\t@if(filesList().length > 0) {\n\n\t\t\t\t\t<ui-file-list [filesList]=\"filesList()\" (remove)=\"onRemove($event)\"\n\t\t\t\t\t\t[disabled]=\"campo()?.disabled\"></ui-file-list>\n\n\t\t\t\t\t} @else {\n\n\t\t\t\t\t<div class=\"fieldDidplayUpload\">\n\t\t\t\t\t\t<ui-icon name=\"cloud-upload\"></ui-icon>\n\t\t\t\t\t\t<div class=\"f-s-16\"><span class=\"text-primary\">Solte</span> seu arquivo aqui</div>\n\t\t\t\t\t\t<div class=\"f-s-14\"><span class=\"text-primary\">ou clique</span> para procurar</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t}\n\t\t\t\t</ui-drop-zone>\n\n\t\t\t\t<div [style.display]=\"'none'\">\n\t\t\t\t\t<input #inputFile type=\"file\" [accept]=\"acceptFormats\" [multiple]=\"campo()?.multiple\"\n\t\t\t\t\t\t(change)=\"onChangedInputFile($event)\" [disabled]=\"campo()?.disabled\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t@if(acceptFormats){\n\t<div class=\"dica\">Formatos: {{ acceptFormatsShow() }}</div>\n\t}\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldUpload:has(ui-drop-zone){outline:none;border:0}.fieldDidplayUpload{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px}.fieldDidplayUpload i{font-size:48px}.dica{margin-top:4px;font-size:12px;filter:grayscale();opacity:.7}\n"] }]
|
|
6437
6537
|
}], ctorParameters: () => [], propDecorators: { inputFile: [{ type: i0.ViewChild, args: ['inputFile', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
6438
6538
|
|
|
6439
6539
|
class FieldsTime extends BaseFieldsForm {
|
|
@@ -6452,11 +6552,11 @@ class FieldsTime extends BaseFieldsForm {
|
|
|
6452
6552
|
this.campo()?.onInput?.(this.form());
|
|
6453
6553
|
}
|
|
6454
6554
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsTime, isStandalone: true, selector: "fields-time", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTime\">\n\t\t\t\t<input type=\"time\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6555
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsTime, isStandalone: true, selector: "fields-time", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTime\">\n\t\t\t\t<input type=\"time\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6456
6556
|
}
|
|
6457
6557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsTime, decorators: [{
|
|
6458
6558
|
type: Component,
|
|
6459
|
-
args: [{ selector: 'fields-time', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTime\">\n\t\t\t\t<input type=\"time\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6559
|
+
args: [{ selector: 'fields-time', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTime\">\n\t\t\t\t<input type=\"time\" [value]=\"value()\" (input)=\"onInput($event.target.value)\" (change)=\"onChangeEmit()\"\n\t\t\t\t\t[name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\"\n\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\"\n\t\t\t\t\t[style]=\"campo()?.style\" [class.outlined]=\"true\" [class.input]=\"true\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n"] }]
|
|
6460
6560
|
}], ctorParameters: () => [] });
|
|
6461
6561
|
|
|
6462
6562
|
class FieldsTextarea extends BaseFieldsForm {
|
|
@@ -6476,11 +6576,11 @@ class FieldsTextarea extends BaseFieldsForm {
|
|
|
6476
6576
|
this.campo()?.onInput?.(this.form());
|
|
6477
6577
|
}
|
|
6478
6578
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsTextarea, isStandalone: true, selector: "fields-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTextArea\">\n\t\t\t\t<textarea [value]=\"value()\" (input)=\"onInput($event)\" (change)=\"onChangeEmit()\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [attr.maxLength]=\"campo()?.maxl\"\n\t\t\t\t\t[attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [class.outlined]=\"true\"\n\t\t\t\t\t[rows]=\"campo()?.rows ?? 5\" [cols]=\"campo()?.cols\" [attr.readonly]=\"campo()?.readonly ? true : null\"\n\t\t\t\t\t[class.input]=\"true\"></textarea>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6579
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsTextarea, isStandalone: true, selector: "fields-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTextArea\">\n\t\t\t\t<textarea [value]=\"value()\" (input)=\"onInput($event)\" (change)=\"onChangeEmit()\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [attr.maxLength]=\"campo()?.maxl\"\n\t\t\t\t\t[attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [class.outlined]=\"true\"\n\t\t\t\t\t[rows]=\"campo()?.rows ?? 5\" [cols]=\"campo()?.cols\" [attr.readonly]=\"campo()?.readonly ? true : null\"\n\t\t\t\t\t[class.input]=\"true\"></textarea>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldTextArea{padding:.5rem 0;line-height:22px}\n"], dependencies: [{ kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6480
6580
|
}
|
|
6481
6581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsTextarea, decorators: [{
|
|
6482
6582
|
type: Component,
|
|
6483
|
-
args: [{ selector: 'fields-textarea', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTextArea\">\n\t\t\t\t<textarea [value]=\"value()\" (input)=\"onInput($event)\" (change)=\"onChangeEmit()\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [attr.maxLength]=\"campo()?.maxl\"\n\t\t\t\t\t[attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [class.outlined]=\"true\"\n\t\t\t\t\t[rows]=\"campo()?.rows ?? 5\" [cols]=\"campo()?.cols\" [attr.readonly]=\"campo()?.readonly ? true : null\"\n\t\t\t\t\t[class.input]=\"true\"></textarea>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6583
|
+
args: [{ selector: 'fields-textarea', imports: [UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldTextArea\">\n\t\t\t\t<textarea [value]=\"value()\" (input)=\"onInput($event)\" (change)=\"onChangeEmit()\" [name]=\"campo()?.prop\"\n\t\t\t\t\t[disabled]=\"campo()?.disabled\" [placeholder]=\"campo()?.placeholder ?? ''\" [attr.maxLength]=\"campo()?.maxl\"\n\t\t\t\t\t[attr.minLength]=\"campo()?.minl\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\" [class.outlined]=\"true\"\n\t\t\t\t\t[rows]=\"campo()?.rows ?? 5\" [cols]=\"campo()?.cols\" [attr.readonly]=\"campo()?.readonly ? true : null\"\n\t\t\t\t\t[class.input]=\"true\"></textarea>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldTextArea{padding:.5rem 0;line-height:22px}\n"] }]
|
|
6484
6584
|
}], ctorParameters: () => [] });
|
|
6485
6585
|
|
|
6486
6586
|
class FieldsMultiKV extends BaseFieldsForm {
|
|
@@ -6556,11 +6656,11 @@ class FieldsMultiKV extends BaseFieldsForm {
|
|
|
6556
6656
|
this.onChangeEmit();
|
|
6557
6657
|
}
|
|
6558
6658
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsMultiKV, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsMultiKV, isStandalone: true, selector: "fields-multikv", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiKv\">\n\t\t\t\t@if(campo()?.showHeader != false){\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloChave ?? 'Chaves'}}</div>\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloValor ?? 'Valores'}}</div>\n\t\t\t\t<div class=\"header action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.k\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputK($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeK($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.v\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputV($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeV($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6659
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FieldsMultiKV, isStandalone: true, selector: "fields-multikv", usesInheritance: true, ngImport: i0, template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiKv\">\n\t\t\t\t@if(campo()?.showHeader != false){\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloChave ?? 'Chaves'}}</div>\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloValor ?? 'Valores'}}</div>\n\t\t\t\t<div class=\"header action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.k\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputK($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeK($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.v\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputV($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeV($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldMultiKv{display:grid;grid-template-columns:1fr 1fr auto;grid-template-rows:40px;gap:8px;align-items:center;padding:8px;border:0}.fieldField.FieldMultiKv .input{outline:1px solid var(--sys-outline)}.fieldField.FieldMultiKv .input:focus-visible{outline:2px solid var(--campoCor)}.index{text-align:center;font-weight:700;min-width:18px}.add{grid-area:auto / auto / auto / span 3}.input{height:40px}.action{min-width:32px;min-height:32px}.header{font-weight:700;text-decoration:underline;padding-left:10px}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiListErrors, selector: "ui-list-errors", inputs: ["show", "errors", "dica"] }] });
|
|
6560
6660
|
}
|
|
6561
6661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FieldsMultiKV, decorators: [{
|
|
6562
6662
|
type: Component,
|
|
6563
|
-
args: [{ selector: 'fields-multikv', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiKv\">\n\t\t\t\t@if(campo()?.showHeader != false){\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloChave ?? 'Chaves'}}</div>\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloValor ?? 'Valores'}}</div>\n\t\t\t\t<div class=\"header action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.k\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputK($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeK($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.v\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputV($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeV($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-
|
|
6663
|
+
args: [{ selector: 'fields-multikv', imports: [UiButton, UiListErrors], template: "<div class=\"fieldContainer\" [class.isTouched]=\"campo()?.touched\" [class.showTouched]=\"form().showTouched()\"\n\t[class.isInvalid]=\"campo()?.invalid\" [class.isDisabled]=\"campo()?.disabled\" [class.isReadonly]=\"campo()?.readonly\"\n\t[class.isNeed]=\"campo()?.need\" [class.isPending]=\"campo()?.pending\" [class.isEmpty]=\"campo()?.empty\">\n\t<div class=\"fieldLabel\" (click)=\"onClickLabel()\" [class.hideLabel]=\"campo()?.hideLabel\">\n\t\t@if(campo()?.icone){ <div class=\"fieldIcon\"><i [class]=\"campo()?.icone\"></i></div> }\n\t\t{{ campo()?.titulo }}\n\t</div>\n\t<div class=\"fieldControl doCampo\">\n\t\t<div class=\"fieldEffect\">\n\t\t\t<div class=\"fieldField FieldMultiKv\">\n\t\t\t\t@if(campo()?.showHeader != false){\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloChave ?? 'Chaves'}}</div>\n\t\t\t\t<div class=\"header\">{{ campo()?.tituloValor ?? 'Valores'}}</div>\n\t\t\t\t<div class=\"header action\"></div>\n\t\t\t\t}\n\t\t\t\t@for (item of items; track $index) {\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.k\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputK($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeK($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<input type=\"text\" [value]=\"item.v\" [name]=\"campo()?.prop\" [disabled]=\"campo()?.disabled\"\n\t\t\t\t\t\t[placeholder]=\"campo()?.placeholder ?? ''\" [class]=\"campo()?.classe\" [style]=\"campo()?.style\"\n\t\t\t\t\t\t[attr.maxLength]=\"campo()?.maxl\" [attr.minLength]=\"campo()?.minl\" [class.input]=\"true\"\n\t\t\t\t\t\t[class.outlined]=\"true\" (input)=\"_onLocalInputV($event.target.value, $index)\"\n\t\t\t\t\t\t(change)=\"_onLocalChangeV($event.target.value, $index)\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"action\">\n\t\t\t\t\t<ui-button tipo=\"icon\" tema=\"error\" title=\"Remover Linha\" (click)=\"onClickDelItem($index)\"\n\t\t\t\t\t\ticoneNome=\"trash\">\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"add\">\n\t\t\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" title=\"Adicionar Linha\" (click)=\"onClickAddItem()\"\n\t\t\t\t\t\ticoneNome=\"plus-circle\">\n\t\t\t\t\t\tAdicionar Linha\n\t\t\t\t\t</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<ui-list-errors [errors]=\"campo()?.errors\" [dica]=\"campo()?.dica\" [show]=\"campo()?.touched\"></ui-list-errors>\n</div>", styles: [":host{display:block;--campoCor: var(--sys-primary);--outlineColor: var(--sys-outline) }.fieldContainer{position:relative;margin:2px;display:flex;flex-direction:column;height:100%;gap:1px}.fieldField{display:flex;position:relative;border:1px solid var(--outlineColor);border-radius:var(--sys-border-radius);height:100%;min-height:37px;outline:2px solid var(--sys-surface);background:var(--sys-surface)}.fieldInput,.fieldField .input{padding:0 10px;border:none;border-radius:var(--sys-border-radius);font-family:inherit;font:inherit;letter-spacing:inherit;text-decoration:inherit;text-transform:inherit;color:var(--sys-on-surface);caret-color:var(--sys-primary);outline:none;flex-grow:1}.fieldInput{outline:1px solid var(--outlineColor)}.fieldLabel{display:flex;align-items:center;gap:.5rem;line-height:20px;font-size:14px;font-weight:600;padding-left:5px}.fieldLabel.hideLabel{display:none}.fieldField:has(.outlined:focus){outline:2px solid var(--campoCor)}.fieldContainer.isTouched.showTouched{outline:2px dotted green;border-radius:5px;outline-offset:0px;animation:borderOutline 1s linear infinite}@keyframes borderOutline{0%{outline-color:green}50%{outline-color:transparent}to{outline-color:green}}.isTouched.isInvalid .fieldInput,.isTouched.isInvalid .fieldField{outline:2px solid var(--sys-error)}.fieldControl{display:flex;position:relative;gap:.5rem;height:fit-content}.fieldTopRight{position:absolute;top:0;right:0;font-size:14px}.fieldContainer.isDisabled{filter:grayscale(100%);cursor:not-allowed;--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%)}.fieldContainer.isDisabled .fieldControl{pointer-events:none}.fieldContainer.isDisabled .fieldLabel{opacity:.6}.isNeed .fieldControl:after{content:\"*\";position:absolute;right:-1px;top:-1px;font-size:14px;color:color-mix(in srgb,var(--sys-outline) 80%,var(--sys-error) 20%)}.fieldIcon{display:flex;align-items:center;font-size:16px}.fieldEffect{position:relative;width:100%;border-radius:var(--sys-border-radius);padding:3px;height:fit-content}.isPending .fieldEffect:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:repeating-conic-gradient(from var(--anglePendingEffect),var(--sys-error) 0%,var(--sys-error) 5%,transparent 5%,transparent 15%,var(--sys-error) 25%,var(--sys-info) 30%,transparent 30%,transparent 40%,var(--sys-error) 50%);animation:rotacionar 4s linear infinite}@property --anglePendingEffect{syntax: \"<angle>\"; inherits: false; initial-value: 0deg;}@keyframes rotacionar{0%{--anglePendingEffect: 0deg}to{--anglePendingEffect: 360deg}}\n", ".FieldMultiKv{display:grid;grid-template-columns:1fr 1fr auto;grid-template-rows:40px;gap:8px;align-items:center;padding:8px;border:0}.fieldField.FieldMultiKv .input{outline:1px solid var(--sys-outline)}.fieldField.FieldMultiKv .input:focus-visible{outline:2px solid var(--campoCor)}.index{text-align:center;font-weight:700;min-width:18px}.add{grid-area:auto / auto / auto / span 3}.input{height:40px}.action{min-width:32px;min-height:32px}.header{font-weight:700;text-decoration:underline;padding-left:10px}\n"] }]
|
|
6564
6664
|
}], ctorParameters: () => [] });
|
|
6565
6665
|
|
|
6566
6666
|
class FieldsGeneric extends BaseFieldsForm {
|
|
@@ -6735,11 +6835,11 @@ class FormControls {
|
|
|
6735
6835
|
}
|
|
6736
6836
|
}
|
|
6737
6837
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormControls, isStandalone: true, selector: "ui-form-controls", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, recebido: { classPropertyName: "recebido", publicName: "recebido", isSignal: true, isRequired: false, transformFunction: null }, hasOutline: { classPropertyName: "hasOutline", publicName: "hasOutline", isSignal: true, isRequired: false, transformFunction: null }, faseIndex: { classPropertyName: "faseIndex", publicName: "faseIndex", isSignal: true, isRequired: false, transformFunction: null }, totalFases: { classPropertyName: "totalFases", publicName: "totalFases", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasOutline: "hasOutlineChange" }, ngImport: i0, template: "<div class=\"areaFormControl\" [class.collapsed]=\"colapsed()\">\n\t<div class=\"areaValues barStatus\">\n\t\t<div class=\"f-s-e status\">\n\t\t\t<div class=\"statusItem f-s-12 f-t-b\" [title]=\"'Fases. Atual: ' + faseIndex() + '. Total: ' + totalFases()\"\n\t\t\t\t[class.ativo]=\"totalFases() > 1\" [class.inativo]=\"faseIndex() < 0 || faseIndex() > totalFases()\">\n\t\t\t\t@if(totalFases() > 1){\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>A</div>\n\t\t\t\t\t<div>{{ faseIndex() }}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>U</div>\n\t\t\t\t\t<div>{{ totalFases() - 1 }}</div>\n\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t<ui-icon name=\"list-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().algumTocado()\" [class.inativo]=\"!form().algumTocado()\"\n\t\t\t\ttitle=\"Algum campo tocado\">\n\t\t\t\t<ui-icon name=\"handshake\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().valido()\" [class.inativo]=\"!form().valido()\"\n\t\t\t\ttitle=\"Todos campos V\u00E1lidos\">\n\t\t\t\t<ui-icon name=\"check2-all\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().isEnviado\" [class.inativo]=\"!form().isEnviado\"\n\t\t\t\ttitle=\"Estado de Enviado\">\n\t\t\t\t<ui-icon name=\"send-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"divider barIcoCollapse\" (click)=\"colapsed.set(!colapsed())\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t\t<div class=\"f-s-e status\">\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"dados\" (click)=\"copiar()\" iconeNome=\"copy\"\n\t\t\t\ttitle=\"Copiar o JSON de valores\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"estado\" (click)=\"setOutline()\" [class.ativo]=\"hasOutline()\"\n\t\t\t\ticoneNome=\"border\" [title]=\"(hasOutline() ? 'Com' : 'Sem') +' Outline'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"changePreview()\" [class.ativo]=\"showingErrors()\"\n\t\t\t\ticoneNome=\"exclamation-triangle\" [title]=\"showingErrors() ? 'Errors' : 'Values'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"obrigatorio()\" [class.ativo]=\"fullRequired()\"\n\t\t\t\ticoneNome=\"file-exclamation\" [title]=\"fullRequired() ? 'Obrigat\u00F3rio' : 'Liberado'\"></ui-button>\n\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"desativados()\" [class.ativo]=\"fullDisabled()\"\n\t\t\t\ticoneNome=\"person-lock\" [title]=\"fullDisabled() ? 'Desativado' : 'Ativo'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"pendentes()\" [class.ativo]=\"fullPending()\"\n\t\t\t\ticoneNome=\"clock\" [title]=\"fullPending() ? 'Pendente' : 'Sincronizado'\"></ui-button>\n\n\t\t</div>\n\t</div>\n\t@if(!colapsed()){\n\t<div class=\"formColtrols\">\n\t\t<div class=\"areaValues jsonArea\">\n\t\t\t@if(showingErrors()){\n\t\t\t<div>Erros do Formul\u00E1rio (Tipo: {{ form().listaErrors() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"form().listaErrors() | jsonColorido\"></pre>\n\t\t\t} @else {\n\t\t\t<div>Valor do Formul\u00E1rio (Tipo: {{ form().values() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"valoresOrdenados() | jsonColorido\"></pre>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"areaValues controls\">\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"sanitizar()\" iconeNome=\"broom\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o definidos para este formul\u00E1rio.\">\n\t\t\t\tSanitizar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"onlyAvailable()\" iconeNome=\"power\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o dispon\u00EDveis para este formul\u00E1rio.\">\n\t\t\t\tDispon\u00EDveis\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"validar()\" iconeNome=\"ui-checks\"\n\t\t\t\ttitle=\"Valida o formul\u00E1rio e seus campos.\">\n\t\t\t\tValidar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"warning\" class=\"dados\" (click)=\"setarValRecebido()\"\n\t\t\t\ticoneNome=\"clock-rotate\" title=\"Seta os valores que foram recebidos no formul\u00E1rio.\">\n\t\t\t\tRecebido\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"forcarVazio()\" iconeNome=\"eraser\"\n\t\t\t\ttitle=\"Limpa todos os valores do formul\u00E1rio.\">\n\t\t\t\tLimpar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"setarValInicio()\" iconeNome=\"skip-backward\"\n\t\t\t\ttitle=\"Reseta os valores do formul\u00E1rio para os valores iniciais.\">\n\t\t\t\tReset\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"info\" class=\"dados\" (click)=\"tocados()\"\n\t\t\t\t[iconeNome]=\"fullTouched() ? 'handshake' : 'handshake-slash'\"\n\t\t\t\ttitle=\"Marca todos os campos como tocados ou n\u00E3o tocados.\">\n\t\t\t\t{{ fullTouched() ? 'Tocados' : 'Tocar Todos' }}\n\t\t\t</ui-button>\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"estado\" (click)=\"setErrorAll()\"\n\t\t\t\t[class.ativo]=\"form().listaErrors().length > 0\"\n\t\t\t\t[iconeNome]=\"form().listaErrors().length > 0 ? 'exclamation-triangle' : 'circle'\"\n\t\t\t\t[title]=\"form().listaErrors().length > 0 ? 'Erros adicionados' : 'Erros removidos'\">\n\t\t\t\t{{ form().listaErrors().length > 0 ? 'Erros For\u00E7ados' : 'Erros removidos' }}\n\t\t\t</ui-button>\n\n\t\t</div>\n\t</div>\n\t}\n</div>", styles: [".areaFormControl{display:flex;flex-direction:column;gap:var(--sys-gap);margin-top:var(--sys-gap)}.barStatus{display:flex;flex-direction:row;gap:var(--sys-gap);align-items:center}.formColtrols{display:flex;flex-direction:row;gap:var(--sys-gap)}.collapsed .formColtrols{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-
|
|
6838
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormControls, isStandalone: true, selector: "ui-form-controls", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, recebido: { classPropertyName: "recebido", publicName: "recebido", isSignal: true, isRequired: false, transformFunction: null }, hasOutline: { classPropertyName: "hasOutline", publicName: "hasOutline", isSignal: true, isRequired: false, transformFunction: null }, faseIndex: { classPropertyName: "faseIndex", publicName: "faseIndex", isSignal: true, isRequired: false, transformFunction: null }, totalFases: { classPropertyName: "totalFases", publicName: "totalFases", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasOutline: "hasOutlineChange" }, ngImport: i0, template: "<div class=\"areaFormControl\" [class.collapsed]=\"colapsed()\">\n\t<div class=\"areaValues barStatus\">\n\t\t<div class=\"f-s-e status\">\n\t\t\t<div class=\"statusItem f-s-12 f-t-b\" [title]=\"'Fases. Atual: ' + faseIndex() + '. Total: ' + totalFases()\"\n\t\t\t\t[class.ativo]=\"totalFases() > 1\" [class.inativo]=\"faseIndex() < 0 || faseIndex() > totalFases()\">\n\t\t\t\t@if(totalFases() > 1){\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>A</div>\n\t\t\t\t\t<div>{{ faseIndex() }}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>U</div>\n\t\t\t\t\t<div>{{ totalFases() - 1 }}</div>\n\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t<ui-icon name=\"list-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().algumTocado()\" [class.inativo]=\"!form().algumTocado()\"\n\t\t\t\ttitle=\"Algum campo tocado\">\n\t\t\t\t<ui-icon name=\"handshake\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().valido()\" [class.inativo]=\"!form().valido()\"\n\t\t\t\ttitle=\"Todos campos V\u00E1lidos\">\n\t\t\t\t<ui-icon name=\"check2-all\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().isEnviado\" [class.inativo]=\"!form().isEnviado\"\n\t\t\t\ttitle=\"Estado de Enviado\">\n\t\t\t\t<ui-icon name=\"send-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"divider barIcoCollapse\" (click)=\"colapsed.set(!colapsed())\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t\t<div class=\"f-s-e status\">\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"dados\" (click)=\"copiar()\" iconeNome=\"copy\"\n\t\t\t\ttitle=\"Copiar o JSON de valores\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"estado\" (click)=\"setOutline()\" [class.ativo]=\"hasOutline()\"\n\t\t\t\ticoneNome=\"border\" [title]=\"(hasOutline() ? 'Com' : 'Sem') +' Outline'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"changePreview()\" [class.ativo]=\"showingErrors()\"\n\t\t\t\ticoneNome=\"exclamation-triangle\" [title]=\"showingErrors() ? 'Errors' : 'Values'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"obrigatorio()\" [class.ativo]=\"fullRequired()\"\n\t\t\t\ticoneNome=\"file-exclamation\" [title]=\"fullRequired() ? 'Obrigat\u00F3rio' : 'Liberado'\"></ui-button>\n\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"desativados()\" [class.ativo]=\"fullDisabled()\"\n\t\t\t\ticoneNome=\"person-lock\" [title]=\"fullDisabled() ? 'Desativado' : 'Ativo'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"pendentes()\" [class.ativo]=\"fullPending()\"\n\t\t\t\ticoneNome=\"clock\" [title]=\"fullPending() ? 'Pendente' : 'Sincronizado'\"></ui-button>\n\n\t\t</div>\n\t</div>\n\t@if(!colapsed()){\n\t<div class=\"formColtrols\">\n\t\t<div class=\"areaValues jsonArea\">\n\t\t\t@if(showingErrors()){\n\t\t\t<div>Erros do Formul\u00E1rio (Tipo: {{ form().listaErrors() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"form().listaErrors() | jsonColorido\"></pre>\n\t\t\t} @else {\n\t\t\t<div>Valor do Formul\u00E1rio (Tipo: {{ form().values() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"valoresOrdenados() | jsonColorido\"></pre>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"areaValues controls\">\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"sanitizar()\" iconeNome=\"broom\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o definidos para este formul\u00E1rio.\">\n\t\t\t\tSanitizar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"onlyAvailable()\" iconeNome=\"power\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o dispon\u00EDveis para este formul\u00E1rio.\">\n\t\t\t\tDispon\u00EDveis\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"validar()\" iconeNome=\"ui-checks\"\n\t\t\t\ttitle=\"Valida o formul\u00E1rio e seus campos.\">\n\t\t\t\tValidar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"warning\" class=\"dados\" (click)=\"setarValRecebido()\"\n\t\t\t\ticoneNome=\"clock-rotate\" title=\"Seta os valores que foram recebidos no formul\u00E1rio.\">\n\t\t\t\tRecebido\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"forcarVazio()\" iconeNome=\"eraser\"\n\t\t\t\ttitle=\"Limpa todos os valores do formul\u00E1rio.\">\n\t\t\t\tLimpar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"setarValInicio()\" iconeNome=\"skip-backward\"\n\t\t\t\ttitle=\"Reseta os valores do formul\u00E1rio para os valores iniciais.\">\n\t\t\t\tReset\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"info\" class=\"dados\" (click)=\"tocados()\"\n\t\t\t\t[iconeNome]=\"fullTouched() ? 'handshake' : 'handshake-slash'\"\n\t\t\t\ttitle=\"Marca todos os campos como tocados ou n\u00E3o tocados.\">\n\t\t\t\t{{ fullTouched() ? 'Tocados' : 'Tocar Todos' }}\n\t\t\t</ui-button>\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"estado\" (click)=\"setErrorAll()\"\n\t\t\t\t[class.ativo]=\"form().listaErrors().length > 0\"\n\t\t\t\t[iconeNome]=\"form().listaErrors().length > 0 ? 'exclamation-triangle' : 'circle'\"\n\t\t\t\t[title]=\"form().listaErrors().length > 0 ? 'Erros adicionados' : 'Erros removidos'\">\n\t\t\t\t{{ form().listaErrors().length > 0 ? 'Erros For\u00E7ados' : 'Erros removidos' }}\n\t\t\t</ui-button>\n\n\t\t</div>\n\t</div>\n\t}\n</div>", styles: [".areaFormControl{display:flex;flex-direction:column;gap:var(--sys-gap);margin-top:var(--sys-gap)}.barStatus{display:flex;flex-direction:row;gap:var(--sys-gap);align-items:center}.formColtrols{display:flex;flex-direction:row;gap:var(--sys-gap)}.collapsed .formColtrols{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-surface) 80%,var(--sys-background) 20%);border-radius:var(--sys-border-radius);padding:.5rem}.areaValues.jsonArea{flex:1;overflow:auto}.divider{flex:1;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.controls{display:flex;flex-direction:column;gap:10px;--ui-justify-content: left}.controls .dados,.controls .estado{--ui-font-size: 20px}ui-button.estado.ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);border-radius:var(--sys-border-radius)}pre{font-size:16px;padding:1rem}.status{gap:5px}.statusItem{width:30px;height:30px;border:1px solid var(--sys-outline);display:flex;justify-content:center;align-items:center;text-align:center;border-radius:4px;line-height:13px;background-color:var(--sys-background)}.statusItem.ativo{background-color:var(--sys-success-15);border-color:var(--sys-success)}.statusItem.inativo{background-color:var(--sys-error-15);border-color:var(--sys-error)}.barIcoCollapse i{transition:.3s}.collapsed .barIcoCollapse i{transition:.3s;transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }, { kind: "pipe", type: JsonColoridoPipe, name: "jsonColorido" }, { kind: "pipe", type: ClassOfPipe, name: "classOf" }] });
|
|
6739
6839
|
}
|
|
6740
6840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormControls, decorators: [{
|
|
6741
6841
|
type: Component,
|
|
6742
|
-
args: [{ selector: 'ui-form-controls', imports: [UiButton, UiIcon, JsonColoridoPipe, ClassOfPipe], template: "<div class=\"areaFormControl\" [class.collapsed]=\"colapsed()\">\n\t<div class=\"areaValues barStatus\">\n\t\t<div class=\"f-s-e status\">\n\t\t\t<div class=\"statusItem f-s-12 f-t-b\" [title]=\"'Fases. Atual: ' + faseIndex() + '. Total: ' + totalFases()\"\n\t\t\t\t[class.ativo]=\"totalFases() > 1\" [class.inativo]=\"faseIndex() < 0 || faseIndex() > totalFases()\">\n\t\t\t\t@if(totalFases() > 1){\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>A</div>\n\t\t\t\t\t<div>{{ faseIndex() }}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>U</div>\n\t\t\t\t\t<div>{{ totalFases() - 1 }}</div>\n\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t<ui-icon name=\"list-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().algumTocado()\" [class.inativo]=\"!form().algumTocado()\"\n\t\t\t\ttitle=\"Algum campo tocado\">\n\t\t\t\t<ui-icon name=\"handshake\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().valido()\" [class.inativo]=\"!form().valido()\"\n\t\t\t\ttitle=\"Todos campos V\u00E1lidos\">\n\t\t\t\t<ui-icon name=\"check2-all\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().isEnviado\" [class.inativo]=\"!form().isEnviado\"\n\t\t\t\ttitle=\"Estado de Enviado\">\n\t\t\t\t<ui-icon name=\"send-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"divider barIcoCollapse\" (click)=\"colapsed.set(!colapsed())\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t\t<div class=\"f-s-e status\">\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"dados\" (click)=\"copiar()\" iconeNome=\"copy\"\n\t\t\t\ttitle=\"Copiar o JSON de valores\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"estado\" (click)=\"setOutline()\" [class.ativo]=\"hasOutline()\"\n\t\t\t\ticoneNome=\"border\" [title]=\"(hasOutline() ? 'Com' : 'Sem') +' Outline'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"changePreview()\" [class.ativo]=\"showingErrors()\"\n\t\t\t\ticoneNome=\"exclamation-triangle\" [title]=\"showingErrors() ? 'Errors' : 'Values'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"obrigatorio()\" [class.ativo]=\"fullRequired()\"\n\t\t\t\ticoneNome=\"file-exclamation\" [title]=\"fullRequired() ? 'Obrigat\u00F3rio' : 'Liberado'\"></ui-button>\n\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"desativados()\" [class.ativo]=\"fullDisabled()\"\n\t\t\t\ticoneNome=\"person-lock\" [title]=\"fullDisabled() ? 'Desativado' : 'Ativo'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"pendentes()\" [class.ativo]=\"fullPending()\"\n\t\t\t\ticoneNome=\"clock\" [title]=\"fullPending() ? 'Pendente' : 'Sincronizado'\"></ui-button>\n\n\t\t</div>\n\t</div>\n\t@if(!colapsed()){\n\t<div class=\"formColtrols\">\n\t\t<div class=\"areaValues jsonArea\">\n\t\t\t@if(showingErrors()){\n\t\t\t<div>Erros do Formul\u00E1rio (Tipo: {{ form().listaErrors() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"form().listaErrors() | jsonColorido\"></pre>\n\t\t\t} @else {\n\t\t\t<div>Valor do Formul\u00E1rio (Tipo: {{ form().values() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"valoresOrdenados() | jsonColorido\"></pre>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"areaValues controls\">\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"sanitizar()\" iconeNome=\"broom\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o definidos para este formul\u00E1rio.\">\n\t\t\t\tSanitizar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"onlyAvailable()\" iconeNome=\"power\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o dispon\u00EDveis para este formul\u00E1rio.\">\n\t\t\t\tDispon\u00EDveis\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"validar()\" iconeNome=\"ui-checks\"\n\t\t\t\ttitle=\"Valida o formul\u00E1rio e seus campos.\">\n\t\t\t\tValidar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"warning\" class=\"dados\" (click)=\"setarValRecebido()\"\n\t\t\t\ticoneNome=\"clock-rotate\" title=\"Seta os valores que foram recebidos no formul\u00E1rio.\">\n\t\t\t\tRecebido\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"forcarVazio()\" iconeNome=\"eraser\"\n\t\t\t\ttitle=\"Limpa todos os valores do formul\u00E1rio.\">\n\t\t\t\tLimpar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"setarValInicio()\" iconeNome=\"skip-backward\"\n\t\t\t\ttitle=\"Reseta os valores do formul\u00E1rio para os valores iniciais.\">\n\t\t\t\tReset\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"info\" class=\"dados\" (click)=\"tocados()\"\n\t\t\t\t[iconeNome]=\"fullTouched() ? 'handshake' : 'handshake-slash'\"\n\t\t\t\ttitle=\"Marca todos os campos como tocados ou n\u00E3o tocados.\">\n\t\t\t\t{{ fullTouched() ? 'Tocados' : 'Tocar Todos' }}\n\t\t\t</ui-button>\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"estado\" (click)=\"setErrorAll()\"\n\t\t\t\t[class.ativo]=\"form().listaErrors().length > 0\"\n\t\t\t\t[iconeNome]=\"form().listaErrors().length > 0 ? 'exclamation-triangle' : 'circle'\"\n\t\t\t\t[title]=\"form().listaErrors().length > 0 ? 'Erros adicionados' : 'Erros removidos'\">\n\t\t\t\t{{ form().listaErrors().length > 0 ? 'Erros For\u00E7ados' : 'Erros removidos' }}\n\t\t\t</ui-button>\n\n\t\t</div>\n\t</div>\n\t}\n</div>", styles: [".areaFormControl{display:flex;flex-direction:column;gap:var(--sys-gap);margin-top:var(--sys-gap)}.barStatus{display:flex;flex-direction:row;gap:var(--sys-gap);align-items:center}.formColtrols{display:flex;flex-direction:row;gap:var(--sys-gap)}.collapsed .formColtrols{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-
|
|
6842
|
+
args: [{ selector: 'ui-form-controls', imports: [UiButton, UiIcon, JsonColoridoPipe, ClassOfPipe], template: "<div class=\"areaFormControl\" [class.collapsed]=\"colapsed()\">\n\t<div class=\"areaValues barStatus\">\n\t\t<div class=\"f-s-e status\">\n\t\t\t<div class=\"statusItem f-s-12 f-t-b\" [title]=\"'Fases. Atual: ' + faseIndex() + '. Total: ' + totalFases()\"\n\t\t\t\t[class.ativo]=\"totalFases() > 1\" [class.inativo]=\"faseIndex() < 0 || faseIndex() > totalFases()\">\n\t\t\t\t@if(totalFases() > 1){\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>A</div>\n\t\t\t\t\t<div>{{ faseIndex() }}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"f-s-e\">\n\t\t\t\t\t<div>U</div>\n\t\t\t\t\t<div>{{ totalFases() - 1 }}</div>\n\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t<ui-icon name=\"list-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().algumTocado()\" [class.inativo]=\"!form().algumTocado()\"\n\t\t\t\ttitle=\"Algum campo tocado\">\n\t\t\t\t<ui-icon name=\"handshake\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().valido()\" [class.inativo]=\"!form().valido()\"\n\t\t\t\ttitle=\"Todos campos V\u00E1lidos\">\n\t\t\t\t<ui-icon name=\"check2-all\" class=\"f-s-20\"></ui-icon>\n\t\t\t</div>\n\t\t\t<div class=\"statusItem\" [class.ativo]=\"form().isEnviado\" [class.inativo]=\"!form().isEnviado\"\n\t\t\t\ttitle=\"Estado de Enviado\">\n\t\t\t\t<ui-icon name=\"send-check\" class=\"f-s-18\"></ui-icon>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"divider barIcoCollapse\" (click)=\"colapsed.set(!colapsed())\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t\t<div class=\"f-s-e status\">\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"dados\" (click)=\"copiar()\" iconeNome=\"copy\"\n\t\t\t\ttitle=\"Copiar o JSON de valores\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"success\" class=\"estado\" (click)=\"setOutline()\" [class.ativo]=\"hasOutline()\"\n\t\t\t\ticoneNome=\"border\" [title]=\"(hasOutline() ? 'Com' : 'Sem') +' Outline'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"changePreview()\" [class.ativo]=\"showingErrors()\"\n\t\t\t\ticoneNome=\"exclamation-triangle\" [title]=\"showingErrors() ? 'Errors' : 'Values'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"obrigatorio()\" [class.ativo]=\"fullRequired()\"\n\t\t\t\ticoneNome=\"file-exclamation\" [title]=\"fullRequired() ? 'Obrigat\u00F3rio' : 'Liberado'\"></ui-button>\n\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"desativados()\" [class.ativo]=\"fullDisabled()\"\n\t\t\t\ticoneNome=\"person-lock\" [title]=\"fullDisabled() ? 'Desativado' : 'Ativo'\"></ui-button>\n\t\t\t<ui-button tipo=\"icon\" tema=\"info\" class=\"estado\" (click)=\"pendentes()\" [class.ativo]=\"fullPending()\"\n\t\t\t\ticoneNome=\"clock\" [title]=\"fullPending() ? 'Pendente' : 'Sincronizado'\"></ui-button>\n\n\t\t</div>\n\t</div>\n\t@if(!colapsed()){\n\t<div class=\"formColtrols\">\n\t\t<div class=\"areaValues jsonArea\">\n\t\t\t@if(showingErrors()){\n\t\t\t<div>Erros do Formul\u00E1rio (Tipo: {{ form().listaErrors() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"form().listaErrors() | jsonColorido\"></pre>\n\t\t\t} @else {\n\t\t\t<div>Valor do Formul\u00E1rio (Tipo: {{ form().values() | classOf }})</div>\n\t\t\t<pre class=\"p-2\" [innerHTML]=\"valoresOrdenados() | jsonColorido\"></pre>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"areaValues controls\">\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"sanitizar()\" iconeNome=\"broom\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o definidos para este formul\u00E1rio.\">\n\t\t\t\tSanitizar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"onlyAvailable()\" iconeNome=\"power\"\n\t\t\t\ttitle=\"Filtra e mant\u00E9m apenas os valores dos campos que est\u00E3o dispon\u00EDveis para este formul\u00E1rio.\">\n\t\t\t\tDispon\u00EDveis\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"success\" class=\"dados\" (click)=\"validar()\" iconeNome=\"ui-checks\"\n\t\t\t\ttitle=\"Valida o formul\u00E1rio e seus campos.\">\n\t\t\t\tValidar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"warning\" class=\"dados\" (click)=\"setarValRecebido()\"\n\t\t\t\ticoneNome=\"clock-rotate\" title=\"Seta os valores que foram recebidos no formul\u00E1rio.\">\n\t\t\t\tRecebido\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"forcarVazio()\" iconeNome=\"eraser\"\n\t\t\t\ttitle=\"Limpa todos os valores do formul\u00E1rio.\">\n\t\t\t\tLimpar\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"dados\" (click)=\"setarValInicio()\" iconeNome=\"skip-backward\"\n\t\t\t\ttitle=\"Reseta os valores do formul\u00E1rio para os valores iniciais.\">\n\t\t\t\tReset\n\t\t\t</ui-button>\n\t\t\t<ui-button tipo=\"outlined\" tema=\"info\" class=\"dados\" (click)=\"tocados()\"\n\t\t\t\t[iconeNome]=\"fullTouched() ? 'handshake' : 'handshake-slash'\"\n\t\t\t\ttitle=\"Marca todos os campos como tocados ou n\u00E3o tocados.\">\n\t\t\t\t{{ fullTouched() ? 'Tocados' : 'Tocar Todos' }}\n\t\t\t</ui-button>\n\n\t\t\t<ui-button tipo=\"outlined\" tema=\"error\" class=\"estado\" (click)=\"setErrorAll()\"\n\t\t\t\t[class.ativo]=\"form().listaErrors().length > 0\"\n\t\t\t\t[iconeNome]=\"form().listaErrors().length > 0 ? 'exclamation-triangle' : 'circle'\"\n\t\t\t\t[title]=\"form().listaErrors().length > 0 ? 'Erros adicionados' : 'Erros removidos'\">\n\t\t\t\t{{ form().listaErrors().length > 0 ? 'Erros For\u00E7ados' : 'Erros removidos' }}\n\t\t\t</ui-button>\n\n\t\t</div>\n\t</div>\n\t}\n</div>", styles: [".areaFormControl{display:flex;flex-direction:column;gap:var(--sys-gap);margin-top:var(--sys-gap)}.barStatus{display:flex;flex-direction:row;gap:var(--sys-gap);align-items:center}.formColtrols{display:flex;flex-direction:row;gap:var(--sys-gap)}.collapsed .formColtrols{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-surface) 80%,var(--sys-background) 20%);border-radius:var(--sys-border-radius);padding:.5rem}.areaValues.jsonArea{flex:1;overflow:auto}.divider{flex:1;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.controls{display:flex;flex-direction:column;gap:10px;--ui-justify-content: left}.controls .dados,.controls .estado{--ui-font-size: 20px}ui-button.estado.ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);border-radius:var(--sys-border-radius)}pre{font-size:16px;padding:1rem}.status{gap:5px}.statusItem{width:30px;height:30px;border:1px solid var(--sys-outline);display:flex;justify-content:center;align-items:center;text-align:center;border-radius:4px;line-height:13px;background-color:var(--sys-background)}.statusItem.ativo{background-color:var(--sys-success-15);border-color:var(--sys-success)}.statusItem.inativo{background-color:var(--sys-error-15);border-color:var(--sys-error)}.barIcoCollapse i{transition:.3s}.collapsed .barIcoCollapse i{transition:.3s;transform:rotate(180deg)}\n"] }]
|
|
6743
6843
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], recebido: [{ type: i0.Input, args: [{ isSignal: true, alias: "recebido", required: false }] }], hasOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOutline", required: false }] }, { type: i0.Output, args: ["hasOutlineChange"] }], faseIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "faseIndex", required: false }] }], totalFases: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalFases", required: false }] }] } });
|
|
6744
6844
|
|
|
6745
6845
|
class FormFilter extends BaseFieldsValues {
|
|
@@ -6781,11 +6881,11 @@ class FormFilter extends BaseFieldsValues {
|
|
|
6781
6881
|
this.onFiltrar();
|
|
6782
6882
|
}
|
|
6783
6883
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6784
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormFilter, isStandalone: true, selector: "fields-form-filter", inputs: { hasOutline: { classPropertyName: "hasOutline", publicName: "hasOutline", isSignal: true, isRequired: false, transformFunction: null }, actionTitle: { classPropertyName: "actionTitle", publicName: "actionTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasOutline: "hasOutlineChange", filtrar: "filtrar" }, usesInheritance: true, ngImport: i0, template: "<div class=\"filtrosAtivos\">\n\t@for ( item of kvPreenchido(); track $index) {\n\t<div>\n\t\t{{ item.v }}\n\t\t<ui-button tipo=\"icon\" tema=\"error\" iconeNome=\"x\" (click)=\"onDeletePropriedade(item.k)\">\n\t\t</ui-button>\n\t</div>\n\t}\n</div>\n<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n<div class=\"buttonsGap\">\n\t<ui-button tipo=\"fill\" tema=\"primary\" iconeNome=\"funnel\" (click)=\"onFiltrar()\">{{ actionTitle() }}</ui-button>\n\t<ng-content></ng-content>\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%;margin-top:10px}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.filtrosAtivos{display:flex;flex-wrap:wrap;gap:var(--sys-gap);margin-bottom:var(--sys-gap)}.filtrosAtivos div{display:flex;gap:2px;align-items:center;background-color:var(--sys-high-15);padding:0 0 0 1rem;border-radius:var(--sys-border-radius);font-size:.9rem}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-
|
|
6884
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormFilter, isStandalone: true, selector: "fields-form-filter", inputs: { hasOutline: { classPropertyName: "hasOutline", publicName: "hasOutline", isSignal: true, isRequired: false, transformFunction: null }, actionTitle: { classPropertyName: "actionTitle", publicName: "actionTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasOutline: "hasOutlineChange", filtrar: "filtrar" }, usesInheritance: true, ngImport: i0, template: "<div class=\"filtrosAtivos\">\n\t@for ( item of kvPreenchido(); track $index) {\n\t<div>\n\t\t{{ item.v }}\n\t\t<ui-button tipo=\"icon\" tema=\"error\" iconeNome=\"x\" (click)=\"onDeletePropriedade(item.k)\">\n\t\t</ui-button>\n\t</div>\n\t}\n</div>\n<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n<div class=\"buttonsGap\">\n\t<ui-button tipo=\"fill\" tema=\"primary\" iconeNome=\"funnel\" (click)=\"onFiltrar()\">{{ actionTitle() }}</ui-button>\n\t<ng-content></ng-content>\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%;margin-top:10px}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.filtrosAtivos{display:flex;flex-wrap:wrap;gap:var(--sys-gap);margin-bottom:var(--sys-gap)}.filtrosAtivos div{display:flex;gap:2px;align-items:center;background-color:var(--sys-high-15);padding:0 0 0 1rem;border-radius:var(--sys-border-radius);font-size:.9rem}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-surface) 80%,var(--sys-background) 20%);border-radius:var(--sys-border-radius);padding:.5rem;gap:var(--sys-gap);margin-top:var(--sys-gap);display:flex;flex-direction:row;flex-wrap:wrap}.areaValues .card{flex:1;overflow:auto}\n", "g-fields{display:grid;grid-template-columns:1fr;gap:var(--sys-gap, 16px)}@media(min-width:768px){.g-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--g-fields-min, auto),var(--g-fields-max, auto)));gap:var(--sys-gap, 16px)}}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: FieldsGeneric, selector: "fields-g" }, { kind: "component", type: FormControls, selector: "ui-form-controls", inputs: ["form", "recebido", "hasOutline", "faseIndex", "totalFases"], outputs: ["hasOutlineChange"] }] });
|
|
6785
6885
|
}
|
|
6786
6886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormFilter, decorators: [{
|
|
6787
6887
|
type: Component,
|
|
6788
|
-
args: [{ selector: 'fields-form-filter', imports: [UiButton, FieldsGeneric, FormControls], template: "<div class=\"filtrosAtivos\">\n\t@for ( item of kvPreenchido(); track $index) {\n\t<div>\n\t\t{{ item.v }}\n\t\t<ui-button tipo=\"icon\" tema=\"error\" iconeNome=\"x\" (click)=\"onDeletePropriedade(item.k)\">\n\t\t</ui-button>\n\t</div>\n\t}\n</div>\n<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n<div class=\"buttonsGap\">\n\t<ui-button tipo=\"fill\" tema=\"primary\" iconeNome=\"funnel\" (click)=\"onFiltrar()\">{{ actionTitle() }}</ui-button>\n\t<ng-content></ng-content>\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%;margin-top:10px}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.filtrosAtivos{display:flex;flex-wrap:wrap;gap:var(--sys-gap);margin-bottom:var(--sys-gap)}.filtrosAtivos div{display:flex;gap:2px;align-items:center;background-color:var(--sys-high-15);padding:0 0 0 1rem;border-radius:var(--sys-border-radius);font-size:.9rem}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-
|
|
6888
|
+
args: [{ selector: 'fields-form-filter', imports: [UiButton, FieldsGeneric, FormControls], template: "<div class=\"filtrosAtivos\">\n\t@for ( item of kvPreenchido(); track $index) {\n\t<div>\n\t\t{{ item.v }}\n\t\t<ui-button tipo=\"icon\" tema=\"error\" iconeNome=\"x\" (click)=\"onDeletePropriedade(item.k)\">\n\t\t</ui-button>\n\t</div>\n\t}\n</div>\n<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n<div class=\"buttonsGap\">\n\t<ui-button tipo=\"fill\" tema=\"primary\" iconeNome=\"funnel\" (click)=\"onFiltrar()\">{{ actionTitle() }}</ui-button>\n\t<ng-content></ng-content>\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%;margin-top:10px}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.filtrosAtivos{display:flex;flex-wrap:wrap;gap:var(--sys-gap);margin-bottom:var(--sys-gap)}.filtrosAtivos div{display:flex;gap:2px;align-items:center;background-color:var(--sys-high-15);padding:0 0 0 1rem;border-radius:var(--sys-border-radius);font-size:.9rem}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-surface) 80%,var(--sys-background) 20%);border-radius:var(--sys-border-radius);padding:.5rem;gap:var(--sys-gap);margin-top:var(--sys-gap);display:flex;flex-direction:row;flex-wrap:wrap}.areaValues .card{flex:1;overflow:auto}\n", "g-fields{display:grid;grid-template-columns:1fr;gap:var(--sys-gap, 16px)}@media(min-width:768px){.g-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--g-fields-min, auto),var(--g-fields-max, auto)));gap:var(--sys-gap, 16px)}}\n"] }]
|
|
6789
6889
|
}], propDecorators: { hasOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOutline", required: false }] }, { type: i0.Output, args: ["hasOutlineChange"] }], filtrar: [{ type: i0.Output, args: ["filtrar"] }], actionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTitle", required: false }] }] } });
|
|
6790
6890
|
|
|
6791
6891
|
class FormFase {
|
|
@@ -6944,11 +7044,11 @@ class FormFase {
|
|
|
6944
7044
|
return camposNaoEmFases;
|
|
6945
7045
|
}
|
|
6946
7046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormFase, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6947
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormFase, isStandalone: true, selector: "ui-form-fase", inputs: { fases: { classPropertyName: "fases", publicName: "fases", isSignal: true, isRequired: false, transformFunction: null }, campos: { classPropertyName: "campos", publicName: "campos", isSignal: true, isRequired: false, transformFunction: null }, faseIndex: { classPropertyName: "faseIndex", publicName: "faseIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fases: "fasesChange", faseIndex: "faseIndexChange" }, ngImport: i0, template: "@if(isFaseado()){\n<div class=\"faseButtons\">\n\t<ui-button tipo=\"icon\" tema=\"primary\" (clicked)=\"faseVoltar()\" class=\"todosBotoes\" [disabled]=\"isDisabledVoltar()\"\n\t\ticoneNome=\"arrow-left\" title=\"Voltar\" [radiusTabFormat]=\"!isLinear()\"></ui-button>\n\t<div class=\"faseButtons faseHeader\" [class.hasGap]=\"isLinear()\">\n\t\t@if(isLinear()){\n\t\t<div class=\"fase-linha-entre-botoes\">\n\t\t\t<div class=\"fase-linha-central\"></div>\n\t\t</div>\n\t\t}\n\t\t@for (fase of fasesList(); track $index) {\n\t\t<ui-button tipo=\"nofill\" tema=\"primary\" class=\"todosBotoes faseBotao\" (clicked)=\"faseAvancar($index)\"\n\t\t\t[class.ativo]=\"faseIndex() == $index\" [disabled]=\"fase.disabled\" [icone]=\"fase.icone\" [title]=\"fase.nome\"\n\t\t\t[radiusTabFormat]=\"!isLinear()\">\n\t\t\t<div class=\"faseHeaderText\" [innerHTML]=\"fase.nome\"></div>\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (clicked)=\"faseAvancar()\" class=\"todosBotoes\" [disabled]=\"isDisabledAvancar()\"\n\t\ticoneNome=\"arrow-right\" [iconeAntes]=\"false\" [iconeDepois]=\"true\" title=\"Proximo\"\n\t\t[radiusTabFormat]=\"!isLinear()\"></ui-button>\n</div>\n<div class=\"faseUnderline\" [class.underline-linear]=\"isLinear()\"></div>\n}", styles: [".faseButtons{display:flex;flex-direction:row;justify-content:center;align-items:stretch;height:45px;flex:1;gap:1px;position:relative}.faseUnderline{height:1px;background-color:var(--sys-outline);margin-top:0;margin-bottom:var(--sys-gap)}.faseUnderline.underline-linear{margin-top:5px}.fase-linha-entre-botoes{display:flex;flex-direction:row;justify-content:center;align-items:stretch;position:absolute;inset:0;pointer-events:none}.fase-linha-central{width:99%;height:1px;background-color:var(--sys-outline);align-self:center}.faseButtons .todosBotoes{--ui-align-items: center;--ui-height: 45px}.faseBotao{background-color:var(--sys-
|
|
7047
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormFase, isStandalone: true, selector: "ui-form-fase", inputs: { fases: { classPropertyName: "fases", publicName: "fases", isSignal: true, isRequired: false, transformFunction: null }, campos: { classPropertyName: "campos", publicName: "campos", isSignal: true, isRequired: false, transformFunction: null }, faseIndex: { classPropertyName: "faseIndex", publicName: "faseIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fases: "fasesChange", faseIndex: "faseIndexChange" }, ngImport: i0, template: "@if(isFaseado()){\n<div class=\"faseButtons\">\n\t<ui-button tipo=\"icon\" tema=\"primary\" (clicked)=\"faseVoltar()\" class=\"todosBotoes\" [disabled]=\"isDisabledVoltar()\"\n\t\ticoneNome=\"arrow-left\" title=\"Voltar\" [radiusTabFormat]=\"!isLinear()\"></ui-button>\n\t<div class=\"faseButtons faseHeader\" [class.hasGap]=\"isLinear()\">\n\t\t@if(isLinear()){\n\t\t<div class=\"fase-linha-entre-botoes\">\n\t\t\t<div class=\"fase-linha-central\"></div>\n\t\t</div>\n\t\t}\n\t\t@for (fase of fasesList(); track $index) {\n\t\t<ui-button tipo=\"nofill\" tema=\"primary\" class=\"todosBotoes faseBotao\" (clicked)=\"faseAvancar($index)\"\n\t\t\t[class.ativo]=\"faseIndex() == $index\" [disabled]=\"fase.disabled\" [icone]=\"fase.icone\" [title]=\"fase.nome\"\n\t\t\t[radiusTabFormat]=\"!isLinear()\">\n\t\t\t<div class=\"faseHeaderText\" [innerHTML]=\"fase.nome\"></div>\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (clicked)=\"faseAvancar()\" class=\"todosBotoes\" [disabled]=\"isDisabledAvancar()\"\n\t\ticoneNome=\"arrow-right\" [iconeAntes]=\"false\" [iconeDepois]=\"true\" title=\"Proximo\"\n\t\t[radiusTabFormat]=\"!isLinear()\"></ui-button>\n</div>\n<div class=\"faseUnderline\" [class.underline-linear]=\"isLinear()\"></div>\n}", styles: [".faseButtons{display:flex;flex-direction:row;justify-content:center;align-items:stretch;height:45px;flex:1;gap:1px;position:relative}.faseUnderline{height:1px;background-color:var(--sys-outline);margin-top:0;margin-bottom:var(--sys-gap)}.faseUnderline.underline-linear{margin-top:5px}.fase-linha-entre-botoes{display:flex;flex-direction:row;justify-content:center;align-items:stretch;position:absolute;inset:0;pointer-events:none}.fase-linha-central{width:99%;height:1px;background-color:var(--sys-outline);align-self:center}.faseButtons .todosBotoes{--ui-align-items: center;--ui-height: 45px}.faseBotao{background-color:var(--sys-surface)}.faseButtons .faseBotao.ativo{--ui-background: color-mix(in srgb, var(--sys-background) 50%, transparent 50%)}.faseButtons .faseBotao:not(.ativo){--ui-outline-color: color-mix(in srgb, var(--sys-background) 50%, transparent 50%);--ui-opacity: .1}.faseButtons .faseBotao{flex:1;position:relative;min-width:120px}.faseHeader{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;position:relative}.faseHeader.hasGap{gap:15px}.faseHeaderText{font-size:14px;font-weight:600;flex:1}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }] });
|
|
6948
7048
|
}
|
|
6949
7049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormFase, decorators: [{
|
|
6950
7050
|
type: Component,
|
|
6951
|
-
args: [{ selector: 'ui-form-fase', imports: [UiButton], template: "@if(isFaseado()){\n<div class=\"faseButtons\">\n\t<ui-button tipo=\"icon\" tema=\"primary\" (clicked)=\"faseVoltar()\" class=\"todosBotoes\" [disabled]=\"isDisabledVoltar()\"\n\t\ticoneNome=\"arrow-left\" title=\"Voltar\" [radiusTabFormat]=\"!isLinear()\"></ui-button>\n\t<div class=\"faseButtons faseHeader\" [class.hasGap]=\"isLinear()\">\n\t\t@if(isLinear()){\n\t\t<div class=\"fase-linha-entre-botoes\">\n\t\t\t<div class=\"fase-linha-central\"></div>\n\t\t</div>\n\t\t}\n\t\t@for (fase of fasesList(); track $index) {\n\t\t<ui-button tipo=\"nofill\" tema=\"primary\" class=\"todosBotoes faseBotao\" (clicked)=\"faseAvancar($index)\"\n\t\t\t[class.ativo]=\"faseIndex() == $index\" [disabled]=\"fase.disabled\" [icone]=\"fase.icone\" [title]=\"fase.nome\"\n\t\t\t[radiusTabFormat]=\"!isLinear()\">\n\t\t\t<div class=\"faseHeaderText\" [innerHTML]=\"fase.nome\"></div>\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (clicked)=\"faseAvancar()\" class=\"todosBotoes\" [disabled]=\"isDisabledAvancar()\"\n\t\ticoneNome=\"arrow-right\" [iconeAntes]=\"false\" [iconeDepois]=\"true\" title=\"Proximo\"\n\t\t[radiusTabFormat]=\"!isLinear()\"></ui-button>\n</div>\n<div class=\"faseUnderline\" [class.underline-linear]=\"isLinear()\"></div>\n}", styles: [".faseButtons{display:flex;flex-direction:row;justify-content:center;align-items:stretch;height:45px;flex:1;gap:1px;position:relative}.faseUnderline{height:1px;background-color:var(--sys-outline);margin-top:0;margin-bottom:var(--sys-gap)}.faseUnderline.underline-linear{margin-top:5px}.fase-linha-entre-botoes{display:flex;flex-direction:row;justify-content:center;align-items:stretch;position:absolute;inset:0;pointer-events:none}.fase-linha-central{width:99%;height:1px;background-color:var(--sys-outline);align-self:center}.faseButtons .todosBotoes{--ui-align-items: center;--ui-height: 45px}.faseBotao{background-color:var(--sys-
|
|
7051
|
+
args: [{ selector: 'ui-form-fase', imports: [UiButton], template: "@if(isFaseado()){\n<div class=\"faseButtons\">\n\t<ui-button tipo=\"icon\" tema=\"primary\" (clicked)=\"faseVoltar()\" class=\"todosBotoes\" [disabled]=\"isDisabledVoltar()\"\n\t\ticoneNome=\"arrow-left\" title=\"Voltar\" [radiusTabFormat]=\"!isLinear()\"></ui-button>\n\t<div class=\"faseButtons faseHeader\" [class.hasGap]=\"isLinear()\">\n\t\t@if(isLinear()){\n\t\t<div class=\"fase-linha-entre-botoes\">\n\t\t\t<div class=\"fase-linha-central\"></div>\n\t\t</div>\n\t\t}\n\t\t@for (fase of fasesList(); track $index) {\n\t\t<ui-button tipo=\"nofill\" tema=\"primary\" class=\"todosBotoes faseBotao\" (clicked)=\"faseAvancar($index)\"\n\t\t\t[class.ativo]=\"faseIndex() == $index\" [disabled]=\"fase.disabled\" [icone]=\"fase.icone\" [title]=\"fase.nome\"\n\t\t\t[radiusTabFormat]=\"!isLinear()\">\n\t\t\t<div class=\"faseHeaderText\" [innerHTML]=\"fase.nome\"></div>\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (clicked)=\"faseAvancar()\" class=\"todosBotoes\" [disabled]=\"isDisabledAvancar()\"\n\t\ticoneNome=\"arrow-right\" [iconeAntes]=\"false\" [iconeDepois]=\"true\" title=\"Proximo\"\n\t\t[radiusTabFormat]=\"!isLinear()\"></ui-button>\n</div>\n<div class=\"faseUnderline\" [class.underline-linear]=\"isLinear()\"></div>\n}", styles: [".faseButtons{display:flex;flex-direction:row;justify-content:center;align-items:stretch;height:45px;flex:1;gap:1px;position:relative}.faseUnderline{height:1px;background-color:var(--sys-outline);margin-top:0;margin-bottom:var(--sys-gap)}.faseUnderline.underline-linear{margin-top:5px}.fase-linha-entre-botoes{display:flex;flex-direction:row;justify-content:center;align-items:stretch;position:absolute;inset:0;pointer-events:none}.fase-linha-central{width:99%;height:1px;background-color:var(--sys-outline);align-self:center}.faseButtons .todosBotoes{--ui-align-items: center;--ui-height: 45px}.faseBotao{background-color:var(--sys-surface)}.faseButtons .faseBotao.ativo{--ui-background: color-mix(in srgb, var(--sys-background) 50%, transparent 50%)}.faseButtons .faseBotao:not(.ativo){--ui-outline-color: color-mix(in srgb, var(--sys-background) 50%, transparent 50%);--ui-opacity: .1}.faseButtons .faseBotao{flex:1;position:relative;min-width:120px}.faseHeader{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;position:relative}.faseHeader.hasGap{gap:15px}.faseHeaderText{font-size:14px;font-weight:600;flex:1}\n"] }]
|
|
6952
7052
|
}], ctorParameters: () => [], propDecorators: { fases: [{ type: i0.Input, args: [{ isSignal: true, alias: "fases", required: false }] }, { type: i0.Output, args: ["fasesChange"] }], campos: [{ type: i0.Input, args: [{ isSignal: true, alias: "campos", required: false }] }], faseIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "faseIndex", required: false }] }, { type: i0.Output, args: ["faseIndexChange"] }] } });
|
|
6953
7053
|
|
|
6954
7054
|
class FormAction extends BaseFieldsValues {
|
|
@@ -7124,11 +7224,11 @@ class FormNoAction extends BaseFieldsValues {
|
|
|
7124
7224
|
hasOutline = model(false, /* @ts-ignore */
|
|
7125
7225
|
...(ngDevMode ? [{ debugName: "hasOutline" }] : /* istanbul ignore next */ []));
|
|
7126
7226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormNoAction, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormNoAction, isStandalone: true, selector: "fields-form-no-action", inputs: { hasOutline: { classPropertyName: "hasOutline", publicName: "hasOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasOutline: "hasOutlineChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-
|
|
7227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: FormNoAction, isStandalone: true, selector: "fields-form-no-action", inputs: { hasOutline: { classPropertyName: "hasOutline", publicName: "hasOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasOutline: "hasOutlineChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-surface) 80%,var(--sys-background) 20%);border-radius:var(--sys-border-radius);padding:.5rem;gap:var(--sys-gap);margin-top:var(--sys-gap);display:flex;flex-direction:row;flex-wrap:wrap}.areaValues .card{flex:1;overflow:auto}\n", "g-fields{display:grid;grid-template-columns:1fr;gap:var(--sys-gap, 16px)}@media(min-width:768px){.g-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--g-fields-min, auto),var(--g-fields-max, auto)));gap:var(--sys-gap, 16px)}}\n"], dependencies: [{ kind: "component", type: FieldsGeneric, selector: "fields-g" }, { kind: "component", type: FormControls, selector: "ui-form-controls", inputs: ["form", "recebido", "hasOutline", "faseIndex", "totalFases"], outputs: ["hasOutlineChange"] }] });
|
|
7128
7228
|
}
|
|
7129
7229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FormNoAction, decorators: [{
|
|
7130
7230
|
type: Component,
|
|
7131
|
-
args: [{ selector: 'fields-form-no-action', imports: [FieldsGeneric, FormControls], template: "<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-
|
|
7231
|
+
args: [{ selector: 'fields-form-no-action', imports: [FieldsGeneric, FormControls], template: "<div class=\"g-fields\" [style.--g-fields-min]=\"gmin()\" [style.--g-fields-max]=\"gmax()\">\n\n\t@for (campo of form.listaCampos(); track $index) {\n\t<fields-g [form]=\"form\" [name]=\"campo.prop\" [class]=\"campo.tipo == 'hidden' ? 'fieldHidden' : ''\"></fields-g>\n\t}\n\n</div>\n\n@if(showFormControls()){\n<ui-form-controls [form]=\"form\" [recebido]=\"this.values()\" [(hasOutline)]=\"hasOutline\" [faseIndex]=\"faseIndex()\"\n\t[totalFases]=\"listaFase().length\"></ui-form-controls>\n}", styles: [":host{display:block;width:100%}.buttonsGap{display:flex;flex-direction:var(--ui-form-flex-direction, column);gap:var(--sys-gap);margin-top:var(--sys-gap)}.fieldHidden{display:none}.areaValues{outline:1px solid color-mix(in srgb,var(--sys-outline) 50%,transparent 50%);background-color:color-mix(in srgb,var(--sys-surface) 80%,var(--sys-background) 20%);border-radius:var(--sys-border-radius);padding:.5rem;gap:var(--sys-gap);margin-top:var(--sys-gap);display:flex;flex-direction:row;flex-wrap:wrap}.areaValues .card{flex:1;overflow:auto}\n", "g-fields{display:grid;grid-template-columns:1fr;gap:var(--sys-gap, 16px)}@media(min-width:768px){.g-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--g-fields-min, auto),var(--g-fields-max, auto)));gap:var(--sys-gap, 16px)}}\n"] }]
|
|
7132
7232
|
}], propDecorators: { hasOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOutline", required: false }] }, { type: i0.Output, args: ["hasOutlineChange"] }] } });
|
|
7133
7233
|
|
|
7134
7234
|
class FormatedValues {
|
|
@@ -7616,11 +7716,11 @@ class GridRowRenderer {
|
|
|
7616
7716
|
this.rowClicked.emit(this.dadosLinha());
|
|
7617
7717
|
}
|
|
7618
7718
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GridRowRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GridRowRenderer, isStandalone: true, selector: "lib-grid-row-renderer", inputs: { dadosLinha: { classPropertyName: "dadosLinha", publicName: "dadosLinha", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colunas: { classPropertyName: "colunas", publicName: "colunas", isSignal: true, isRequired: true, transformFunction: null }, colunasOrdenadas: { classPropertyName: "colunasOrdenadas", publicName: "colunasOrdenadas", isSignal: true, isRequired: true, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: true, transformFunction: null }, inputSearchText: { classPropertyName: "inputSearchText", publicName: "inputSearchText", isSignal: true, isRequired: true, transformFunction: null }, hasSeletor: { classPropertyName: "hasSeletor", publicName: "hasSeletor", isSignal: true, isRequired: false, transformFunction: null }, hasVerticalLine: { classPropertyName: "hasVerticalLine", publicName: "hasVerticalLine", isSignal: true, isRequired: false, transformFunction: null }, isCompacted: { classPropertyName: "isCompacted", publicName: "isCompacted", isSignal: true, isRequired: false, transformFunction: null }, hasGrid: { classPropertyName: "hasGrid", publicName: "hasGrid", isSignal: true, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, lastRow: { classPropertyName: "lastRow", publicName: "lastRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", rowClicked: "rowClicked" }, ngImport: i0, template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-formated table-vertical-line\">{{ dadosLinha().ordem }}</div>\n}\n\n@if(hasSeletor() && config().selectionMode != 'none') {\n<div class=\"table-item table-formated table-item-seletor\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t[class.odd]=\"rowIndex() % 2 !== 0\" [class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[class.table-border-left]=\"hasGrid()\" [style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\"\n\t(click)=\"onRowClick()\">\n\t<ui-check-box [(value)]=\"dadosLinha().selecionado\" [single]=\"config().selectionMode == 'single'\"\n\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\" [disabled]=\"dadosLinha().isSelectionDisabled\"></ui-check-box>\n</div>\n}\n\n@for (coluna of colunas(); track $index; let j = $index) {\n@if (coluna.visivel !== false) {\n<lib-grid-cell-handler class=\"table-item table-dados {{ coluna.classeCell }}\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.table-first-col]=\"j === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [style.overflow]=\"coluna.overflow ?? 'hidden'\"\n\t[style.textOverflow]=\"coluna.textOverflow ?? 'ellipsis'\" [linha]=\"dadosLinha().dados\" [localColuna]=\"coluna\"\n\t[lista]=\"lista()\" [config]=\"config()\" [localColunas]=\"colunasOrdenadas()\"\n\t[class.table-bg-error]=\"dadosLinha().inativo\" (click)=\"onRowClick()\" [inputSearchText]=\"inputSearchText()\"\n\t[class.table-border-left]=\"hasGrid()\" [class.table-border-right]=\"$last && hasGrid() && !config().showActionsLine\"\n\t[attr.ordem]=\"coluna.ordem\"></lib-grid-cell-handler>\n}\n}\n\n@if(config().showActionsLine) {\n<lib-grid-cell-actions class=\"table-item table-formated table-item-action\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [config]=\"config()\" [dadosDaLinha]=\"dadosLinha()\"\n\t[class.table-border-right-error]=\"dadosLinha().inativo\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t(action)=\"onRowAction($event)\" [compact]=\"isCompacted()\" [class.table-border-left]=\"hasGrid()\"\n\t[class.table-border-right]=\"hasGrid()\" [class.last-row]=\"lastRow()\"></lib-grid-cell-actions>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"], dependencies: [{ kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "component", type: GridCellHandler, selector: "lib-grid-cell-handler", inputs: ["lista", "linha", "config", "localColuna", "localColunas", "inputSearchText"] }, { kind: "component", type: GridCellActions, selector: "lib-grid-cell-actions", inputs: ["config", "dadosDaLinha", "mobileHeader", "compact"], outputs: ["action"] }] });
|
|
7719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GridRowRenderer, isStandalone: true, selector: "lib-grid-row-renderer", inputs: { dadosLinha: { classPropertyName: "dadosLinha", publicName: "dadosLinha", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colunas: { classPropertyName: "colunas", publicName: "colunas", isSignal: true, isRequired: true, transformFunction: null }, colunasOrdenadas: { classPropertyName: "colunasOrdenadas", publicName: "colunasOrdenadas", isSignal: true, isRequired: true, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: true, transformFunction: null }, inputSearchText: { classPropertyName: "inputSearchText", publicName: "inputSearchText", isSignal: true, isRequired: true, transformFunction: null }, hasSeletor: { classPropertyName: "hasSeletor", publicName: "hasSeletor", isSignal: true, isRequired: false, transformFunction: null }, hasVerticalLine: { classPropertyName: "hasVerticalLine", publicName: "hasVerticalLine", isSignal: true, isRequired: false, transformFunction: null }, isCompacted: { classPropertyName: "isCompacted", publicName: "isCompacted", isSignal: true, isRequired: false, transformFunction: null }, hasGrid: { classPropertyName: "hasGrid", publicName: "hasGrid", isSignal: true, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, lastRow: { classPropertyName: "lastRow", publicName: "lastRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionTriggered: "actionTriggered", rowClicked: "rowClicked" }, ngImport: i0, template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-formated table-vertical-line\">{{ dadosLinha().ordem }}</div>\n}\n\n@if(hasSeletor() && config().selectionMode != 'none') {\n<div class=\"table-item table-formated table-item-seletor\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t[class.odd]=\"rowIndex() % 2 !== 0\" [class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[class.table-border-left]=\"hasGrid()\" [style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\"\n\t(click)=\"onRowClick()\">\n\t<ui-check-box [(value)]=\"dadosLinha().selecionado\" [single]=\"config().selectionMode == 'single'\"\n\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\" [disabled]=\"dadosLinha().isSelectionDisabled\"></ui-check-box>\n</div>\n}\n\n@for (coluna of colunas(); track $index; let j = $index) {\n@if (coluna.visivel !== false) {\n<lib-grid-cell-handler class=\"table-item table-dados {{ coluna.classeCell }}\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.table-first-col]=\"j === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [style.overflow]=\"coluna.overflow ?? 'hidden'\"\n\t[style.textOverflow]=\"coluna.textOverflow ?? 'ellipsis'\" [linha]=\"dadosLinha().dados\" [localColuna]=\"coluna\"\n\t[lista]=\"lista()\" [config]=\"config()\" [localColunas]=\"colunasOrdenadas()\"\n\t[class.table-bg-error]=\"dadosLinha().inativo\" (click)=\"onRowClick()\" [inputSearchText]=\"inputSearchText()\"\n\t[class.table-border-left]=\"hasGrid()\" [class.table-border-right]=\"$last && hasGrid() && !config().showActionsLine\"\n\t[attr.ordem]=\"coluna.ordem\"></lib-grid-cell-handler>\n}\n}\n\n@if(config().showActionsLine) {\n<lib-grid-cell-actions class=\"table-item table-formated table-item-action\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [config]=\"config()\" [dadosDaLinha]=\"dadosLinha()\"\n\t[class.table-border-right-error]=\"dadosLinha().inativo\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t(action)=\"onRowAction($event)\" [compact]=\"isCompacted()\" [class.table-border-left]=\"hasGrid()\"\n\t[class.table-border-right]=\"hasGrid()\" [class.last-row]=\"lastRow()\"></lib-grid-cell-actions>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"], dependencies: [{ kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "component", type: GridCellHandler, selector: "lib-grid-cell-handler", inputs: ["lista", "linha", "config", "localColuna", "localColunas", "inputSearchText"] }, { kind: "component", type: GridCellActions, selector: "lib-grid-cell-actions", inputs: ["config", "dadosDaLinha", "mobileHeader", "compact"], outputs: ["action"] }] });
|
|
7620
7720
|
}
|
|
7621
7721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GridRowRenderer, decorators: [{
|
|
7622
7722
|
type: Component,
|
|
7623
|
-
args: [{ selector: 'lib-grid-row-renderer', imports: [UiCheckBox, GridCellHandler, GridCellActions], template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-formated table-vertical-line\">{{ dadosLinha().ordem }}</div>\n}\n\n@if(hasSeletor() && config().selectionMode != 'none') {\n<div class=\"table-item table-formated table-item-seletor\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t[class.odd]=\"rowIndex() % 2 !== 0\" [class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[class.table-border-left]=\"hasGrid()\" [style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\"\n\t(click)=\"onRowClick()\">\n\t<ui-check-box [(value)]=\"dadosLinha().selecionado\" [single]=\"config().selectionMode == 'single'\"\n\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\" [disabled]=\"dadosLinha().isSelectionDisabled\"></ui-check-box>\n</div>\n}\n\n@for (coluna of colunas(); track $index; let j = $index) {\n@if (coluna.visivel !== false) {\n<lib-grid-cell-handler class=\"table-item table-dados {{ coluna.classeCell }}\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.table-first-col]=\"j === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [style.overflow]=\"coluna.overflow ?? 'hidden'\"\n\t[style.textOverflow]=\"coluna.textOverflow ?? 'ellipsis'\" [linha]=\"dadosLinha().dados\" [localColuna]=\"coluna\"\n\t[lista]=\"lista()\" [config]=\"config()\" [localColunas]=\"colunasOrdenadas()\"\n\t[class.table-bg-error]=\"dadosLinha().inativo\" (click)=\"onRowClick()\" [inputSearchText]=\"inputSearchText()\"\n\t[class.table-border-left]=\"hasGrid()\" [class.table-border-right]=\"$last && hasGrid() && !config().showActionsLine\"\n\t[attr.ordem]=\"coluna.ordem\"></lib-grid-cell-handler>\n}\n}\n\n@if(config().showActionsLine) {\n<lib-grid-cell-actions class=\"table-item table-formated table-item-action\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [config]=\"config()\" [dadosDaLinha]=\"dadosLinha()\"\n\t[class.table-border-right-error]=\"dadosLinha().inativo\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t(action)=\"onRowAction($event)\" [compact]=\"isCompacted()\" [class.table-border-left]=\"hasGrid()\"\n\t[class.table-border-right]=\"hasGrid()\" [class.last-row]=\"lastRow()\"></lib-grid-cell-actions>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"] }]
|
|
7723
|
+
args: [{ selector: 'lib-grid-row-renderer', imports: [UiCheckBox, GridCellHandler, GridCellActions], template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-formated table-vertical-line\">{{ dadosLinha().ordem }}</div>\n}\n\n@if(hasSeletor() && config().selectionMode != 'none') {\n<div class=\"table-item table-formated table-item-seletor\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t[class.odd]=\"rowIndex() % 2 !== 0\" [class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[class.table-border-left]=\"hasGrid()\" [style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\"\n\t(click)=\"onRowClick()\">\n\t<ui-check-box [(value)]=\"dadosLinha().selecionado\" [single]=\"config().selectionMode == 'single'\"\n\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\" [disabled]=\"dadosLinha().isSelectionDisabled\"></ui-check-box>\n</div>\n}\n\n@for (coluna of colunas(); track $index; let j = $index) {\n@if (coluna.visivel !== false) {\n<lib-grid-cell-handler class=\"table-item table-dados {{ coluna.classeCell }}\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.table-first-col]=\"j === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [style.overflow]=\"coluna.overflow ?? 'hidden'\"\n\t[style.textOverflow]=\"coluna.textOverflow ?? 'ellipsis'\" [linha]=\"dadosLinha().dados\" [localColuna]=\"coluna\"\n\t[lista]=\"lista()\" [config]=\"config()\" [localColunas]=\"colunasOrdenadas()\"\n\t[class.table-bg-error]=\"dadosLinha().inativo\" (click)=\"onRowClick()\" [inputSearchText]=\"inputSearchText()\"\n\t[class.table-border-left]=\"hasGrid()\" [class.table-border-right]=\"$last && hasGrid() && !config().showActionsLine\"\n\t[attr.ordem]=\"coluna.ordem\"></lib-grid-cell-handler>\n}\n}\n\n@if(config().showActionsLine) {\n<lib-grid-cell-actions class=\"table-item table-formated table-item-action\" [class.odd]=\"rowIndex() % 2 !== 0\"\n\t[class.even]=\"rowIndex() % 2 === 0\" [class.hashue]=\"dadosLinha().hue !== undefined\"\n\t[style.--bghue]=\"dadosLinha().hue != 0 ? dadosLinha().hue : null\" [config]=\"config()\" [dadosDaLinha]=\"dadosLinha()\"\n\t[class.table-border-right-error]=\"dadosLinha().inativo\" [class.table-bg-error]=\"dadosLinha().inativo\"\n\t(action)=\"onRowAction($event)\" [compact]=\"isCompacted()\" [class.table-border-left]=\"hasGrid()\"\n\t[class.table-border-right]=\"hasGrid()\" [class.last-row]=\"lastRow()\"></lib-grid-cell-actions>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"] }]
|
|
7624
7724
|
}], propDecorators: { dadosLinha: [{ type: i0.Input, args: [{ isSignal: true, alias: "dadosLinha", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], colunas: [{ type: i0.Input, args: [{ isSignal: true, alias: "colunas", required: true }] }], colunasOrdenadas: [{ type: i0.Input, args: [{ isSignal: true, alias: "colunasOrdenadas", required: true }] }], lista: [{ type: i0.Input, args: [{ isSignal: true, alias: "lista", required: true }] }], inputSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSearchText", required: true }] }], hasSeletor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeletor", required: false }] }], hasVerticalLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasVerticalLine", required: false }] }], isCompacted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompacted", required: false }] }], hasGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasGrid", required: false }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: false }] }], lastRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastRow", required: false }] }], actionTriggered: [{ type: i0.Output, args: ["actionTriggered"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }] } });
|
|
7625
7725
|
|
|
7626
7726
|
class GridHeaderRow {
|
|
@@ -7663,11 +7763,11 @@ class GridHeaderRow {
|
|
|
7663
7763
|
this.columnResizeDoubleClick.emit({ event, coluna });
|
|
7664
7764
|
}
|
|
7665
7765
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GridHeaderRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GridHeaderRow, isStandalone: true, selector: "lib-grid-header-row", inputs: { colunas: { classPropertyName: "colunas", publicName: "colunas", isSignal: true, isRequired: true, transformFunction: null }, ordenacoes: { classPropertyName: "ordenacoes", publicName: "ordenacoes", isSignal: true, isRequired: true, transformFunction: null }, todosSelecionados: { classPropertyName: "todosSelecionados", publicName: "todosSelecionados", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, hasSeletor: { classPropertyName: "hasSeletor", publicName: "hasSeletor", isSignal: true, isRequired: false, transformFunction: null }, hasVerticalLine: { classPropertyName: "hasVerticalLine", publicName: "hasVerticalLine", isSignal: true, isRequired: false, transformFunction: null }, hasGrid: { classPropertyName: "hasGrid", publicName: "hasGrid", isSignal: true, isRequired: false, transformFunction: null }, isCompacted: { classPropertyName: "isCompacted", publicName: "isCompacted", isSignal: true, isRequired: false, transformFunction: null }, isSelectingAll: { classPropertyName: "isSelectingAll", publicName: "isSelectingAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnSort: "columnSort", selectAll: "selectAll", columnResizeStart: "columnResizeStart", columnResizeDoubleClick: "columnResizeDoubleClick" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-vertical-line\"></div>\n}\n\n@if(hasSeletor()) {\n<div class=\"table-header table-header-seletor\">\n\t@if(config().selectionMode == 'multiple') {\n\t<ui-check-box [single]=\"false\" [value]=\"todosSelecionados()\" (changed)=\"onSelectAll($event)\"\n\t\t[style.--ui-color]=\"'var(--sys-on-primary)'\" [style.--ui-outline]=\"'var(--sys-on-primary)'\"\n\t\t[disabled]=\"isSelectingAll()\" [style.--ui-size]=\"isCompacted() ? '15px' : undefined\"\n\t\t[hasDash]=\"true\"></ui-check-box>\n\t}\n</div>\n}\n\n@for (coluna of colunas(); track $index) {\n@if (coluna.visivel !== false) {\n<div class=\"table-header\" [class.table-border-left-darker]=\"hasGrid() && $index === 0\"\n\t[class.header-last-col]=\"$last && !config().showActionsLine\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[class.sortable]=\"coluna.sortable !== false\" [class.sorted-asc]=\"getOrdenacaoDirecao(coluna.prop) === 'asc'\"\n\t[class.sorted-desc]=\"getOrdenacaoDirecao(coluna.prop) === 'desc'\" [class.textVertical]=\"coluna.textVertical\">\n\t<div cdkDrag [cdkDragData]=\"coluna\" cdkDragLockAxis=\"x\"\n\t\tclass=\"table-header-text table-drag-container drop-option {{ coluna.classeHeader }}\" [title]=\"coluna.titulo\"\n\t\t[innerHTML]=\"coluna.tituloReduzido ?? coluna.titulo\" [attr.ordem]=\"coluna.ordem\"\n\t\t(click)=\"coluna.sortable !== false && onColumnSort(coluna.prop)\">\n\t</div>\n\t<div class=\"table-header-controls\" (dblclick)=\"onResizeDoubleClick($event, coluna)\"\n\t\t(mousedown)=\"onResizeStart($event, coluna)\">\n\t\t@if (coluna.sortable !== false) {\n\t\t<span class=\"table-ico-sort\">\n\t\t\t@if (getOrdenacaoDirecao(coluna.prop) === 'asc') {\n\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t} @else if (getOrdenacaoDirecao(coluna.prop) === 'desc') {\n\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t}\n\t\t</span>\n\t\t}\n\t</div>\n</div>\n}\n}\n\n@if(config().showActionsLine) {\n<div class=\"table-header table-action-line header-last-col\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[innerHTML]=\"!isCompacted() ? config().actionsLineConfig?.headerDisplayMore : ''\"></div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"], dependencies: [{ kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GridHeaderRow, isStandalone: true, selector: "lib-grid-header-row", inputs: { colunas: { classPropertyName: "colunas", publicName: "colunas", isSignal: true, isRequired: true, transformFunction: null }, ordenacoes: { classPropertyName: "ordenacoes", publicName: "ordenacoes", isSignal: true, isRequired: true, transformFunction: null }, todosSelecionados: { classPropertyName: "todosSelecionados", publicName: "todosSelecionados", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, hasSeletor: { classPropertyName: "hasSeletor", publicName: "hasSeletor", isSignal: true, isRequired: false, transformFunction: null }, hasVerticalLine: { classPropertyName: "hasVerticalLine", publicName: "hasVerticalLine", isSignal: true, isRequired: false, transformFunction: null }, hasGrid: { classPropertyName: "hasGrid", publicName: "hasGrid", isSignal: true, isRequired: false, transformFunction: null }, isCompacted: { classPropertyName: "isCompacted", publicName: "isCompacted", isSignal: true, isRequired: false, transformFunction: null }, isSelectingAll: { classPropertyName: "isSelectingAll", publicName: "isSelectingAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnSort: "columnSort", selectAll: "selectAll", columnResizeStart: "columnResizeStart", columnResizeDoubleClick: "columnResizeDoubleClick" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-vertical-line\"></div>\n}\n\n@if(hasSeletor()) {\n<div class=\"table-header table-header-seletor\">\n\t@if(config().selectionMode == 'multiple') {\n\t<ui-check-box [single]=\"false\" [value]=\"todosSelecionados()\" (changed)=\"onSelectAll($event)\"\n\t\t[style.--ui-color]=\"'var(--sys-on-primary)'\" [style.--ui-outline]=\"'var(--sys-on-primary)'\"\n\t\t[disabled]=\"isSelectingAll()\" [style.--ui-size]=\"isCompacted() ? '15px' : undefined\"\n\t\t[hasDash]=\"true\"></ui-check-box>\n\t}\n</div>\n}\n\n@for (coluna of colunas(); track $index) {\n@if (coluna.visivel !== false) {\n<div class=\"table-header\" [class.table-border-left-darker]=\"hasGrid() && $index === 0\"\n\t[class.header-last-col]=\"$last && !config().showActionsLine\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[class.sortable]=\"coluna.sortable !== false\" [class.sorted-asc]=\"getOrdenacaoDirecao(coluna.prop) === 'asc'\"\n\t[class.sorted-desc]=\"getOrdenacaoDirecao(coluna.prop) === 'desc'\" [class.textVertical]=\"coluna.textVertical\">\n\t<div cdkDrag [cdkDragData]=\"coluna\" cdkDragLockAxis=\"x\"\n\t\tclass=\"table-header-text table-drag-container drop-option {{ coluna.classeHeader }}\" [title]=\"coluna.titulo\"\n\t\t[innerHTML]=\"coluna.tituloReduzido ?? coluna.titulo\" [attr.ordem]=\"coluna.ordem\"\n\t\t(click)=\"coluna.sortable !== false && onColumnSort(coluna.prop)\">\n\t</div>\n\t<div class=\"table-header-controls\" (dblclick)=\"onResizeDoubleClick($event, coluna)\"\n\t\t(mousedown)=\"onResizeStart($event, coluna)\">\n\t\t@if (coluna.sortable !== false) {\n\t\t<span class=\"table-ico-sort\">\n\t\t\t@if (getOrdenacaoDirecao(coluna.prop) === 'asc') {\n\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t} @else if (getOrdenacaoDirecao(coluna.prop) === 'desc') {\n\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t}\n\t\t</span>\n\t\t}\n\t</div>\n</div>\n}\n}\n\n@if(config().showActionsLine) {\n<div class=\"table-header table-action-line header-last-col\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[innerHTML]=\"!isCompacted() ? config().actionsLineConfig?.headerDisplayMore : ''\"></div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"], dependencies: [{ kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7667
7767
|
}
|
|
7668
7768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GridHeaderRow, decorators: [{
|
|
7669
7769
|
type: Component,
|
|
7670
|
-
args: [{ selector: 'lib-grid-header-row', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display: contents' }, imports: [UiCheckBox, DragDropModule, UiIcon], template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-vertical-line\"></div>\n}\n\n@if(hasSeletor()) {\n<div class=\"table-header table-header-seletor\">\n\t@if(config().selectionMode == 'multiple') {\n\t<ui-check-box [single]=\"false\" [value]=\"todosSelecionados()\" (changed)=\"onSelectAll($event)\"\n\t\t[style.--ui-color]=\"'var(--sys-on-primary)'\" [style.--ui-outline]=\"'var(--sys-on-primary)'\"\n\t\t[disabled]=\"isSelectingAll()\" [style.--ui-size]=\"isCompacted() ? '15px' : undefined\"\n\t\t[hasDash]=\"true\"></ui-check-box>\n\t}\n</div>\n}\n\n@for (coluna of colunas(); track $index) {\n@if (coluna.visivel !== false) {\n<div class=\"table-header\" [class.table-border-left-darker]=\"hasGrid() && $index === 0\"\n\t[class.header-last-col]=\"$last && !config().showActionsLine\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[class.sortable]=\"coluna.sortable !== false\" [class.sorted-asc]=\"getOrdenacaoDirecao(coluna.prop) === 'asc'\"\n\t[class.sorted-desc]=\"getOrdenacaoDirecao(coluna.prop) === 'desc'\" [class.textVertical]=\"coluna.textVertical\">\n\t<div cdkDrag [cdkDragData]=\"coluna\" cdkDragLockAxis=\"x\"\n\t\tclass=\"table-header-text table-drag-container drop-option {{ coluna.classeHeader }}\" [title]=\"coluna.titulo\"\n\t\t[innerHTML]=\"coluna.tituloReduzido ?? coluna.titulo\" [attr.ordem]=\"coluna.ordem\"\n\t\t(click)=\"coluna.sortable !== false && onColumnSort(coluna.prop)\">\n\t</div>\n\t<div class=\"table-header-controls\" (dblclick)=\"onResizeDoubleClick($event, coluna)\"\n\t\t(mousedown)=\"onResizeStart($event, coluna)\">\n\t\t@if (coluna.sortable !== false) {\n\t\t<span class=\"table-ico-sort\">\n\t\t\t@if (getOrdenacaoDirecao(coluna.prop) === 'asc') {\n\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t} @else if (getOrdenacaoDirecao(coluna.prop) === 'desc') {\n\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t}\n\t\t</span>\n\t\t}\n\t</div>\n</div>\n}\n}\n\n@if(config().showActionsLine) {\n<div class=\"table-header table-action-line header-last-col\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[innerHTML]=\"!isCompacted() ? config().actionsLineConfig?.headerDisplayMore : ''\"></div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"] }]
|
|
7770
|
+
args: [{ selector: 'lib-grid-header-row', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display: contents' }, imports: [UiCheckBox, DragDropModule, UiIcon], template: "@if(hasVerticalLine()) {\n<div class=\"table-header table-vertical-line\"></div>\n}\n\n@if(hasSeletor()) {\n<div class=\"table-header table-header-seletor\">\n\t@if(config().selectionMode == 'multiple') {\n\t<ui-check-box [single]=\"false\" [value]=\"todosSelecionados()\" (changed)=\"onSelectAll($event)\"\n\t\t[style.--ui-color]=\"'var(--sys-on-primary)'\" [style.--ui-outline]=\"'var(--sys-on-primary)'\"\n\t\t[disabled]=\"isSelectingAll()\" [style.--ui-size]=\"isCompacted() ? '15px' : undefined\"\n\t\t[hasDash]=\"true\"></ui-check-box>\n\t}\n</div>\n}\n\n@for (coluna of colunas(); track $index) {\n@if (coluna.visivel !== false) {\n<div class=\"table-header\" [class.table-border-left-darker]=\"hasGrid() && $index === 0\"\n\t[class.header-last-col]=\"$last && !config().showActionsLine\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[class.sortable]=\"coluna.sortable !== false\" [class.sorted-asc]=\"getOrdenacaoDirecao(coluna.prop) === 'asc'\"\n\t[class.sorted-desc]=\"getOrdenacaoDirecao(coluna.prop) === 'desc'\" [class.textVertical]=\"coluna.textVertical\">\n\t<div cdkDrag [cdkDragData]=\"coluna\" cdkDragLockAxis=\"x\"\n\t\tclass=\"table-header-text table-drag-container drop-option {{ coluna.classeHeader }}\" [title]=\"coluna.titulo\"\n\t\t[innerHTML]=\"coluna.tituloReduzido ?? coluna.titulo\" [attr.ordem]=\"coluna.ordem\"\n\t\t(click)=\"coluna.sortable !== false && onColumnSort(coluna.prop)\">\n\t</div>\n\t<div class=\"table-header-controls\" (dblclick)=\"onResizeDoubleClick($event, coluna)\"\n\t\t(mousedown)=\"onResizeStart($event, coluna)\">\n\t\t@if (coluna.sortable !== false) {\n\t\t<span class=\"table-ico-sort\">\n\t\t\t@if (getOrdenacaoDirecao(coluna.prop) === 'asc') {\n\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t} @else if (getOrdenacaoDirecao(coluna.prop) === 'desc') {\n\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t}\n\t\t</span>\n\t\t}\n\t</div>\n</div>\n}\n}\n\n@if(config().showActionsLine) {\n<div class=\"table-header table-action-line header-last-col\" [class.table-border-right-darker]=\"hasGrid()\"\n\t[innerHTML]=\"!isCompacted() ? config().actionsLineConfig?.headerDisplayMore : ''\"></div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:contents}\n"] }]
|
|
7671
7771
|
}], propDecorators: { colunas: [{ type: i0.Input, args: [{ isSignal: true, alias: "colunas", required: true }] }], ordenacoes: [{ type: i0.Input, args: [{ isSignal: true, alias: "ordenacoes", required: true }] }], todosSelecionados: [{ type: i0.Input, args: [{ isSignal: true, alias: "todosSelecionados", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], hasSeletor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeletor", required: false }] }], hasVerticalLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasVerticalLine", required: false }] }], hasGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasGrid", required: false }] }], isCompacted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompacted", required: false }] }], isSelectingAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectingAll", required: false }] }], columnSort: [{ type: i0.Output, args: ["columnSort"] }], selectAll: [{ type: i0.Output, args: ["selectAll"] }], columnResizeStart: [{ type: i0.Output, args: ["columnResizeStart"] }], columnResizeDoubleClick: [{ type: i0.Output, args: ["columnResizeDoubleClick"] }] } });
|
|
7672
7772
|
|
|
7673
7773
|
class GridPagination {
|
|
@@ -7765,11 +7865,11 @@ class GridFilterBar {
|
|
|
7765
7865
|
this.expandGroups.emit();
|
|
7766
7866
|
}
|
|
7767
7867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GridFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7768
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GridFilterBar, isStandalone: true, selector: "lib-grid-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colunasDefinidas: { classPropertyName: "colunasDefinidas", publicName: "colunasDefinidas", isSignal: true, isRequired: true, transformFunction: null }, colAgrupadoAtual: { classPropertyName: "colAgrupadoAtual", publicName: "colAgrupadoAtual", isSignal: true, isRequired: true, transformFunction: null }, isAgrupado: { classPropertyName: "isAgrupado", publicName: "isAgrupado", isSignal: true, isRequired: true, transformFunction: null }, filterCollapsed: { classPropertyName: "filterCollapsed", publicName: "filterCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchInput: "searchInput", actionTriggered: "actionTriggered", filterToggle: "filterToggle", groupByColumn: "groupByColumn", clearGroups: "clearGroups", collapseGroups: "collapseGroups", expandGroups: "expandGroups", clickOpcoesListagem: "clickOpcoesListagem" }, ngImport: i0, template: "@if(config().showControlBar) {\n<div class=\"table-topo-container table-styles\">\n\n\t@if(config().showActionsTop) {\n\t<div class=\"table-actions-outside\">\n\t\t@for (action of outsideMenuActionsTop(); track $index;) {\n\t\t<ui-button tipo=\"fill\" tema=\"primary\" [title]=\"action.display\" (click)=\"onClickAction(action)\"\n\t\t\t[icone]=\"action.icon\">\n\t\t\t{{ action?.display ?? '' }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n\t<div class=\"table-top-right-container table-conjunto-actions\">\n\t\t@if(config().showSearch) {\n\t\t<div class=\"table-conjunto-actions-item table-pesquisar\">\n\t\t\t<ui-procurar (inputed)=\"onInputSearch($event)\" [autoColapse]=\"true\"></ui-procurar>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showFilterBar) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onClickOpenCloseFilterZone()\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z\" />\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"table-collapse-ico\" [class.ativo]=\"!filterCollapsed()\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t</ui-button>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showGridMenu != false) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t<ui-button slot=\"botao\" tipo=\"nofill\" tema=\"primary\" class=\"filtro-menu\"\n\t\t\t\t\t[title]=\"config().actionsTopConfig?.menuDisplay\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"stroke-icone\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t{{ config().actionsTopConfig?.menuDisplay }}\n\t\t\t\t</ui-button>\n\t\t\t\t<div class=\"menu-title\" (click)=\"clickOpcoesListagem.emit()\">\n\t\t\t\t\tOp\u00E7\u00F5es da Listagem\n\t\t\t\t</div>\n\n\t\t\t\t@for (action of menuActionsTop(); track $index;) {\n\t\t\t\t@if(action.actions != null) {\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" [title]=\"action.display\"\n\t\t\t\t\t\t[style.--ui-border-radius]=\"'0px'\" [icone]=\"action.icon\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</div>\n\t\t\t\t\t@for(subAction of action.actions; track $index) {\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(subAction)\"\n\t\t\t\t\t\t[icone]=\"subAction?.showIcon ? subAction?.icon : null\"\n\t\t\t\t\t\t[iconeNome]=\"subAction?.showIcon && !subAction?.icon ? 'dot' : undefined\">\n\t\t\t\t\t\t{{ subAction?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t}\n\t\t\t\t</ui-menu>\n\t\t\t\t} @else {\n\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(action)\"\n\t\t\t\t\t[icone]=\"action?.showIcon ? action?.icon : null\"\n\t\t\t\t\t[iconeNome]=\"action?.showIcon && !action?.icon ? 'dot' : undefined\">\n\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t</ui-button>\n\t\t\t\t}\n\t\t\t\t}@empty {\n\t\t\t\t<div class=\"p-2 text-center text-muted\">\n\t\t\t\t\tNenhuma a\u00E7\u00E3o dispon\u00EDvel.\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" iconeNome=\"object-group\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\">\n\t\t\t\t\t\t\tAgrupar Por\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t<div class=\"menu-sub-title\">\n\t\t\t\t\t\t\tAgrupar por\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@for (coluna of colunasDefinidas(); track $index) {\n\t\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onAgruparPor(coluna)\"\n\t\t\t\t\t\t\t[iconeNome]=\"isAgrupado() && colAgrupadoAtual()?.prop === coluna.prop ? 'check2-square' : 'square'\">\n\t\t\t\t\t\t\t{{ coluna.titulo }}\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</ui-menu>\n\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\t\t\t\t\t[disabled]=\"!isAgrupado()\">\n\t\t\t\t\t\tDesagrupar\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\">\n\t\t\t\t\t\tRecolher Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\">\n\t\t\t\t\t\tExpandir Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t</ui-menu>\n\t\t\t</ui-menu>\n\t\t</div>\n\t\t}\n\t</div>\n\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:block}.stroke-icone{stroke:var(--mk-grid-primary, #000) 1px;fill:var(--mk-grid-primary, #000)}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiMenu, selector: "ui-menu", inputs: ["disabled", "icone", "autoCloseInCascade", "posicao", "isOpened"], outputs: ["autoCloseInCascadeChange", "posicaoChange", "isOpenedChange"] }, { kind: "component", type: UiProcurar, selector: "ui-procurar", inputs: ["value", "colapsed", "autoColapse", "name", "placeholder", "disabled"], outputs: ["inputed", "changed", "valueChange", "colapsedChange", "autoColapseChange"] }] });
|
|
7868
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: GridFilterBar, isStandalone: true, selector: "lib-grid-filter-bar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, colunasDefinidas: { classPropertyName: "colunasDefinidas", publicName: "colunasDefinidas", isSignal: true, isRequired: true, transformFunction: null }, colAgrupadoAtual: { classPropertyName: "colAgrupadoAtual", publicName: "colAgrupadoAtual", isSignal: true, isRequired: true, transformFunction: null }, isAgrupado: { classPropertyName: "isAgrupado", publicName: "isAgrupado", isSignal: true, isRequired: true, transformFunction: null }, filterCollapsed: { classPropertyName: "filterCollapsed", publicName: "filterCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchInput: "searchInput", actionTriggered: "actionTriggered", filterToggle: "filterToggle", groupByColumn: "groupByColumn", clearGroups: "clearGroups", collapseGroups: "collapseGroups", expandGroups: "expandGroups", clickOpcoesListagem: "clickOpcoesListagem" }, ngImport: i0, template: "@if(config().showControlBar) {\n<div class=\"table-topo-container table-styles\">\n\n\t@if(config().showActionsTop) {\n\t<div class=\"table-actions-outside\">\n\t\t@for (action of outsideMenuActionsTop(); track $index;) {\n\t\t<ui-button tipo=\"fill\" tema=\"primary\" [title]=\"action.display\" (click)=\"onClickAction(action)\"\n\t\t\t[icone]=\"action.icon\">\n\t\t\t{{ action?.display ?? '' }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n\t<div class=\"table-top-right-container table-conjunto-actions\">\n\t\t@if(config().showSearch) {\n\t\t<div class=\"table-conjunto-actions-item table-pesquisar\">\n\t\t\t<ui-procurar (inputed)=\"onInputSearch($event)\" [autoColapse]=\"true\"></ui-procurar>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showFilterBar) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onClickOpenCloseFilterZone()\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z\" />\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"table-collapse-ico\" [class.ativo]=\"!filterCollapsed()\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t</ui-button>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showGridMenu != false) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t<ui-button slot=\"botao\" tipo=\"nofill\" tema=\"primary\" class=\"filtro-menu\"\n\t\t\t\t\t[title]=\"config().actionsTopConfig?.menuDisplay\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"stroke-icone\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t{{ config().actionsTopConfig?.menuDisplay }}\n\t\t\t\t</ui-button>\n\t\t\t\t<div class=\"menu-title\" (click)=\"clickOpcoesListagem.emit()\">\n\t\t\t\t\tOp\u00E7\u00F5es da Listagem\n\t\t\t\t</div>\n\n\t\t\t\t@for (action of menuActionsTop(); track $index;) {\n\t\t\t\t@if(action.actions != null) {\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" [title]=\"action.display\"\n\t\t\t\t\t\t[style.--ui-border-radius]=\"'0px'\" [icone]=\"action.icon\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</div>\n\t\t\t\t\t@for(subAction of action.actions; track $index) {\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(subAction)\"\n\t\t\t\t\t\t[icone]=\"subAction?.showIcon ? subAction?.icon : null\"\n\t\t\t\t\t\t[iconeNome]=\"subAction?.showIcon && !subAction?.icon ? 'dot' : undefined\">\n\t\t\t\t\t\t{{ subAction?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t}\n\t\t\t\t</ui-menu>\n\t\t\t\t} @else {\n\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(action)\"\n\t\t\t\t\t[icone]=\"action?.showIcon ? action?.icon : null\"\n\t\t\t\t\t[iconeNome]=\"action?.showIcon && !action?.icon ? 'dot' : undefined\">\n\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t</ui-button>\n\t\t\t\t}\n\t\t\t\t}@empty {\n\t\t\t\t<div class=\"p-2 text-center text-muted\">\n\t\t\t\t\tNenhuma a\u00E7\u00E3o dispon\u00EDvel.\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" iconeNome=\"object-group\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\">\n\t\t\t\t\t\t\tAgrupar Por\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t<div class=\"menu-sub-title\">\n\t\t\t\t\t\t\tAgrupar por\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@for (coluna of colunasDefinidas(); track $index) {\n\t\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onAgruparPor(coluna)\"\n\t\t\t\t\t\t\t[iconeNome]=\"isAgrupado() && colAgrupadoAtual()?.prop === coluna.prop ? 'check2-square' : 'square'\">\n\t\t\t\t\t\t\t{{ coluna.titulo }}\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</ui-menu>\n\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\t\t\t\t\t[disabled]=\"!isAgrupado()\">\n\t\t\t\t\t\tDesagrupar\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\">\n\t\t\t\t\t\tRecolher Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\">\n\t\t\t\t\t\tExpandir Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t</ui-menu>\n\t\t\t</ui-menu>\n\t\t</div>\n\t\t}\n\t</div>\n\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:block}.stroke-icone{stroke:var(--mk-grid-primary, #000) 1px;fill:var(--mk-grid-primary, #000)}\n"], dependencies: [{ kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiMenu, selector: "ui-menu", inputs: ["disabled", "icone", "autoCloseInCascade", "posicao", "isOpened"], outputs: ["autoCloseInCascadeChange", "posicaoChange", "isOpenedChange"] }, { kind: "component", type: UiProcurar, selector: "ui-procurar", inputs: ["value", "colapsed", "autoColapse", "name", "placeholder", "disabled"], outputs: ["inputed", "changed", "valueChange", "colapsedChange", "autoColapseChange"] }] });
|
|
7769
7869
|
}
|
|
7770
7870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: GridFilterBar, decorators: [{
|
|
7771
7871
|
type: Component,
|
|
7772
|
-
args: [{ selector: 'lib-grid-filter-bar', imports: [UiButton, UiMenu, UiProcurar], template: "@if(config().showControlBar) {\n<div class=\"table-topo-container table-styles\">\n\n\t@if(config().showActionsTop) {\n\t<div class=\"table-actions-outside\">\n\t\t@for (action of outsideMenuActionsTop(); track $index;) {\n\t\t<ui-button tipo=\"fill\" tema=\"primary\" [title]=\"action.display\" (click)=\"onClickAction(action)\"\n\t\t\t[icone]=\"action.icon\">\n\t\t\t{{ action?.display ?? '' }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n\t<div class=\"table-top-right-container table-conjunto-actions\">\n\t\t@if(config().showSearch) {\n\t\t<div class=\"table-conjunto-actions-item table-pesquisar\">\n\t\t\t<ui-procurar (inputed)=\"onInputSearch($event)\" [autoColapse]=\"true\"></ui-procurar>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showFilterBar) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onClickOpenCloseFilterZone()\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z\" />\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"table-collapse-ico\" [class.ativo]=\"!filterCollapsed()\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t</ui-button>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showGridMenu != false) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t<ui-button slot=\"botao\" tipo=\"nofill\" tema=\"primary\" class=\"filtro-menu\"\n\t\t\t\t\t[title]=\"config().actionsTopConfig?.menuDisplay\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"stroke-icone\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t{{ config().actionsTopConfig?.menuDisplay }}\n\t\t\t\t</ui-button>\n\t\t\t\t<div class=\"menu-title\" (click)=\"clickOpcoesListagem.emit()\">\n\t\t\t\t\tOp\u00E7\u00F5es da Listagem\n\t\t\t\t</div>\n\n\t\t\t\t@for (action of menuActionsTop(); track $index;) {\n\t\t\t\t@if(action.actions != null) {\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" [title]=\"action.display\"\n\t\t\t\t\t\t[style.--ui-border-radius]=\"'0px'\" [icone]=\"action.icon\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</div>\n\t\t\t\t\t@for(subAction of action.actions; track $index) {\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(subAction)\"\n\t\t\t\t\t\t[icone]=\"subAction?.showIcon ? subAction?.icon : null\"\n\t\t\t\t\t\t[iconeNome]=\"subAction?.showIcon && !subAction?.icon ? 'dot' : undefined\">\n\t\t\t\t\t\t{{ subAction?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t}\n\t\t\t\t</ui-menu>\n\t\t\t\t} @else {\n\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(action)\"\n\t\t\t\t\t[icone]=\"action?.showIcon ? action?.icon : null\"\n\t\t\t\t\t[iconeNome]=\"action?.showIcon && !action?.icon ? 'dot' : undefined\">\n\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t</ui-button>\n\t\t\t\t}\n\t\t\t\t}@empty {\n\t\t\t\t<div class=\"p-2 text-center text-muted\">\n\t\t\t\t\tNenhuma a\u00E7\u00E3o dispon\u00EDvel.\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" iconeNome=\"object-group\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\">\n\t\t\t\t\t\t\tAgrupar Por\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t<div class=\"menu-sub-title\">\n\t\t\t\t\t\t\tAgrupar por\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@for (coluna of colunasDefinidas(); track $index) {\n\t\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onAgruparPor(coluna)\"\n\t\t\t\t\t\t\t[iconeNome]=\"isAgrupado() && colAgrupadoAtual()?.prop === coluna.prop ? 'check2-square' : 'square'\">\n\t\t\t\t\t\t\t{{ coluna.titulo }}\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</ui-menu>\n\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\t\t\t\t\t[disabled]=\"!isAgrupado()\">\n\t\t\t\t\t\tDesagrupar\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\">\n\t\t\t\t\t\tRecolher Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\">\n\t\t\t\t\t\tExpandir Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t</ui-menu>\n\t\t\t</ui-menu>\n\t\t</div>\n\t\t}\n\t</div>\n\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:block}.stroke-icone{stroke:var(--mk-grid-primary, #000) 1px;fill:var(--mk-grid-primary, #000)}\n"] }]
|
|
7872
|
+
args: [{ selector: 'lib-grid-filter-bar', imports: [UiButton, UiMenu, UiProcurar], template: "@if(config().showControlBar) {\n<div class=\"table-topo-container table-styles\">\n\n\t@if(config().showActionsTop) {\n\t<div class=\"table-actions-outside\">\n\t\t@for (action of outsideMenuActionsTop(); track $index;) {\n\t\t<ui-button tipo=\"fill\" tema=\"primary\" [title]=\"action.display\" (click)=\"onClickAction(action)\"\n\t\t\t[icone]=\"action.icon\">\n\t\t\t{{ action?.display ?? '' }}\n\t\t</ui-button>\n\t\t}\n\t</div>\n\t}\n\n\t<div class=\"table-top-right-container table-conjunto-actions\">\n\t\t@if(config().showSearch) {\n\t\t<div class=\"table-conjunto-actions-item table-pesquisar\">\n\t\t\t<ui-procurar (inputed)=\"onInputSearch($event)\" [autoColapse]=\"true\"></ui-procurar>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showFilterBar) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onClickOpenCloseFilterZone()\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z\" />\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"table-collapse-ico\" [class.ativo]=\"!filterCollapsed()\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"stroke-icone\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t</ui-button>\n\t\t</div>\n\t\t}\n\n\t\t@if(config().showGridMenu != false) {\n\t\t<div class=\"table-conjunto-actions-item\">\n\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t<ui-button slot=\"botao\" tipo=\"nofill\" tema=\"primary\" class=\"filtro-menu\"\n\t\t\t\t\t[title]=\"config().actionsTopConfig?.menuDisplay\" [style.--ui-border-radius]=\"'0px'\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"stroke-icone\">\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t{{ config().actionsTopConfig?.menuDisplay }}\n\t\t\t\t</ui-button>\n\t\t\t\t<div class=\"menu-title\" (click)=\"clickOpcoesListagem.emit()\">\n\t\t\t\t\tOp\u00E7\u00F5es da Listagem\n\t\t\t\t</div>\n\n\t\t\t\t@for (action of menuActionsTop(); track $index;) {\n\t\t\t\t@if(action.actions != null) {\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" [title]=\"action.display\"\n\t\t\t\t\t\t[style.--ui-border-radius]=\"'0px'\" [icone]=\"action.icon\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t\t</div>\n\t\t\t\t\t@for(subAction of action.actions; track $index) {\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(subAction)\"\n\t\t\t\t\t\t[icone]=\"subAction?.showIcon ? subAction?.icon : null\"\n\t\t\t\t\t\t[iconeNome]=\"subAction?.showIcon && !subAction?.icon ? 'dot' : undefined\">\n\t\t\t\t\t\t{{ subAction?.display ?? '' }}\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t}\n\t\t\t\t</ui-menu>\n\t\t\t\t} @else {\n\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClickAction(action)\"\n\t\t\t\t\t[icone]=\"action?.showIcon ? action?.icon : null\"\n\t\t\t\t\t[iconeNome]=\"action?.showIcon && !action?.icon ? 'dot' : undefined\">\n\t\t\t\t\t{{ action?.display ?? '' }}\n\t\t\t\t</ui-button>\n\t\t\t\t}\n\t\t\t\t}@empty {\n\t\t\t\t<div class=\"p-2 text-center text-muted\">\n\t\t\t\t\tNenhuma a\u00E7\u00E3o dispon\u00EDvel.\n\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\" iconeNome=\"object-group\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<div class=\"menu-title\">\n\t\t\t\t\t\tAgrupamento\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<ui-menu [autoCloseInCascade]=\"false\">\n\t\t\t\t\t\t<ui-button slot=\"botao\" tipo=\"menu-item-category\" tema=\"primary\">\n\t\t\t\t\t\t\tAgrupar Por\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t<div class=\"menu-sub-title\">\n\t\t\t\t\t\t\tAgrupar por\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@for (coluna of colunasDefinidas(); track $index) {\n\t\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onAgruparPor(coluna)\"\n\t\t\t\t\t\t\t[iconeNome]=\"isAgrupado() && colAgrupadoAtual()?.prop === coluna.prop ? 'check2-square' : 'square'\">\n\t\t\t\t\t\t\t{{ coluna.titulo }}\n\t\t\t\t\t\t</ui-button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</ui-menu>\n\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\t\t\t\t\t[disabled]=\"!isAgrupado()\">\n\t\t\t\t\t\tDesagrupar\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\">\n\t\t\t\t\t\tRecolher Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t\t<ui-button tipo=\"menu-item\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\">\n\t\t\t\t\t\tExpandir Todos\n\t\t\t\t\t</ui-button>\n\t\t\t\t</ui-menu>\n\t\t\t</ui-menu>\n\t\t</div>\n\t\t}\n\t</div>\n\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n", ":host{display:block}.stroke-icone{stroke:var(--mk-grid-primary, #000) 1px;fill:var(--mk-grid-primary, #000)}\n"] }]
|
|
7773
7873
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], colunasDefinidas: [{ type: i0.Input, args: [{ isSignal: true, alias: "colunasDefinidas", required: true }] }], colAgrupadoAtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "colAgrupadoAtual", required: true }] }], isAgrupado: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAgrupado", required: true }] }], filterCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCollapsed", required: false }] }], searchInput: [{ type: i0.Output, args: ["searchInput"] }], actionTriggered: [{ type: i0.Output, args: ["actionTriggered"] }], filterToggle: [{ type: i0.Output, args: ["filterToggle"] }], groupByColumn: [{ type: i0.Output, args: ["groupByColumn"] }], clearGroups: [{ type: i0.Output, args: ["clearGroups"] }], collapseGroups: [{ type: i0.Output, args: ["collapseGroups"] }], expandGroups: [{ type: i0.Output, args: ["expandGroups"] }], clickOpcoesListagem: [{ type: i0.Output, args: ["clickOpcoesListagem"] }] } });
|
|
7774
7874
|
|
|
7775
7875
|
class GridEmptyList {
|
|
@@ -8559,7 +8659,7 @@ class MkGrid {
|
|
|
8559
8659
|
this.getState();
|
|
8560
8660
|
}
|
|
8561
8661
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MkGrid, isStandalone: true, selector: "lib-mk-grid", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filtro: { classPropertyName: "filtro", publicName: "filtro", isSignal: true, isRequired: false, transformFunction: null }, minLineHeight: { classPropertyName: "minLineHeight", publicName: "minLineHeight", isSignal: true, isRequired: false, transformFunction: null }, isCompacted: { classPropertyName: "isCompacted", publicName: "isCompacted", isSignal: true, isRequired: false, transformFunction: null }, hasGrid: { classPropertyName: "hasGrid", publicName: "hasGrid", isSignal: true, isRequired: false, transformFunction: null }, hasVerticalLine: { classPropertyName: "hasVerticalLine", publicName: "hasVerticalLine", isSignal: true, isRequired: false, transformFunction: null }, hasSeletor: { classPropertyName: "hasSeletor", publicName: "hasSeletor", isSignal: true, isRequired: false, transformFunction: null }, paginationSize: { classPropertyName: "paginationSize", publicName: "paginationSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { minLineHeight: "minLineHeightChange", isCompacted: "isCompactedChange", hasGrid: "hasGridChange", hasVerticalLine: "hasVerticalLineChange", hasSeletor: "hasSeletorChange", paginationSize: "paginationSizeChange" }, viewQueries: [{ propertyName: "gridSize", first: true, predicate: ["gridSize"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gridfiltro", first: true, predicate: ["gridfiltro"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<lib-grid-filter-bar [config]=\"cfg()\" [colunasDefinidas]=\"$any(colunasDefinidas())\"\n\t[colAgrupadoAtual]=\"colAgrupadoAtual()\" [isAgrupado]=\"isAgrupado()\" [filterCollapsed]=\"filtroCollapsed()\"\n\t(searchInput)=\"onInputSearch($event)\" (filterToggle)=\"onClickOpenCloseFilterZone()\"\n\t(actionTriggered)=\"onClickAction($event)\" (groupByColumn)=\"onAgruparPor($any($event))\" (clearGroups)=\"onClearGroups()\"\n\t(collapseGroups)=\"onRecolherGroups()\" (expandGroups)=\"onExpandirGroups()\"\n\t(clickOpcoesListagem)=\"onClickOpcoesListagem()\">\n</lib-grid-filter-bar>\n\n@if(cfg().showFilterBar) {\n<div class=\"table-filter-container table-styles\" [style.--filter-height.px]=\"filterHeight()\">\n\t<div #filterContainer class=\"table-filter-content\" [class.table-filter-hide]=\"filtroCollapsed()\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n}\n\n@if(currentDevice() == \"Mobile\"){\n<!-- MOBILE INICIO -->\n\n@for (dadosLinha of listaExibir(); track $index;let i = $index) {\n@if( dadosLinha.isColapsed !== true){\n\n@if(dadosLinha.isFullLine?.visible){\n<!-- MOBILE GRUPO LINHA PR\u00D3PRIA -->\n<div class=\"table-row-mobile table-formated table-group table-styles\" (click)=\"onClickGroup(dadosLinha)\">\n\t<div>{{ dadosLinha.groupName }}</div>\n\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t<div class=\"table-group-items-ico\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t</div>\n</div>\n} @else {\n\n<div class=\"table-overflow mobile\" [style.--table-min-height]=\"isCompacted() ? '20px' : minLineHeight()\">\n\t<div class=\"table-table-mobile\" [class.selected]=\"dadosLinha.selecionado\">\n\n\t\t<!-- MOBILE DADOS -->\n\t\t@if(cfg().showActionsLine){\n\t\t<div class=\"table-header-mobile\" [style.gridArea]=\"'auto / auto / auto / span 2'\">\n\t\t\t@if(hasVerticalLine()){\n\t\t\t<!-- MOBILE VERTICAL DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-vertical-line\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t{{ dadosLinha.ordem }}\n\t\t\t</div>\n\t\t\t}\n\t\t\t@if(hasSeletor()){\n\t\t\t<!-- MOBILE SELECTOR DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-item-seletor\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t<ui-check-box [(value)]=\"dadosLinha.selecionado\" [style.--ui-color]=\"'var(--sys-on-primary)'\"\n\t\t\t\t\t[style.--ui-outline]=\"'var(--sys-on-primary)'\" [single]=\"this.cfg().selectionMode == 'single'\"\n\t\t\t\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\"></ui-check-box>\n\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"table-header-mobile-space\" (click)=\"onClickRow(dadosLinha)\"></div>\n\t\t\t<lib-grid-cell-actions [config]=\"cfg()\" [dadosDaLinha]=\"dadosLinha\" [mobileHeader]=\"true\"\n\t\t\t\t(action)=\"onClickCellAction($event)\" [compact]=\"isCompacted()\"></lib-grid-cell-actions>\n\t\t</div>\n\t\t}\n\n\t\t<!-- MOBILE LINHA -->\n\t\t@for (localColuna of colunasOrdenadas(); track $index;) {\n\t\t<div class=\"table-header-mobile\" [class.sortable]=\"localColuna.sortable !== false\"\n\t\t\t[class.sorted-asc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'asc'\"\n\t\t\t[class.sorted-desc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'desc'\"\n\t\t\t(click)=\"localColuna.sortable !== false && alternarOrdenacao(localColuna.prop)\" [style]=\"localColuna.styleHeader\">\n\t\t\t<div class=\"table-header-mobile-text\" [title]=\"localColuna.titulo\"\n\t\t\t\t[innerHTML]=\"localColuna.tituloReduzido ?? localColuna.titulo\">\n\t\t\t</div>\n\t\t\t<div class=\"table-header-controls\">\n\t\t\t\t@if (localColuna.sortable !== false) {\n\t\t\t\t<span class=\"table-ico-sort\">\n\t\t\t\t\t@if (obterDirecaoOrdenacao(localColuna.prop) === 'asc') {\n\t\t\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t\t\t} @else if (obterDirecaoOrdenacao(localColuna.prop) === 'desc') {\n\t\t\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<lib-grid-cell-handler class=\"table-item-mobile table-formated\" [class.odd]=\"i % 2 !== 0\" [class.even]=\"i % 2 === 0\"\n\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"localColuna\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t[localColunas]=\"colunasOrdenadas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t}\n\t</div>\n</div>\n}\n}\n} @empty {\n<!-- LINHA DE SEM DADOS -->\n<div class=\"table-styles\"><lib-grid-empty-list></lib-grid-empty-list></div>\n}\n<!-- MOBILE FIM -->\n\n\n} @else {\n<!-- DESKTOP INICIO -->\n<div #gridSize class=\"table-overflow\" [class.compacted]=\"isCompacted()\"\n\t[style.--table-min-height]=\"isCompacted() ? '40px' : minLineHeight()\">\n\t<div class=\"table-table\" [class.table-has-vertical-line]=\"hasVerticalLine()\" [class.table-has-seletor]=\"hasSeletor()\"\n\t\tcdkDropList (cdkDropListDropped)=\"onDropColuna($event)\" [cdkDropListData]=\"colunasExibir()\"\n\t\t[style.gridTemplateColumns]=\"`${this.pxVerticalLine()}${this.pxSelector()}` + this.pxColunas() + this.pxActions()\">\n\t\t<!-- DESKTOP HEADER -->\n\t\t<lib-grid-header-row [colunas]=\"colunasExibir()\" [ordenacoes]=\"ordenacoesSignal()\"\n\t\t\t[todosSelecionados]=\"todosSelecionados()\" [config]=\"cfg()\" [hasSeletor]=\"hasSeletor()\"\n\t\t\t[hasVerticalLine]=\"hasVerticalLine()\" [hasGrid]=\"hasGrid()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[isSelectingAll]=\"isSelectingAll()\" (columnSort)=\"alternarOrdenacao($event)\"\n\t\t\t(selectAll)=\"onChangeTodosSelecionados($event)\"\n\t\t\t(columnResizeStart)=\"onResizeStart($event.event, $any($event.coluna))\"\n\t\t\t(columnResizeDoubleClick)=\"onDoubleClickControls($event.event, $any($event.coluna))\">\n\t\t</lib-grid-header-row>\n\n\t\t<!-- DESKTOP LINHAS DE DADOS -->\n\t\t@for (dadosLinha of listaExibir(); track $index; let i = $index) {@if( dadosLinha.isColapsed !== true){\n\n\t\t@if(dadosLinha.isFullLine?.visible){\n\n\t\t<!-- DESKTOP FULL LINE (COLSPAN HORIZONTAL) -->\n\t\t@if(hasVerticalLine()){\n\t\t<!-- DESKTOP HEADER VERTICAL FULL LINE -->\n\t\t<div class=\"table-header table-formated table-vertical-line\">\n\t\t\t{{ dadosLinha.ordem }}\n\t\t</div>\n\t\t}\n\t\t<!-- DESKTOP GRUPO: ROW -->\n\t\t@if(dadosLinha.isGroup){\n\n\t\t<div class=\"table-row table-formated table-group table-border-bottom-card\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<div class=\"table-group-name\" [class.table-inativo]=\"dadosLinha.inativo\">\n\t\t\t\t<lib-grid-cell-handler class=\"table-item table-dados {{ colAgrupadoAtual()?.classeCell }}\"\n\t\t\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"colAgrupadoAtual()!\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t\t\t[localColunas]=\"colunasDefinidas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t\t</div>\n\t\t\t<ui-button tipo=\"nofill\" (click)=\"onClickGroup(dadosLinha)\">\n\t\t\t\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t\t\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t\t\t\t<div class=\"table-group-items-ico\">\n\t\t\t\t\t\t<ui-icon [name]=\"dadosLinha.isFullLine.colapsed ? 'caret-down-fill' : 'caret-down'\"></ui-icon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ui-button>\n\t\t</div>\n\n\t\t} @else {\n\t\t<div class=\"table-row table-formated table-others\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\tNada a exibir nesta linha\n\t\t</div>\n\t\t}\n\n\t\t} @else {\n\n\t\t<!-- LINHA NORMAL via GridRowRenderer -->\n\t\t<lib-grid-row-renderer [dadosLinha]=\"dadosLinha\" [config]=\"cfg()\" [colunas]=\"colunasExibir()\"\n\t\t\t[colunasOrdenadas]=\"colunasOrdenadas()\" [lista]=\"lista()!\" [inputSearchText]=\"inputSearchText()\"\n\t\t\t[hasSeletor]=\"hasSeletor()\" [hasVerticalLine]=\"hasVerticalLine()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[hasGrid]=\"hasGrid()\" [rowIndex]=\"i\" (actionTriggered)=\"onClickCellAction($event)\"\n\t\t\t(rowClicked)=\"onClickRow($event)\" [lastRow]=\"$last\">\n\t\t</lib-grid-row-renderer>\n\n\t\t}}\n\n\t\t<!-- POSSIBILIDADES SEM DADOS -->\n\t\t} @empty {\n\n\t\t<!-- ERRO -->\n\t\t@if(cfg().hasError) {\n\t\t<div class=\"table-row table-formated table-errors\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridError]\"></ng-content>\n\t\t</div>\n\n\t\t<!-- LOADING -->\n\t\t} @else if(!cfg().isLoaded) {\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridLoading]\">\n\t\t\t\t<lib-grid-loading></lib-grid-loading>\n\t\t\t</ng-content>\n\t\t</div>\n\n\t\t} @else {\n\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridEmpty]\">\n\t\t\t\t<lib-grid-empty-list></lib-grid-empty-list>\n\t\t\t</ng-content>\n\t\t</div>\n\t\t}\n\n\t\t}\n\n\t\t<!-- FIM DA LINHA NORMAL -->\n\n\n\t</div>\n</div>\n<!-- DESKTOP FIM -->\n}\n\n\n@if(cfg().showPagination){\n<lib-grid-pagination [paginacao]=\"paginacaoSignal()\" [totalPaginas]=\"totalPaginas()\"\n\t[performance]=\"cfg().timeRequest ?? ''\" [pageSizeOptions]=\"pageSizeOptions()\" [(paginationSize)]=\"paginationSize\"\n\t(pageChange)=\"irParaPagina($event)\">\n</lib-grid-pagination>\n}\n\n\n\n\n@if(cfg().showInfoBar){\n<!-- Informa\u00E7\u00F5es de Ordena\u00E7\u00E3o -->\n@if (ordenacoesSignal().length > 0) {\n<div class=\"table-info-row table-styles\">\n\t@if (ordenacoesSignal().length > 0) {\n\t<div>Ordenado por: {{ getOrdenacaoTexto() }}</div>\n\t}\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClickClearInfo()\" iconeNome=\"x-lg\"></ui-button>\n</div>\n}\n<!-- Informa\u00E7\u00F5es de Agrupamento -->\n@if (this.isAgrupado()) {\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"object-group\"></ui-icon>\n\t<div class=\"flex flex-wrap gap-1 f-t-b\">\n\t\tAgrupado por {{ colAgrupadoAtual()?.titulo }} (h\u00E1 {{ gruposEncontrados.itens.size }} grupos)\n\t\t<div class=\"campoSemForm\">\n\t\t\t<ui-select [value]=\"colAgrupadoAtual()?.prop\" [options]=\"this.colunasKVDefinidas()\"\n\t\t\t\t(changed)=\"onChangedAgrupamento($event)\"></ui-select>\n\t\t</div>\n\n\t</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\"\n\t\ttitle=\"Recolher Todos\"></ui-button>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\"\n\t\ttitle=\"Expandir Todos\"></ui-button>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\ttitle=\"Desagrupar\"></ui-button>\n</div>\n}\n}\n\n\n@if(devMode){\n<!-- MODO DESENVOLVIMENTO -->\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"microscope\"></ui-icon>\n\t<div>Fun\u00E7\u00F5es extras</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasGrid()\" (click)=\"onChangeHasGrid()\" iconeNome=\"grid-3x3\"\n\t\ttitle=\"Grid\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"isCompacted()\" (click)=\"onChangeCompacted()\"\n\t\ticoneNome=\"arrows-to-circle\" title=\"Compactar\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasVerticalLine()\" (click)=\"onChangeLineNumber()\"\n\t\ticoneNome=\"layout-sidebar\" title=\"Linha Vertical\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasSeletor()\" (click)=\"onChangeSeletor()\" iconeNome=\"check-double\"\n\t\ttitle=\"Seletor\"></ui-button>\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n"], dependencies: [{ kind: "component", type: GridEmptyList, selector: "lib-grid-empty-list" }, { kind: "component", type: GridLoading, selector: "lib-grid-loading" }, { kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiSelect, selector: "ui-select", inputs: ["value", "options", "name", "placeholder", "disabled", "multiple", "canUnselect", "textEmpty"], outputs: ["valueChange", "changed"] }, { kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: GridFilterBar, selector: "lib-grid-filter-bar", inputs: ["config", "colunasDefinidas", "colAgrupadoAtual", "isAgrupado", "filterCollapsed"], outputs: ["searchInput", "actionTriggered", "filterToggle", "groupByColumn", "clearGroups", "collapseGroups", "expandGroups", "clickOpcoesListagem"] }, { kind: "component", type: GridPagination, selector: "lib-grid-pagination", inputs: ["paginacao", "totalPaginas", "performance", "pageSizeOptions", "paginationSize"], outputs: ["paginationSizeChange", "pageChange"] }, { kind: "component", type: GridHeaderRow, selector: "lib-grid-header-row", inputs: ["colunas", "ordenacoes", "todosSelecionados", "config", "hasSeletor", "hasVerticalLine", "hasGrid", "isCompacted", "isSelectingAll"], outputs: ["columnSort", "selectAll", "columnResizeStart", "columnResizeDoubleClick"] }, { kind: "component", type: GridRowRenderer, selector: "lib-grid-row-renderer", inputs: ["dadosLinha", "config", "colunas", "colunasOrdenadas", "lista", "inputSearchText", "hasSeletor", "hasVerticalLine", "isCompacted", "hasGrid", "rowIndex", "lastRow"], outputs: ["actionTriggered", "rowClicked"] }, { kind: "component", type: GridCellHandler, selector: "lib-grid-cell-handler", inputs: ["lista", "linha", "config", "localColuna", "localColunas", "inputSearchText"] }, { kind: "component", type: GridCellActions, selector: "lib-grid-cell-actions", inputs: ["config", "dadosDaLinha", "mobileHeader", "compact"], outputs: ["action"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8662
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MkGrid, isStandalone: true, selector: "lib-mk-grid", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filtro: { classPropertyName: "filtro", publicName: "filtro", isSignal: true, isRequired: false, transformFunction: null }, minLineHeight: { classPropertyName: "minLineHeight", publicName: "minLineHeight", isSignal: true, isRequired: false, transformFunction: null }, isCompacted: { classPropertyName: "isCompacted", publicName: "isCompacted", isSignal: true, isRequired: false, transformFunction: null }, hasGrid: { classPropertyName: "hasGrid", publicName: "hasGrid", isSignal: true, isRequired: false, transformFunction: null }, hasVerticalLine: { classPropertyName: "hasVerticalLine", publicName: "hasVerticalLine", isSignal: true, isRequired: false, transformFunction: null }, hasSeletor: { classPropertyName: "hasSeletor", publicName: "hasSeletor", isSignal: true, isRequired: false, transformFunction: null }, paginationSize: { classPropertyName: "paginationSize", publicName: "paginationSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { minLineHeight: "minLineHeightChange", isCompacted: "isCompactedChange", hasGrid: "hasGridChange", hasVerticalLine: "hasVerticalLineChange", hasSeletor: "hasSeletorChange", paginationSize: "paginationSizeChange" }, viewQueries: [{ propertyName: "gridSize", first: true, predicate: ["gridSize"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gridfiltro", first: true, predicate: ["gridfiltro"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<lib-grid-filter-bar [config]=\"cfg()\" [colunasDefinidas]=\"$any(colunasDefinidas())\"\n\t[colAgrupadoAtual]=\"colAgrupadoAtual()\" [isAgrupado]=\"isAgrupado()\" [filterCollapsed]=\"filtroCollapsed()\"\n\t(searchInput)=\"onInputSearch($event)\" (filterToggle)=\"onClickOpenCloseFilterZone()\"\n\t(actionTriggered)=\"onClickAction($event)\" (groupByColumn)=\"onAgruparPor($any($event))\" (clearGroups)=\"onClearGroups()\"\n\t(collapseGroups)=\"onRecolherGroups()\" (expandGroups)=\"onExpandirGroups()\"\n\t(clickOpcoesListagem)=\"onClickOpcoesListagem()\">\n</lib-grid-filter-bar>\n\n@if(cfg().showFilterBar) {\n<div class=\"table-filter-container table-styles\" [style.--filter-height.px]=\"filterHeight()\">\n\t<div #filterContainer class=\"table-filter-content\" [class.table-filter-hide]=\"filtroCollapsed()\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n}\n\n@if(currentDevice() == \"Mobile\"){\n<!-- MOBILE INICIO -->\n\n@for (dadosLinha of listaExibir(); track $index;let i = $index) {\n@if( dadosLinha.isColapsed !== true){\n\n@if(dadosLinha.isFullLine?.visible){\n<!-- MOBILE GRUPO LINHA PR\u00D3PRIA -->\n<div class=\"table-row-mobile table-formated table-group table-styles\" (click)=\"onClickGroup(dadosLinha)\">\n\t<div>{{ dadosLinha.groupName }}</div>\n\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t<div class=\"table-group-items-ico\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t</div>\n</div>\n} @else {\n\n<div class=\"table-overflow mobile\" [style.--table-min-height]=\"isCompacted() ? '20px' : minLineHeight()\">\n\t<div class=\"table-table-mobile\" [class.selected]=\"dadosLinha.selecionado\">\n\n\t\t<!-- MOBILE DADOS -->\n\t\t@if(cfg().showActionsLine){\n\t\t<div class=\"table-header-mobile\" [style.gridArea]=\"'auto / auto / auto / span 2'\">\n\t\t\t@if(hasVerticalLine()){\n\t\t\t<!-- MOBILE VERTICAL DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-vertical-line\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t{{ dadosLinha.ordem }}\n\t\t\t</div>\n\t\t\t}\n\t\t\t@if(hasSeletor()){\n\t\t\t<!-- MOBILE SELECTOR DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-item-seletor\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t<ui-check-box [(value)]=\"dadosLinha.selecionado\" [style.--ui-color]=\"'var(--sys-on-primary)'\"\n\t\t\t\t\t[style.--ui-outline]=\"'var(--sys-on-primary)'\" [single]=\"this.cfg().selectionMode == 'single'\"\n\t\t\t\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\"></ui-check-box>\n\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"table-header-mobile-space\" (click)=\"onClickRow(dadosLinha)\"></div>\n\t\t\t<lib-grid-cell-actions [config]=\"cfg()\" [dadosDaLinha]=\"dadosLinha\" [mobileHeader]=\"true\"\n\t\t\t\t(action)=\"onClickCellAction($event)\" [compact]=\"isCompacted()\"></lib-grid-cell-actions>\n\t\t</div>\n\t\t}\n\n\t\t<!-- MOBILE LINHA -->\n\t\t@for (localColuna of colunasOrdenadas(); track $index;) {\n\t\t<div class=\"table-header-mobile\" [class.sortable]=\"localColuna.sortable !== false\"\n\t\t\t[class.sorted-asc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'asc'\"\n\t\t\t[class.sorted-desc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'desc'\"\n\t\t\t(click)=\"localColuna.sortable !== false && alternarOrdenacao(localColuna.prop)\" [style]=\"localColuna.styleHeader\">\n\t\t\t<div class=\"table-header-mobile-text\" [title]=\"localColuna.titulo\"\n\t\t\t\t[innerHTML]=\"localColuna.tituloReduzido ?? localColuna.titulo\">\n\t\t\t</div>\n\t\t\t<div class=\"table-header-controls\">\n\t\t\t\t@if (localColuna.sortable !== false) {\n\t\t\t\t<span class=\"table-ico-sort\">\n\t\t\t\t\t@if (obterDirecaoOrdenacao(localColuna.prop) === 'asc') {\n\t\t\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t\t\t} @else if (obterDirecaoOrdenacao(localColuna.prop) === 'desc') {\n\t\t\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<lib-grid-cell-handler class=\"table-item-mobile table-formated\" [class.odd]=\"i % 2 !== 0\" [class.even]=\"i % 2 === 0\"\n\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"localColuna\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t[localColunas]=\"colunasOrdenadas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t}\n\t</div>\n</div>\n}\n}\n} @empty {\n<!-- LINHA DE SEM DADOS -->\n<div class=\"table-styles\"><lib-grid-empty-list></lib-grid-empty-list></div>\n}\n<!-- MOBILE FIM -->\n\n\n} @else {\n<!-- DESKTOP INICIO -->\n<div #gridSize class=\"table-overflow\" [class.compacted]=\"isCompacted()\"\n\t[style.--table-min-height]=\"isCompacted() ? '40px' : minLineHeight()\">\n\t<div class=\"table-table\" [class.table-has-vertical-line]=\"hasVerticalLine()\" [class.table-has-seletor]=\"hasSeletor()\"\n\t\tcdkDropList (cdkDropListDropped)=\"onDropColuna($event)\" [cdkDropListData]=\"colunasExibir()\"\n\t\t[style.gridTemplateColumns]=\"`${this.pxVerticalLine()}${this.pxSelector()}` + this.pxColunas() + this.pxActions()\">\n\t\t<!-- DESKTOP HEADER -->\n\t\t<lib-grid-header-row [colunas]=\"colunasExibir()\" [ordenacoes]=\"ordenacoesSignal()\"\n\t\t\t[todosSelecionados]=\"todosSelecionados()\" [config]=\"cfg()\" [hasSeletor]=\"hasSeletor()\"\n\t\t\t[hasVerticalLine]=\"hasVerticalLine()\" [hasGrid]=\"hasGrid()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[isSelectingAll]=\"isSelectingAll()\" (columnSort)=\"alternarOrdenacao($event)\"\n\t\t\t(selectAll)=\"onChangeTodosSelecionados($event)\"\n\t\t\t(columnResizeStart)=\"onResizeStart($event.event, $any($event.coluna))\"\n\t\t\t(columnResizeDoubleClick)=\"onDoubleClickControls($event.event, $any($event.coluna))\">\n\t\t</lib-grid-header-row>\n\n\t\t<!-- DESKTOP LINHAS DE DADOS -->\n\t\t@for (dadosLinha of listaExibir(); track $index; let i = $index) {@if( dadosLinha.isColapsed !== true){\n\n\t\t@if(dadosLinha.isFullLine?.visible){\n\n\t\t<!-- DESKTOP FULL LINE (COLSPAN HORIZONTAL) -->\n\t\t@if(hasVerticalLine()){\n\t\t<!-- DESKTOP HEADER VERTICAL FULL LINE -->\n\t\t<div class=\"table-header table-formated table-vertical-line\">\n\t\t\t{{ dadosLinha.ordem }}\n\t\t</div>\n\t\t}\n\t\t<!-- DESKTOP GRUPO: ROW -->\n\t\t@if(dadosLinha.isGroup){\n\n\t\t<div class=\"table-row table-formated table-group table-border-bottom-card\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<div class=\"table-group-name\" [class.table-inativo]=\"dadosLinha.inativo\">\n\t\t\t\t<lib-grid-cell-handler class=\"table-item table-dados {{ colAgrupadoAtual()?.classeCell }}\"\n\t\t\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"colAgrupadoAtual()!\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t\t\t[localColunas]=\"colunasDefinidas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t\t</div>\n\t\t\t<ui-button tipo=\"nofill\" (click)=\"onClickGroup(dadosLinha)\">\n\t\t\t\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t\t\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t\t\t\t<div class=\"table-group-items-ico\">\n\t\t\t\t\t\t<ui-icon [name]=\"dadosLinha.isFullLine.colapsed ? 'caret-down-fill' : 'caret-down'\"></ui-icon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ui-button>\n\t\t</div>\n\n\t\t} @else {\n\t\t<div class=\"table-row table-formated table-others\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\tNada a exibir nesta linha\n\t\t</div>\n\t\t}\n\n\t\t} @else {\n\n\t\t<!-- LINHA NORMAL via GridRowRenderer -->\n\t\t<lib-grid-row-renderer [dadosLinha]=\"dadosLinha\" [config]=\"cfg()\" [colunas]=\"colunasExibir()\"\n\t\t\t[colunasOrdenadas]=\"colunasOrdenadas()\" [lista]=\"lista()!\" [inputSearchText]=\"inputSearchText()\"\n\t\t\t[hasSeletor]=\"hasSeletor()\" [hasVerticalLine]=\"hasVerticalLine()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[hasGrid]=\"hasGrid()\" [rowIndex]=\"i\" (actionTriggered)=\"onClickCellAction($event)\"\n\t\t\t(rowClicked)=\"onClickRow($event)\" [lastRow]=\"$last\">\n\t\t</lib-grid-row-renderer>\n\n\t\t}}\n\n\t\t<!-- POSSIBILIDADES SEM DADOS -->\n\t\t} @empty {\n\n\t\t<!-- ERRO -->\n\t\t@if(cfg().hasError) {\n\t\t<div class=\"table-row table-formated table-errors\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridError]\"></ng-content>\n\t\t</div>\n\n\t\t<!-- LOADING -->\n\t\t} @else if(!cfg().isLoaded) {\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridLoading]\">\n\t\t\t\t<lib-grid-loading></lib-grid-loading>\n\t\t\t</ng-content>\n\t\t</div>\n\n\t\t} @else {\n\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridEmpty]\">\n\t\t\t\t<lib-grid-empty-list></lib-grid-empty-list>\n\t\t\t</ng-content>\n\t\t</div>\n\t\t}\n\n\t\t}\n\n\t\t<!-- FIM DA LINHA NORMAL -->\n\n\n\t</div>\n</div>\n<!-- DESKTOP FIM -->\n}\n\n\n@if(cfg().showPagination){\n<lib-grid-pagination [paginacao]=\"paginacaoSignal()\" [totalPaginas]=\"totalPaginas()\"\n\t[performance]=\"cfg().timeRequest ?? ''\" [pageSizeOptions]=\"pageSizeOptions()\" [(paginationSize)]=\"paginationSize\"\n\t(pageChange)=\"irParaPagina($event)\">\n</lib-grid-pagination>\n}\n\n\n\n\n@if(cfg().showInfoBar){\n<!-- Informa\u00E7\u00F5es de Ordena\u00E7\u00E3o -->\n@if (ordenacoesSignal().length > 0) {\n<div class=\"table-info-row table-styles\">\n\t@if (ordenacoesSignal().length > 0) {\n\t<div>Ordenado por: {{ getOrdenacaoTexto() }}</div>\n\t}\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClickClearInfo()\" iconeNome=\"x-lg\"></ui-button>\n</div>\n}\n<!-- Informa\u00E7\u00F5es de Agrupamento -->\n@if (this.isAgrupado()) {\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"object-group\"></ui-icon>\n\t<div class=\"flex flex-wrap gap-1 f-t-b\">\n\t\tAgrupado por {{ colAgrupadoAtual()?.titulo }} (h\u00E1 {{ gruposEncontrados.itens.size }} grupos)\n\t\t<div class=\"campoSemForm\">\n\t\t\t<ui-select [value]=\"colAgrupadoAtual()?.prop\" [options]=\"this.colunasKVDefinidas()\"\n\t\t\t\t(changed)=\"onChangedAgrupamento($event)\"></ui-select>\n\t\t</div>\n\n\t</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\"\n\t\ttitle=\"Recolher Todos\"></ui-button>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\"\n\t\ttitle=\"Expandir Todos\"></ui-button>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\ttitle=\"Desagrupar\"></ui-button>\n</div>\n}\n}\n\n\n@if(devMode){\n<!-- MODO DESENVOLVIMENTO -->\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"microscope\"></ui-icon>\n\t<div>Fun\u00E7\u00F5es extras</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasGrid()\" (click)=\"onChangeHasGrid()\" iconeNome=\"grid-3x3\"\n\t\ttitle=\"Grid\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"isCompacted()\" (click)=\"onChangeCompacted()\"\n\t\ticoneNome=\"arrows-to-circle\" title=\"Compactar\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasVerticalLine()\" (click)=\"onChangeLineNumber()\"\n\t\ticoneNome=\"layout-sidebar\" title=\"Linha Vertical\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasSeletor()\" (click)=\"onChangeSeletor()\" iconeNome=\"check-double\"\n\t\ttitle=\"Seletor\"></ui-button>\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n"], dependencies: [{ kind: "component", type: GridEmptyList, selector: "lib-grid-empty-list" }, { kind: "component", type: GridLoading, selector: "lib-grid-loading" }, { kind: "component", type: UiButton, selector: "ui-button", inputs: ["icone", "iconeNome", "iconeAntes", "iconeDepois", "iconeCategory", "disabled", "eventPropagation", "radiusTabFormat", "tabindex", "tipo", "tema", "classes", "ativo"], outputs: ["iconeChange", "iconeAntesChange", "iconeDepoisChange", "iconeCategoryChange", "clicked", "temaChange"] }, { kind: "component", type: UiSelect, selector: "ui-select", inputs: ["value", "options", "name", "placeholder", "disabled", "multiple", "canUnselect", "textEmpty"], outputs: ["valueChange", "changed"] }, { kind: "component", type: UiCheckBox, selector: "ui-check-box", inputs: ["value", "disabled", "focused", "focus", "single", "hasDash"], outputs: ["valueChange", "focusedChange", "changed"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: GridFilterBar, selector: "lib-grid-filter-bar", inputs: ["config", "colunasDefinidas", "colAgrupadoAtual", "isAgrupado", "filterCollapsed"], outputs: ["searchInput", "actionTriggered", "filterToggle", "groupByColumn", "clearGroups", "collapseGroups", "expandGroups", "clickOpcoesListagem"] }, { kind: "component", type: GridPagination, selector: "lib-grid-pagination", inputs: ["paginacao", "totalPaginas", "performance", "pageSizeOptions", "paginationSize"], outputs: ["paginationSizeChange", "pageChange"] }, { kind: "component", type: GridHeaderRow, selector: "lib-grid-header-row", inputs: ["colunas", "ordenacoes", "todosSelecionados", "config", "hasSeletor", "hasVerticalLine", "hasGrid", "isCompacted", "isSelectingAll"], outputs: ["columnSort", "selectAll", "columnResizeStart", "columnResizeDoubleClick"] }, { kind: "component", type: GridRowRenderer, selector: "lib-grid-row-renderer", inputs: ["dadosLinha", "config", "colunas", "colunasOrdenadas", "lista", "inputSearchText", "hasSeletor", "hasVerticalLine", "isCompacted", "hasGrid", "rowIndex", "lastRow"], outputs: ["actionTriggered", "rowClicked"] }, { kind: "component", type: GridCellHandler, selector: "lib-grid-cell-handler", inputs: ["lista", "linha", "config", "localColuna", "localColunas", "inputSearchText"] }, { kind: "component", type: GridCellActions, selector: "lib-grid-cell-actions", inputs: ["config", "dadosDaLinha", "mobileHeader", "compact"], outputs: ["action"] }, { kind: "component", type: UiIcon, selector: "ui-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8563
8663
|
}
|
|
8564
8664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MkGrid, decorators: [{
|
|
8565
8665
|
type: Component,
|
|
@@ -8577,7 +8677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
8577
8677
|
GridCellHandler,
|
|
8578
8678
|
GridCellActions,
|
|
8579
8679
|
UiIcon
|
|
8580
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lib-grid-filter-bar [config]=\"cfg()\" [colunasDefinidas]=\"$any(colunasDefinidas())\"\n\t[colAgrupadoAtual]=\"colAgrupadoAtual()\" [isAgrupado]=\"isAgrupado()\" [filterCollapsed]=\"filtroCollapsed()\"\n\t(searchInput)=\"onInputSearch($event)\" (filterToggle)=\"onClickOpenCloseFilterZone()\"\n\t(actionTriggered)=\"onClickAction($event)\" (groupByColumn)=\"onAgruparPor($any($event))\" (clearGroups)=\"onClearGroups()\"\n\t(collapseGroups)=\"onRecolherGroups()\" (expandGroups)=\"onExpandirGroups()\"\n\t(clickOpcoesListagem)=\"onClickOpcoesListagem()\">\n</lib-grid-filter-bar>\n\n@if(cfg().showFilterBar) {\n<div class=\"table-filter-container table-styles\" [style.--filter-height.px]=\"filterHeight()\">\n\t<div #filterContainer class=\"table-filter-content\" [class.table-filter-hide]=\"filtroCollapsed()\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n}\n\n@if(currentDevice() == \"Mobile\"){\n<!-- MOBILE INICIO -->\n\n@for (dadosLinha of listaExibir(); track $index;let i = $index) {\n@if( dadosLinha.isColapsed !== true){\n\n@if(dadosLinha.isFullLine?.visible){\n<!-- MOBILE GRUPO LINHA PR\u00D3PRIA -->\n<div class=\"table-row-mobile table-formated table-group table-styles\" (click)=\"onClickGroup(dadosLinha)\">\n\t<div>{{ dadosLinha.groupName }}</div>\n\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t<div class=\"table-group-items-ico\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t</div>\n</div>\n} @else {\n\n<div class=\"table-overflow mobile\" [style.--table-min-height]=\"isCompacted() ? '20px' : minLineHeight()\">\n\t<div class=\"table-table-mobile\" [class.selected]=\"dadosLinha.selecionado\">\n\n\t\t<!-- MOBILE DADOS -->\n\t\t@if(cfg().showActionsLine){\n\t\t<div class=\"table-header-mobile\" [style.gridArea]=\"'auto / auto / auto / span 2'\">\n\t\t\t@if(hasVerticalLine()){\n\t\t\t<!-- MOBILE VERTICAL DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-vertical-line\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t{{ dadosLinha.ordem }}\n\t\t\t</div>\n\t\t\t}\n\t\t\t@if(hasSeletor()){\n\t\t\t<!-- MOBILE SELECTOR DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-item-seletor\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t<ui-check-box [(value)]=\"dadosLinha.selecionado\" [style.--ui-color]=\"'var(--sys-on-primary)'\"\n\t\t\t\t\t[style.--ui-outline]=\"'var(--sys-on-primary)'\" [single]=\"this.cfg().selectionMode == 'single'\"\n\t\t\t\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\"></ui-check-box>\n\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"table-header-mobile-space\" (click)=\"onClickRow(dadosLinha)\"></div>\n\t\t\t<lib-grid-cell-actions [config]=\"cfg()\" [dadosDaLinha]=\"dadosLinha\" [mobileHeader]=\"true\"\n\t\t\t\t(action)=\"onClickCellAction($event)\" [compact]=\"isCompacted()\"></lib-grid-cell-actions>\n\t\t</div>\n\t\t}\n\n\t\t<!-- MOBILE LINHA -->\n\t\t@for (localColuna of colunasOrdenadas(); track $index;) {\n\t\t<div class=\"table-header-mobile\" [class.sortable]=\"localColuna.sortable !== false\"\n\t\t\t[class.sorted-asc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'asc'\"\n\t\t\t[class.sorted-desc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'desc'\"\n\t\t\t(click)=\"localColuna.sortable !== false && alternarOrdenacao(localColuna.prop)\" [style]=\"localColuna.styleHeader\">\n\t\t\t<div class=\"table-header-mobile-text\" [title]=\"localColuna.titulo\"\n\t\t\t\t[innerHTML]=\"localColuna.tituloReduzido ?? localColuna.titulo\">\n\t\t\t</div>\n\t\t\t<div class=\"table-header-controls\">\n\t\t\t\t@if (localColuna.sortable !== false) {\n\t\t\t\t<span class=\"table-ico-sort\">\n\t\t\t\t\t@if (obterDirecaoOrdenacao(localColuna.prop) === 'asc') {\n\t\t\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t\t\t} @else if (obterDirecaoOrdenacao(localColuna.prop) === 'desc') {\n\t\t\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<lib-grid-cell-handler class=\"table-item-mobile table-formated\" [class.odd]=\"i % 2 !== 0\" [class.even]=\"i % 2 === 0\"\n\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"localColuna\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t[localColunas]=\"colunasOrdenadas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t}\n\t</div>\n</div>\n}\n}\n} @empty {\n<!-- LINHA DE SEM DADOS -->\n<div class=\"table-styles\"><lib-grid-empty-list></lib-grid-empty-list></div>\n}\n<!-- MOBILE FIM -->\n\n\n} @else {\n<!-- DESKTOP INICIO -->\n<div #gridSize class=\"table-overflow\" [class.compacted]=\"isCompacted()\"\n\t[style.--table-min-height]=\"isCompacted() ? '40px' : minLineHeight()\">\n\t<div class=\"table-table\" [class.table-has-vertical-line]=\"hasVerticalLine()\" [class.table-has-seletor]=\"hasSeletor()\"\n\t\tcdkDropList (cdkDropListDropped)=\"onDropColuna($event)\" [cdkDropListData]=\"colunasExibir()\"\n\t\t[style.gridTemplateColumns]=\"`${this.pxVerticalLine()}${this.pxSelector()}` + this.pxColunas() + this.pxActions()\">\n\t\t<!-- DESKTOP HEADER -->\n\t\t<lib-grid-header-row [colunas]=\"colunasExibir()\" [ordenacoes]=\"ordenacoesSignal()\"\n\t\t\t[todosSelecionados]=\"todosSelecionados()\" [config]=\"cfg()\" [hasSeletor]=\"hasSeletor()\"\n\t\t\t[hasVerticalLine]=\"hasVerticalLine()\" [hasGrid]=\"hasGrid()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[isSelectingAll]=\"isSelectingAll()\" (columnSort)=\"alternarOrdenacao($event)\"\n\t\t\t(selectAll)=\"onChangeTodosSelecionados($event)\"\n\t\t\t(columnResizeStart)=\"onResizeStart($event.event, $any($event.coluna))\"\n\t\t\t(columnResizeDoubleClick)=\"onDoubleClickControls($event.event, $any($event.coluna))\">\n\t\t</lib-grid-header-row>\n\n\t\t<!-- DESKTOP LINHAS DE DADOS -->\n\t\t@for (dadosLinha of listaExibir(); track $index; let i = $index) {@if( dadosLinha.isColapsed !== true){\n\n\t\t@if(dadosLinha.isFullLine?.visible){\n\n\t\t<!-- DESKTOP FULL LINE (COLSPAN HORIZONTAL) -->\n\t\t@if(hasVerticalLine()){\n\t\t<!-- DESKTOP HEADER VERTICAL FULL LINE -->\n\t\t<div class=\"table-header table-formated table-vertical-line\">\n\t\t\t{{ dadosLinha.ordem }}\n\t\t</div>\n\t\t}\n\t\t<!-- DESKTOP GRUPO: ROW -->\n\t\t@if(dadosLinha.isGroup){\n\n\t\t<div class=\"table-row table-formated table-group table-border-bottom-card\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<div class=\"table-group-name\" [class.table-inativo]=\"dadosLinha.inativo\">\n\t\t\t\t<lib-grid-cell-handler class=\"table-item table-dados {{ colAgrupadoAtual()?.classeCell }}\"\n\t\t\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"colAgrupadoAtual()!\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t\t\t[localColunas]=\"colunasDefinidas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t\t</div>\n\t\t\t<ui-button tipo=\"nofill\" (click)=\"onClickGroup(dadosLinha)\">\n\t\t\t\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t\t\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t\t\t\t<div class=\"table-group-items-ico\">\n\t\t\t\t\t\t<ui-icon [name]=\"dadosLinha.isFullLine.colapsed ? 'caret-down-fill' : 'caret-down'\"></ui-icon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ui-button>\n\t\t</div>\n\n\t\t} @else {\n\t\t<div class=\"table-row table-formated table-others\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\tNada a exibir nesta linha\n\t\t</div>\n\t\t}\n\n\t\t} @else {\n\n\t\t<!-- LINHA NORMAL via GridRowRenderer -->\n\t\t<lib-grid-row-renderer [dadosLinha]=\"dadosLinha\" [config]=\"cfg()\" [colunas]=\"colunasExibir()\"\n\t\t\t[colunasOrdenadas]=\"colunasOrdenadas()\" [lista]=\"lista()!\" [inputSearchText]=\"inputSearchText()\"\n\t\t\t[hasSeletor]=\"hasSeletor()\" [hasVerticalLine]=\"hasVerticalLine()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[hasGrid]=\"hasGrid()\" [rowIndex]=\"i\" (actionTriggered)=\"onClickCellAction($event)\"\n\t\t\t(rowClicked)=\"onClickRow($event)\" [lastRow]=\"$last\">\n\t\t</lib-grid-row-renderer>\n\n\t\t}}\n\n\t\t<!-- POSSIBILIDADES SEM DADOS -->\n\t\t} @empty {\n\n\t\t<!-- ERRO -->\n\t\t@if(cfg().hasError) {\n\t\t<div class=\"table-row table-formated table-errors\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridError]\"></ng-content>\n\t\t</div>\n\n\t\t<!-- LOADING -->\n\t\t} @else if(!cfg().isLoaded) {\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridLoading]\">\n\t\t\t\t<lib-grid-loading></lib-grid-loading>\n\t\t\t</ng-content>\n\t\t</div>\n\n\t\t} @else {\n\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridEmpty]\">\n\t\t\t\t<lib-grid-empty-list></lib-grid-empty-list>\n\t\t\t</ng-content>\n\t\t</div>\n\t\t}\n\n\t\t}\n\n\t\t<!-- FIM DA LINHA NORMAL -->\n\n\n\t</div>\n</div>\n<!-- DESKTOP FIM -->\n}\n\n\n@if(cfg().showPagination){\n<lib-grid-pagination [paginacao]=\"paginacaoSignal()\" [totalPaginas]=\"totalPaginas()\"\n\t[performance]=\"cfg().timeRequest ?? ''\" [pageSizeOptions]=\"pageSizeOptions()\" [(paginationSize)]=\"paginationSize\"\n\t(pageChange)=\"irParaPagina($event)\">\n</lib-grid-pagination>\n}\n\n\n\n\n@if(cfg().showInfoBar){\n<!-- Informa\u00E7\u00F5es de Ordena\u00E7\u00E3o -->\n@if (ordenacoesSignal().length > 0) {\n<div class=\"table-info-row table-styles\">\n\t@if (ordenacoesSignal().length > 0) {\n\t<div>Ordenado por: {{ getOrdenacaoTexto() }}</div>\n\t}\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClickClearInfo()\" iconeNome=\"x-lg\"></ui-button>\n</div>\n}\n<!-- Informa\u00E7\u00F5es de Agrupamento -->\n@if (this.isAgrupado()) {\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"object-group\"></ui-icon>\n\t<div class=\"flex flex-wrap gap-1 f-t-b\">\n\t\tAgrupado por {{ colAgrupadoAtual()?.titulo }} (h\u00E1 {{ gruposEncontrados.itens.size }} grupos)\n\t\t<div class=\"campoSemForm\">\n\t\t\t<ui-select [value]=\"colAgrupadoAtual()?.prop\" [options]=\"this.colunasKVDefinidas()\"\n\t\t\t\t(changed)=\"onChangedAgrupamento($event)\"></ui-select>\n\t\t</div>\n\n\t</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\"\n\t\ttitle=\"Recolher Todos\"></ui-button>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\"\n\t\ttitle=\"Expandir Todos\"></ui-button>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\ttitle=\"Desagrupar\"></ui-button>\n</div>\n}\n}\n\n\n@if(devMode){\n<!-- MODO DESENVOLVIMENTO -->\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"microscope\"></ui-icon>\n\t<div>Fun\u00E7\u00F5es extras</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasGrid()\" (click)=\"onChangeHasGrid()\" iconeNome=\"grid-3x3\"\n\t\ttitle=\"Grid\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"isCompacted()\" (click)=\"onChangeCompacted()\"\n\t\ticoneNome=\"arrows-to-circle\" title=\"Compactar\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasVerticalLine()\" (click)=\"onChangeLineNumber()\"\n\t\ticoneNome=\"layout-sidebar\" title=\"Linha Vertical\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasSeletor()\" (click)=\"onChangeSeletor()\" iconeNome=\"check-double\"\n\t\ttitle=\"Seletor\"></ui-button>\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-card, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-card, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-card-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,var(--mk-grid-card) 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n"] }]
|
|
8680
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lib-grid-filter-bar [config]=\"cfg()\" [colunasDefinidas]=\"$any(colunasDefinidas())\"\n\t[colAgrupadoAtual]=\"colAgrupadoAtual()\" [isAgrupado]=\"isAgrupado()\" [filterCollapsed]=\"filtroCollapsed()\"\n\t(searchInput)=\"onInputSearch($event)\" (filterToggle)=\"onClickOpenCloseFilterZone()\"\n\t(actionTriggered)=\"onClickAction($event)\" (groupByColumn)=\"onAgruparPor($any($event))\" (clearGroups)=\"onClearGroups()\"\n\t(collapseGroups)=\"onRecolherGroups()\" (expandGroups)=\"onExpandirGroups()\"\n\t(clickOpcoesListagem)=\"onClickOpcoesListagem()\">\n</lib-grid-filter-bar>\n\n@if(cfg().showFilterBar) {\n<div class=\"table-filter-container table-styles\" [style.--filter-height.px]=\"filterHeight()\">\n\t<div #filterContainer class=\"table-filter-content\" [class.table-filter-hide]=\"filtroCollapsed()\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n}\n\n@if(currentDevice() == \"Mobile\"){\n<!-- MOBILE INICIO -->\n\n@for (dadosLinha of listaExibir(); track $index;let i = $index) {\n@if( dadosLinha.isColapsed !== true){\n\n@if(dadosLinha.isFullLine?.visible){\n<!-- MOBILE GRUPO LINHA PR\u00D3PRIA -->\n<div class=\"table-row-mobile table-formated table-group table-styles\" (click)=\"onClickGroup(dadosLinha)\">\n\t<div>{{ dadosLinha.groupName }}</div>\n\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t<div class=\"table-group-items-ico\">\n\t\t\t<ui-icon name=\"caret-down\"></ui-icon>\n\t\t</div>\n\t</div>\n</div>\n} @else {\n\n<div class=\"table-overflow mobile\" [style.--table-min-height]=\"isCompacted() ? '20px' : minLineHeight()\">\n\t<div class=\"table-table-mobile\" [class.selected]=\"dadosLinha.selecionado\">\n\n\t\t<!-- MOBILE DADOS -->\n\t\t@if(cfg().showActionsLine){\n\t\t<div class=\"table-header-mobile\" [style.gridArea]=\"'auto / auto / auto / span 2'\">\n\t\t\t@if(hasVerticalLine()){\n\t\t\t<!-- MOBILE VERTICAL DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-vertical-line\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t{{ dadosLinha.ordem }}\n\t\t\t</div>\n\t\t\t}\n\t\t\t@if(hasSeletor()){\n\t\t\t<!-- MOBILE SELECTOR DIV -->\n\t\t\t<div class=\"table-header-mobile table-formated table-item-seletor\" (click)=\"onClickRow(dadosLinha)\">\n\t\t\t\t<ui-check-box [(value)]=\"dadosLinha.selecionado\" [style.--ui-color]=\"'var(--sys-on-primary)'\"\n\t\t\t\t\t[style.--ui-outline]=\"'var(--sys-on-primary)'\" [single]=\"this.cfg().selectionMode == 'single'\"\n\t\t\t\t\t[style.--ui-size]=\"isCompacted() ? '15px' : undefined\"></ui-check-box>\n\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"table-header-mobile-space\" (click)=\"onClickRow(dadosLinha)\"></div>\n\t\t\t<lib-grid-cell-actions [config]=\"cfg()\" [dadosDaLinha]=\"dadosLinha\" [mobileHeader]=\"true\"\n\t\t\t\t(action)=\"onClickCellAction($event)\" [compact]=\"isCompacted()\"></lib-grid-cell-actions>\n\t\t</div>\n\t\t}\n\n\t\t<!-- MOBILE LINHA -->\n\t\t@for (localColuna of colunasOrdenadas(); track $index;) {\n\t\t<div class=\"table-header-mobile\" [class.sortable]=\"localColuna.sortable !== false\"\n\t\t\t[class.sorted-asc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'asc'\"\n\t\t\t[class.sorted-desc]=\"obterDirecaoOrdenacao(localColuna.prop) === 'desc'\"\n\t\t\t(click)=\"localColuna.sortable !== false && alternarOrdenacao(localColuna.prop)\" [style]=\"localColuna.styleHeader\">\n\t\t\t<div class=\"table-header-mobile-text\" [title]=\"localColuna.titulo\"\n\t\t\t\t[innerHTML]=\"localColuna.tituloReduzido ?? localColuna.titulo\">\n\t\t\t</div>\n\t\t\t<div class=\"table-header-controls\">\n\t\t\t\t@if (localColuna.sortable !== false) {\n\t\t\t\t<span class=\"table-ico-sort\">\n\t\t\t\t\t@if (obterDirecaoOrdenacao(localColuna.prop) === 'asc') {\n\t\t\t\t\t<ui-icon name=\"sort-up\" class=\"asc\"></ui-icon>\n\t\t\t\t\t} @else if (obterDirecaoOrdenacao(localColuna.prop) === 'desc') {\n\t\t\t\t\t<ui-icon name=\"sort-down\" class=\"desc\"></ui-icon>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t<lib-grid-cell-handler class=\"table-item-mobile table-formated\" [class.odd]=\"i % 2 !== 0\" [class.even]=\"i % 2 === 0\"\n\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"localColuna\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t[localColunas]=\"colunasOrdenadas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t}\n\t</div>\n</div>\n}\n}\n} @empty {\n<!-- LINHA DE SEM DADOS -->\n<div class=\"table-styles\"><lib-grid-empty-list></lib-grid-empty-list></div>\n}\n<!-- MOBILE FIM -->\n\n\n} @else {\n<!-- DESKTOP INICIO -->\n<div #gridSize class=\"table-overflow\" [class.compacted]=\"isCompacted()\"\n\t[style.--table-min-height]=\"isCompacted() ? '40px' : minLineHeight()\">\n\t<div class=\"table-table\" [class.table-has-vertical-line]=\"hasVerticalLine()\" [class.table-has-seletor]=\"hasSeletor()\"\n\t\tcdkDropList (cdkDropListDropped)=\"onDropColuna($event)\" [cdkDropListData]=\"colunasExibir()\"\n\t\t[style.gridTemplateColumns]=\"`${this.pxVerticalLine()}${this.pxSelector()}` + this.pxColunas() + this.pxActions()\">\n\t\t<!-- DESKTOP HEADER -->\n\t\t<lib-grid-header-row [colunas]=\"colunasExibir()\" [ordenacoes]=\"ordenacoesSignal()\"\n\t\t\t[todosSelecionados]=\"todosSelecionados()\" [config]=\"cfg()\" [hasSeletor]=\"hasSeletor()\"\n\t\t\t[hasVerticalLine]=\"hasVerticalLine()\" [hasGrid]=\"hasGrid()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[isSelectingAll]=\"isSelectingAll()\" (columnSort)=\"alternarOrdenacao($event)\"\n\t\t\t(selectAll)=\"onChangeTodosSelecionados($event)\"\n\t\t\t(columnResizeStart)=\"onResizeStart($event.event, $any($event.coluna))\"\n\t\t\t(columnResizeDoubleClick)=\"onDoubleClickControls($event.event, $any($event.coluna))\">\n\t\t</lib-grid-header-row>\n\n\t\t<!-- DESKTOP LINHAS DE DADOS -->\n\t\t@for (dadosLinha of listaExibir(); track $index; let i = $index) {@if( dadosLinha.isColapsed !== true){\n\n\t\t@if(dadosLinha.isFullLine?.visible){\n\n\t\t<!-- DESKTOP FULL LINE (COLSPAN HORIZONTAL) -->\n\t\t@if(hasVerticalLine()){\n\t\t<!-- DESKTOP HEADER VERTICAL FULL LINE -->\n\t\t<div class=\"table-header table-formated table-vertical-line\">\n\t\t\t{{ dadosLinha.ordem }}\n\t\t</div>\n\t\t}\n\t\t<!-- DESKTOP GRUPO: ROW -->\n\t\t@if(dadosLinha.isGroup){\n\n\t\t<div class=\"table-row table-formated table-group table-border-bottom-card\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<div class=\"table-group-name\" [class.table-inativo]=\"dadosLinha.inativo\">\n\t\t\t\t<lib-grid-cell-handler class=\"table-item table-dados {{ colAgrupadoAtual()?.classeCell }}\"\n\t\t\t\t\t[linha]=\"dadosLinha.dados\" [localColuna]=\"colAgrupadoAtual()!\" [lista]=\"lista()!\" [config]=\"cfg()\"\n\t\t\t\t\t[localColunas]=\"colunasDefinidas()\" [inputSearchText]=\"inputSearchText()\"></lib-grid-cell-handler>\n\t\t\t</div>\n\t\t\t<ui-button tipo=\"nofill\" (click)=\"onClickGroup(dadosLinha)\">\n\t\t\t\t<div class=\"table-group-items-area\" [class.table-group-collapse]=\"dadosLinha.isFullLine.colapsed === true\">\n\t\t\t\t\t{{ dadosLinha.isFullLine.colapsedCount ?? 0 }} item(s)\n\t\t\t\t\t<div class=\"table-group-items-ico\">\n\t\t\t\t\t\t<ui-icon [name]=\"dadosLinha.isFullLine.colapsed ? 'caret-down-fill' : 'caret-down'\"></ui-icon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ui-button>\n\t\t</div>\n\n\t\t} @else {\n\t\t<div class=\"table-row table-formated table-others\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\tNada a exibir nesta linha\n\t\t</div>\n\t\t}\n\n\t\t} @else {\n\n\t\t<!-- LINHA NORMAL via GridRowRenderer -->\n\t\t<lib-grid-row-renderer [dadosLinha]=\"dadosLinha\" [config]=\"cfg()\" [colunas]=\"colunasExibir()\"\n\t\t\t[colunasOrdenadas]=\"colunasOrdenadas()\" [lista]=\"lista()!\" [inputSearchText]=\"inputSearchText()\"\n\t\t\t[hasSeletor]=\"hasSeletor()\" [hasVerticalLine]=\"hasVerticalLine()\" [isCompacted]=\"isCompacted()\"\n\t\t\t[hasGrid]=\"hasGrid()\" [rowIndex]=\"i\" (actionTriggered)=\"onClickCellAction($event)\"\n\t\t\t(rowClicked)=\"onClickRow($event)\" [lastRow]=\"$last\">\n\t\t</lib-grid-row-renderer>\n\n\t\t}}\n\n\t\t<!-- POSSIBILIDADES SEM DADOS -->\n\t\t} @empty {\n\n\t\t<!-- ERRO -->\n\t\t@if(cfg().hasError) {\n\t\t<div class=\"table-row table-formated table-errors\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridError]\"></ng-content>\n\t\t</div>\n\n\t\t<!-- LOADING -->\n\t\t} @else if(!cfg().isLoaded) {\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridLoading]\">\n\t\t\t\t<lib-grid-loading></lib-grid-loading>\n\t\t\t</ng-content>\n\t\t</div>\n\n\t\t} @else {\n\n\t\t<div class=\"table-row table-row-centered\"\n\t\t\t[style.gridArea]=\"'auto / auto / auto / span ' + (totalColsVisivel() - (hasVerticalLine() ? 1 : 0))\">\n\t\t\t<ng-content select=\"[mkGridEmpty]\">\n\t\t\t\t<lib-grid-empty-list></lib-grid-empty-list>\n\t\t\t</ng-content>\n\t\t</div>\n\t\t}\n\n\t\t}\n\n\t\t<!-- FIM DA LINHA NORMAL -->\n\n\n\t</div>\n</div>\n<!-- DESKTOP FIM -->\n}\n\n\n@if(cfg().showPagination){\n<lib-grid-pagination [paginacao]=\"paginacaoSignal()\" [totalPaginas]=\"totalPaginas()\"\n\t[performance]=\"cfg().timeRequest ?? ''\" [pageSizeOptions]=\"pageSizeOptions()\" [(paginationSize)]=\"paginationSize\"\n\t(pageChange)=\"irParaPagina($event)\">\n</lib-grid-pagination>\n}\n\n\n\n\n@if(cfg().showInfoBar){\n<!-- Informa\u00E7\u00F5es de Ordena\u00E7\u00E3o -->\n@if (ordenacoesSignal().length > 0) {\n<div class=\"table-info-row table-styles\">\n\t@if (ordenacoesSignal().length > 0) {\n\t<div>Ordenado por: {{ getOrdenacaoTexto() }}</div>\n\t}\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClickClearInfo()\" iconeNome=\"x-lg\"></ui-button>\n</div>\n}\n<!-- Informa\u00E7\u00F5es de Agrupamento -->\n@if (this.isAgrupado()) {\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"object-group\"></ui-icon>\n\t<div class=\"flex flex-wrap gap-1 f-t-b\">\n\t\tAgrupado por {{ colAgrupadoAtual()?.titulo }} (h\u00E1 {{ gruposEncontrados.itens.size }} grupos)\n\t\t<div class=\"campoSemForm\">\n\t\t\t<ui-select [value]=\"colAgrupadoAtual()?.prop\" [options]=\"this.colunasKVDefinidas()\"\n\t\t\t\t(changed)=\"onChangedAgrupamento($event)\"></ui-select>\n\t\t</div>\n\n\t</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onRecolherGroups()\" iconeNome=\"arrows-collapse\"\n\t\ttitle=\"Recolher Todos\"></ui-button>\n\t<ui-button tipo=\"nofill\" tema=\"primary\" (click)=\"onExpandirGroups()\" iconeNome=\"arrows-expand\"\n\t\ttitle=\"Expandir Todos\"></ui-button>\n\t<ui-button tipo=\"outlined\" tema=\"primary\" (click)=\"onClearGroups()\" iconeNome=\"object-ungroup\"\n\t\ttitle=\"Desagrupar\"></ui-button>\n</div>\n}\n}\n\n\n@if(devMode){\n<!-- MODO DESENVOLVIMENTO -->\n<div class=\"table-info-row table-styles\">\n\t<ui-icon name=\"microscope\"></ui-icon>\n\t<div>Fun\u00E7\u00F5es extras</div>\n\t<div class=\"f-1\"></div>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasGrid()\" (click)=\"onChangeHasGrid()\" iconeNome=\"grid-3x3\"\n\t\ttitle=\"Grid\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"isCompacted()\" (click)=\"onChangeCompacted()\"\n\t\ticoneNome=\"arrows-to-circle\" title=\"Compactar\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasVerticalLine()\" (click)=\"onChangeLineNumber()\"\n\t\ticoneNome=\"layout-sidebar\" title=\"Linha Vertical\"></ui-button>\n\t<ui-button tipo=\"icon\" tema=\"primary\" [ativo]=\"hasSeletor()\" (click)=\"onChangeSeletor()\" iconeNome=\"check-double\"\n\t\ttitle=\"Seletor\"></ui-button>\n</div>\n}", styles: [":host{--mk-grid-border-radius: var(--sys-border-radius, 10px);--mk-grid-gap: var(--sys-gap, 8px);--mk-grid-lum-10: var(--sys-lum-10, 95%);--mk-grid-card: var(--sys-surface, hsl(216 22% 96%));--mk-grid-background: var(--sys-background, hsl(0 0% 100%));--mk-grid-bg-card: var(--mk-grid-card);--mk-grid-bg: var(--mk-grid-background);--mk-grid-outline: var(--sys-outline, hsl(220 15% 86%));--mk-grid-primary: var(--sys-primary, hsl(224 74% 53%));--mk-grid-on-primary: var(--sys-on-primary, hsl(0 0% 100%));--mk-grid-secondary: var(--sys-secondary, hsl(221 44% 49%));--mk-grid-error: var(--sys-error, hsl(0 66% 47%));--mk-grid-info: var(--sys-info, hsl(210 79% 46%));--mk-grid-high: var(--sys-high, hsl(221 100% 97%));--mk-grid-on-high: var(--sys-on-high, hsl(222 35% 16%));--mk-grid-on-card: var(--sys-on-surface, hsl(221 27% 16%));--mk-grid-on-card-variant: var(--sys-on-surface-variant, hsl(222 15% 43%));--mk-grid-on-background: var(--sys-on-background, hsl(222 20% 20%));--mk-grid-primary-15: var(--sys-primary-15, hsl(224 74% 53% / 15%))}:host .drag-container{cursor:grab}:host .drag-container:active{cursor:grabbing}:host-context(body:has(.cdk-drag-preview)) .drop-option{outline:1px dashed var(--mk-grid-outline)}:host-context(body:has(.cdk-drag-preview)) .drop-option:hover{outline:1px solid var(--mk-grid-outline);background-color:var(--mk-grid-high)}:host ui-menu>ui-button{border-bottom:1px solid var(--ui-outline-color, var(--mk-grid-outline))}:host .menu-title{font-size:1.2rem;font-weight:600;padding:0 calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2) calc(var(--mk-grid-gap) / 2);border-bottom:1px solid var(--mk-grid-outline);display:flex;justify-content:space-between;align-items:center;gap:var(--mk-grid-gap)}:host .menu-sub-title{font-size:14px;font-weight:500;display:flex;justify-content:flex-start;align-items:center;gap:var(--mk-grid-gap);padding-left:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .menu-sub-value{font-size:14px;font-weight:400;display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--mk-grid-gap) / 2);padding-right:calc(var(--mk-grid-gap) / 2);min-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:flex;flex-direction:column}.table-overflow{display:grid;overflow:auto;padding:0;position:relative}.table-overflow.compacted{justify-content:center}.table-overflow.mobile{border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-overflow.mobile{overflow:hidden}.table-table-mobile,.table-table{display:grid;font-size:13px}.table-table-mobile{grid-template-columns:1fr 1fr}.table-header,.table-header-mobile{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);transition:background-color .2s ease;display:flex;flex-wrap:wrap;align-items:center;align-content:stretch;justify-content:center;-webkit-user-select:none;user-select:none;min-height:var(--table-min-height)}.table-header-mobile{padding:0 5px}.table-header-mobile-space{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.table-header-mobile-text,.table-header-text{flex:1;font-weight:600;text-align:center;display:block;align-content:center}.table-header-mobile-text{text-align:start}.table-header-text{height:100%;border-radius:var(--mk-grid-border-radius);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdk-drag-preview{font-size:14px!important;background:var(--mk-grid-high);color:var(--mk-grid-on-high);opacity:.6}.cdk-drop-list-receiving:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-info);filter:opacity(.5)}.cdk-drag-placeholder:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--mk-grid-primary)}.textVertical .table-header-text{writing-mode:vertical-lr;text-orientation:upright;letter-spacing:-5px;padding-bottom:5px;text-align:right;align-self:end;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.table-header-controls{width:6px;min-width:6px;max-width:6px;cursor:col-resize;height:100%;display:flex;align-items:center;justify-content:center}.table-ico-sort{font-size:10px;color:color-mix(in srgb,var(--mk-grid-secondary) 50%,var(--mk-grid-on-primary) 50%)}.table-ico-sort .asc{animation:aniSortUp 1s infinite cubic-bezier(.175,.885,.32,1.275)}.table-ico-sort .desc{animation:aniSortDown 1s infinite cubic-bezier(.175,.885,.32,1.275)}@keyframes aniSortUp{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(-3px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes aniSortDown{0%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1)}80%{transform:translateY(3px) scale(1.1)}to{transform:translateY(0) scale(1)}}.table-row,.table-row-mobile{display:flex;justify-content:space-between;align-items:center}.table-row{background:color-mix(in srgb,var(--mk-grid-primary) 10%,var(--mk-grid-background) 90%)}.table-row-mobile{margin-top:10px}.table-group{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2);border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group:has(.table-group-collapse){border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2);border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-group.table-formated{padding-left:10px}.table-group-items-area{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;font-style:italic;color:color-mix(in srgb,var(--mk-grid-on-background) 60%,var(--mk-grid-background) 40%);overflow:hidden}.table-group-items-ico{transition:transform .3s ease;transform:rotate(180deg)}.table-group-name{flex:1;height:100%;display:flex;align-items:center}.table-group-collapse .table-group-items-ico{transition:transform .3s ease;transform:rotate(0);color:color-mix(in srgb,var(--mk-grid-primary) 60%,var(--mk-grid-background) 40%)}.table-formated{min-height:var(--table-min-height);padding:1px 2px;font-size:14px}.table-dados{min-height:var(--table-min-height);padding:1px 2px}.table-item{cursor:pointer}.table-item,.table-header{border-left:0px solid transparent;border-right:0px solid transparent}.table-header:first-child{border-top-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-item.table-item-action.last-row{border-bottom-right-radius:calc(var(--mk-grid-border-radius) / 2)}.header-last-col{border-top-right-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line) .table-item:nth-last-child(-n+1 of div.table-item-seletor){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-table:not(.table-has-vertical-line,.table-has-seletor) .table-dados:nth-last-child(-n+1 of.table-first-col){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header:nth-last-child(-n+1 of div.table-vertical-line){border-bottom-left-radius:calc(var(--mk-grid-border-radius) / 2)}.table-header-mobile.table-vertical-line,.table-header.table-vertical-line,.table-item.table-vertical-line{background:var(--mk-grid-primary);color:var(--mk-grid-on-primary);display:flex;justify-content:center;align-items:center}.table-grupo-seletor,.table-item-seletor{display:flex;justify-content:center;align-items:center}.table-header-mobile.sortable .table-header-text,.table-header.sortable .table-header-text{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-mobile.sortable:hover,.table-header.sortable:hover,.table-header-mobile.sorted-asc,.table-header-mobile.sorted-desc,.table-header.sorted-asc,.table-header.sorted-desc{background:color-mix(in srgb,var(--mk-grid-secondary) 30%,var(--mk-grid-primary) 70%);color:var(--mk-grid-on-primary)}.table-row.table-errors,.table-row.table-loader{justify-content:center}.table-border-bottom-card{border-bottom:1px solid var(--mk-grid-card)}.table-border-left-darker{border-left:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-right-darker{border-right:1px solid color-mix(in srgb,var(--mk-grid-card) 20%,transparent 80%)}.table-border-left{border-left:1px solid var(--mk-grid-background)}.table-border-right{border-right:1px solid var(--mk-grid-background)}.table-item-mobile,.table-item{transition:background-color .2s cubic-bezier(.075,.82,.165,1);border-bottom:1px solid var(--mk-grid-background);position:relative}.table-item.hashue{background-color:hsl(var(--bghue) 100 var(--mk-grid-lum-10))}.table-item-mobile.odd:before,.table-item.odd:before,.table-item-mobile.even:before,.table-item.even:before,.table-item.table-bg-error:before{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;background:var(--mk-grid-background)}.table-item-mobile.odd:before,.table-item.odd:before{opacity:.2}.table-item-mobile.even:before,.table-item.even:before{opacity:.1}.table-item.table-bg-error:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;pointer-events:none;outline-offset:0px;outline:2px solid var(--mk-grid-error);background-color:var(--mk-grid-error);opacity:.04}.table-border-right-error{border-right:1px dashed color-mix(in srgb,var(--mk-grid-error) 50%,transparent 50%)}.table-styles{color:var(--mk-grid-on-card);background:color-mix(in srgb,var(--mk-grid-outline) 20%,transparent 80%);border-radius:calc(var(--mk-grid-border-radius) / 2)}.table-show-error{display:flex;justify-content:center;align-items:center;padding:16px;margin-top:10px}.table-topo-container{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;padding:8px;gap:1rem}.table-actions-outside{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px}.table-top-right-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1}.table-collapse-ico{display:inline-block;line-height:10px;transition:transform .3s;transform-origin:center center;transform:rotate(0)}.table-collapse-ico.ativo{transition:transform .3s ease-in-out;transform:rotate(180deg)}.table-filter-container{overflow:hidden;margin-top:10px;margin-bottom:10px}.table-filter-container:has(.table-filter-hide){pointer-events:none;-webkit-user-select:none;user-select:none;height:0px;margin-bottom:0}.table-filter-content{font-size:14px;padding:8px;overflow:hidden;transition:all .3s cubic-bezier(.075,.82,.165,1);position:relative;opacity:1}.table-filter-content.table-filter-hide{padding:0;opacity:0;margin-top:calc(var(--filter-height, 2000px) * -1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.table-conjunto-actions{position:relative;display:flex;align-items:stretch}.table-conjunto-actions>*{outline:1px solid var(--mk-grid-outline);outline-offset:-1px}.table-conjunto-actions>:first-child{border-radius:var(--mk-grid-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.table-conjunto-actions>:last-child{border-radius:0 7px 7px 0}.table-conjunto-actions-item{display:flex;align-items:center;justify-content:center;padding:0;min-height:40px}.table-inativo{color:var(--mk-grid-error)}.table-pagination-overflow{display:grid;align-items:center;overflow:auto;margin-top:10px}.table-pagination-overflow.compacted{margin-top:2px;justify-content:center}.table-pagination-container{display:flex;align-items:center;justify-content:space-between;padding:16px;flex-wrap:wrap;gap:16px;flex:1}.table-pagination-overflow.compacted .table-pagination-container{padding:2px 4px;gap:4px}.table-pagination-overflow.compacted.table-has-pages .table-pagination-controls{border-left:1px solid var(--mk-grid-card);border-right:1px solid var(--mk-grid-card)}.table-pagination-info{display:flex;flex-direction:column;color:var(--mk-grid-on-card-variant);font-size:12px}.table-pagination-controls{display:flex;align-items:center;gap:4px}.table-pagination-show{border-radius:var(--mk-grid-border-radius);min-width:47px;min-height:38px;display:flex;justify-content:center;align-items:center;font-size:12px}.table-pagination-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-grid-on-card-variant);flex-wrap:nowrap;white-space:nowrap}.table-pagination-per-page-select{--ui-width: 50px;font-size:12px;text-align:center}.table-performance{font-size:10px;font-style:italic}.compacted .table-pagination-range{display:none}.compacted .table-pagination-totais{font-size:10px}.compacted .table-performance{display:none}.table-row-centered{display:flex;justify-content:center;align-items:center}.table-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:12px;border-left:4px solid var(--mk-grid-primary);padding:12px 16px;margin-top:10px}@media(max-width:768px){.table-pagination-container{flex-direction:column;align-items:stretch;padding:2px}.table-pagination-overflow.compacted .table-pagination-container{padding:0}.table-pagination-controls{justify-content:center}.table-pagination-info{flex-direction:row;justify-content:space-around;gap:10px}.table-pagination-per-page{justify-content:center}}@media(max-width:480px){.table-topo-container{flex-direction:column;align-items:stretch}.table-pagination-container{flex-wrap:wrap;justify-content:space-evenly}.table-small-screen-hide{display:none}}\n"] }]
|
|
8581
8681
|
}], ctorParameters: () => [], propDecorators: { lista: [{ type: i0.Input, args: [{ isSignal: true, alias: "lista", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filtro: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtro", required: false }] }], minLineHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLineHeight", required: false }] }, { type: i0.Output, args: ["minLineHeightChange"] }], isCompacted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompacted", required: false }] }, { type: i0.Output, args: ["isCompactedChange"] }], hasGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasGrid", required: false }] }, { type: i0.Output, args: ["hasGridChange"] }], hasVerticalLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasVerticalLine", required: false }] }, { type: i0.Output, args: ["hasVerticalLineChange"] }], hasSeletor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeletor", required: false }] }, { type: i0.Output, args: ["hasSeletorChange"] }], gridSize: [{ type: i0.ViewChild, args: ['gridSize', { ...{ read: ElementRef }, isSignal: true }] }], gridfiltro: [{ type: i0.ViewChild, args: ['gridfiltro', { ...{ read: ElementRef }, isSignal: true }] }], paginationSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationSize", required: false }] }, { type: i0.Output, args: ["paginationSizeChange"] }], filterContainer: [{ type: i0.ViewChild, args: ['filterContainer', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
8582
8682
|
|
|
8583
8683
|
class GridCell {
|