feat(docs): add size demo

Author: MGREMY

apps/docs/src/app/frames/iframe-cached-src.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, inject, Input } from '@angular/core';
+
+@Directive({
+  selector: 'iframe[flowbiteIframeChachedSrc]',
+  standalone: true,
+})
+export class IframeCachedSrcDirective {
+  protected elementRef = inject(ElementRef);
+
+  @Input()
+  public get cachedSrc(): string {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return this.elementRef.nativeElement.src;
+  }
+  public set cachedSrc(value: string) {
+    if (this.elementRef.nativeElement.src !== value) {
+      this.elementRef.nativeElement.src = value;
+    }
+  }
+}

apps/docs/src/app/frames/iframe-wrapper.component.ts

@@ -1,17 +1,34 @@
 import { FlowbiteIFrameComponent } from './iframe.component';
 
-import type { ThemeState } from 'flowbite-angular';
+import type { FlowbiteTheme, ThemeState } from 'flowbite-angular';
 import { ButtonComponent, GlobalSignalStoreService } from 'flowbite-angular';
 
+import { NgClass } from '@angular/common';
 import type { AfterViewInit } from '@angular/core';
-import { afterNextRender, Component, effect, inject, Injector, input, numberAttribute, ViewChild } from '@angular/core';
+import {
+  afterNextRender,
+  Component,
+  effect,
+  inject,
+  Injector,
+  input,
+  numberAttribute,
+  signal,
+  untracked,
+  ViewChild,
+} from '@angular/core';
 
 @Component({
   selector: 'flowbite-iframe-wrapper',
   standalone: true,
-  imports: [FlowbiteIFrameComponent, ButtonComponent],
+  imports: [FlowbiteIFrameComponent, ButtonComponent, NgClass],
   template: `
-    <div class="flex flex-col grow">
+    <div
+      class="flex flex-col grow rounded-t-xl"
+      [ngClass]="{
+        'bg-white': contentThemeMode() === 'light',
+        'bg-gray-900': contentThemeMode() === 'dark',
+      }">
       <div
         class="flex flex-row justify-between items-center rounded-t-xl p-6 border-b bg-gray-50 border-b-gray-200 dark:bg-gray-800 dark:border-b-gray-700 dark:text-gray-400">
         <span>
@@ -56,11 +73,12 @@ import { afterNextRender, Component, effect, inject, Injector, input, numberAttr
             Show on Github
           </flowbite-button>
         </span>
-        <span class="flex flex-row gap-2">
+        <span class="hidden gap-2 lg:flex lg:flex-row">
           <flowbite-button
             color="light"
             size="sm"
-            isPill>
+            isPill
+            (click)="iframe.width.set('lg')">
             <svg
               width="16"
               height="16"
@@ -78,7 +96,8 @@ import { afterNextRender, Component, effect, inject, Injector, input, numberAttr
           <flowbite-button
             color="light"
             size="sm"
-            isPill>
+            isPill
+            (click)="iframe.width.set('md')">
             <svg
               width="16"
               height="16"
@@ -96,7 +115,8 @@ import { afterNextRender, Component, effect, inject, Injector, input, numberAttr
           <flowbite-button
             color="light"
             size="sm"
-            isPill>
+            isPill
+            (click)="iframe.width.set('sm')">
             <svg
               width="16"
               height="16"
@@ -117,7 +137,7 @@ import { afterNextRender, Component, effect, inject, Injector, input, numberAttr
             color="light"
             size="sm"
             isPill
-            (click)="iframe.setTheme('light')">
+            (click)="setContentThemeMode('light')">
             <svg
               stroke="currentColor"
               fill="currentColor"
@@ -137,7 +157,7 @@ import { afterNextRender, Component, effect, inject, Injector, input, numberAttr
             color="light"
             size="sm"
             isPill
-            (click)="iframe.setTheme('dark')">
+            (click)="setContentThemeMode('dark')">
             <svg
               stroke="currentColor"
               fill="currentColor"
@@ -156,6 +176,7 @@ import { afterNextRender, Component, effect, inject, Injector, input, numberAttr
         [link]="link()"
         [height]="height()"
         [onLoadAction]="onIframeLoaded"
+        width="lg"
         #iframe />
     </div>
   `,
@@ -169,6 +190,8 @@ export class FlowbiteIFrameWrapperComponent implements AfterViewInit {
     GlobalSignalStoreService<ThemeState>,
   );
 
+  protected contentThemeMode = signal<FlowbiteTheme | undefined>(undefined);
+
   public link = input.required<string>();
   public githubLink = input<string>();
   public height = input<number, unknown>(150, { transform: numberAttribute });
@@ -178,18 +201,25 @@ export class FlowbiteIFrameWrapperComponent implements AfterViewInit {
       () => {
         effect(
           () => {
+            this.contentThemeMode.set(this.themeStateService.select('theme')());
+
             this.onIframeLoaded();
           },
-          { injector: this.injector },
+          { injector: this.injector, allowSignalWrites: true },
         );
       },
       { injector: this.injector },
     );
   }
 
   protected onIframeLoaded = () => {
-    const theme = this.themeStateService.select('theme')();
+    const theme = untracked(() => this.contentThemeMode());
 
-    this.iframe.setTheme(theme);
+    this.setContentThemeMode(theme || this.themeStateService.select('theme')());
   };
+
+  protected setContentThemeMode(mode: FlowbiteTheme): void {
+    this.iframe.setTheme(mode);
+    this.contentThemeMode.set(mode);
+  }
 }

