orbiq-neural-ui-kit 1.2.75 → 1.2.76

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

@@ -16098,50 +16098,23 @@ class NeuralAuthShellComponent {
     ...(ngDevMode ? [{ debugName: "logoIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAuthShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralAuthShellComponent, isStandalone: true, selector: "neural-auth-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitlePrefix: { classPropertyName: "subtitlePrefix", publicName: "subtitlePrefix", isSignal: true, isRequired: false, transformFunction: null }, subtitleLinkText: { classPropertyName: "subtitleLinkText", publicName: "subtitleLinkText", isSignal: true, isRequired: false, transformFunction: null }, subtitleLinkHref: { classPropertyName: "subtitleLinkHref", publicName: "subtitleLinkHref", isSignal: true, isRequired: false, transformFunction: null }, logoIcon: { classPropertyName: "logoIcon", publicName: "logoIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div data-slot="auth-shell" class="min-h-screen flex bg-surface-base font-sans">
-      <!-- Branding / Image Side (Left) -->
-      <div class="hidden lg:flex lg:w-1/2 xl:w-7/12 relative bg-surface-gray-2 dark:bg-surface-gray-8 items-center justify-center overflow-hidden">
-        <!-- Dynamic Background Gradient -->
-        <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/5"></div>
+    <div data-slot="auth-shell" class="min-h-screen flex items-center justify-center bg-white dark:bg-surface-gray-8 font-sans py-12 px-4 sm:px-6 lg:px-8">
+      <div class="w-full max-w-[360px]">
+        @if (logoIcon()) {
+          <div class="mb-8 flex items-center justify-center size-12 rounded-lg bg-gray-900 dark:bg-black shadow-sm">
+            <neural-icon [name]="logoIcon()" class="size-6 text-white"></neural-icon>
+          </div>
+        }
         
-        <div class="relative z-10 p-12 text-center flex flex-col items-center max-w-lg">
-          @if (logoIcon()) {
-            <div class="size-16 mb-8 flex items-center justify-center rounded-2xl bg-white/50 dark:bg-black/20 backdrop-blur-md shadow-sm border border-white/40 dark:border-white/10">
-              <neural-icon [name]="logoIcon()" class="size-8 text-ink-base"></neural-icon>
-            </div>
+        <h1 class="text-[28px] leading-tight font-bold tracking-tight text-ink-base mb-2">{{ title() }}</h1>
+        <p class="text-base text-ink-muted mb-8">
+          {{ subtitlePrefix() }}
+          @if (subtitleLinkText() && subtitleLinkHref()) {
+            <a [href]="subtitleLinkHref()" class="font-medium text-ink-base hover:underline transition-colors">{{ subtitleLinkText() }}</a>
           }
-          <h1 class="text-4xl font-bold tracking-tight text-ink-base mb-4">{{ title() }}</h1>
-          <p class="text-lg text-ink-muted">
-            {{ subtitlePrefix() }}
-            @if (subtitleLinkText() && subtitleLinkHref()) {
-              <a [href]="subtitleLinkHref()" class="font-semibold text-primary hover:text-primary-dark transition-colors">{{ subtitleLinkText() }}</a>
-            }
-          </p>
-        </div>
-      </div>
-
-      <!-- Form Side (Right) -->
-      <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-20 xl:px-24 bg-surface-base lg:border-l border-outline-base shadow-2xl relative z-20">
-        <div class="mx-auto w-full max-w-sm lg:max-w-md">
-          <!-- Mobile Header (Visible only on small screens) -->
-          <div class="lg:hidden text-center mb-10 flex flex-col items-center">
-            @if (logoIcon()) {
-              <div class="size-12 mb-6 flex items-center justify-center rounded-xl bg-white dark:bg-surface-gray-8 shadow-sm border border-outline-base">
-                <neural-icon [name]="logoIcon()" class="size-6 text-ink-base"></neural-icon>
-              </div>
-            }
-            <h2 class="text-3xl font-bold tracking-tight text-ink-base">{{ title() }}</h2>
-            <p class="mt-2 text-sm text-ink-muted">
-              {{ subtitlePrefix() }}
-              @if (subtitleLinkText() && subtitleLinkHref()) {
-                <a [href]="subtitleLinkHref()" class="font-semibold text-primary hover:text-primary-dark transition-colors">{{ subtitleLinkText() }}</a>
-              }
-            </p>
-          </div>
-          
-          <!-- Content Projection for the form -->
-          <ng-content></ng-content>
-        </div>
+        </p>
+        
+        <ng-content></ng-content>
       </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralIconComponent, selector: "neural-icon", inputs: ["name"] }] });
@@ -16153,50 +16126,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule, NeuralIconComponent],
                     template: `
-    <div data-slot="auth-shell" class="min-h-screen flex bg-surface-base font-sans">
-      <!-- Branding / Image Side (Left) -->
-      <div class="hidden lg:flex lg:w-1/2 xl:w-7/12 relative bg-surface-gray-2 dark:bg-surface-gray-8 items-center justify-center overflow-hidden">
-        <!-- Dynamic Background Gradient -->
-        <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/5"></div>
+    <div data-slot="auth-shell" class="min-h-screen flex items-center justify-center bg-white dark:bg-surface-gray-8 font-sans py-12 px-4 sm:px-6 lg:px-8">
+      <div class="w-full max-w-[360px]">
+        @if (logoIcon()) {
+          <div class="mb-8 flex items-center justify-center size-12 rounded-lg bg-gray-900 dark:bg-black shadow-sm">
+            <neural-icon [name]="logoIcon()" class="size-6 text-white"></neural-icon>
+          </div>
+        }
         
-        <div class="relative z-10 p-12 text-center flex flex-col items-center max-w-lg">
-          @if (logoIcon()) {
-            <div class="size-16 mb-8 flex items-center justify-center rounded-2xl bg-white/50 dark:bg-black/20 backdrop-blur-md shadow-sm border border-white/40 dark:border-white/10">
-              <neural-icon [name]="logoIcon()" class="size-8 text-ink-base"></neural-icon>
-            </div>
+        <h1 class="text-[28px] leading-tight font-bold tracking-tight text-ink-base mb-2">{{ title() }}</h1>
+        <p class="text-base text-ink-muted mb-8">
+          {{ subtitlePrefix() }}
+          @if (subtitleLinkText() && subtitleLinkHref()) {
+            <a [href]="subtitleLinkHref()" class="font-medium text-ink-base hover:underline transition-colors">{{ subtitleLinkText() }}</a>
           }
-          <h1 class="text-4xl font-bold tracking-tight text-ink-base mb-4">{{ title() }}</h1>
-          <p class="text-lg text-ink-muted">
-            {{ subtitlePrefix() }}
-            @if (subtitleLinkText() && subtitleLinkHref()) {
-              <a [href]="subtitleLinkHref()" class="font-semibold text-primary hover:text-primary-dark transition-colors">{{ subtitleLinkText() }}</a>
-            }
-          </p>
-        </div>
-      </div>
-
-      <!-- Form Side (Right) -->
-      <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-20 xl:px-24 bg-surface-base lg:border-l border-outline-base shadow-2xl relative z-20">
-        <div class="mx-auto w-full max-w-sm lg:max-w-md">
-          <!-- Mobile Header (Visible only on small screens) -->
-          <div class="lg:hidden text-center mb-10 flex flex-col items-center">
-            @if (logoIcon()) {
-              <div class="size-12 mb-6 flex items-center justify-center rounded-xl bg-white dark:bg-surface-gray-8 shadow-sm border border-outline-base">
-                <neural-icon [name]="logoIcon()" class="size-6 text-ink-base"></neural-icon>
-              </div>
-            }
-            <h2 class="text-3xl font-bold tracking-tight text-ink-base">{{ title() }}</h2>
-            <p class="mt-2 text-sm text-ink-muted">
-              {{ subtitlePrefix() }}
-              @if (subtitleLinkText() && subtitleLinkHref()) {
-                <a [href]="subtitleLinkHref()" class="font-semibold text-primary hover:text-primary-dark transition-colors">{{ subtitleLinkText() }}</a>
-              }
-            </p>
-          </div>
-          
-          <!-- Content Projection for the form -->
-          <ng-content></ng-content>
-        </div>
+        </p>
+        
+        <ng-content></ng-content>
       </div>
     </div>
   `