orbiq-neural-ui-kit 1.1.2 → 1.1.4

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -11470,6 +11470,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hasLabelSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLabelSlot", required: false }] }], hasDescriptionSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDescriptionSlot", required: false }] }] } });
 
+class NeuralDrawerComponent {
+    dialog;
+    openModel = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
+    title = input('Información', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    position = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    showCloseButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    onClose = new EventEmitter();
+    drawerTemplate;
+    dialogRef = null;
+    constructor(dialog) {
+        this.dialog = dialog;
+        effect(() => {
+            const isOpen = this.openModel();
+            if (isOpen && !this.dialogRef && this.drawerTemplate) {
+                this.openDrawer();
+            }
+            else if (!isOpen && this.dialogRef) {
+                this.dialogRef.close();
+                this.dialogRef = null;
+            }
+        });
+    }
+    openDrawer() {
+        this.dialogRef = this.dialog.open(this.drawerTemplate, {
+            disableClose: !this.dismissible(),
+            backdropClass: 'bg-black-overlay-200',
+            // Fix it to the right or left edge taking full height
+            panelClass: ['fixed', 'inset-y-0', this.position() === 'right' ? 'right-0' : 'left-0', 'h-full', 'bg-transparent', 'outline-none', 'z-50'],
+            hasBackdrop: true,
+        });
+        this.dialogRef.closed.subscribe(() => {
+            this.dialogRef = null;
+            if (this.openModel()) {
+                this.openModel.set(false);
+            }
+            this.onClose.emit();
+        });
+    }
+    close() {
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+    ngOnDestroy() {
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+    sizeClass = computed(() => {
+        const map = {
+            sm: 'w-64', // 256px
+            md: 'w-80', // 320px
+            lg: 'w-96', // 384px
+            xl: 'w-[400px]', // 400px
+            full: 'w-screen'
+        };
+        return map[this.size()] || 'w-80';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDrawerComponent, deps: [{ token: i1$3.Dialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDrawerComponent, isStandalone: true, selector: "neural-drawer", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange", onClose: "onClose" }, viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true }], ngImport: i0, template: `
+    <ng-template #drawerTemplate>
+      <div 
+        class="h-full bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2"
+        [class.border-l]="position() === 'right'"
+        [class.border-r]="position() === 'left'"
+        [class]="sizeClass()"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between px-6 py-4 border-b border-outline-gray-2 shrink-0">
+          <h2 class="text-lg font-semibold text-ink-gray-9">{{ title() }}</h2>
+          @if (showCloseButton()) {
+            <button 
+              class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-5 hover:text-ink-gray-9 transition-colors"
+              (click)="close()"
+              title="Cerrar"
+            >
+              <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
+            </button>
+          }
+        </div>
+
+        <!-- Body -->
+        <div class="flex-1 overflow-y-auto p-6 text-sm font-normal text-ink-gray-7">
+          <ng-content></ng-content>
+        </div>
+
+        <!-- Footer (Optional) -->
+        <div class="shrink-0">
+          <ng-content select="[footer]"></ng-content>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDrawerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'neural-drawer',
+                    standalone: true,
+                    imports: [CommonModule, DialogModule],
+                    template: `
+    <ng-template #drawerTemplate>
+      <div 
+        class="h-full bg-white shadow-2xl flex flex-col outline-none border-outline-gray-2"
+        [class.border-l]="position() === 'right'"
+        [class.border-r]="position() === 'left'"
+        [class]="sizeClass()"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between px-6 py-4 border-b border-outline-gray-2 shrink-0">
+          <h2 class="text-lg font-semibold text-ink-gray-9">{{ title() }}</h2>
+          @if (showCloseButton()) {
+            <button 
+              class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-5 hover:text-ink-gray-9 transition-colors"
+              (click)="close()"
+              title="Cerrar"
+            >
+              <i class="lucide-x size-[18px]" style="stroke-width: 1.5px;"></i>
+            </button>
+          }
+        </div>
+
+        <!-- Body -->
+        <div class="flex-1 overflow-y-auto p-6 text-sm font-normal text-ink-gray-7">
+          <ng-content></ng-content>
+        </div>
+
+        <!-- Footer (Optional) -->
+        <div class="shrink-0">
+          <ng-content select="[footer]"></ng-content>
+        </div>
+      </div>
+    </ng-template>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Dialog }], 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 }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], onClose: [{
+                type: Output
+            }], drawerTemplate: [{
+                type: ViewChild,
+                args: ['drawerTemplate']
+            }] } });
+
 class NeuralFileUploaderComponent {
     fileTypes = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fileTypes" }] : /* istanbul ignore next */ []));
@@ -15143,5 +15294,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
+export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDrawerComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
 //# sourceMappingURL=orbiq-neural-ui-kit.mjs.map