apps/docs/src/app/frames/iframe.component.ts

@@ -1,24 +1,40 @@
+import { IframeCachedSrcDirective } from './iframe-cached-src.directive';
+
 import type { FlowbiteTheme } from 'flowbite-angular';
 
-import type { AfterViewInit } from '@angular/core';
-import { ChangeDetectorRef, Component, ElementRef, inject, input, numberAttribute, ViewChild } from '@angular/core';
+import { NgClass } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  inject,
+  input,
+  model,
+  numberAttribute,
+  ViewChild,
+} from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'flowbite-iframe',
   standalone: true,
-  imports: [],
+  imports: [NgClass, IframeCachedSrcDirective],
   template: `
     <iframe
-      [src]="sanitizer.bypassSecurityTrustResourceUrl(link())"
-      class="w-full h-0 mx-auto bg-white iframe-code"
+      flowbiteIframeChachedSrc
+      [cachedSrc]="link()"
+      class="w-full mx-auto iframe-code"
+      [ngClass]="{
+        'max-w-md': width() == 'md',
+        'max-w-sm': width() === 'sm',
+      }"
       frameborder="0"
-      style="height: {{ height() }}px"
+      loading="lazy"
       (load)="callOnLoadAction()"
       #iframe></iframe>
   `,
 })
-export class FlowbiteIFrameComponent implements AfterViewInit {
+export class FlowbiteIFrameComponent {
   @ViewChild('iframe', { static: false })
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   protected iframe!: ElementRef<any>;
@@ -27,13 +43,10 @@ export class FlowbiteIFrameComponent implements AfterViewInit {
   protected readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   public link = input.required<string>();
-  public height = input<number, unknown>(150, { transform: numberAttribute });
+  public height = input.required<number, unknown>({ transform: numberAttribute });
+  public width = model.required<'sm' | 'md' | 'lg'>();
   public onLoadAction = input<() => void>();
 
-  public ngAfterViewInit(): void {
-    this.changeDetectorRef.detach();
-  }
-
   public setTheme(theme: FlowbiteTheme): void {
     if (theme === 'light') this.iframe.nativeElement.contentDocument.documentElement.classList.remove('dark');
     else this.iframe.nativeElement.contentDocument.documentElement.classList.add('dark');

apps/docs/src/app/ui/features/docs/docs.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-row p-4 2xl:mx-60 2xl:my-8 gap-4">
+<div class="flex flex-row p-4 2xl:mx-60 gap-4">
   <flowbite-sidebar>
     <flowbite-sidebar-item-group title="GETTING STARTED">
       <flowbite-sidebar-item [link]="['/ui', '/docs', '/getting-started', '/introduction']">

apps/docs/src/app/ui/ui.component.html

@@ -1,23 +1,25 @@
-<flowbite-navbar
-  isFixed
-  [customStyle]="{ base: 'flex flex-wrap items-center justify-between p-4 2xl:px-60' }">
-  <flowbite-navbar-brand link="/">
-    <img
-      src="./assets/flowbite-angular-logo.svg"
-      class="h-8"
-      alt="Flowbite Logo" />
-    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite Angular</span>
-  </flowbite-navbar-brand>
-  <flowbite-navbar-content>
-    <flowbite-navbar-item link="/ui/docs">Docs</flowbite-navbar-item>
-    <flowbite-navbar-item link="https://flowbite.com">Flowbite</flowbite-navbar-item>
-  </flowbite-navbar-content>
-  <div class="flex flex-row">
-    <flowbite-dark-theme-toggle />
-    <flowbite-navbar-toggle />
-  </div>
-</flowbite-navbar>
+<section class="antialiased dark:bg-gray-900">
+  <flowbite-navbar
+    isFixed
+    [customStyle]="{ base: 'flex flex-wrap items-center justify-between p-4 2xl:px-60' }">
+    <flowbite-navbar-brand link="/">
+      <img
+        src="./assets/flowbite-angular-logo.svg"
+        class="h-8"
+        alt="Flowbite Logo" />
+      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite Angular</span>
+    </flowbite-navbar-brand>
+    <flowbite-navbar-content>
+      <flowbite-navbar-item link="/ui/docs">Docs</flowbite-navbar-item>
+      <flowbite-navbar-item link="https://flowbite.com">Flowbite</flowbite-navbar-item>
+    </flowbite-navbar-content>
+    <div class="flex flex-row">
+      <flowbite-dark-theme-toggle />
+      <flowbite-navbar-toggle />
+    </div>
+  </flowbite-navbar>
 
-<router-outlet />
+  <router-outlet />
 
-<flowbite-scroll-top />
+  <flowbite-scroll-top />
+</section>

apps/docs/src/index.html

@@ -12,7 +12,7 @@
       sizes="32x32"
       href="./assets/flowbite-angular-logo.svg" />
   </head>
-  <body class="antialiased dark:bg-gray-900">
+  <body>
     <flowbite-root></flowbite-root>
   </body>
 </html>

apps/docs/tailwind.config.js

@@ -11,7 +11,7 @@ const sharedTailwindConfig = require('../../libs/flowbite-angular/tailwind.confi
 module.exports = {
   presets: [sharedTailwindConfig],
   content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
-  safelist: ['p-4', 'overflow-x-auto', 'rounded-md'],
+  safelist: ['p-4', 'overflow-x-auto', 'rounded-md', 'max-w-md', 'max-w-sm', 'bg-gray-100', 'bg-gray-500'],
   theme: {
     extend: {
       colors: {