orbiq-neural-ui-kit 1.1.29 → 1.1.31
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.
|
@@ -567,6 +567,7 @@ class NeuralButtonComponent {
|
|
|
567
567
|
}[s];
|
|
568
568
|
return [
|
|
569
569
|
'inline-flex items-center justify-center gap-2 transition-colors shrink-0',
|
|
570
|
+
this.isDisabled() ? 'cursor-not-allowed' : 'cursor-pointer',
|
|
570
571
|
stateClasses,
|
|
571
572
|
this.loading() && !this.disabled() ? 'pointer-events-none' : '',
|
|
572
573
|
focusClasses[t],
|
|
@@ -7395,7 +7396,7 @@ class NeuralSearchTriggerComponent {
|
|
|
7395
7396
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSearchTriggerComponent, isStandalone: true, selector: "neural-search-trigger", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, combo: { classPropertyName: "combo", publicName: "combo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
|
|
7396
7397
|
<button
|
|
7397
7398
|
(click)="clicked.emit()"
|
|
7398
|
-
class="flex items-center justify-between h-[32px] px-3 bg-surface-gray-2 hover:bg-surface-gray-3 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
|
|
7399
|
+
class="cursor-pointer flex items-center justify-between h-[32px] px-3 bg-surface-gray-2 hover:bg-surface-gray-3 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
|
|
7399
7400
|
[style.width]="width()"
|
|
7400
7401
|
>
|
|
7401
7402
|
<div class="flex items-center gap-2 text-ink-gray-4 group-hover:text-ink-gray-5">
|
|
@@ -7419,7 +7420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
7419
7420
|
template: `
|
|
7420
7421
|
<button
|
|
7421
7422
|
(click)="clicked.emit()"
|
|
7422
|
-
class="flex items-center justify-between h-[32px] px-3 bg-surface-gray-2 hover:bg-surface-gray-3 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
|
|
7423
|
+
class="cursor-pointer flex items-center justify-between h-[32px] px-3 bg-surface-gray-2 hover:bg-surface-gray-3 border border-transparent hover:border-outline-gray-2 rounded-6 transition-all group outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4 w-full"
|
|
7423
7424
|
[style.width]="width()"
|
|
7424
7425
|
>
|
|
7425
7426
|
<div class="flex items-center gap-2 text-ink-gray-4 group-hover:text-ink-gray-5">
|
|
@@ -8272,6 +8273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8272
8273
|
class NeuralDialogComponent {
|
|
8273
8274
|
dialog;
|
|
8274
8275
|
viewContainerRef;
|
|
8276
|
+
// ── Public API (sin cambios de compatibilidad) ──────────────────────────────
|
|
8275
8277
|
openModel = model(false, /* @ts-ignore */
|
|
8276
8278
|
...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
|
|
8277
8279
|
title = input(/* @ts-ignore */
|
|
@@ -8294,6 +8296,7 @@ class NeuralDialogComponent {
|
|
|
8294
8296
|
...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
|
|
8295
8297
|
bare = input(false, /* @ts-ignore */
|
|
8296
8298
|
...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
|
|
8299
|
+
// Mantenidos por compatibilidad con el modo bare=false aunque ya no se usan en bare=true
|
|
8297
8300
|
hasTitleSlot = input(false, /* @ts-ignore */
|
|
8298
8301
|
...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
|
|
8299
8302
|
hasActionsSlot = input(false, /* @ts-ignore */
|
|
@@ -8302,25 +8305,29 @@ class NeuralDialogComponent {
|
|
|
8302
8305
|
...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
|
|
8303
8306
|
dialogTemplate;
|
|
8304
8307
|
dialogRef = null;
|
|
8305
|
-
internalActionsState = {};
|
|
8308
|
+
internalActionsState = {};
|
|
8306
8309
|
constructor(dialog, viewContainerRef) {
|
|
8307
8310
|
this.dialog = dialog;
|
|
8308
8311
|
this.viewContainerRef = viewContainerRef;
|
|
8309
8312
|
effect(() => {
|
|
8310
8313
|
const isOpen = this.openModel();
|
|
8311
|
-
|
|
8312
|
-
|
|
8313
|
-
|
|
8314
|
-
|
|
8315
|
-
|
|
8316
|
-
|
|
8314
|
+
// El CDK Portal SOLO se gestiona en modo bare=false.
|
|
8315
|
+
// En bare=true, el @if del template reacciona al signal directamente.
|
|
8316
|
+
if (!this.bare()) {
|
|
8317
|
+
if (isOpen && !this.dialogRef && this.dialogTemplate) {
|
|
8318
|
+
this.openDialog();
|
|
8319
|
+
}
|
|
8320
|
+
else if (!isOpen && this.dialogRef) {
|
|
8321
|
+
this.dialogRef.close();
|
|
8322
|
+
this.dialogRef = null;
|
|
8323
|
+
}
|
|
8317
8324
|
}
|
|
8318
8325
|
});
|
|
8319
8326
|
}
|
|
8320
8327
|
openDialog() {
|
|
8321
8328
|
this.dialogRef = this.dialog.open(this.dialogTemplate, {
|
|
8322
8329
|
disableClose: !this.dismissible(),
|
|
8323
|
-
backdropClass: 'bg-black-overlay-200',
|
|
8330
|
+
backdropClass: 'bg-black-overlay-200',
|
|
8324
8331
|
panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
|
|
8325
8332
|
hasBackdrop: true,
|
|
8326
8333
|
viewContainerRef: this.viewContainerRef,
|
|
@@ -8332,18 +8339,29 @@ class NeuralDialogComponent {
|
|
|
8332
8339
|
}
|
|
8333
8340
|
});
|
|
8334
8341
|
}
|
|
8342
|
+
/** Cierra el modal en modo bare=false (CDK) */
|
|
8335
8343
|
close() {
|
|
8336
|
-
if (this.
|
|
8344
|
+
if (this.bare()) {
|
|
8345
|
+
// bare=true: simplemente cerramos el signal
|
|
8346
|
+
this.openModel.set(false);
|
|
8347
|
+
}
|
|
8348
|
+
else if (this.dialogRef) {
|
|
8337
8349
|
this.dialogRef.close();
|
|
8338
8350
|
}
|
|
8339
8351
|
}
|
|
8352
|
+
/** Alias para cerrar desde el template bare=true (keydown.escape) */
|
|
8353
|
+
closeBare() {
|
|
8354
|
+
if (this.dismissible()) {
|
|
8355
|
+
this.openModel.set(false);
|
|
8356
|
+
}
|
|
8357
|
+
}
|
|
8340
8358
|
onContainerClick(event) {
|
|
8341
8359
|
const target = event.target;
|
|
8342
|
-
|
|
8343
|
-
|
|
8344
|
-
|
|
8345
|
-
|
|
8346
|
-
|
|
8360
|
+
const isOverlay = target.classList.contains('dialog-scroll-container') ||
|
|
8361
|
+
target.classList.contains('min-h-screen') ||
|
|
8362
|
+
target.classList.contains('dialog-backdrop'); // clic en backdrop manual (bare=true)
|
|
8363
|
+
if (isOverlay && this.dismissible()) {
|
|
8364
|
+
this.close();
|
|
8347
8365
|
}
|
|
8348
8366
|
}
|
|
8349
8367
|
ngOnDestroy() {
|
|
@@ -8351,6 +8369,7 @@ class NeuralDialogComponent {
|
|
|
8351
8369
|
this.dialogRef.close();
|
|
8352
8370
|
}
|
|
8353
8371
|
}
|
|
8372
|
+
// ── Computed ────────────────────────────────────────────────────────────────
|
|
8354
8373
|
sizeClass = computed(() => {
|
|
8355
8374
|
const map = {
|
|
8356
8375
|
xs: 'max-w-xs',
|
|
@@ -8432,12 +8451,10 @@ class NeuralDialogComponent {
|
|
|
8432
8451
|
reactiveActions = computed(() => {
|
|
8433
8452
|
if (this.bare())
|
|
8434
8453
|
return [];
|
|
8435
|
-
return this.actions().map(action => {
|
|
8436
|
-
|
|
8437
|
-
|
|
8438
|
-
|
|
8439
|
-
};
|
|
8440
|
-
});
|
|
8454
|
+
return this.actions().map(action => ({
|
|
8455
|
+
...action,
|
|
8456
|
+
loading: this.internalActionsState[action.label] || false
|
|
8457
|
+
}));
|
|
8441
8458
|
}, /* @ts-ignore */
|
|
8442
8459
|
...(ngDevMode ? [{ debugName: "reactiveActions" }] : /* istanbul ignore next */ []));
|
|
8443
8460
|
isSingleActionFullWidth = computed(() => {
|
|
@@ -8451,10 +8468,6 @@ class NeuralDialogComponent {
|
|
|
8451
8468
|
return;
|
|
8452
8469
|
}
|
|
8453
8470
|
this.internalActionsState[action.label] = true;
|
|
8454
|
-
// trigger change detection by recreating the reference since it's a signal reading internalState
|
|
8455
|
-
// Or we could just use a separate mechanism. Let's mutate and trust Angular template binding if we update state.
|
|
8456
|
-
// In signal components, we might need a signal for internalActionsState
|
|
8457
|
-
// For now, let's just await
|
|
8458
8471
|
try {
|
|
8459
8472
|
await action.onClick({ close: () => this.close() });
|
|
8460
8473
|
}
|
|
@@ -8464,13 +8477,26 @@ class NeuralDialogComponent {
|
|
|
8464
8477
|
}
|
|
8465
8478
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8466
8479
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
|
|
8467
|
-
|
|
8468
|
-
|
|
8469
|
-
|
|
8480
|
+
<!--
|
|
8481
|
+
MODO bare=true: Renderizado directo con @if.
|
|
8482
|
+
Angular mantiene el árbol de vistas del componente padre, lo que permite que
|
|
8483
|
+
<ng-content> proyecte correctamente los nodos del consumidor.
|
|
8484
|
+
NOTA: El CDK Dialog Portal crea una EmbeddedView desconectada donde <ng-content>
|
|
8485
|
+
no recibe proyección, resultando en height:0. Este modo evita ese bug.
|
|
8486
|
+
-->
|
|
8487
|
+
@if (bare() && openModel()) {
|
|
8488
|
+
<div
|
|
8489
|
+
class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container"
|
|
8470
8490
|
(click)="onContainerClick($event)"
|
|
8491
|
+
(keydown.escape)="closeBare()"
|
|
8492
|
+
tabindex="-1"
|
|
8471
8493
|
>
|
|
8494
|
+
<!-- Backdrop manual con transición sincronizada -->
|
|
8495
|
+
<div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
|
|
8496
|
+
|
|
8497
|
+
<!-- Contenedor posicionado -->
|
|
8472
8498
|
<div
|
|
8473
|
-
class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
|
|
8499
|
+
class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center"
|
|
8474
8500
|
[class]="dialogPositionClasses()"
|
|
8475
8501
|
[style]="dialogPositionStyles()"
|
|
8476
8502
|
>
|
|
@@ -8478,9 +8504,33 @@ class NeuralDialogComponent {
|
|
|
8478
8504
|
class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
|
|
8479
8505
|
[class]="sizeClass()"
|
|
8480
8506
|
>
|
|
8481
|
-
|
|
8482
|
-
|
|
8483
|
-
|
|
8507
|
+
<!-- ng-content proyecta correctamente aquí porque estamos en el árbol de vistas del padre -->
|
|
8508
|
+
<ng-content></ng-content>
|
|
8509
|
+
</div>
|
|
8510
|
+
</div>
|
|
8511
|
+
</div>
|
|
8512
|
+
}
|
|
8513
|
+
|
|
8514
|
+
<!--
|
|
8515
|
+
MODO bare=false: CDK Dialog Portal.
|
|
8516
|
+
No usa <ng-content> — el contenido se genera desde @Input() (title, message, actions).
|
|
8517
|
+
El CDK Portal funciona correctamente aquí porque no hay proyección de nodos externos.
|
|
8518
|
+
-->
|
|
8519
|
+
@if (!bare()) {
|
|
8520
|
+
<ng-template #dialogTemplate>
|
|
8521
|
+
<div
|
|
8522
|
+
class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
|
|
8523
|
+
(click)="onContainerClick($event)"
|
|
8524
|
+
>
|
|
8525
|
+
<div
|
|
8526
|
+
class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
|
|
8527
|
+
[class]="dialogPositionClasses()"
|
|
8528
|
+
[style]="dialogPositionStyles()"
|
|
8529
|
+
>
|
|
8530
|
+
<div
|
|
8531
|
+
class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
|
|
8532
|
+
[class]="sizeClass()"
|
|
8533
|
+
>
|
|
8484
8534
|
<div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
|
|
8485
8535
|
<div class="flex">
|
|
8486
8536
|
<div class="w-full flex-1">
|
|
@@ -8496,9 +8546,7 @@ class NeuralDialogComponent {
|
|
|
8496
8546
|
</div>
|
|
8497
8547
|
}
|
|
8498
8548
|
<header class="flex-1">
|
|
8499
|
-
@if (
|
|
8500
|
-
<ng-content select="[title]"></ng-content>
|
|
8501
|
-
} @else if (title()) {
|
|
8549
|
+
@if (title()) {
|
|
8502
8550
|
<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
|
|
8503
8551
|
{{ title() }}
|
|
8504
8552
|
</h3>
|
|
@@ -8513,9 +8561,7 @@ class NeuralDialogComponent {
|
|
|
8513
8561
|
</div>
|
|
8514
8562
|
}
|
|
8515
8563
|
|
|
8516
|
-
@if (
|
|
8517
|
-
<ng-content></ng-content>
|
|
8518
|
-
} @else if (message()) {
|
|
8564
|
+
@if (message()) {
|
|
8519
8565
|
<p class="text-p-base text-ink-gray-7">
|
|
8520
8566
|
{{ message() }}
|
|
8521
8567
|
</p>
|
|
@@ -8524,47 +8570,43 @@ class NeuralDialogComponent {
|
|
|
8524
8570
|
</div>
|
|
8525
8571
|
</div>
|
|
8526
8572
|
|
|
8527
|
-
@if (reactiveActions().length
|
|
8573
|
+
@if (reactiveActions().length) {
|
|
8528
8574
|
<div class="px-4 pb-7 pt-4 sm:px-6">
|
|
8529
|
-
|
|
8530
|
-
|
|
8531
|
-
|
|
8532
|
-
|
|
8533
|
-
|
|
8534
|
-
|
|
8535
|
-
|
|
8536
|
-
|
|
8537
|
-
|
|
8538
|
-
|
|
8539
|
-
|
|
8540
|
-
|
|
8541
|
-
|
|
8542
|
-
|
|
8543
|
-
|
|
8544
|
-
|
|
8545
|
-
|
|
8546
|
-
</neural-button>
|
|
8547
|
-
}
|
|
8548
|
-
</div>
|
|
8549
|
-
}
|
|
8575
|
+
<div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
|
|
8576
|
+
@for (action of reactiveActions(); track action.label) {
|
|
8577
|
+
<neural-button
|
|
8578
|
+
class="w-full sm:w-auto"
|
|
8579
|
+
[disabled]="action.disabled || false"
|
|
8580
|
+
[loading]="action.loading || false"
|
|
8581
|
+
[variant]="action.variant || 'solid'"
|
|
8582
|
+
[theme]="action.theme || 'gray'"
|
|
8583
|
+
(click)="onActionClick(action)"
|
|
8584
|
+
>
|
|
8585
|
+
{{ action.label }}
|
|
8586
|
+
@if (action.icon) {
|
|
8587
|
+
<span icon [class]="action.icon + ' size-4'"></span>
|
|
8588
|
+
}
|
|
8589
|
+
</neural-button>
|
|
8590
|
+
}
|
|
8591
|
+
</div>
|
|
8550
8592
|
</div>
|
|
8551
8593
|
}
|
|
8552
|
-
|
|
8553
|
-
|
|
8554
|
-
|
|
8555
|
-
|
|
8556
|
-
|
|
8557
|
-
|
|
8558
|
-
|
|
8559
|
-
|
|
8560
|
-
|
|
8561
|
-
|
|
8562
|
-
|
|
8563
|
-
|
|
8594
|
+
|
|
8595
|
+
@if (showCloseButton() && !showHeader()) {
|
|
8596
|
+
<neural-button
|
|
8597
|
+
class="absolute right-4 top-4 z-10"
|
|
8598
|
+
variant="ghost"
|
|
8599
|
+
label="Close"
|
|
8600
|
+
(click)="close()"
|
|
8601
|
+
>
|
|
8602
|
+
<span icon class="lucide-x size-4 text-ink-gray-9"></span>
|
|
8603
|
+
</neural-button>
|
|
8604
|
+
}
|
|
8605
|
+
</div>
|
|
8564
8606
|
</div>
|
|
8565
8607
|
</div>
|
|
8566
|
-
</
|
|
8567
|
-
|
|
8608
|
+
</ng-template>
|
|
8609
|
+
}
|
|
8568
8610
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
|
|
8569
8611
|
}
|
|
8570
8612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
|
|
@@ -8574,13 +8616,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8574
8616
|
standalone: true,
|
|
8575
8617
|
imports: [CommonModule, DialogModule, NeuralButtonComponent],
|
|
8576
8618
|
template: `
|
|
8577
|
-
|
|
8578
|
-
|
|
8579
|
-
|
|
8619
|
+
<!--
|
|
8620
|
+
MODO bare=true: Renderizado directo con @if.
|
|
8621
|
+
Angular mantiene el árbol de vistas del componente padre, lo que permite que
|
|
8622
|
+
<ng-content> proyecte correctamente los nodos del consumidor.
|
|
8623
|
+
NOTA: El CDK Dialog Portal crea una EmbeddedView desconectada donde <ng-content>
|
|
8624
|
+
no recibe proyección, resultando en height:0. Este modo evita ese bug.
|
|
8625
|
+
-->
|
|
8626
|
+
@if (bare() && openModel()) {
|
|
8627
|
+
<div
|
|
8628
|
+
class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container"
|
|
8580
8629
|
(click)="onContainerClick($event)"
|
|
8630
|
+
(keydown.escape)="closeBare()"
|
|
8631
|
+
tabindex="-1"
|
|
8581
8632
|
>
|
|
8633
|
+
<!-- Backdrop manual con transición sincronizada -->
|
|
8634
|
+
<div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
|
|
8635
|
+
|
|
8636
|
+
<!-- Contenedor posicionado -->
|
|
8582
8637
|
<div
|
|
8583
|
-
class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
|
|
8638
|
+
class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center"
|
|
8584
8639
|
[class]="dialogPositionClasses()"
|
|
8585
8640
|
[style]="dialogPositionStyles()"
|
|
8586
8641
|
>
|
|
@@ -8588,9 +8643,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8588
8643
|
class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
|
|
8589
8644
|
[class]="sizeClass()"
|
|
8590
8645
|
>
|
|
8591
|
-
|
|
8592
|
-
|
|
8593
|
-
|
|
8646
|
+
<!-- ng-content proyecta correctamente aquí porque estamos en el árbol de vistas del padre -->
|
|
8647
|
+
<ng-content></ng-content>
|
|
8648
|
+
</div>
|
|
8649
|
+
</div>
|
|
8650
|
+
</div>
|
|
8651
|
+
}
|
|
8652
|
+
|
|
8653
|
+
<!--
|
|
8654
|
+
MODO bare=false: CDK Dialog Portal.
|
|
8655
|
+
No usa <ng-content> — el contenido se genera desde @Input() (title, message, actions).
|
|
8656
|
+
El CDK Portal funciona correctamente aquí porque no hay proyección de nodos externos.
|
|
8657
|
+
-->
|
|
8658
|
+
@if (!bare()) {
|
|
8659
|
+
<ng-template #dialogTemplate>
|
|
8660
|
+
<div
|
|
8661
|
+
class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
|
|
8662
|
+
(click)="onContainerClick($event)"
|
|
8663
|
+
>
|
|
8664
|
+
<div
|
|
8665
|
+
class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
|
|
8666
|
+
[class]="dialogPositionClasses()"
|
|
8667
|
+
[style]="dialogPositionStyles()"
|
|
8668
|
+
>
|
|
8669
|
+
<div
|
|
8670
|
+
class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
|
|
8671
|
+
[class]="sizeClass()"
|
|
8672
|
+
>
|
|
8594
8673
|
<div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
|
|
8595
8674
|
<div class="flex">
|
|
8596
8675
|
<div class="w-full flex-1">
|
|
@@ -8606,9 +8685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8606
8685
|
</div>
|
|
8607
8686
|
}
|
|
8608
8687
|
<header class="flex-1">
|
|
8609
|
-
@if (
|
|
8610
|
-
<ng-content select="[title]"></ng-content>
|
|
8611
|
-
} @else if (title()) {
|
|
8688
|
+
@if (title()) {
|
|
8612
8689
|
<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
|
|
8613
8690
|
{{ title() }}
|
|
8614
8691
|
</h3>
|
|
@@ -8623,9 +8700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8623
8700
|
</div>
|
|
8624
8701
|
}
|
|
8625
8702
|
|
|
8626
|
-
@if (
|
|
8627
|
-
<ng-content></ng-content>
|
|
8628
|
-
} @else if (message()) {
|
|
8703
|
+
@if (message()) {
|
|
8629
8704
|
<p class="text-p-base text-ink-gray-7">
|
|
8630
8705
|
{{ message() }}
|
|
8631
8706
|
</p>
|
|
@@ -8634,47 +8709,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8634
8709
|
</div>
|
|
8635
8710
|
</div>
|
|
8636
8711
|
|
|
8637
|
-
@if (reactiveActions().length
|
|
8712
|
+
@if (reactiveActions().length) {
|
|
8638
8713
|
<div class="px-4 pb-7 pt-4 sm:px-6">
|
|
8639
|
-
|
|
8640
|
-
|
|
8641
|
-
|
|
8642
|
-
|
|
8643
|
-
|
|
8644
|
-
|
|
8645
|
-
|
|
8646
|
-
|
|
8647
|
-
|
|
8648
|
-
|
|
8649
|
-
|
|
8650
|
-
|
|
8651
|
-
|
|
8652
|
-
|
|
8653
|
-
|
|
8654
|
-
|
|
8655
|
-
|
|
8656
|
-
</neural-button>
|
|
8657
|
-
}
|
|
8658
|
-
</div>
|
|
8659
|
-
}
|
|
8714
|
+
<div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
|
|
8715
|
+
@for (action of reactiveActions(); track action.label) {
|
|
8716
|
+
<neural-button
|
|
8717
|
+
class="w-full sm:w-auto"
|
|
8718
|
+
[disabled]="action.disabled || false"
|
|
8719
|
+
[loading]="action.loading || false"
|
|
8720
|
+
[variant]="action.variant || 'solid'"
|
|
8721
|
+
[theme]="action.theme || 'gray'"
|
|
8722
|
+
(click)="onActionClick(action)"
|
|
8723
|
+
>
|
|
8724
|
+
{{ action.label }}
|
|
8725
|
+
@if (action.icon) {
|
|
8726
|
+
<span icon [class]="action.icon + ' size-4'"></span>
|
|
8727
|
+
}
|
|
8728
|
+
</neural-button>
|
|
8729
|
+
}
|
|
8730
|
+
</div>
|
|
8660
8731
|
</div>
|
|
8661
8732
|
}
|
|
8662
|
-
|
|
8663
|
-
|
|
8664
|
-
|
|
8665
|
-
|
|
8666
|
-
|
|
8667
|
-
|
|
8668
|
-
|
|
8669
|
-
|
|
8670
|
-
|
|
8671
|
-
|
|
8672
|
-
|
|
8673
|
-
|
|
8733
|
+
|
|
8734
|
+
@if (showCloseButton() && !showHeader()) {
|
|
8735
|
+
<neural-button
|
|
8736
|
+
class="absolute right-4 top-4 z-10"
|
|
8737
|
+
variant="ghost"
|
|
8738
|
+
label="Close"
|
|
8739
|
+
(click)="close()"
|
|
8740
|
+
>
|
|
8741
|
+
<span icon class="lucide-x size-4 text-ink-gray-9"></span>
|
|
8742
|
+
</neural-button>
|
|
8743
|
+
}
|
|
8744
|
+
</div>
|
|
8674
8745
|
</div>
|
|
8675
8746
|
</div>
|
|
8676
|
-
</
|
|
8677
|
-
|
|
8747
|
+
</ng-template>
|
|
8748
|
+
}
|
|
8678
8749
|
`
|
|
8679
8750
|
}]
|
|
8680
8751
|
}], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{
|