orbiq-neural-ui-kit 1.0.13 → 1.0.15

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

@@ -12534,12 +12534,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class NeuralNotificationCenterComponent {
     open = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    position = input('sidebar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     onClose = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NeuralNotificationCenterComponent, isStandalone: true, selector: "neural-notification-center", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NeuralNotificationCenterComponent, isStandalone: true, selector: "neural-notification-center", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
     <div
-      class="absolute top-0 left-full z-50 flex h-full w-[380px] flex-col bg-surface-base border-r border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
-      [class]="open() ? 'translate-x-0' : '-translate-x-full opacity-0 pointer-events-none'"
+      class="top-0 z-50 flex h-full w-[380px] flex-col bg-surface-base border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
+      [ngClass]="{
+        'absolute left-full border-r': position() === 'sidebar',
+        'fixed right-0 border-l': position() === 'right',
+        'translate-x-0': open(),
+        '-translate-x-full opacity-0 pointer-events-none': !open() && position() === 'sidebar',
+        'translate-x-full opacity-0 pointer-events-none': !open() && position() === 'right'
+      }"
     >
       <div class="flex items-center justify-between border-b border-outline-gray-2 px-4 pt-3 pb-0">
         <ng-content select="[header-tabs]"></ng-content>
@@ -12554,12 +12562,13 @@ class NeuralNotificationCenterComponent {
         </div>
       </div>
 
-      <div class="flex-1 overflow-y-auto bg-surface-base p-4">
-        <h3 class="text-[13px] font-medium text-ink-gray-5 mb-4 uppercase tracking-wider">Qué hay de nuevo</h3>
-        <ng-content></ng-content>
+      <div class="flex-1 flex flex-col min-h-0 overflow-hidden bg-surface-base">
+        <div class="flex-1 overflow-y-auto p-4">
+          <ng-content></ng-content>
+        </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, decorators: [{
             type: Component,
@@ -12569,8 +12578,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     imports: [CommonModule],
                     template: `
     <div
-      class="absolute top-0 left-full z-50 flex h-full w-[380px] flex-col bg-surface-base border-r border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
-      [class]="open() ? 'translate-x-0' : '-translate-x-full opacity-0 pointer-events-none'"
+      class="top-0 z-50 flex h-full w-[380px] flex-col bg-surface-base border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
+      [ngClass]="{
+        'absolute left-full border-r': position() === 'sidebar',
+        'fixed right-0 border-l': position() === 'right',
+        'translate-x-0': open(),
+        '-translate-x-full opacity-0 pointer-events-none': !open() && position() === 'sidebar',
+        'translate-x-full opacity-0 pointer-events-none': !open() && position() === 'right'
+      }"
     >
       <div class="flex items-center justify-between border-b border-outline-gray-2 px-4 pt-3 pb-0">
         <ng-content select="[header-tabs]"></ng-content>
@@ -12585,14 +12600,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </div>
       </div>
 
-      <div class="flex-1 overflow-y-auto bg-surface-base p-4">
-        <h3 class="text-[13px] font-medium text-ink-gray-5 mb-4 uppercase tracking-wider">Qué hay de nuevo</h3>
-        <ng-content></ng-content>
+      <div class="flex-1 flex flex-col min-h-0 overflow-hidden bg-surface-base">
+        <div class="flex-1 overflow-y-auto p-4">
+          <ng-content></ng-content>
+        </div>
       </div>
     </div>
   `
                 }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], onClose: [{
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], onClose: [{
                 type: Output
             }] } });