feat: create IconComponent & single template file

themesberg · Aug 5, 2024 · 420d742 · 420d742
1 parent f33e6cb
commit 420d742
Show file tree

Hide file tree

Showing 183 changed files with 4,936 additions and 2,094 deletions.
diff --git a/apps/docs/project.json b/apps/docs/project.json
@@ -16,7 +16,7 @@
         "polyfills": "zone.js",
         "tsConfig": "apps/docs/tsconfig.app.json",
         "inlineStyleLanguage": "css",
-        "assets": ["apps/docs/src/favicon.png", "apps/docs/src/assets"],
+        "assets": ["apps/docs/src/assets"],
         "styles": ["apps/docs/src/styles.css"],
         "scripts": []
       },

diff --git a/apps/docs/src/app/app.config.ts b/apps/docs/src/app/app.config.ts
@@ -1,12 +1,24 @@
 import { appRoutes } from './app.routes';
+import { initIcons } from './icon.init';
 
-import { initFlowbite } from 'flowbite-angular';
+import { IconRegistry, initFlowbite } from 'flowbite-angular';
 
 import { provideHttpClient, withFetch } from '@angular/common/http';
-import type { ApplicationConfig } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import { APP_INITIALIZER, type ApplicationConfig } from '@angular/core';
+import { DomSanitizer, provideClientHydration } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideClientHydration(), provideRouter(appRoutes), provideHttpClient(withFetch()), initFlowbite()],
+  providers: [
+    provideClientHydration(),
+    provideRouter(appRoutes),
+    provideHttpClient(withFetch()),
+    initFlowbite(),
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initIcons,
+      deps: [IconRegistry, DomSanitizer],
+      multi: false,
+    },
+  ],
 };
diff --git a/apps/docs/src/app/frames/accordion/default.component.ts b/apps/docs/src/app/frames/accordion/default.component.ts
@@ -1,3 +1,5 @@
+import 'reflect-metadata';
+
 import { FlowbiteFrameDisplayComponent } from '../display-frame.component';
 
 import {
@@ -19,81 +21,6 @@ import { Component } from '@angular/core';
     AccordionPanelComponent,
     FlowbiteFrameDisplayComponent,
   ],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-accordion class="w-full">
-        <flowbite-accordion-panel isOpen>
-          <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
-          <flowbite-accordion-content>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">
-              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including
-              buttons, dropdowns, modals, navbars, and more.
-            </p>
-            <p class="text-gray-500 dark:text-gray-400">
-              Check out this guide to learn how to
-              <a
-                class="text-blue-600 hover:underline dark:text-blue-500"
-                href="https://flowbite.com/docs/getting-started/introduction/">
-                get started
-              </a>
-              and start developing websites even faster with components on top of Tailwind CSS.
-            </p>
-          </flowbite-accordion-content>
-        </flowbite-accordion-panel>
-        <flowbite-accordion-panel>
-          <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
-          <flowbite-accordion-content>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">
-              Flowbite is first conceptualized and designed using the Figma software so everything you see in the
-              library has a design equivalent in our Figma file.
-            </p>
-            <p class="text-gray-500 dark:text-gray-400">
-              Check out the
-              <a
-                class="text-blue-600 hover:underline dark:text-blue-500"
-                href="https://flowbite.com/figma/">
-                Figma design system
-              </a>
-              based on the utility classes from Tailwind CSS and components from Flowbite.
-            </p>
-          </flowbite-accordion-content>
-        </flowbite-accordion-panel>
-        <flowbite-accordion-panel>
-          <flowbite-accordion-title>
-            What are the differences between Flowbite and Tailwind UI ?
-          </flowbite-accordion-title>
-          <flowbite-accordion-content>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">
-              The main difference is that the core components from Flowbite are open source under the MIT license,
-              whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and
-              standalone components, whereas Tailwind UI offers sections of pages.
-            </p>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">
-              However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no
-              technical reason stopping you from using the best of two worlds.
-            </p>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies :</p>
-            <ul class="list-disc pl-5 text-gray-500 dark:text-gray-400">
-              <li>
-                <a
-                  class="text-blue-600 hover:underline dark:text-blue-500"
-                  href="https://flowbite.com/pro/">
-                  Flowbite Pro
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blue-600 hover:underline dark:text-blue-500"
-                  href="https://tailwindui.com/"
-                  rel="nofollow">
-                  Tailwind UI
-                </a>
-              </li>
-            </ul>
-          </flowbite-accordion-content>
-        </flowbite-accordion-panel>
-      </flowbite-accordion>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/accordion/default.component.html',
 })
 export class FlowbiteFrameAccordionDefaultComponent {}
