@ngx-smz/core 21.9.0-next.13 → 21.9.0-next.15
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.
|
@@ -8248,6 +8248,7 @@ class DynamicDialogComponent {
|
|
|
8248
8248
|
this.container = event.element;
|
|
8249
8249
|
this.wrapper = this.container.parentElement;
|
|
8250
8250
|
this.moveOnTop();
|
|
8251
|
+
this.promoteToTopLayer();
|
|
8251
8252
|
this.bindGlobalListeners();
|
|
8252
8253
|
if (this.config.modal !== false) {
|
|
8253
8254
|
this.enableModality();
|
|
@@ -8261,6 +8262,25 @@ class DynamicDialogComponent {
|
|
|
8261
8262
|
break;
|
|
8262
8263
|
}
|
|
8263
8264
|
}
|
|
8265
|
+
/**
|
|
8266
|
+
* Overlays do CDK (ui-drawer, ui-dialog, menus...) vivem na top layer do navegador (Popover API), onde `z-index` nao
|
|
8267
|
+
* adianta: um dialog fora dela fica SEMPRE atras do backdrop deles. Promove a mascara do dialog a `popover="manual"`:
|
|
8268
|
+
* a top layer empilha pela ordem de abertura, entao um dialog aberto depois aparece acima do que ja estava aberto.
|
|
8269
|
+
* Sem suporte a Popover API, segue so com z-index.
|
|
8270
|
+
*/
|
|
8271
|
+
promoteToTopLayer() {
|
|
8272
|
+
const mask = this.maskViewChild?.nativeElement;
|
|
8273
|
+
if (!mask || typeof mask.showPopover !== 'function') {
|
|
8274
|
+
return;
|
|
8275
|
+
}
|
|
8276
|
+
try {
|
|
8277
|
+
mask.setAttribute('popover', 'manual');
|
|
8278
|
+
mask.showPopover();
|
|
8279
|
+
}
|
|
8280
|
+
catch {
|
|
8281
|
+
mask.removeAttribute('popover');
|
|
8282
|
+
}
|
|
8283
|
+
}
|
|
8264
8284
|
onAnimationEnd(event) {
|
|
8265
8285
|
if (event.toState === 'void') {
|
|
8266
8286
|
this.onContainerDestroy();
|
|
@@ -8403,16 +8423,24 @@ class DynamicDialogComponent {
|
|
|
8403
8423
|
}
|
|
8404
8424
|
}
|
|
8405
8425
|
bindDocumentEscapeListener() {
|
|
8406
|
-
|
|
8407
|
-
|
|
8408
|
-
const
|
|
8409
|
-
if (event.
|
|
8410
|
-
|
|
8411
|
-
this.hide();
|
|
8412
|
-
}
|
|
8426
|
+
// Captura na `window` (antes do listener no `body` do CDK): o ESC do dialog do topo fecha so ele e nao chega a um
|
|
8427
|
+
// overlay do CDK aberto por baixo (ex.: ui-drawer), que fecharia junto.
|
|
8428
|
+
const listener = (event) => {
|
|
8429
|
+
if (event.key !== 'Escape' || !this.container) {
|
|
8430
|
+
return;
|
|
8413
8431
|
}
|
|
8414
|
-
|
|
8415
|
-
|
|
8432
|
+
if (parseInt(this.container.style.zIndex, 10) !== SmzZIndex.getCurrent()) {
|
|
8433
|
+
return;
|
|
8434
|
+
}
|
|
8435
|
+
event.stopPropagation();
|
|
8436
|
+
const data = this.dialogConfig.data;
|
|
8437
|
+
const dialogContext = data.context ?? data['_context'];
|
|
8438
|
+
if (!dialogContext?.isLoading) {
|
|
8439
|
+
this.zone.run(() => this.hide());
|
|
8440
|
+
}
|
|
8441
|
+
};
|
|
8442
|
+
window.addEventListener('keydown', listener, true);
|
|
8443
|
+
this.documentEscapeListener = () => window.removeEventListener('keydown', listener, true);
|
|
8416
8444
|
}
|
|
8417
8445
|
unbindDocumentEscapeListener() {
|
|
8418
8446
|
if (this.documentEscapeListener) {
|
|
@@ -8496,7 +8524,7 @@ class DynamicDialogComponent {
|
|
|
8496
8524
|
</div>
|
|
8497
8525
|
}
|
|
8498
8526
|
</div>
|
|
8499
|
-
`, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => SmzAutoFocusDirective), selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogFooter), selector: "[pDynamicDialogFooter]" }, { kind: "pipe", type: i0.forwardRef(() => SafeHtmlPipe$1), name: "safeHtml" }], animations: [
|
|
8527
|
+
`, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}.p-dialog-mask[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;inset:0;max-width:none;max-height:none;width:100%;height:100%}.p-dialog-mask[popover]::backdrop{display:none}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => SmzAutoFocusDirective), selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogFooter), selector: "[pDynamicDialogFooter]" }, { kind: "pipe", type: i0.forwardRef(() => SafeHtmlPipe$1), name: "safeHtml" }], animations: [
|
|
8500
8528
|
trigger('animation', [
|
|
8501
8529
|
transition('void => visible', [
|
|
8502
8530
|
useAnimation(showAnimation)
|
|
@@ -8582,7 +8610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
8582
8610
|
])
|
|
8583
8611
|
], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
|
|
8584
8612
|
'class': 'p-element'
|
|
8585
|
-
}, standalone: false, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}\n"] }]
|
|
8613
|
+
}, standalone: false, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}.p-dialog-mask[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;inset:0;max-width:none;max-height:none;width:100%;height:100%}.p-dialog-mask[popover]::backdrop{display:none}\n"] }]
|
|
8586
8614
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: DynamicDialogConfig }, { type: DynamicDialogRef }, { type: i0.NgZone }, { type: SmzDynamicDialogConfig }, { type: SmzDockService }], propDecorators: { insertionPoint: [{
|
|
8587
8615
|
type: ViewChild,
|
|
8588
8616
|
args: [DynamicDialogContent]
|
|
@@ -21934,6 +21962,8 @@ class SmzTableComponent {
|
|
|
21934
21962
|
return this.buildTableTestId();
|
|
21935
21963
|
}
|
|
21936
21964
|
selectionChange = new EventEmitter();
|
|
21965
|
+
/** Validade da tabela (selecao obrigatoria). O `state` pode ser substituido por uma copia internamente, entao a validade tambem sai por aqui. */
|
|
21966
|
+
validChange = new EventEmitter();
|
|
21937
21967
|
filterChange = new EventEmitter();
|
|
21938
21968
|
columnVisibilityChange = new EventEmitter();
|
|
21939
21969
|
create = new EventEmitter();
|
|
@@ -22525,6 +22555,7 @@ class SmzTableComponent {
|
|
|
22525
22555
|
}
|
|
22526
22556
|
if (this.state.caption.rowSelection.validationMode === 'required') {
|
|
22527
22557
|
this.state.isValid = event.length > 0;
|
|
22558
|
+
this.validChange.emit(this.state.isValid);
|
|
22528
22559
|
}
|
|
22529
22560
|
}
|
|
22530
22561
|
onFilter(event) {
|
|
@@ -22587,7 +22618,7 @@ class SmzTableComponent {
|
|
|
22587
22618
|
this.tableHelper.clear(this.tableKey);
|
|
22588
22619
|
}
|
|
22589
22620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableEditableService }, { token: TableFormsService }, { token: TableHelperService }, { token: i1$3.Store }, { token: SmzExcelService }], target: i0.ɵɵFactoryTarget.Component });
|
|
22590
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTableComponent, isStandalone: false, selector: "smz-ui-table", inputs: { state: "state", items: "items", loading: "loading" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange", create: "create", update: "update", delete: "delete" }, host: { properties: { "attr.data-testid": "this.hostTestId" } }, providers: [TableEditableService, TableFormsService], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }, { propertyName: "columnMultiselect", first: true, predicate: ["columnMultiselect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state | tableContext; as context) {\n @if ((context.state.emptyFeedback != null && (context.state.emptyFeedback.extraInfo || context.state.emptyFeedback.image || context.state.emptyFeedback.actionButtons)) && (items != null && items.length === 0) && context.state.emptyFeedback.isFeatured) {\n <smz-data-info\n [attr.data-testid]=\"buildTableTestId('empty')\"\n [image]=\"context.state.emptyFeedback.image\"\n [message]=\"context.state.emptyFeedback.message\"\n [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\n [actions]=\"context.state.emptyFeedback.actionButtons\">\n <ng-template smzTemplate=\"actions\">\n <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\n </ng-template>\n </smz-data-info>\n } @else {\n <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\n <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\n @if (((observableSource ?? signalSource ?? items) | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize); as clonedData) {\n <p-table #dt\n dataKey=\"id\"\n editMode=\"row\"\n [stripedRows]=\"context.state.styles.striped\"\n [value]=\"clonedData.items\"\n [(selection)]=\"selectedItems\"\n [tableStyleClass]=\"context.state.styles.tableStyleClass\"\n [size]=\"context.state.styles.size === 'extra-small' ? 'small' : context.state.styles.size === 'small' ? 'small' : context.state.styles.size === 'large' ? 'large' : undefined\"\n [class]=\"'p-datatable-smz-ui-table' + (context.state.styles.showGrid ? ' p-datatable-gridlines' : '') + (context.state.styles.size === 'extra-small' ? ' p-datatable-xs' : '') + (context.state.styles.size === 'small' ? ' p-datatable-sm' : '') + (context.state.styles.size === 'large' ? ' p-datatable-lg' : '')\"\n [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\n [rows]=\"context.state.pagination.rows\"\n [first]=\"context.state.pagination.state.first\"\n [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\n [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\n [loading]=\"loading || isViewportInitializing\"\n [style.visibility]=\"isViewportInitializing ? 'hidden' : null\"\n [paginator]=\"context.state.pagination.isVisible\"\n paginatorDropdownAppendTo=\"body\"\n [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\n [sortField]=\"context.state.sort.field\"\n [sortMode]=\"context.state.sort.mode\"\n [sortOrder]=\"context.state.sort.order\"\n [multiSortMeta]=\"context.state.sort.multiSortMeta\"\n [scrollable]=\"context.state.viewport.scrollable\"\n [scrollHeight]=\"context.state.viewport.scrollHeight\"\n [filterDelay]=\"0\"\n [globalFilterFields]=\"context.globalFilter\"\n [columns]=\"context.visibleColumns\"\n [frozenColumns]=\"context.frozenColumns\"\n [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\n [resizableColumns]=\"context.state.viewport.resizableColumns\"\n [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\n (onPage)=\"onPage($event)\"\n (onFilter)=\"onFilter($event)\"\n (selectionChange)=\"emitSelection($event)\"\n >\n @if (context.state.caption.isVisible) {\n <ng-template smzTemplate=\"caption\">\n <div class=\"grid grid-nogutter items-center gap-2\" [attr.data-testid]=\"buildTableTestId('caption')\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n @if (context.state.caption.title != null) {\n <div class=\"col database-title\" [attr.data-testid]=\"buildTableTestId('title')\" [innerHTML]=\"context.state.caption.title\"></div>\n }\n <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\n <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\" [tableTestId]=\"state.tableTestId\"></smz-table-caption-buttons>\n @if (context.state.caption.exportToPdf.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('export-pdf')\" [label]=\"context.state.locale.exportToPdf.label\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.exportToExcel.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('export-excel')\" [label]=\"context.state.locale.exportToExcel.label\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.editable.creation.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('create')\" [label]=\"context.state.editable.creation.buttonLabel\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.rowSelection.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('row-selection')\" [label]=\"context.state.locale.rowSelection.label\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.rowExpansion.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('row-expansion')\" [label]=\"context.state.rowExpansion.label\" icon=\"fa-solid fa-list\" (click)=\"onRowExpansion(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.clearFilters.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('clear-filters')\" [label]=\"context.state.locale.clearFilters.label\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.columnVisibility.showDropdownSelector) {\n <ui-multi-select #columnMultiselect [attr.data-testid]=\"buildTableTestId('column-visibility')\" class=\"ml-2 col-12 md:col-2\" styleClass=\"w-full\" appendTo=\"body\" [options]=\"context.hideableColumns\" [(ngModel)]=\"selectedColumns\" [placeholder]=\"context.state.locale.columnVisibility.placeholder\" [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\" optionLabel=\"name\" dataKey=\"field\" optionLabel=\"header\" [filter]=\"true\" (panelHide)=\"updateColumnsVisibility(true)\" [smzTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\n </ui-multi-select>\n }\n @if (context.state.caption.globalFilter.isVisible) {\n <ui-icon-field class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\n <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\n <input #inputGlobal [(ngModel)]=\"globalSearchInput\" smzInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\" [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" [attr.data-testid]=\"buildTableTestId('search')\" />\n </ui-icon-field>\n }\n </div>\n @if (toolbarTemplate != null) {\n <div class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\n </div>\n }\n </ng-template>\n }\n <ng-template smzTemplate=\"header\" let-columns>\n <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\n @if (context.state.caption.rowSelection.isEnabled) {\n <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\n @if (!context.state.actions.batchActions.isVisible) {\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n }\n </th>\n }\n @if (context.state.rowExpansion.isEnabled) {\n <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\n }\n @for (col of columns; track col.field) {\n @if (context.state.viewport.resizableColumns) {\n @if (col.isOrderable) {\n <th [pSortableColumn]=\"col.sortField\" pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n @if (!col.isOrderable) {\n <th pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n } @else {\n @if (col.isOrderable) {\n <th [pSortableColumn]=\"col.sortField\" [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n @if (!col.isOrderable) {\n <th [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n }\n <ng-template #headerContent>\n <div class=\"flex justify-start items-center\">\n <span class=\"mr-1\">{{ col.header }}</span>\n @if (col.showHeaderActions) {\n <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\n }\n @if (!clonedData.showSkeleton && col.isOrderable) {\n <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\n }\n @if (!clonedData.showSkeleton) {\n @switch (col.filter.type) {\n @case (filterTypes.currency) {\n <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.numeric) {\n <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.date) {\n <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\n }\n @case (filterTypes.text) {\n <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.boolean) {\n <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.dropdown) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n @case (filterTypes.multiselect) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-multi-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n @case (filterTypes.multiselect_array) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n @case (filterTypes.multiselect_string) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n }\n }\n @if (context.state.caption.columnVisibility.showColumnHideButton) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-eye-slash\" (click)=\"hideColumn(col, context)\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n }\n </div>\n </ng-template>\n }\n @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\n <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\n }\n </tr>\n @if (context.state.actions.batchActions.isVisible) {\n <tr>\n <th [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\"\n [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n <div class=\"grid grid-nogutter items-center justify-start\">\n <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\n @if (selectedItems?.length > 0) {\n @for (batchItem of context.state.actions.batchActions.items; track batchItem.label) {\n @if (batchItem.visible) {\n <button smzButton [label]=\"batchItem.label\" class=\"animate__animated animate__fadeIn\" [styleClass]=\"'p-button-plain ' + (batchItem.styleClass)\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [smzTooltip]=\"batchItem.tooltip\" [rounded]=\"true\" variant=\"text\"></button>\n }\n }\n }\n </div>\n </th>\n </tr>\n }\n </ng-template>\n <ng-template smzTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\n <tr #editableRowElement\n [pEditableRow]=\"item\"\n tableItemAction\n [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\n [callback]=\"context.state.actions.rowBehavior.clickCallback\"\n [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\n [item]=\"item\"\n class=\"p-selectable-row\"\n [attr.data-testid]=\"buildRowTestId(item, rowIndex)\"\n [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\n >\n @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\n <td\n clickStopPropagation\n class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\n [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\n [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\n >\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n }\n @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\n <td\n clickStopPropagation\n class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\n [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading, 'grid grid-nogutter justify-start items-center gap-2': context.state.rowExpansion.highlightNewItems && item._isNew }\"\n [ngStyle]=\"context.state.rowExpansion.ngStyle\"\n >\n <button smzButton type=\"button\" class=\"smz-table-row-expansion-toggle\" [icon]=\"item._isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\" (click)=\"item._isExpanded = !item._isExpanded; item._isNew = false\" variant=\"text\" [rounded]=\"true\" size=\"sm\"></button>\n @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\n <div class=\"rounded bg-cyan-400 text-sm text-white px-2 py-0 smz-table-new-tag\" (click)=\"item._isNew = false\">{{ context.state.rowExpansion.highlightLabel }}</div>\n }\n </td>\n }\n @for (col of columns; track col.field) {\n @if (clonedData.showSkeleton) {\n <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton></td>\n } @else {\n <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [attr.data-testid]=\"buildCellTestId(item, rowIndex, col.field)\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\n <span class=\"p-column-title\">{{ col.header }}</span>\n <p-cellEditor>\n <!-- CELULAR COM EDITOR -->\n <ng-template smzTemplate=\"input\">\n @switch (col.editable.type) {\n @case (editableTypes.none) {\n <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\n }\n @case (editableTypes.custom) {\n <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\n }\n <!-- INPUT TEXT -->\n @case (editableTypes.text) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <input smzInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT NUMBER -->\n @case (editableTypes.number) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-input-number *ngVar=\"col.editable.data as numberData\" [formControl]=\"$any(control)\" [mode]=\"numberData.mode\" [minFractionDigits]=\"numberData.minFractionDigits\" [maxFractionDigits]=\"numberData.maxFractionDigits\" [currency]=\"numberData.currency\" [useGrouping]=\"numberData.useGrouping\" [allowEmpty]=\"numberData.allowEmpty\" [showClear]=\"numberData.showClear\" [showButtons]=\"numberData.showButtons\" [prefix]=\"numberData.prefix\" [suffix]=\"numberData.suffix\">\n </ui-input-number>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT SWITCH -->\n @case (editableTypes.switch) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-toggle-switch [formControl]=\"$any(control)\"></ui-toggle-switch>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT TEXT AREA -->\n @case (editableTypes.area) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <textarea smzTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT DROPDOWN -->\n @case (editableTypes.dropdown) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-select appendTo=\"body\" [formControl]=\"$any(control)\" styleClass=\"w-full\" [options]=\"col.editable.data | editableSource\" optionLabel=\"name\" dataKey=\"id\" [placeholder]=\"$any(col.editable.data).placeholder\" [showClear]=\"!col.editable.validatorsPreset?.isRequired\" [filter]=\"true\"></ui-select>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT CALENDAR -->\n @case (editableTypes.calendar) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-date-picker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></ui-date-picker>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n }\n </ng-template>\n <!-- CELULAR COM CONTE\u00DADO -->\n <ng-template smzTemplate=\"output\">\n <smz-table-content\n [col]=\"col\"\n [smzTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\n tooltipPosition=\"left\"\n [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\n </smz-table-content>\n </ng-template>\n </p-cellEditor>\n </td>\n }\n }\n @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\n <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n <div class=\"grid grid-nogutter items-center justify-center\">\n @if (clonedData.showSkeleton) {\n <div class=\"w-full\">\n <ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton>\n </div>\n } @else {\n <!-- SEM EDITAR -->\n @if (!editing) {\n @if (context.state.editable.update.isButtonVisible) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow [rounded]=\"true\" variant=\"text\"></button>\n }\n @if (context.state.editable.remove.isButtonVisible) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\"></button>\n }\n }\n <!-- EDITANDO -->\n @if (editing) {\n @if (editableService.context[item.id]; as editableContext) {\n <!-- COM LOADING -->\n @if (editableContext.isLoading) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-info\"></button>\n }\n <!-- SEM LOADING -->\n @if (!editableContext.isLoading) {\n <!-- EDITANDO -->\n @if (!editableContext.hasErrors) {\n <!-- CRIANDO -->\n @if (item._context?.isCreating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n <!-- ATUALIZANDO -->\n @if (item._context?.isUpdating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n }\n <!-- COM ERRORS -->\n @if (editableContext.hasErrors) {\n <ui-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\n <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\n </ui-popover>\n <button smzButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"mr-2\" (click)=\"errorsOverlay.toggle($event)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n <!-- CRIANDO -->\n @if (item._context?.isCreating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n <!-- ATUALIZANDO -->\n @if (item._context?.isUpdating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n }\n }\n }\n }\n <!-- CUSTOM MENU -->\n @if (context.state.actions.customActions.isVisible && !editing) {\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\n }\n <!-- MENU -->\n @if (context.state.actions.menu.isVisible && !editing) {\n <smz-menu [callback]=\"context.state.actions.menu.callback\" [items]=\"context.state.actions.menu.items\" [data]=\"item\" [behavior]=\"context.state.actions.menu.behavior\" [ngClass]=\"{ 'ml-2': context.state.actions.customActions.isVisible }\" [icon]=\"context.state.actions.menu.styles.icon\" [styleClass]=\"context.state.actions.menu.styles.styleClass\" [buttonClass]=\"context.state.actions.menu.styles.buttonClass\" [testId]=\"buildRowMenuTestId(item, rowIndex)\"></smz-menu>\n }\n }\n </div>\n </td>\n }\n </tr>\n @if (item?._isExpanded) {\n <tr>\n <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\">\n <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\n </td>\n </tr>\n }\n </ng-template>\n <ng-template smzTemplate=\"emptymessage\" let-columns>\n <tr>\n <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\" [ngStyle]=\"{ 'text-align': 'center' }\">\n <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\n @if (context.state.caption.clearFilters.isButtonVisible && hasFilters()) {\n <button smzButton [label]=\"context.state.locale.clearFilters.label\" class=\"mt-3\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" variant=\"outlined\"></button>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n }\n </ng-container>\n </ng-container>\n }\n} @else {\n @if (emptyStateTemplate != null) {\n <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\n }\n}\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "stripedRows", "size", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: CellEditor, selector: "p-cellEditor" }, { kind: "component", type: SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzMultiSelectComponent, selector: "ui-multi-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "showToggleAll", "emptyMessage", "emptyFilterMessage", "maxSelectedLabels", "selectedItemsLabel", "panelStyle", "styleClass", "inputId", "autofocusFilter", "appendTo", "display"], outputs: ["changed", "panelHide", "panelShow"] }, { kind: "component", type: i2.SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "component", type: i2.SmzDatePickerComponent, selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableItemActionsDirective, selector: "[tableItemAction]", inputs: ["isClickable", "item", "callback", "expandRowOnClick"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSkeletonComponent, selector: "ui-skeleton", inputs: ["shape", "width", "height"] }, { kind: "directive", type: i2.SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.SmzToggleSwitchComponent, selector: "ui-toggle-switch", inputs: ["name"], outputs: ["changed"] }, { kind: "component", type: i2.SmzInputNumberComponent, selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId"], outputs: ["inputed", "keyDown", "blurred", "focused"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior", "testId"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzIconFieldComponent, selector: "ui-icon-field" }, { kind: "component", type: i2.SmzInputIconComponent, selector: "ui-input-icon", inputs: ["styleClass"] }, { kind: "component", type: SmzColumnFilterComponent, selector: "smz-column-filter", inputs: ["currency", "display", "field", "matchMode", "showAddButton", "showMatchModes", "showOperator", "showApplyButton", "type", "showTime"] }, { kind: "component", type: SmzTableValidationMessagesComponent, selector: "smz-table-validation-messages", inputs: ["errors", "messages", "isFormInvalid", "isFormDirty"] }, { kind: "component", type: SmzTableContentComponent, selector: "smz-table-content", inputs: ["col", "contentTypes", "item", "rowIndex", "contentTemplate"] }, { kind: "component", type: SmzTableCaptionButtonsComponent, selector: "smz-table-caption-buttons", inputs: ["buttons", "tableTestId"] }, { kind: "component", type: SmzTableHeaderActionsComponent, selector: "smz-table-header-actions", inputs: ["col"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UniqueFilterPipe, name: "uniqueFilter" }, { kind: "pipe", type: SmzTableContextPipe, name: "tableContext" }, { kind: "pipe", type: SmzFilterObjectPipe, name: "filterObject" }, { kind: "pipe", type: SmzCloneTableItemsPipe, name: "cloneTableItems" }, { kind: "pipe", type: SmzEditableSourcePipe, name: "editableSource" }, { kind: "pipe", type: SmzContentErrorsPipe, name: "contentErrors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTableComponent, isStandalone: false, selector: "smz-ui-table", inputs: { state: "state", items: "items", loading: "loading" }, outputs: { selectionChange: "selectionChange", validChange: "validChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange", create: "create", update: "update", delete: "delete" }, host: { properties: { "attr.data-testid": "this.hostTestId" } }, providers: [TableEditableService, TableFormsService], queries: [{ propertyName: "templates", predicate: SmzTemplateDirective }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }, { propertyName: "columnMultiselect", first: true, predicate: ["columnMultiselect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (state | tableContext; as context) {\n @if ((context.state.emptyFeedback != null && (context.state.emptyFeedback.extraInfo || context.state.emptyFeedback.image || context.state.emptyFeedback.actionButtons)) && (items != null && items.length === 0) && context.state.emptyFeedback.isFeatured) {\n <smz-data-info\n [attr.data-testid]=\"buildTableTestId('empty')\"\n [image]=\"context.state.emptyFeedback.image\"\n [message]=\"context.state.emptyFeedback.message\"\n [callbackInfo]=\"context.state.emptyFeedback.extraInfo\"\n [actions]=\"context.state.emptyFeedback.actionButtons\">\n <ng-template smzTemplate=\"actions\">\n <ng-container *ngTemplateOutlet=\"emptyActionsTemplate; context: { $implicit: {} }\"></ng-container>\n </ng-template>\n </smz-data-info>\n } @else {\n <ng-container *ngVar=\"state.source?.items$ != null ? (state.source.items$ | async) : null as observableSource\">\n <ng-container *ngVar=\"state.source?.signalItems != null ? state.source.signalItems() : null as signalSource\">\n @if (((observableSource ?? signalSource ?? items) | cloneTableItems : context: tableKey: context.state.rowExpansion.sincronize); as clonedData) {\n <p-table #dt\n dataKey=\"id\"\n editMode=\"row\"\n [stripedRows]=\"context.state.styles.striped\"\n [value]=\"clonedData.items\"\n [(selection)]=\"selectedItems\"\n [tableStyleClass]=\"context.state.styles.tableStyleClass\"\n [size]=\"context.state.styles.size === 'extra-small' ? 'small' : context.state.styles.size === 'small' ? 'small' : context.state.styles.size === 'large' ? 'large' : undefined\"\n [class]=\"'p-datatable-smz-ui-table' + (context.state.styles.showGrid ? ' p-datatable-gridlines' : '') + (context.state.styles.size === 'extra-small' ? ' p-datatable-xs' : '') + (context.state.styles.size === 'small' ? ' p-datatable-sm' : '') + (context.state.styles.size === 'large' ? ' p-datatable-lg' : '')\"\n [rowHover]=\"context.state.actions.rowBehavior.hoverable\"\n [rows]=\"context.state.pagination.rows\"\n [first]=\"context.state.pagination.state.first\"\n [showCurrentPageReport]=\"context.state.pagination.pageReport.isVisible\"\n [rowsPerPageOptions]=\"context.state.pagination.rowsPerPageOptions\"\n [loading]=\"loading || isViewportInitializing\"\n [style.visibility]=\"isViewportInitializing ? 'hidden' : null\"\n [paginator]=\"context.state.pagination.isVisible\"\n paginatorDropdownAppendTo=\"body\"\n [currentPageReportTemplate]=\"context.state.locale.paginator.template\"\n [sortField]=\"context.state.sort.field\"\n [sortMode]=\"context.state.sort.mode\"\n [sortOrder]=\"context.state.sort.order\"\n [multiSortMeta]=\"context.state.sort.multiSortMeta\"\n [scrollable]=\"context.state.viewport.scrollable\"\n [scrollHeight]=\"context.state.viewport.scrollHeight\"\n [filterDelay]=\"0\"\n [globalFilterFields]=\"context.globalFilter\"\n [columns]=\"context.visibleColumns\"\n [frozenColumns]=\"context.frozenColumns\"\n [frozenWidth]=\"context.state.frozen.isEnabled ? context.state.frozen.width : null\"\n [resizableColumns]=\"context.state.viewport.resizableColumns\"\n [columnResizeMode]=\"context.state.viewport.columnResizeMode\"\n (onPage)=\"onPage($event)\"\n (onFilter)=\"onFilter($event)\"\n (selectionChange)=\"emitSelection($event)\"\n >\n @if (context.state.caption.isVisible) {\n <ng-template smzTemplate=\"caption\">\n <div class=\"grid grid-nogutter items-center gap-2\" [attr.data-testid]=\"buildTableTestId('caption')\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n @if (context.state.caption.title != null) {\n <div class=\"col database-title\" [attr.data-testid]=\"buildTableTestId('title')\" [innerHTML]=\"context.state.caption.title\"></div>\n }\n <ng-container *ngTemplateOutlet=\"captionTemplate; context: { $implicit: dt }\"></ng-container>\n <smz-table-caption-buttons [buttons]=\"context.state.caption.buttons\" [tableTestId]=\"state.tableTestId\"></smz-table-caption-buttons>\n @if (context.state.caption.exportToPdf.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('export-pdf')\" [label]=\"context.state.locale.exportToPdf.label\" icon=\"fa-solid fa-file-pdf\" (click)=\"exportToPdf(context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.exportToExcel.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('export-excel')\" [label]=\"context.state.locale.exportToExcel.label\" icon=\"fa-solid fa-file-excel\" (click)=\"exportToExcel(table, context, clonedData.items)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.editable.creation.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('create')\" [label]=\"context.state.editable.creation.buttonLabel\" icon=\"fa-solid fa-plus\" (click)=\"editableService.onRowCreateInit(table, context.columns)\" [disabled]=\"clonedData.showSkeleton || editableService.isEditing || editableService.isCreating || context.state.editable.creation.isButtonDisabled\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.rowSelection.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('row-selection')\" [label]=\"context.state.locale.rowSelection.label\" icon=\"fa-solid fa-check-double\" (click)=\"onRowSelection(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.rowExpansion.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('row-expansion')\" [label]=\"context.state.rowExpansion.label\" icon=\"fa-solid fa-list\" (click)=\"onRowExpansion(context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.clearFilters.isButtonVisible) {\n <button smzButton [attr.data-testid]=\"buildTableTestId('clear-filters')\" [label]=\"context.state.locale.clearFilters.label\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" [disabled]=\"clonedData.showSkeleton\" variant=\"outlined\"></button>\n }\n @if (context.state.caption.columnVisibility.showDropdownSelector) {\n <ui-multi-select #columnMultiselect [attr.data-testid]=\"buildTableTestId('column-visibility')\" class=\"ml-2 col-12 md:col-2\" styleClass=\"w-full\" appendTo=\"body\" [options]=\"context.hideableColumns\" [(ngModel)]=\"selectedColumns\" [placeholder]=\"context.state.locale.columnVisibility.placeholder\" [selectedItemsLabel]=\"context.state.locale.columnVisibility.selectedItemsLabel\" optionLabel=\"name\" dataKey=\"field\" optionLabel=\"header\" [filter]=\"true\" (panelHide)=\"updateColumnsVisibility(true)\" [smzTooltip]=\"context.state.locale.columnVisibility.pTooltip\">\n </ui-multi-select>\n }\n @if (context.state.caption.globalFilter.isVisible) {\n <ui-icon-field class=\"col-12\" [ngClass]=\"{ 'md:col-2': !context.state.caption.globalFilter.expanded }\">\n <ui-input-icon styleClass=\"fa-solid fa-magnifying-glass\"></ui-input-icon>\n <input #inputGlobal [(ngModel)]=\"globalSearchInput\" smzInputText type=\"text\" styleClass=\"database-global-search\" (input)=\"updateGlobalFilter(inputGlobal.value)\" [disabled]=\"clonedData.showSkeleton\" [placeholder]=\"context.state.locale.globalFilter.placeholder\" [attr.data-testid]=\"buildTableTestId('search')\" />\n </ui-icon-field>\n }\n </div>\n @if (toolbarTemplate != null) {\n <div class=\"grid grid-nogutter items-center mt-2\" [ngClass]=\"'justify-' + context.state.caption.toolbarAlignment\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: dt }\"></ng-container>\n </div>\n }\n </ng-template>\n }\n <ng-template smzTemplate=\"header\" let-columns>\n <tr [ngClass]=\"{ 'invisible-header': !context.state.header.isVisible }\">\n @if (context.state.caption.rowSelection.isEnabled) {\n <th [ngStyle]=\"context.state.caption.rowSelection.ngStyle\">\n @if (!context.state.actions.batchActions.isVisible) {\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n }\n </th>\n }\n @if (context.state.rowExpansion.isEnabled) {\n <th [ngStyle]=\"context.state.rowExpansion.ngStyle\"></th>\n }\n @for (col of columns; track col.field) {\n @if (context.state.viewport.resizableColumns) {\n @if (col.isOrderable) {\n <th [pSortableColumn]=\"col.sortField\" pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n @if (!col.isOrderable) {\n <th pResizableColumn [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n } @else {\n @if (col.isOrderable) {\n <th [pSortableColumn]=\"col.sortField\" [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n @if (!col.isOrderable) {\n <th [attr.data-testid]=\"buildColumnTestId(col.field)\" [ngStyle]=\"col.content.ngStyle\" [ngClass]=\"col.headerStyleClass\">\n <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n </th>\n }\n }\n <ng-template #headerContent>\n <div class=\"flex justify-start items-center\">\n <span class=\"mr-1\">{{ col.header }}</span>\n @if (col.showHeaderActions) {\n <smz-table-header-actions clickStopPropagation class=\"ml-1 mt-1\" [col]=\"col\"></smz-table-header-actions>\n }\n @if (!clonedData.showSkeleton && col.isOrderable) {\n <p-sortIcon [field]=\"col.sortField\"></p-sortIcon>\n }\n @if (!clonedData.showSkeleton) {\n @switch (col.filter.type) {\n @case (filterTypes.currency) {\n <smz-column-filter type=\"numeric\" currency=\"BRL\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.numeric) {\n <smz-column-filter type=\"numeric\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.date) {\n <smz-column-filter type=\"date\" [field]=\"col.filterField\" [showTime]=\"col.filter.showTime\"></smz-column-filter>\n }\n @case (filterTypes.text) {\n <smz-column-filter type=\"text\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.boolean) {\n <smz-column-filter type=\"boolean\" [field]=\"col.filterField\"></smz-column-filter>\n }\n @case (filterTypes.dropdown) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField + '.id'\" matchMode=\"dropdown\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-select appendTo=\"body\" [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n @case (filterTypes.multiselect) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField\" matchMode=\"in\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\"></ui-multi-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n @case (filterTypes.multiselect_array) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField\" matchMode=\"array-some\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField + '.id' : filterField : null : 'name' : true\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" optionLabel=\"name\" dataKey=\"id\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n @case (filterTypes.multiselect_string) {\n @if (col.filterField | filterObject; as filterField) {\n <smz-column-filter [field]=\"filterField\" matchMode=\"multiselectByString\" [showMatchModes]=\"false\" [showOperator]=\"false\" [showAddButton]=\"false\">\n <ng-template smzTemplate=\"header\">\n <div class=\"px-3 pt-3 pb-0\">\n <span class=\"p-text-bold\">{{ col.header }}</span>\n </div>\n </ng-template>\n <ng-template smzTemplate=\"filter\" let-value let-filter=\"filter\">\n <ui-multi-select [ngModel]=\"value\" [options]=\"(clonedData.items != null ? clonedData.items : []) | uniqueFilter : filterField : filterField : null : true : false : false\" [placeholder]=\"context.state.locale.dropdownFilter.placeholder\" (changed)=\"filter($event.value)\" [maxSelectedLabels]=\"2\" [selectedItemsLabel]=\"'{0}'\"></ui-multi-select>\n </ng-template>\n </smz-column-filter>\n }\n }\n }\n }\n @if (context.state.caption.columnVisibility.showColumnHideButton) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-eye-slash\" (click)=\"hideColumn(col, context)\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n }\n </div>\n </ng-template>\n }\n @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible|| context.state.editable.isEditable) {\n <th [ngStyle]=\"context.state.editable.isEditable ? context.state.editable.ngStyle : context.state.actions.customActions.ngStyle\"></th>\n }\n </tr>\n @if (context.state.actions.batchActions.isVisible) {\n <tr>\n <th [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\"\n [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n <div class=\"grid grid-nogutter items-center justify-start\">\n <p-tableHeaderCheckbox class=\"mr-4\"></p-tableHeaderCheckbox>\n @if (selectedItems?.length > 0) {\n @for (batchItem of context.state.actions.batchActions.items; track batchItem.label) {\n @if (batchItem.visible) {\n <button smzButton [label]=\"batchItem.label\" class=\"animate__animated animate__fadeIn\" [styleClass]=\"'p-button-plain ' + (batchItem.styleClass)\" [icon]=\"batchItem.icon\" (click)=\"batchItem.command(selectedItems); selectedItems = [];\" [disabled]=\"batchItem.disabled\" [smzTooltip]=\"batchItem.tooltip\" [rounded]=\"true\" variant=\"text\"></button>\n }\n }\n }\n </div>\n </th>\n </tr>\n }\n </ng-template>\n <ng-template smzTemplate=\"body\" let-item let-editing=\"editing\" let-rowIndex=\"rowIndex\" let-columns=\"columns\">\n <tr #editableRowElement\n [pEditableRow]=\"item\"\n tableItemAction\n [isClickable]=\"context.state.actions.rowBehavior.isClickable\"\n [callback]=\"context.state.actions.rowBehavior.clickCallback\"\n [expandRowOnClick]=\"context.state.actions.rowBehavior.expandRowOnClick\"\n [item]=\"item\"\n class=\"p-selectable-row\"\n [attr.data-testid]=\"buildRowTestId(item, rowIndex)\"\n [ngClass]=\"{ 'highlight-row': item?.id === state.actions.rowBehavior.highlights, 'preserve-in-small': state.actions.rowBehavior.preserveLayoutInSmallDevices }\"\n >\n @if (context.state.caption.rowSelection.isEnabled && !clonedData.showSkeleton) {\n <td\n clickStopPropagation\n class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\n [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\"\n [ngStyle]=\"context.state.caption.rowSelection.ngStyle\"\n >\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n }\n @if (context.state.rowExpansion.isEnabled && !clonedData.showSkeleton) {\n <td\n clickStopPropagation\n class=\"{{ state.actions.rowBehavior.cellStyleClass }}\"\n [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading, 'grid grid-nogutter justify-start items-center gap-2': context.state.rowExpansion.highlightNewItems && item._isNew }\"\n [ngStyle]=\"context.state.rowExpansion.ngStyle\"\n >\n <button smzButton type=\"button\" class=\"smz-table-row-expansion-toggle\" [icon]=\"item._isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\" (click)=\"item._isExpanded = !item._isExpanded; item._isNew = false\" variant=\"text\" [rounded]=\"true\" size=\"sm\"></button>\n @if (context.state.rowExpansion.highlightNewItems && item._isNew) {\n <div class=\"rounded bg-cyan-400 text-sm text-white px-2 py-0 smz-table-new-tag\" (click)=\"item._isNew = false\">{{ context.state.rowExpansion.highlightLabel }}</div>\n }\n </td>\n }\n @for (col of columns; track col.field) {\n @if (clonedData.showSkeleton) {\n <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [ngStyle]=\"col.content.ngStyle\"><ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton></td>\n } @else {\n <td class=\"{{ state.actions.rowBehavior.cellStyleClass }}\" [attr.data-testid]=\"buildCellTestId(item, rowIndex, col.field)\" [ngClass]=\"{ 'opacity-50 pointer-events-none': editableService.context[item.id]?.hasErrors || editableService.context[item.id]?.isLoading }\" [ngStyle]=\"col.content.ngStyle\">\n <span class=\"p-column-title\">{{ col.header }}</span>\n <p-cellEditor>\n <!-- CELULAR COM EDITOR -->\n <ng-template smzTemplate=\"input\">\n @switch (col.editable.type) {\n @case (editableTypes.none) {\n <smz-table-content class=\"cursor-default\" [ngClass]=\"col.content.contentStyleClass\" [col]=\"col\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\"></smz-table-content>\n }\n @case (editableTypes.custom) {\n <ng-container *ngTemplateOutlet=\"editableTemplate; context: { $implicit: item, col: col }\"></ng-container>\n }\n <!-- INPUT TEXT -->\n @case (editableTypes.text) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <input smzInputText type=\"text\" [formControl]=\"$any(control)\" style=\"width: 100%;\">\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT NUMBER -->\n @case (editableTypes.number) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-input-number *ngVar=\"col.editable.data as numberData\" [formControl]=\"$any(control)\" [mode]=\"numberData.mode\" [minFractionDigits]=\"numberData.minFractionDigits\" [maxFractionDigits]=\"numberData.maxFractionDigits\" [currency]=\"numberData.currency\" [useGrouping]=\"numberData.useGrouping\" [allowEmpty]=\"numberData.allowEmpty\" [showClear]=\"numberData.showClear\" [showButtons]=\"numberData.showButtons\" [prefix]=\"numberData.prefix\" [suffix]=\"numberData.suffix\">\n </ui-input-number>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT SWITCH -->\n @case (editableTypes.switch) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-toggle-switch [formControl]=\"$any(control)\"></ui-toggle-switch>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT TEXT AREA -->\n @case (editableTypes.area) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <textarea smzTextarea type=\"text\" [formControl]=\"$any(control)\" [rows]=\"$any(col.editable.data).rows\" required style=\"width: 100%;\"></textarea>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT DROPDOWN -->\n @case (editableTypes.dropdown) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-select appendTo=\"body\" [formControl]=\"$any(control)\" styleClass=\"w-full\" [options]=\"col.editable.data | editableSource\" optionLabel=\"name\" dataKey=\"id\" [placeholder]=\"$any(col.editable.data).placeholder\" [showClear]=\"!col.editable.validatorsPreset?.isRequired\" [filter]=\"true\"></ui-select>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n <!-- INPUT CALENDAR -->\n @case (editableTypes.calendar) {\n @if (editableService.context[item.id]?.form; as form) {\n @if (form.controls[col.editable.property]; as control) {\n <div class=\"relative w-full\">\n <ui-date-picker [formControl]=\"$any(control)\" appendTo=\"body\" styleClass=\"w-full\" [ngClass]=\"{ 'pl-5': !control.valid }\"></ui-date-picker>\n <smz-table-validation-messages [errors]=\"control.errors\" [messages]=\"uiConfig.dialogs.forms.validationMessages\" [isFormInvalid]=\"form.invalid\" [isFormDirty]=\"form.dirty\"></smz-table-validation-messages>\n </div>\n }\n }\n }\n }\n </ng-template>\n <!-- CELULAR COM CONTE\u00DADO -->\n <ng-template smzTemplate=\"output\">\n <smz-table-content\n [col]=\"col\"\n [smzTooltip]=\"col.content.tooltip != null ? col.content.tooltip(item) : null\"\n tooltipPosition=\"left\"\n [ngClass]=\"col.content.contentStyleClass\" [contentTypes]=\"contentTypes\" [item]=\"item\" [rowIndex]=\"rowIndex\" [contentTemplate]=\"contentTemplate\">\n </smz-table-content>\n </ng-template>\n </p-cellEditor>\n </td>\n }\n }\n @if (context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) {\n <td [ngStyle]=\"context.state.actions.customActions.ngStyle\" class=\"px-0\">\n <div class=\"grid grid-nogutter items-center justify-center\">\n @if (clonedData.showSkeleton) {\n <div class=\"w-full\">\n <ui-skeleton width=\"100%\" height=\"1rem\"></ui-skeleton>\n </div>\n } @else {\n <!-- SEM EDITAR -->\n @if (!editing) {\n @if (context.state.editable.update.isButtonVisible) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-pencil\" (click)=\"editableService.onRowEditInit(item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.update.isButtonDisabled || (!context.state.editable.update.condition(item))\" pInitEditableRow [rounded]=\"true\" variant=\"text\"></button>\n }\n @if (context.state.editable.remove.isButtonVisible) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-trash\" (click)=\"editableService.onRowRemove($event, table, item)\" class=\"mx-1\" [disabled]=\"editableService.isEditing || editableService.isCreating || context.state.editable.remove.isButtonDisabled || (!context.state.editable.remove.condition(item))\" [rounded]=\"true\" variant=\"text\" severity=\"secondary\"></button>\n }\n }\n <!-- EDITANDO -->\n @if (editing) {\n @if (editableService.context[item.id]; as editableContext) {\n <!-- COM LOADING -->\n @if (editableContext.isLoading) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-rotate fa-spin\" [disabled]=\"true\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-info\"></button>\n }\n <!-- SEM LOADING -->\n @if (!editableContext.isLoading) {\n <!-- EDITANDO -->\n @if (!editableContext.hasErrors) {\n <!-- CRIANDO -->\n @if (item._context?.isCreating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowCreateSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n <!-- ATUALIZANDO -->\n @if (item._context?.isUpdating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-check\" (click)=\"editableService.onRowEditSave($event, table, editableRowElement, item)\" [disabled]=\"!editableContext.hasChanged || !editableService.context[item.id]?.form.valid\" class=\"mr-2\" [rounded]=\"true\" variant=\"text\" severity=\"success\"></button>\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n }\n <!-- COM ERRORS -->\n @if (editableContext.hasErrors) {\n <ui-popover #errorsOverlay appendTo=\"body\" [style]=\"{ width: '450px' }\">\n <div [innerHtml]=\"editableContext.errors | contentErrors\"></div>\n </ui-popover>\n <button smzButton type=\"button\" icon=\"fas fa-exclamation-triangle\" [disabled]=\"false\" class=\"mr-2\" (click)=\"errorsOverlay.toggle($event)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n <!-- CRIANDO -->\n @if (item._context?.isCreating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowCreateCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n <!-- ATUALIZANDO -->\n @if (item._context?.isUpdating) {\n <button smzButton type=\"button\" icon=\"fa-solid fa-xmark\" (click)=\"editableService.onRowEditCancel($event, table, item)\" size=\"sm\" [rounded]=\"true\" variant=\"text\" severity=\"danger\"></button>\n }\n }\n }\n }\n }\n <!-- CUSTOM MENU -->\n @if (context.state.actions.customActions.isVisible && !editing) {\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: { $implicit: item }\"></ng-container>\n }\n <!-- MENU -->\n @if (context.state.actions.menu.isVisible && !editing) {\n <smz-menu [callback]=\"context.state.actions.menu.callback\" [items]=\"context.state.actions.menu.items\" [data]=\"item\" [behavior]=\"context.state.actions.menu.behavior\" [ngClass]=\"{ 'ml-2': context.state.actions.customActions.isVisible }\" [icon]=\"context.state.actions.menu.styles.icon\" [styleClass]=\"context.state.actions.menu.styles.styleClass\" [buttonClass]=\"context.state.actions.menu.styles.buttonClass\" [testId]=\"buildRowMenuTestId(item, rowIndex)\"></smz-menu>\n }\n }\n </div>\n </td>\n }\n </tr>\n @if (item?._isExpanded) {\n <tr>\n <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\">\n <ng-container *ngTemplateOutlet=\"rowContentTemplate; context: { $implicit: item }\"></ng-container>\n </td>\n </tr>\n }\n </ng-template>\n <ng-template smzTemplate=\"emptymessage\" let-columns>\n <tr>\n <td [attr.colspan]=\"columns.length + ((context.state.actions.menu.isVisible || context.state.actions.customActions.isVisible || context.state.editable.isEditable) ? 1 : 0) + (context.state.caption.rowSelection.isEnabled ? 1 : 0) + (context.state.rowExpansion.isEnabled ? 1 : 0)\" [ngStyle]=\"{ 'text-align': 'center' }\">\n <div [innerHtml]=\"context.state.emptyFeedback.message\"></div>\n @if (context.state.caption.clearFilters.isButtonVisible && hasFilters()) {\n <button smzButton [label]=\"context.state.locale.clearFilters.label\" class=\"mt-3\" icon=\"fa-solid fa-filter-circle-xmark\" (click)=\"clear(table, context)\" variant=\"outlined\"></button>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n }\n </ng-container>\n </ng-container>\n }\n} @else {\n @if (emptyStateTemplate != null) {\n <ng-container *ngTemplateOutlet=\"emptyStateTemplate; context: { $implicit: {} }\"></ng-container>\n }\n}\n\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "stripedRows", "size", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: CellEditor, selector: "p-cellEditor" }, { kind: "component", type: SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "directive", type: i2.SmzInputTextDirective, selector: "input[smzInputText]", inputs: ["size", "invalid"] }, { kind: "component", type: i2.SmzMultiSelectComponent, selector: "ui-multi-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "showToggleAll", "emptyMessage", "emptyFilterMessage", "maxSelectedLabels", "selectedItemsLabel", "panelStyle", "styleClass", "inputId", "autofocusFilter", "appendTo", "display"], outputs: ["changed", "panelHide", "panelShow"] }, { kind: "component", type: i2.SmzSelectComponent, selector: "ui-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "filter", "filterBy", "filterMatchMode", "filterPlaceholder", "showClear", "emptyMessage", "emptyFilterMessage", "styleClass", "inputId", "ariaLabel", "appendTo"], outputs: ["changed", "showed", "hidden"] }, { kind: "component", type: i2.SmzDatePickerComponent, selector: "ui-date-picker", inputs: ["selectionMode", "dateFormat", "showTime", "timeOnly", "showSeconds", "hourFormat", "minDate", "maxDate", "showButtonBar", "showIcon", "showOnFocus", "keepInvalid", "readonlyInput", "placeholder", "inputId", "styleClass", "appendTo", "touchUI", "focusTrap"], outputs: ["selected", "cleared", "opened", "closed", "blurred"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableItemActionsDirective, selector: "[tableItemAction]", inputs: ["isClickable", "item", "callback", "expandRowOnClick"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: SmzDataInfoComponent, selector: "smz-data-info", inputs: ["image", "message", "actions", "callbackInfo", "callbackLabel"], outputs: ["clicked"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSkeletonComponent, selector: "ui-skeleton", inputs: ["shape", "width", "height"] }, { kind: "directive", type: i2.SmzTextareaDirective, selector: "textarea[smzTextarea]", inputs: ["invalid", "autoResize"] }, { kind: "component", type: i2.SmzPopoverComponent, selector: "ui-popover", inputs: ["style", "styleClass", "dismissable", "autoZIndex", "appendTo"], outputs: ["shown", "hidden"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.SmzToggleSwitchComponent, selector: "ui-toggle-switch", inputs: ["name"], outputs: ["changed"] }, { kind: "component", type: i2.SmzInputNumberComponent, selector: "ui-input-number", inputs: ["mode", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "prefix", "suffix", "showButtons", "showClear", "allowEmpty", "placeholder", "readonly", "inputId"], outputs: ["inputed", "keyDown", "blurred", "focused"] }, { kind: "component", type: SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior", "testId"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzIconFieldComponent, selector: "ui-icon-field" }, { kind: "component", type: i2.SmzInputIconComponent, selector: "ui-input-icon", inputs: ["styleClass"] }, { kind: "component", type: SmzColumnFilterComponent, selector: "smz-column-filter", inputs: ["currency", "display", "field", "matchMode", "showAddButton", "showMatchModes", "showOperator", "showApplyButton", "type", "showTime"] }, { kind: "component", type: SmzTableValidationMessagesComponent, selector: "smz-table-validation-messages", inputs: ["errors", "messages", "isFormInvalid", "isFormDirty"] }, { kind: "component", type: SmzTableContentComponent, selector: "smz-table-content", inputs: ["col", "contentTypes", "item", "rowIndex", "contentTemplate"] }, { kind: "component", type: SmzTableCaptionButtonsComponent, selector: "smz-table-caption-buttons", inputs: ["buttons", "tableTestId"] }, { kind: "component", type: SmzTableHeaderActionsComponent, selector: "smz-table-header-actions", inputs: ["col"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UniqueFilterPipe, name: "uniqueFilter" }, { kind: "pipe", type: SmzTableContextPipe, name: "tableContext" }, { kind: "pipe", type: SmzFilterObjectPipe, name: "filterObject" }, { kind: "pipe", type: SmzCloneTableItemsPipe, name: "cloneTableItems" }, { kind: "pipe", type: SmzEditableSourcePipe, name: "editableSource" }, { kind: "pipe", type: SmzContentErrorsPipe, name: "contentErrors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22591
22622
|
}
|
|
22592
22623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTableComponent, decorators: [{
|
|
22593
22624
|
type: Component,
|
|
@@ -22612,6 +22643,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
22612
22643
|
args: ['attr.data-testid']
|
|
22613
22644
|
}], selectionChange: [{
|
|
22614
22645
|
type: Output
|
|
22646
|
+
}], validChange: [{
|
|
22647
|
+
type: Output
|
|
22615
22648
|
}], filterChange: [{
|
|
22616
22649
|
type: Output
|
|
22617
22650
|
}], columnVisibilityChange: [{
|
|
@@ -23091,16 +23124,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
23091
23124
|
class TableContentComponent {
|
|
23092
23125
|
items$;
|
|
23093
23126
|
state;
|
|
23127
|
+
/** Validade informada pela tabela (que pode trabalhar com uma copia de `state`); `null` ate a primeira mudanca. */
|
|
23128
|
+
tableValid = null;
|
|
23094
23129
|
get isValid() {
|
|
23095
|
-
return this.state == null ? true : this.state.isValid;
|
|
23130
|
+
return this.state == null ? true : (this.tableValid ?? this.state.isValid);
|
|
23096
23131
|
}
|
|
23097
23132
|
onValidationError$ = new BehaviorSubject(null);
|
|
23098
23133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableContentComponent, isStandalone: false, selector: "smz-table-content", inputs: { items$: "items$", state: "state" }, ngImport: i0, template: "@if (onValidationError$ | async; as onValidationError) {\r\n <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n @if (onValidationError) {\r\n <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n }\r\n </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\"></smz-ui-table>", styles: [""], dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableContentComponent, isStandalone: false, selector: "smz-table-content", inputs: { items$: "items$", state: "state" }, ngImport: i0, template: "@if (onValidationError$ | async; as onValidationError) {\r\n <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n @if (onValidationError) {\r\n <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n }\r\n </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\" (validChange)=\"tableValid = $event\"></smz-ui-table>", styles: [""], dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
23100
23135
|
}
|
|
23101
23136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableContentComponent, decorators: [{
|
|
23102
23137
|
type: Component,
|
|
23103
|
-
args: [{ selector: 'smz-table-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (onValidationError$ | async; as onValidationError) {\r\n <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n @if (onValidationError) {\r\n <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n }\r\n </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\"></smz-ui-table>" }]
|
|
23138
|
+
args: [{ selector: 'smz-table-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (onValidationError$ | async; as onValidationError) {\r\n <div class=\"grid grid-nogutter items-center justify-end w-full\">\r\n @if (onValidationError) {\r\n <span style=\"color: red\">* Precisa selecionar pelo menos um item</span>\r\n }\r\n </div>\r\n}\r\n<smz-ui-table #smzdt [items]=\"items$ | async\" [state]=\"state\" (validChange)=\"tableValid = $event\"></smz-ui-table>" }]
|
|
23104
23139
|
}], propDecorators: { items$: [{
|
|
23105
23140
|
type: Input
|
|
23106
23141
|
}], state: [{
|
|
@@ -32162,7 +32197,7 @@ class UsersPageComponent {
|
|
|
32162
32197
|
this.cdr.markForCheck();
|
|
32163
32198
|
}
|
|
32164
32199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UsersPageComponent, deps: [{ token: i1$3.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
32165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: UsersPageComponent, isStandalone: false, selector: "smz-ui-users-page", ngImport: i0, template: "\n<ng-container *ngVar=\"(users$ | async) as users\">\n\n <smz-ui-table #smzdt [items]=\"users\" [state]=\"tableState\" [loading]=\"false\">\n\n <ng-template smzTemplate=\"caption\" let-primeTable>\n @for (action of (uiConfig.rbkUtils.authorization.users.pageActions | smzFlattenMenu : null); track action) {\n @if (action.visible) {\n <button smzButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [styleClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\n }\n }\n\n @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\n <ui-select-button appendTo=\"body\" [options]=\"viewOptions\" [(ngModel)]=\"selectedView\" (changed)=\"handleViewOptionChange($event.value)\" optionLabel=\"label\" optionValue=\"value\">\n </ui-select-button>\n }\n\n </ng-template>\n\n <!-- CONTE\u00DADOS COM OVERRIDE -->\n <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n @switch (col.field) {\n @case ('displayName') {\n <div class=\"grid grid-nogutter items-center gap-3 justify-start\">\n <!-- CONTROLE DE ACESSO N\u00C3O ENCONTROU O IDENTIFICADOR DO USU\u00C1RIO -->\n @if (item.avatar == null) {\n <img\n [src]=\"uiConfig.rbkUtils.authorization.users.avatarPlaceholderPath\"\n class=\"w-14 align-middle\"\n />\n }\n <!-- USU\u00C1RIO COM AVATAR INFORMADO PELO CONTROLE DE ACESSO -->\n @if (item.avatar != null) {\n <img\n [src]=\"item.avatar\"\n (error)=\"handleMissingImage($event, item.name, item.avatar)\"\n class=\"w-14 align-middle\"\n />\n }\n <span>{{ item.displayName }}</span>\n </div>\n }\n @case ('role.name') {\n {{ item.role?.name }}\n }\n }\n\n </ng-template>\n\n </smz-ui-table>\n\n</ng-container>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: SmzMenuItemActionsDirective, selector: "[smzMenuItemAction]", inputs: ["item", "data"], outputs: ["collapse"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzFlattenMenuPipe, name: "smzFlattenMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: UsersPageComponent, isStandalone: false, selector: "smz-ui-users-page", ngImport: i0, template: "\n<ng-container *ngVar=\"(users$ | async) as users\">\n\n <smz-ui-table #smzdt [items]=\"users\" [state]=\"tableState\" [loading]=\"false\">\n\n <ng-template smzTemplate=\"caption\" let-primeTable>\n @for (action of (uiConfig.rbkUtils.authorization.users.pageActions | smzFlattenMenu : null); track action) {\n @if (action.visible) {\n <button smzButton type=\"button\" smzMenuItemAction [item]=\"action\" [label]=\"action.label\" [icon]=\"action.icon\" [styleClass]=\"action.styleClass\" [disabled]=\"action.disabled\"></button>\n }\n }\n\n @if (uiConfig.rbkUtils.authorization.users.removalBehavior === 'deactivation') {\n <ui-select-button appendTo=\"body\" [options]=\"viewOptions\" [(ngModel)]=\"selectedView\" (changed)=\"handleViewOptionChange($event.value)\" optionLabel=\"label\" optionValue=\"value\">\n </ui-select-button>\n }\n\n </ng-template>\n\n <!-- CONTE\u00DADOS COM OVERRIDE -->\n <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n @switch (col.field) {\n @case ('displayName') {\n <div class=\"grid grid-nogutter items-center gap-3 justify-start\">\n <!-- CONTROLE DE ACESSO N\u00C3O ENCONTROU O IDENTIFICADOR DO USU\u00C1RIO -->\n @if (item.avatar == null) {\n <img\n [src]=\"uiConfig.rbkUtils.authorization.users.avatarPlaceholderPath\"\n class=\"w-14 align-middle\"\n />\n }\n <!-- USU\u00C1RIO COM AVATAR INFORMADO PELO CONTROLE DE ACESSO -->\n @if (item.avatar != null) {\n <img\n [src]=\"item.avatar\"\n (error)=\"handleMissingImage($event, item.name, item.avatar)\"\n class=\"w-14 align-middle\"\n />\n }\n <span>{{ item.displayName }}</span>\n </div>\n }\n @case ('role.name') {\n {{ item.role?.name }}\n }\n }\n\n </ng-template>\n\n </smz-ui-table>\n\n</ng-container>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: SmzMenuItemActionsDirective, selector: "[smzMenuItemAction]", inputs: ["item", "data"], outputs: ["collapse"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzFlattenMenuPipe, name: "smzFlattenMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32166
32201
|
}
|
|
32167
32202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: UsersPageComponent, decorators: [{
|
|
32168
32203
|
type: Component,
|
|
@@ -32372,7 +32407,7 @@ class ClaimsPageComponent {
|
|
|
32372
32407
|
this.dialogs.open(CreateClaimDialog());
|
|
32373
32408
|
}
|
|
32374
32409
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ClaimsPageComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32375
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ClaimsPageComponent, isStandalone: false, selector: "app-claims-page", ngImport: i0, template: "<smz-ui-table [items]=\"claims$ | async\" [state]=\"tableState\">\n\n <ng-template smzTemplate=\"caption\">\n <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32410
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ClaimsPageComponent, isStandalone: false, selector: "app-claims-page", ngImport: i0, template: "<smz-ui-table [items]=\"claims$ | async\" [state]=\"tableState\">\n\n <ng-template smzTemplate=\"caption\">\n <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32376
32411
|
}
|
|
32377
32412
|
__decorate([
|
|
32378
32413
|
Confirmable('Tem certeza de que deseja excluir essa permissão de acesso ?', 'Atenção', true)
|
|
@@ -32643,7 +32678,7 @@ class RolesPageComponent {
|
|
|
32643
32678
|
this.dialogs.open(CreateRoleDialog());
|
|
32644
32679
|
}
|
|
32645
32680
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RolesPageComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RolesPageComponent, isStandalone: false, selector: "app-roles-page", ngImport: i0, template: "<smz-ui-table [items]=\"roles$ | async\" [state]=\"tableState\">\n\n <ng-template smzTemplate=\"caption\">\n <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\" severity=\"primary\"></button>\n </ng-template>\n\n <!-- CONTE\u00DADOS COM OVERRIDE -->\n <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n @switch (col.field) {\n @case ('claims') {\n <div class=\"grid grid-nogutter items-start justify-start flex-col gap-1\">\n <ng-container *ngVar=\"(item.claims | smzInitial : 3) as limitedClaims\">\n <!-- <div [innerHTML]=\"limitedClaims | prettyjson\"></div> -->\n <ul class=\"list-disc\">\n @for (claim of limitedClaims; track claim) {\n <li class=\"\">{{ $any(claim).name }}</li>\n }\n @if (item.claims.length > 3) {\n <li>(...)</li>\n }\n </ul>\n @if (item.claims.length > 3) {\n <button\n type=\"button\"\n (click)=\"onShowRoleClaimsDialog(item)\"\n class=\"block rounded-md bg-amber-400 px-2.5 py-1.5 text-center text-sm font-semibold text-black shadow-sm hover:bg-amber-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500\">\n <i class=\"fa-solid fa-circle-info mr-2\"></i>Ver mais\n </button>\n }\n </ng-container>\n </div>\n }\n }\n\n </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzInitialPipe, name: "smzInitial" }, { kind: "pipe", type: RbkCanAccessAnyPipe, name: "rbkCanAccessAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32681
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RolesPageComponent, isStandalone: false, selector: "app-roles-page", ngImport: i0, template: "<smz-ui-table [items]=\"roles$ | async\" [state]=\"tableState\">\n\n <ng-template smzTemplate=\"caption\">\n <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" [disabled]=\"!(canCreateClaims | rbkCanAccessAny)\" severity=\"primary\"></button>\n </ng-template>\n\n <!-- CONTE\u00DADOS COM OVERRIDE -->\n <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n @switch (col.field) {\n @case ('claims') {\n <div class=\"grid grid-nogutter items-start justify-start flex-col gap-1\">\n <ng-container *ngVar=\"(item.claims | smzInitial : 3) as limitedClaims\">\n <!-- <div [innerHTML]=\"limitedClaims | prettyjson\"></div> -->\n <ul class=\"list-disc\">\n @for (claim of limitedClaims; track claim) {\n <li class=\"\">{{ $any(claim).name }}</li>\n }\n @if (item.claims.length > 3) {\n <li>(...)</li>\n }\n </ul>\n @if (item.claims.length > 3) {\n <button\n type=\"button\"\n (click)=\"onShowRoleClaimsDialog(item)\"\n class=\"block rounded-md bg-amber-400 px-2.5 py-1.5 text-center text-sm font-semibold text-black shadow-sm hover:bg-amber-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500\">\n <i class=\"fa-solid fa-circle-info mr-2\"></i>Ver mais\n </button>\n }\n </ng-container>\n </div>\n }\n }\n\n </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SmzInitialPipe, name: "smzInitial" }, { kind: "pipe", type: RbkCanAccessAnyPipe, name: "rbkCanAccessAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32647
32682
|
}
|
|
32648
32683
|
__decorate([
|
|
32649
32684
|
Confirmable('Tem certeza de que deseja excluir esse perfil ?', 'Atenção', true)
|
|
@@ -32899,7 +32934,7 @@ class TenantsPageComponent {
|
|
|
32899
32934
|
showCreateTenantDialog();
|
|
32900
32935
|
}
|
|
32901
32936
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantsPageComponent, deps: [{ token: i1$3.Store }, { token: SmzDialogsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32902
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TenantsPageComponent, isStandalone: false, selector: "app-tenants-page", ngImport: i0, template: "<smz-ui-table [items]=\"tenants$ | async\" [state]=\"tableState\">\n\n <ng-template smzTemplate=\"caption\">\n <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32937
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TenantsPageComponent, isStandalone: false, selector: "app-tenants-page", ngImport: i0, template: "<smz-ui-table [items]=\"tenants$ | async\" [state]=\"tableState\">\n\n <ng-template smzTemplate=\"caption\">\n <button smzButton type=\"button\" class=\"mx-1\" label=\"CRIAR\" (click)=\"showCreationDialog()\" severity=\"primary\"></button>\n </ng-template>\n\n</smz-ui-table>\n", dependencies: [{ kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32903
32938
|
}
|
|
32904
32939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantsPageComponent, decorators: [{
|
|
32905
32940
|
type: Component,
|
|
@@ -41254,7 +41289,7 @@ class NotificationsListComponent {
|
|
|
41254
41289
|
}
|
|
41255
41290
|
}
|
|
41256
41291
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotificationsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
41257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NotificationsListComponent, isStandalone: false, selector: "smz-notifications-list", ngImport: i0, template: "<ng-container *ngVar=\"hasRuningRequest$ | async as hasRuningRequest\">\n\n <smz-ui-table #smzTable [items]=\"(notifications$ | async) | filterBy : ['status'] : currentFolder.status\" [state]=\"tableState\" [loading]=\"hasRuningRequest\" (selectionChange)=\"onSelect($event)\">\n\n <ng-template smzTemplate=\"caption\" let-primeTable>\n @if (uiConfig.rbkUtils.notifications.showRefreshButton) {\n <button smzButton smzRipple type=\"button\" icon=\"fa-solid fa-rotate\" smzTooltip=\"Atualizar\" class=\"mr-3\" (click)=\"refresh()\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n }\n <ui-select-button appendTo=\"body\" [options]=\"folders\" [(ngModel)]=\"currentFolder\" optionLabel=\"icon\" (changed)=\"currentFolder.rebuild()\">\n <ng-template #item let-item>\n <i [ngClass]=\"item.icon\" [smzTooltip]=\"item.tooltip\"></i>\n <span class=\"ml-1 text-sm\">({{ item.count$ | async }})</span>\n </ng-template>\n </ui-select-button>\n </ng-template>\n\n <!-- CONTE\u00DADOS COM OVERRIDE -->\n <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n @switch (col.field) {\n @case ('searchData') {\n <div class=\"grid grid-nogutter items-center justify-between\" (mouseenter)=\"item._showActions = true\" (mouseleave)=\"item._showActions = false\">\n <div class=\"col\">\n <smz-notification-item [item]=\"item\" [showDate]=\"true\"></smz-notification-item>\n </div>\n @if (item._showActions) {\n <div class=\"grid grid-nogutter items-center justify-start gap-4 flex-col pl-4 animate__animated animate__fadeIn relative\" clickStopPropagation>\n @if (item.status !== status.ARCHIVED) {\n <i #archiveButton smzTooltip=\"Arquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-box-archive p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"archive([item])\"></i>\n }\n @if (item.status === status.ARCHIVED) {\n <i #inboxButton smzTooltip=\"Desarquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-inbox p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"moveToInbox([item])\"></i>\n }\n @if (item.route != '') {\n <i #routeButton smzTooltip=\"Navegar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-share p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"navigate(item)\"></i>\n }\n @if (item.link != '') {\n <i #linkButton smzTooltip=\"Abrir Link\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-up-right-from-square p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"openLink(item)\"></i>\n }\n <i #trashButton smzTooltip=\"Excluir\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-trash p-button-rounded p-button-text p-button-plain relative text-gray-500\" styleClass=\"relative\" (click)=\"remove(item)\"></i>\n </div>\n }\n </div>\n }\n }\n\n </ng-template>\n\n </smz-ui-table>\n\n</ng-container>", styles: ["smz-notifications-list .database-title{font-size:1.2rem}smz-notifications-list i .p-tooltip .p-tooltip-text{word-break:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: NotificationItemComponent, selector: "smz-notification-item", inputs: ["item", "charactersLimit", "showDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
41292
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NotificationsListComponent, isStandalone: false, selector: "smz-notifications-list", ngImport: i0, template: "<ng-container *ngVar=\"hasRuningRequest$ | async as hasRuningRequest\">\n\n <smz-ui-table #smzTable [items]=\"(notifications$ | async) | filterBy : ['status'] : currentFolder.status\" [state]=\"tableState\" [loading]=\"hasRuningRequest\" (selectionChange)=\"onSelect($event)\">\n\n <ng-template smzTemplate=\"caption\" let-primeTable>\n @if (uiConfig.rbkUtils.notifications.showRefreshButton) {\n <button smzButton smzRipple type=\"button\" icon=\"fa-solid fa-rotate\" smzTooltip=\"Atualizar\" class=\"mr-3\" (click)=\"refresh()\" [rounded]=\"true\" variant=\"text\" styleClass=\"p-button-plain\"></button>\n }\n <ui-select-button appendTo=\"body\" [options]=\"folders\" [(ngModel)]=\"currentFolder\" optionLabel=\"icon\" (changed)=\"currentFolder.rebuild()\">\n <ng-template #item let-item>\n <i [ngClass]=\"item.icon\" [smzTooltip]=\"item.tooltip\"></i>\n <span class=\"ml-1 text-sm\">({{ item.count$ | async }})</span>\n </ng-template>\n </ui-select-button>\n </ng-template>\n\n <!-- CONTE\u00DADOS COM OVERRIDE -->\n <ng-template smzTemplate=\"content\" let-item let-col=\"col\">\n\n @switch (col.field) {\n @case ('searchData') {\n <div class=\"grid grid-nogutter items-center justify-between\" (mouseenter)=\"item._showActions = true\" (mouseleave)=\"item._showActions = false\">\n <div class=\"col\">\n <smz-notification-item [item]=\"item\" [showDate]=\"true\"></smz-notification-item>\n </div>\n @if (item._showActions) {\n <div class=\"grid grid-nogutter items-center justify-start gap-4 flex-col pl-4 animate__animated animate__fadeIn relative\" clickStopPropagation>\n @if (item.status !== status.ARCHIVED) {\n <i #archiveButton smzTooltip=\"Arquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-box-archive p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"archive([item])\"></i>\n }\n @if (item.status === status.ARCHIVED) {\n <i #inboxButton smzTooltip=\"Desarquivar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-inbox p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"moveToInbox([item])\"></i>\n }\n @if (item.route != '') {\n <i #routeButton smzTooltip=\"Navegar\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-share p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"navigate(item)\"></i>\n }\n @if (item.link != '') {\n <i #linkButton smzTooltip=\"Abrir Link\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-up-right-from-square p-button-rounded p-button-text p-button-plain relative text-gray-500\" (click)=\"openLink(item)\"></i>\n }\n <i #trashButton smzTooltip=\"Excluir\" appendTo=\"body\" tooltipZIndex=\"9999\" tooltipPosition=\"bottom\" class=\"fa-solid fa-trash p-button-rounded p-button-text p-button-plain relative text-gray-500\" styleClass=\"relative\" (click)=\"remove(item)\"></i>\n </div>\n }\n </div>\n }\n }\n\n </ng-template>\n\n </smz-ui-table>\n\n</ng-container>", styles: ["smz-notifications-list .database-title{font-size:1.2rem}smz-notifications-list i .p-tooltip .p-tooltip-text{word-break:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "directive", type: i2.SmzTemplateDirective, selector: "ng-template[smzTemplate]", inputs: ["smzTemplate"] }, { kind: "directive", type: i2.SmzTooltipDirective, selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: i2.SmzSelectButtonComponent, selector: "ui-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "multiple", "allowEmpty", "size", "styleClass", "appendTo"], outputs: ["changed"] }, { kind: "directive", type: NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "component", type: NotificationItemComponent, selector: "smz-notification-item", inputs: ["item", "charactersLimit", "showDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
41258
41293
|
}
|
|
41259
41294
|
__decorate([
|
|
41260
41295
|
Confirmable('Deseja realmente excluir as notificações selecionadas ?<br>Está operação não poderá ser desfeita.', 'Exclusão', true)
|
|
@@ -48010,7 +48045,7 @@ class SmzMultiTablesComponent {
|
|
|
48010
48045
|
</ui-tab-panels>
|
|
48011
48046
|
</ui-tabs>
|
|
48012
48047
|
}
|
|
48013
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SmzTabsComponent, selector: "ui-tabs", inputs: ["value", "lazy", "scrollable"], outputs: ["valueChange"] }, { kind: "component", type: i2.SmzTabListComponent, selector: "ui-tab-list" }, { kind: "component", type: i2.SmzTabComponent, selector: "ui-tab", inputs: ["value", "disabled"] }, { kind: "component", type: i2.SmzTabPanelsComponent, selector: "ui-tab-panels" }, { kind: "component", type: i2.SmzTabPanelComponent, selector: "ui-tab-panel", inputs: ["value"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$1, name: "safeHtml" }] });
|
|
48048
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.SmzTabsComponent, selector: "ui-tabs", inputs: ["value", "lazy", "scrollable"], outputs: ["valueChange"] }, { kind: "component", type: i2.SmzTabListComponent, selector: "ui-tab-list" }, { kind: "component", type: i2.SmzTabComponent, selector: "ui-tab", inputs: ["value", "disabled"] }, { kind: "component", type: i2.SmzTabPanelsComponent, selector: "ui-tab-panels" }, { kind: "component", type: i2.SmzTabPanelComponent, selector: "ui-tab-panel", inputs: ["value"] }, { kind: "component", type: SmzTableComponent, selector: "smz-ui-table", inputs: ["state", "items", "loading"], outputs: ["selectionChange", "validChange", "filterChange", "columnVisibilityChange", "create", "update", "delete"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe$1, name: "safeHtml" }] });
|
|
48014
48049
|
}
|
|
48015
48050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzMultiTablesComponent, decorators: [{
|
|
48016
48051
|
type: Component,
|