orbiq-neural-ui-kit 1.1.30 → 1.1.32
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.
|
@@ -490,7 +490,7 @@ class NeuralButtonComponent {
|
|
|
490
490
|
const t = this.theme();
|
|
491
491
|
const s = this.size();
|
|
492
492
|
const solidClasses = {
|
|
493
|
-
gray: 'text-
|
|
493
|
+
gray: 'text-white bg-ink-gray-8 hover:bg-ink-gray-9 active:bg-surface-gray-8',
|
|
494
494
|
blue: 'text-ink-base bg-surface-blue-6 hover:bg-surface-blue-7 active:bg-surface-blue-8',
|
|
495
495
|
green: 'text-ink-base bg-surface-green-7 hover:bg-surface-green-8 active:bg-surface-green-9',
|
|
496
496
|
red: 'text-ink-base dark:text-ink-red-9 bg-surface-red-7 hover:bg-surface-red-8 active:bg-surface-red-9',
|
|
@@ -8271,8 +8271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8271
8271
|
}] } });
|
|
8272
8272
|
|
|
8273
8273
|
class NeuralDialogComponent {
|
|
8274
|
-
|
|
8275
|
-
viewContainerRef;
|
|
8274
|
+
// ── Public API (sin cambios de compatibilidad) ──────────────────────────────
|
|
8276
8275
|
openModel = model(false, /* @ts-ignore */
|
|
8277
8276
|
...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
|
|
8278
8277
|
title = input(/* @ts-ignore */
|
|
@@ -8301,57 +8300,36 @@ class NeuralDialogComponent {
|
|
|
8301
8300
|
...(ngDevMode ? [{ debugName: "hasActionsSlot" }] : /* istanbul ignore next */ []));
|
|
8302
8301
|
hasDefaultSlot = input(false, /* @ts-ignore */
|
|
8303
8302
|
...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
|
|
8304
|
-
|
|
8305
|
-
|
|
8306
|
-
internalActionsState = {}; // track loading states
|
|
8307
|
-
constructor(dialog, viewContainerRef) {
|
|
8308
|
-
this.dialog = dialog;
|
|
8309
|
-
this.viewContainerRef = viewContainerRef;
|
|
8303
|
+
internalActionsState = {};
|
|
8304
|
+
constructor() {
|
|
8310
8305
|
effect(() => {
|
|
8311
|
-
|
|
8312
|
-
|
|
8313
|
-
this.openDialog();
|
|
8314
|
-
}
|
|
8315
|
-
else if (!isOpen && this.dialogRef) {
|
|
8316
|
-
this.dialogRef.close();
|
|
8317
|
-
this.dialogRef = null;
|
|
8318
|
-
}
|
|
8319
|
-
});
|
|
8320
|
-
}
|
|
8321
|
-
openDialog() {
|
|
8322
|
-
this.dialogRef = this.dialog.open(this.dialogTemplate, {
|
|
8323
|
-
disableClose: !this.dismissible(),
|
|
8324
|
-
backdropClass: 'bg-black-overlay-200', // To match Frappe UI
|
|
8325
|
-
panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
|
|
8326
|
-
hasBackdrop: true,
|
|
8327
|
-
viewContainerRef: this.viewContainerRef,
|
|
8328
|
-
});
|
|
8329
|
-
this.dialogRef.closed.subscribe(() => {
|
|
8330
|
-
this.dialogRef = null;
|
|
8331
|
-
if (this.openModel()) {
|
|
8332
|
-
this.openModel.set(false);
|
|
8333
|
-
}
|
|
8306
|
+
// Manejar foco y escape de forma nativa en el futuro si es necesario.
|
|
8307
|
+
// El ngIf maneja el montaje y desmontaje.
|
|
8334
8308
|
});
|
|
8335
8309
|
}
|
|
8310
|
+
/** Cierra el modal */
|
|
8336
8311
|
close() {
|
|
8337
|
-
|
|
8338
|
-
|
|
8312
|
+
this.openModel.set(false);
|
|
8313
|
+
}
|
|
8314
|
+
/** Alias para cerrar desde el template */
|
|
8315
|
+
closeBare() {
|
|
8316
|
+
if (this.dismissible()) {
|
|
8317
|
+
this.openModel.set(false);
|
|
8339
8318
|
}
|
|
8340
8319
|
}
|
|
8341
8320
|
onContainerClick(event) {
|
|
8342
8321
|
const target = event.target;
|
|
8343
|
-
|
|
8344
|
-
|
|
8345
|
-
|
|
8346
|
-
|
|
8347
|
-
|
|
8322
|
+
const isOverlay = target.classList.contains('dialog-scroll-container') ||
|
|
8323
|
+
target.classList.contains('min-h-screen') ||
|
|
8324
|
+
target.classList.contains('dialog-backdrop');
|
|
8325
|
+
if (isOverlay && this.dismissible()) {
|
|
8326
|
+
this.close();
|
|
8348
8327
|
}
|
|
8349
8328
|
}
|
|
8350
8329
|
ngOnDestroy() {
|
|
8351
|
-
|
|
8352
|
-
this.dialogRef.close();
|
|
8353
|
-
}
|
|
8330
|
+
this.close();
|
|
8354
8331
|
}
|
|
8332
|
+
// ── Computed ────────────────────────────────────────────────────────────────
|
|
8355
8333
|
sizeClass = computed(() => {
|
|
8356
8334
|
const map = {
|
|
8357
8335
|
xs: 'max-w-xs',
|
|
@@ -8420,25 +8398,13 @@ class NeuralDialogComponent {
|
|
|
8420
8398
|
return pt ? { paddingTop: pt } : {};
|
|
8421
8399
|
}, /* @ts-ignore */
|
|
8422
8400
|
...(ngDevMode ? [{ debugName: "dialogPositionStyles" }] : /* istanbul ignore next */ []));
|
|
8423
|
-
showHeader = computed(() => {
|
|
8424
|
-
if (this.bare())
|
|
8425
|
-
return false;
|
|
8426
|
-
if (this.hasTitleSlot())
|
|
8427
|
-
return true;
|
|
8428
|
-
if (this.title())
|
|
8429
|
-
return true;
|
|
8430
|
-
return false;
|
|
8431
|
-
}, /* @ts-ignore */
|
|
8432
|
-
...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
8433
8401
|
reactiveActions = computed(() => {
|
|
8434
8402
|
if (this.bare())
|
|
8435
8403
|
return [];
|
|
8436
|
-
return this.actions().map(action => {
|
|
8437
|
-
|
|
8438
|
-
|
|
8439
|
-
|
|
8440
|
-
};
|
|
8441
|
-
});
|
|
8404
|
+
return this.actions().map(action => ({
|
|
8405
|
+
...action,
|
|
8406
|
+
loading: this.internalActionsState[action.label] || false
|
|
8407
|
+
}));
|
|
8442
8408
|
}, /* @ts-ignore */
|
|
8443
8409
|
...(ngDevMode ? [{ debugName: "reactiveActions" }] : /* istanbul ignore next */ []));
|
|
8444
8410
|
isSingleActionFullWidth = computed(() => {
|
|
@@ -8452,10 +8418,6 @@ class NeuralDialogComponent {
|
|
|
8452
8418
|
return;
|
|
8453
8419
|
}
|
|
8454
8420
|
this.internalActionsState[action.label] = true;
|
|
8455
|
-
// trigger change detection by recreating the reference since it's a signal reading internalState
|
|
8456
|
-
// Or we could just use a separate mechanism. Let's mutate and trust Angular template binding if we update state.
|
|
8457
|
-
// In signal components, we might need a signal for internalActionsState
|
|
8458
|
-
// For now, let's just await
|
|
8459
8421
|
try {
|
|
8460
8422
|
await action.onClick({ close: () => this.close() });
|
|
8461
8423
|
}
|
|
@@ -8463,87 +8425,58 @@ class NeuralDialogComponent {
|
|
|
8463
8425
|
this.internalActionsState[action.label] = false;
|
|
8464
8426
|
}
|
|
8465
8427
|
}
|
|
8466
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [
|
|
8467
|
-
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" },
|
|
8468
|
-
|
|
8469
|
-
<div
|
|
8470
|
-
class="fixed inset-0
|
|
8471
|
-
|
|
8472
|
-
|
|
8473
|
-
|
|
8474
|
-
|
|
8475
|
-
[class]="dialogPositionClasses()"
|
|
8476
|
-
[style]="dialogPositionStyles()"
|
|
8477
|
-
>
|
|
8478
|
-
<div
|
|
8479
|
-
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"
|
|
8480
|
-
[class]="sizeClass()"
|
|
8481
|
-
>
|
|
8428
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8429
|
+
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" }, ngImport: i0, template: `
|
|
8430
|
+
@if (openModel()) {
|
|
8431
|
+
<div class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)" (keydown.escape)="closeBare()" tabindex="-1">
|
|
8432
|
+
<div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
|
|
8433
|
+
|
|
8434
|
+
<div class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center" [class]="dialogPositionClasses()" [style]="dialogPositionStyles()">
|
|
8435
|
+
<div 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" [class]="sizeClass()">
|
|
8436
|
+
|
|
8482
8437
|
@if (bare()) {
|
|
8483
8438
|
<ng-content></ng-content>
|
|
8484
8439
|
} @else {
|
|
8440
|
+
<!-- Diseño estándar con Header y Body -->
|
|
8485
8441
|
<div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
|
|
8486
8442
|
<div class="flex">
|
|
8487
|
-
|
|
8488
|
-
|
|
8489
|
-
<
|
|
8490
|
-
|
|
8491
|
-
|
|
8492
|
-
|
|
8493
|
-
|
|
8494
|
-
|
|
8495
|
-
|
|
8496
|
-
|
|
8497
|
-
</div>
|
|
8498
|
-
}
|
|
8499
|
-
<header class="flex-1">
|
|
8500
|
-
@if (hasTitleSlot()) {
|
|
8501
|
-
<ng-content select="[title]"></ng-content>
|
|
8502
|
-
} @else if (title()) {
|
|
8503
|
-
<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
|
|
8504
|
-
{{ title() }}
|
|
8505
|
-
</h3>
|
|
8506
|
-
}
|
|
8507
|
-
</header>
|
|
8508
|
-
</div>
|
|
8509
|
-
@if (showCloseButton()) {
|
|
8510
|
-
<neural-button variant="ghost" label="Close" (click)="close()">
|
|
8511
|
-
<span icon class="lucide-x size-4 text-ink-gray-9"></span>
|
|
8512
|
-
</neural-button>
|
|
8513
|
-
}
|
|
8514
|
-
</div>
|
|
8515
|
-
}
|
|
8516
|
-
|
|
8517
|
-
@if (hasDefaultSlot()) {
|
|
8518
|
-
<ng-content></ng-content>
|
|
8519
|
-
} @else if (message()) {
|
|
8520
|
-
<p class="text-p-base text-ink-gray-7">
|
|
8521
|
-
{{ message() }}
|
|
8522
|
-
</p>
|
|
8443
|
+
@if (icon()) {
|
|
8444
|
+
<div class="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10" [class]="dialogIconBgClasses()">
|
|
8445
|
+
<span icon [class]="(iconName() || '') + ' size-5 ' + dialogIconClasses()"></span>
|
|
8446
|
+
</div>
|
|
8447
|
+
}
|
|
8448
|
+
<header class="flex-1" [class.ml-4]="icon()">
|
|
8449
|
+
@if (hasTitleSlot()) {
|
|
8450
|
+
<ng-content select="[title]"></ng-content>
|
|
8451
|
+
} @else if (title()) {
|
|
8452
|
+
<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">{{ title() }}</h3>
|
|
8523
8453
|
}
|
|
8524
|
-
</
|
|
8454
|
+
</header>
|
|
8455
|
+
@if (showCloseButton()) {
|
|
8456
|
+
<neural-button variant="ghost" [iconOnly]="true" icon="lucide-x" (clicked)="closeBare()" class="-mt-2 -mr-2"></neural-button>
|
|
8457
|
+
}
|
|
8458
|
+
</div>
|
|
8459
|
+
|
|
8460
|
+
<div [class]="icon() ? 'ml-14 mt-2' : 'mt-3'">
|
|
8461
|
+
@if (hasDefaultSlot()) {
|
|
8462
|
+
<ng-content></ng-content>
|
|
8463
|
+
} @else if (message()) {
|
|
8464
|
+
<p class="text-p-base text-ink-gray-7">{{ message() }}</p>
|
|
8465
|
+
}
|
|
8525
8466
|
</div>
|
|
8526
8467
|
</div>
|
|
8527
|
-
|
|
8468
|
+
|
|
8469
|
+
<!-- Acciones Footer -->
|
|
8528
8470
|
@if (reactiveActions().length || hasActionsSlot()) {
|
|
8529
|
-
<div class="px-4 pb-7 pt-4 sm:px-6">
|
|
8471
|
+
<div class="px-4 pb-7 pt-4 sm:px-6 bg-surface-gray-1 border-t border-outline-gray-2">
|
|
8530
8472
|
@if (hasActionsSlot()) {
|
|
8531
8473
|
<ng-content select="[actions]"></ng-content>
|
|
8532
8474
|
} @else {
|
|
8533
8475
|
<div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
|
|
8534
8476
|
@for (action of reactiveActions(); track action.label) {
|
|
8535
|
-
<neural-button
|
|
8536
|
-
class="w-full sm:w-auto"
|
|
8537
|
-
[disabled]="action.disabled || false"
|
|
8538
|
-
[loading]="action.loading || false"
|
|
8539
|
-
[variant]="action.variant || 'solid'"
|
|
8540
|
-
[theme]="action.theme || 'gray'"
|
|
8541
|
-
(click)="onActionClick(action)"
|
|
8542
|
-
>
|
|
8477
|
+
<neural-button class="w-full sm:w-auto" [disabled]="action.disabled || false" [loading]="action.loading || false" [variant]="action.variant || 'solid'" [theme]="action.theme || 'gray'" (clicked)="onActionClick(action)">
|
|
8543
8478
|
{{ action.label }}
|
|
8544
|
-
@if (action.icon) {
|
|
8545
|
-
<span icon [class]="action.icon + ' size-4'"></span>
|
|
8546
|
-
}
|
|
8479
|
+
@if (action.icon) { <span icon [class]="action.icon + ' size-4'"></span> }
|
|
8547
8480
|
</neural-button>
|
|
8548
8481
|
}
|
|
8549
8482
|
</div>
|
|
@@ -8551,109 +8484,69 @@ class NeuralDialogComponent {
|
|
|
8551
8484
|
</div>
|
|
8552
8485
|
}
|
|
8553
8486
|
}
|
|
8554
|
-
|
|
8555
|
-
@if (showCloseButton() && !showHeader() && !bare()) {
|
|
8556
|
-
<neural-button
|
|
8557
|
-
class="absolute right-4 top-4 z-10"
|
|
8558
|
-
variant="ghost"
|
|
8559
|
-
label="Close"
|
|
8560
|
-
(click)="close()"
|
|
8561
|
-
>
|
|
8562
|
-
<span icon class="lucide-x size-4 text-ink-gray-9"></span>
|
|
8563
|
-
</neural-button>
|
|
8564
|
-
}
|
|
8565
8487
|
</div>
|
|
8566
8488
|
</div>
|
|
8567
8489
|
</div>
|
|
8568
|
-
|
|
8569
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "
|
|
8490
|
+
}
|
|
8491
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
|
|
8570
8492
|
}
|
|
8571
8493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
|
|
8572
8494
|
type: Component,
|
|
8573
8495
|
args: [{
|
|
8574
8496
|
selector: 'neural-dialog',
|
|
8575
8497
|
standalone: true,
|
|
8576
|
-
imports: [CommonModule,
|
|
8498
|
+
imports: [CommonModule, NeuralButtonComponent],
|
|
8577
8499
|
template: `
|
|
8578
|
-
|
|
8579
|
-
<div
|
|
8580
|
-
class="fixed inset-0
|
|
8581
|
-
|
|
8582
|
-
|
|
8583
|
-
|
|
8584
|
-
|
|
8585
|
-
[class]="dialogPositionClasses()"
|
|
8586
|
-
[style]="dialogPositionStyles()"
|
|
8587
|
-
>
|
|
8588
|
-
<div
|
|
8589
|
-
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"
|
|
8590
|
-
[class]="sizeClass()"
|
|
8591
|
-
>
|
|
8500
|
+
@if (openModel()) {
|
|
8501
|
+
<div class="fixed inset-0 z-[1000] overflow-y-auto dialog-scroll-container" (click)="onContainerClick($event)" (keydown.escape)="closeBare()" tabindex="-1">
|
|
8502
|
+
<div class="fixed inset-0 bg-black-overlay-200 transition-opacity duration-150 dialog-backdrop"></div>
|
|
8503
|
+
|
|
8504
|
+
<div class="relative flex min-h-screen flex-col items-center px-4 py-4 text-center" [class]="dialogPositionClasses()" [style]="dialogPositionStyles()">
|
|
8505
|
+
<div 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" [class]="sizeClass()">
|
|
8506
|
+
|
|
8592
8507
|
@if (bare()) {
|
|
8593
8508
|
<ng-content></ng-content>
|
|
8594
8509
|
} @else {
|
|
8510
|
+
<!-- Diseño estándar con Header y Body -->
|
|
8595
8511
|
<div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
|
|
8596
8512
|
<div class="flex">
|
|
8597
|
-
|
|
8598
|
-
|
|
8599
|
-
<
|
|
8600
|
-
|
|
8601
|
-
|
|
8602
|
-
|
|
8603
|
-
|
|
8604
|
-
|
|
8605
|
-
|
|
8606
|
-
|
|
8607
|
-
</div>
|
|
8608
|
-
}
|
|
8609
|
-
<header class="flex-1">
|
|
8610
|
-
@if (hasTitleSlot()) {
|
|
8611
|
-
<ng-content select="[title]"></ng-content>
|
|
8612
|
-
} @else if (title()) {
|
|
8613
|
-
<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
|
|
8614
|
-
{{ title() }}
|
|
8615
|
-
</h3>
|
|
8616
|
-
}
|
|
8617
|
-
</header>
|
|
8618
|
-
</div>
|
|
8619
|
-
@if (showCloseButton()) {
|
|
8620
|
-
<neural-button variant="ghost" label="Close" (click)="close()">
|
|
8621
|
-
<span icon class="lucide-x size-4 text-ink-gray-9"></span>
|
|
8622
|
-
</neural-button>
|
|
8623
|
-
}
|
|
8624
|
-
</div>
|
|
8625
|
-
}
|
|
8626
|
-
|
|
8627
|
-
@if (hasDefaultSlot()) {
|
|
8628
|
-
<ng-content></ng-content>
|
|
8629
|
-
} @else if (message()) {
|
|
8630
|
-
<p class="text-p-base text-ink-gray-7">
|
|
8631
|
-
{{ message() }}
|
|
8632
|
-
</p>
|
|
8513
|
+
@if (icon()) {
|
|
8514
|
+
<div class="mx-auto flex size-10 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10" [class]="dialogIconBgClasses()">
|
|
8515
|
+
<span icon [class]="(iconName() || '') + ' size-5 ' + dialogIconClasses()"></span>
|
|
8516
|
+
</div>
|
|
8517
|
+
}
|
|
8518
|
+
<header class="flex-1" [class.ml-4]="icon()">
|
|
8519
|
+
@if (hasTitleSlot()) {
|
|
8520
|
+
<ng-content select="[title]"></ng-content>
|
|
8521
|
+
} @else if (title()) {
|
|
8522
|
+
<h3 class="text-2xl-semibold leading-6 text-ink-gray-8">{{ title() }}</h3>
|
|
8633
8523
|
}
|
|
8634
|
-
</
|
|
8524
|
+
</header>
|
|
8525
|
+
@if (showCloseButton()) {
|
|
8526
|
+
<neural-button variant="ghost" [iconOnly]="true" icon="lucide-x" (clicked)="closeBare()" class="-mt-2 -mr-2"></neural-button>
|
|
8527
|
+
}
|
|
8528
|
+
</div>
|
|
8529
|
+
|
|
8530
|
+
<div [class]="icon() ? 'ml-14 mt-2' : 'mt-3'">
|
|
8531
|
+
@if (hasDefaultSlot()) {
|
|
8532
|
+
<ng-content></ng-content>
|
|
8533
|
+
} @else if (message()) {
|
|
8534
|
+
<p class="text-p-base text-ink-gray-7">{{ message() }}</p>
|
|
8535
|
+
}
|
|
8635
8536
|
</div>
|
|
8636
8537
|
</div>
|
|
8637
|
-
|
|
8538
|
+
|
|
8539
|
+
<!-- Acciones Footer -->
|
|
8638
8540
|
@if (reactiveActions().length || hasActionsSlot()) {
|
|
8639
|
-
<div class="px-4 pb-7 pt-4 sm:px-6">
|
|
8541
|
+
<div class="px-4 pb-7 pt-4 sm:px-6 bg-surface-gray-1 border-t border-outline-gray-2">
|
|
8640
8542
|
@if (hasActionsSlot()) {
|
|
8641
8543
|
<ng-content select="[actions]"></ng-content>
|
|
8642
8544
|
} @else {
|
|
8643
8545
|
<div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
|
|
8644
8546
|
@for (action of reactiveActions(); track action.label) {
|
|
8645
|
-
<neural-button
|
|
8646
|
-
class="w-full sm:w-auto"
|
|
8647
|
-
[disabled]="action.disabled || false"
|
|
8648
|
-
[loading]="action.loading || false"
|
|
8649
|
-
[variant]="action.variant || 'solid'"
|
|
8650
|
-
[theme]="action.theme || 'gray'"
|
|
8651
|
-
(click)="onActionClick(action)"
|
|
8652
|
-
>
|
|
8547
|
+
<neural-button class="w-full sm:w-auto" [disabled]="action.disabled || false" [loading]="action.loading || false" [variant]="action.variant || 'solid'" [theme]="action.theme || 'gray'" (clicked)="onActionClick(action)">
|
|
8653
8548
|
{{ action.label }}
|
|
8654
|
-
@if (action.icon) {
|
|
8655
|
-
<span icon [class]="action.icon + ' size-4'"></span>
|
|
8656
|
-
}
|
|
8549
|
+
@if (action.icon) { <span icon [class]="action.icon + ' size-4'"></span> }
|
|
8657
8550
|
</neural-button>
|
|
8658
8551
|
}
|
|
8659
8552
|
</div>
|
|
@@ -8661,27 +8554,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8661
8554
|
</div>
|
|
8662
8555
|
}
|
|
8663
8556
|
}
|
|
8664
|
-
|
|
8665
|
-
@if (showCloseButton() && !showHeader() && !bare()) {
|
|
8666
|
-
<neural-button
|
|
8667
|
-
class="absolute right-4 top-4 z-10"
|
|
8668
|
-
variant="ghost"
|
|
8669
|
-
label="Close"
|
|
8670
|
-
(click)="close()"
|
|
8671
|
-
>
|
|
8672
|
-
<span icon class="lucide-x size-4 text-ink-gray-9"></span>
|
|
8673
|
-
</neural-button>
|
|
8674
|
-
}
|
|
8675
8557
|
</div>
|
|
8676
8558
|
</div>
|
|
8677
8559
|
</div>
|
|
8678
|
-
|
|
8560
|
+
}
|
|
8679
8561
|
`
|
|
8680
8562
|
}]
|
|
8681
|
-
}], ctorParameters: () => [
|
|
8682
|
-
type: ViewChild,
|
|
8683
|
-
args: ['dialogTemplate']
|
|
8684
|
-
}] } });
|
|
8563
|
+
}], ctorParameters: () => [], 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 }] }] } });
|
|
8685
8564
|
|
|
8686
8565
|
class NeuralAwesomeBarComponent {
|
|
8687
8566
|
searchInput;
|
|
@@ -8781,14 +8660,23 @@ class NeuralAwesomeBarComponent {
|
|
|
8781
8660
|
(ngModelChange)="onQueryChange($event)"
|
|
8782
8661
|
(keydown)="handleKeydown($event)"
|
|
8783
8662
|
/>
|
|
8784
|
-
|
|
8785
|
-
|
|
8786
|
-
class="flex items-center justify-center size-
|
|
8787
|
-
|
|
8788
|
-
|
|
8789
|
-
<
|
|
8663
|
+
<div class="flex items-center gap-1 ml-3 text-ink-gray-4">
|
|
8664
|
+
@if (query()) {
|
|
8665
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="clearQuery()">
|
|
8666
|
+
<i class="lucide-delete size-4"></i>
|
|
8667
|
+
</button>
|
|
8668
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1"></div>
|
|
8669
|
+
}
|
|
8670
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
|
|
8671
|
+
<i class="lucide-settings size-4"></i>
|
|
8790
8672
|
</button>
|
|
8791
|
-
|
|
8673
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
|
|
8674
|
+
<i class="lucide-maximize-2 size-4"></i>
|
|
8675
|
+
</button>
|
|
8676
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="openModel.set(false)">
|
|
8677
|
+
<i class="lucide-x size-4"></i>
|
|
8678
|
+
</button>
|
|
8679
|
+
</div>
|
|
8792
8680
|
</div>
|
|
8793
8681
|
|
|
8794
8682
|
<!-- Filters (Chips) -->
|
|
@@ -8840,12 +8728,17 @@ class NeuralAwesomeBarComponent {
|
|
|
8840
8728
|
<!-- Empty State -->
|
|
8841
8729
|
<div class="flex flex-col items-center justify-center py-16 px-4 text-center">
|
|
8842
8730
|
<div class="size-16 rounded-full bg-surface-gray-2 flex items-center justify-center mb-4">
|
|
8843
|
-
<i class="lucide-search size-8 text-ink-gray-4"></i>
|
|
8731
|
+
<i class="lucide-clipboard-search size-8 text-ink-gray-4"></i>
|
|
8844
8732
|
</div>
|
|
8845
8733
|
<h3 class="text-base font-semibold text-ink-gray-9 mb-1">Buscar por cualquier cosa</h3>
|
|
8846
|
-
<p class="text-sm text-ink-gray-5 max-w-sm">
|
|
8847
|
-
|
|
8734
|
+
<p class="text-sm text-ink-gray-5 max-w-sm mb-4">
|
|
8735
|
+
Use ampersand to match multiple terms (ej. Marie&John)
|
|
8848
8736
|
</p>
|
|
8737
|
+
<div class="flex items-center gap-1.5 text-xs text-ink-gray-5">
|
|
8738
|
+
<kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">⌘</kbd>
|
|
8739
|
+
<kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">K</kbd>
|
|
8740
|
+
<span>to open Awesome Bar</span>
|
|
8741
|
+
</div>
|
|
8849
8742
|
</div>
|
|
8850
8743
|
} @else {
|
|
8851
8744
|
<!-- Results Projection -->
|
|
@@ -8901,14 +8794,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8901
8794
|
(ngModelChange)="onQueryChange($event)"
|
|
8902
8795
|
(keydown)="handleKeydown($event)"
|
|
8903
8796
|
/>
|
|
8904
|
-
|
|
8905
|
-
|
|
8906
|
-
class="flex items-center justify-center size-
|
|
8907
|
-
|
|
8908
|
-
|
|
8909
|
-
<
|
|
8797
|
+
<div class="flex items-center gap-1 ml-3 text-ink-gray-4">
|
|
8798
|
+
@if (query()) {
|
|
8799
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="clearQuery()">
|
|
8800
|
+
<i class="lucide-delete size-4"></i>
|
|
8801
|
+
</button>
|
|
8802
|
+
<div class="w-px h-4 bg-outline-gray-2 mx-1"></div>
|
|
8803
|
+
}
|
|
8804
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
|
|
8805
|
+
<i class="lucide-settings size-4"></i>
|
|
8910
8806
|
</button>
|
|
8911
|
-
|
|
8807
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7">
|
|
8808
|
+
<i class="lucide-maximize-2 size-4"></i>
|
|
8809
|
+
</button>
|
|
8810
|
+
<button class="flex items-center justify-center size-7 rounded hover:bg-surface-gray-2 transition-colors text-ink-gray-5 hover:text-ink-gray-7" (click)="openModel.set(false)">
|
|
8811
|
+
<i class="lucide-x size-4"></i>
|
|
8812
|
+
</button>
|
|
8813
|
+
</div>
|
|
8912
8814
|
</div>
|
|
8913
8815
|
|
|
8914
8816
|
<!-- Filters (Chips) -->
|
|
@@ -8960,12 +8862,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8960
8862
|
<!-- Empty State -->
|
|
8961
8863
|
<div class="flex flex-col items-center justify-center py-16 px-4 text-center">
|
|
8962
8864
|
<div class="size-16 rounded-full bg-surface-gray-2 flex items-center justify-center mb-4">
|
|
8963
|
-
<i class="lucide-search size-8 text-ink-gray-4"></i>
|
|
8865
|
+
<i class="lucide-clipboard-search size-8 text-ink-gray-4"></i>
|
|
8964
8866
|
</div>
|
|
8965
8867
|
<h3 class="text-base font-semibold text-ink-gray-9 mb-1">Buscar por cualquier cosa</h3>
|
|
8966
|
-
<p class="text-sm text-ink-gray-5 max-w-sm">
|
|
8967
|
-
|
|
8868
|
+
<p class="text-sm text-ink-gray-5 max-w-sm mb-4">
|
|
8869
|
+
Use ampersand to match multiple terms (ej. Marie&John)
|
|
8968
8870
|
</p>
|
|
8871
|
+
<div class="flex items-center gap-1.5 text-xs text-ink-gray-5">
|
|
8872
|
+
<kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">⌘</kbd>
|
|
8873
|
+
<kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">K</kbd>
|
|
8874
|
+
<span>to open Awesome Bar</span>
|
|
8875
|
+
</div>
|
|
8969
8876
|
</div>
|
|
8970
8877
|
} @else {
|
|
8971
8878
|
<!-- Results Projection -->
|