diff --git a/apps/docs/src/app/frames/alert/additional-content.component.ts b/apps/docs/src/app/frames/alert/additional-content.component.ts
@@ -8,66 +8,6 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-alert-additional-content',
   standalone: true,
   imports: [AlertComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-alert
-        color="gray"
-        [icon]="icon"
-        [additionalContent]="additionalContent">
-        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-100">This is an info alert</h3>
-      </flowbite-alert>
-
-      <ng-template #icon>
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 20 20"
-          class="mr-3 inline h-5 w-5 flex-shrink-0"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-            clip-rule="evenodd" />
-        </svg>
-      </ng-template>
-
-      <ng-template #additionalContent>
-        <div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-100">
-          More info about this info alert goes here. This example text is going to run a bit longer so that you can see
-          how spacing within an alert works with this kind of content.
-        </div>
-        <div class="flex">
-          <button
-            type="button"
-            class="mr-2 inline-flex items-center rounded-lg bg-gray-700 px-3 py-1.5 text-center text-xs font-medium text-gray-100 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-100 dark:text-gray-700 dark:hover:bg-gray-200">
-            <svg
-              stroke="currentColor"
-              fill="currentColor"
-              stroke-width="0"
-              viewBox="0 0 20 20"
-              class="-ml-0.5 mr-2 h-4 w-4"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg">
-              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
-              <path
-                fill-rule="evenodd"
-                d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-                clip-rule="evenodd" />
-            </svg>
-            View more
-          </button>
-          <button
-            type="button"
-            class="rounded-lg border border-gray-700 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:ring-gray-300 dark:border-gray-100 dark:text-gray-100 dark:hover:text-white">
-            Dismiss
-          </button>
-        </div>
-      </ng-template>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/alert/additional-content.component.html',
 })
 export class FlowbiteFrameAlertAdditionalContentComponent {}
diff --git a/apps/docs/src/app/frames/alert/border.component.ts b/apps/docs/src/app/frames/alert/border.component.ts
@@ -8,15 +8,6 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-alert-border',
   standalone: true,
   imports: [AlertComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-alert
-        color="yellow"
-        hasBorderAccent
-        isRounded="false">
-        <span class="font-medium">Info alert !</span> Change a few things up and try submitting again.
-      </flowbite-alert>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/alert/border.component.html',
 })
 export class FlowbiteFrameAlertBorderComponent {}
diff --git a/apps/docs/src/app/frames/alert/default.component.ts b/apps/docs/src/app/frames/alert/default.component.ts
@@ -8,12 +8,6 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-alert-default',
   standalone: true,
   imports: [AlertComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-alert>
-        <span class="font-medium">Info alert !</span> Change a few things up and try submitting again.
-      </flowbite-alert>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/alert/default.component.html',
 })
 export class FlowbiteFrameAlertDefaultComponent {}
diff --git a/apps/docs/src/app/frames/alert/dismissable.component.ts b/apps/docs/src/app/frames/alert/dismissable.component.ts
@@ -8,15 +8,7 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-alert-dismissable',
   standalone: true,
   imports: [AlertComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-alert
-        color="green"
-        [dismiss]="onDismiss">
-        <span class="font-medium">Info alert !</span> Change a few things up and try submitting again.
-      </flowbite-alert>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/alert/dismissable.component.html',
 })
 export class FlowbiteFrameAlertDismissableComponent {
   onDismiss = () => alert('Alert dismissed!');

diff --git a/apps/docs/src/app/frames/alert/icon.component.ts b/apps/docs/src/app/frames/alert/icon.component.ts
@@ -8,31 +8,6 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-alert-icon',
   standalone: true,
   imports: [AlertComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-alert
-        [icon]="icon"
-        color="red">
-        <span class="font-medium">Info alert !</span> Change a few things up and try submitting again.
-      </flowbite-alert>
-
-      <ng-template #icon>
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 20 20"
-          class="mr-3 inline h-5 w-5 flex-shrink-0"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-            clip-rule="evenodd" />
-        </svg>
-      </ng-template>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/alert/icon.component.html',
 })
 export class FlowbiteFrameAlertIconComponent {}
diff --git a/apps/docs/src/app/frames/badge/default.component.ts b/apps/docs/src/app/frames/badge/default.component.ts
@@ -8,17 +8,6 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-badge-default',
   standalone: true,
   imports: [BadgeComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-badge>Default</flowbite-badge>
-      <flowbite-badge color="dark">Dark</flowbite-badge>
-      <flowbite-badge color="red">Red</flowbite-badge>
-      <flowbite-badge color="green">Green</flowbite-badge>
-      <flowbite-badge color="yellow">Yellow</flowbite-badge>
-      <flowbite-badge color="indigo">Indigo</flowbite-badge>
-      <flowbite-badge color="purple">Purple</flowbite-badge>
-      <flowbite-badge color="pink">Pink</flowbite-badge>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/badge/default.component.html',
 })
 export class FlowbiteFrameBadgeDefaultComponent {}
diff --git a/apps/docs/src/app/frames/badge/icon-only.component.ts b/apps/docs/src/app/frames/badge/icon-only.component.ts
@@ -8,80 +8,6 @@ import { Component } from '@angular/core';
   selector: 'flowbite-frame-badge-icon-only',
   standalone: true,
   imports: [BadgeComponent, FlowbiteFrameDisplayComponent],
-  template: `
-    <flowbite-frame-display>
-      <flowbite-badge isIconOnly>
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 20 20"
-          class="h-3 w-3"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-            clip-rule="evenodd" />
-        </svg>
-      </flowbite-badge>
-      <flowbite-badge
-        isIconOnly
-        color="dark">
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 20 20"
-          class="h-3 w-3"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-            clip-rule="evenodd" />
-        </svg>
-      </flowbite-badge>
-      <flowbite-badge
-        isIconOnly
-        size="sm">
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 20 20"
-          class="h-3.5 w-3.5"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-            clip-rule="evenodd" />
-        </svg>
-      </flowbite-badge>
-      <flowbite-badge
-        isIconOnly
-        color="dark"
-        size="sm">
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 20 20"
-          class="h-3.5 w-3.5"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-            clip-rule="evenodd" />
-        </svg>
-      </flowbite-badge>
-    </flowbite-frame-display>
-  `,
+  templateUrl: '../../../assets/examples/badge/icon-only.component.html',
 })
 export class FlowbiteFrameBadgeIconOnlyComponent {}