flowbite-angular 20.0.6 → 20.1.0

package/README.md

@@ -56,13 +56,15 @@ npm i tailwindcss
 2. Install `flowbite-angular` as a dependency using `npm` by running the following command:
 
 ```bash
-npm i flowbite-angular
+npm i flowbite-angular ng-primitives @ng-icons/core
 ```
 
 3. Import `flowbite-angular` inside your `style.css` file:
 
 ```css
-@import 'node_modules/flowbite-angular/styles/flowbite-angular.css';
+@import 'tailwindcss';
+
+@source "node_modules/flowbite-angular";
 ```
 
 # Components

package/fesm2022/flowbite-angular-table.mjs

@@ -0,0 +1,455 @@
+import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { NgTemplateOutlet } from '@angular/common';
+import { twMerge } from 'tailwind-merge';
+
+const flowbiteTableTheme = createTheme({
+    host: {
+        base: 'w-full text-left text-sm',
+        color: {
+            default: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-400',
+            },
+            info: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-400',
+            },
+            failure: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-400',
+            },
+            success: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-400',
+            },
+            warning: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-400',
+            },
+            primary: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-400',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTableConfig = {
+    baseTheme: flowbiteTableTheme,
+    color: 'default',
+    striped: false,
+    customTheme: {},
+};
+const FlowbiteTableConfigToken = new InjectionToken('FlowbiteTableConfigToken');
+/**
+ * Provide the default Table configuration
+ * @param config The Table configuration
+ * @returns The provider
+ */
+const provideFlowbiteTableConfig = (config) => [
+    {
+        provide: FlowbiteTableConfigToken,
+        useValue: { ...defaultFlowbiteTableConfig, ...config },
+    },
+];
+/**
+ * Inject the Table configuration
+ * @see {@link defaultFlowbiteTableConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTableConfig = () => inject(FlowbiteTableConfigToken, { optional: true }) ?? defaultFlowbiteTableConfig;
+
+const FlowbiteTableStateToken = createStateToken('Flowbite Table');
+const provideFlowbiteTableState = createStateProvider(FlowbiteTableStateToken);
+const injectFlowbiteTableState = createStateInjector(FlowbiteTableStateToken);
+const flowbiteTableState = createState(FlowbiteTableStateToken);
+
+class Table {
+    constructor() {
+        this.config = injectFlowbiteTableConfig();
+        this.tableHead = input();
+        this.tableBody = input();
+        this.data = input();
+        this.tableFoot = input();
+        /**
+         * @see {@link injectFlowbiteTableConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbiteTableConfig}
+         */
+        this.striped = input(this.config.striped);
+        /**
+         * @see {@link injectFlowbiteTableConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, colorToTheme(mergedTheme.host.color, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTableState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Table, isStandalone: true, selector: "\n    table[flowbiteTable]\n  ", inputs: { tableHead: { classPropertyName: "tableHead", publicName: "tableHead", isSignal: true, isRequired: false, transformFunction: null }, tableBody: { classPropertyName: "tableBody", publicName: "tableBody", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, tableFoot: { classPropertyName: "tableFoot", publicName: "tableFoot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTableState()], exportAs: ["flowbiteTable"], ngImport: i0, template: `
+    <thead>
+      <ng-container [ngTemplateOutlet]="state.tableHead()" />
+    </thead>
+    <tbody>
+      @for (record of state.data(); track $index) {
+        <ng-container
+          [ngTemplateOutlet]="state.tableBody()"
+          [ngTemplateOutletContext]="{ $implicit: record }" />
+      }
+    </tbody>
+    <tfoot>
+      <ng-container [ngTemplateOutlet]="state.tableFoot()" />
+    </tfoot>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: `
+    table[flowbiteTable]
+  `,
+                    exportAs: 'flowbiteTable',
+                    hostDirectives: [],
+                    imports: [NgTemplateOutlet],
+                    providers: [provideFlowbiteTableState()],
+                    host: { '[class]': `theme().host.root` },
+                    template: `
+    <thead>
+      <ng-container [ngTemplateOutlet]="state.tableHead()" />
+    </thead>
+    <tbody>
+      @for (record of state.data(); track $index) {
+        <ng-container
+          [ngTemplateOutlet]="state.tableBody()"
+          [ngTemplateOutletContext]="{ $implicit: record }" />
+      }
+    </tbody>
+    <tfoot>
+      <ng-container [ngTemplateOutlet]="state.tableFoot()" />
+    </tfoot>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const flowbiteTableHeadTheme = createTheme({
+    host: {
+        base: 'text-xs uppercase',
+        color: {
+            default: {
+                light: 'bg-gray-50 text-gray-700',
+                dark: 'dark:bg-gray-700 dark:text-gray-400',
+            },
+            info: {
+                light: 'bg-blue-50 text-blue-700',
+                dark: 'dark:bg-blue-700 dark:text-blue-400',
+            },
+            failure: {
+                light: 'bg-red-50 text-red-700',
+                dark: 'dark:bg-red-700 dark:text-red-300',
+            },
+            success: {
+                light: 'bg-green-50 text-green-700',
+                dark: 'dark:bg-green-700 dark:text-green-400',
+            },
+            warning: {
+                light: 'bg-yellow-50 text-yellow-700',
+                dark: 'dark:bg-yellow-700 dark:text-yellow-400',
+            },
+            primary: {
+                light: 'bg-primary-50 text-primary-700',
+                dark: 'dark:bg-primary-700 dark:text-primary-300',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTableHeadConfig = {
+    baseTheme: flowbiteTableHeadTheme,
+    customTheme: {},
+};
+const FlowbiteTableHeadConfigToken = new InjectionToken('FlowbiteTableHeadConfigToken');
+/**
+ * Provide the default TableHead configuration
+ * @param config The TableHead configuration
+ * @returns The provider
+ */
+const provideFlowbiteTableHeadConfig = (config) => [
+    {
+        provide: FlowbiteTableHeadConfigToken,
+        useValue: { ...defaultFlowbiteTableHeadConfig, ...config },
+    },
+];
+/**
+ * Inject the TableHead configuration
+ * @see {@link defaultFlowbiteTableHeadConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTableHeadConfig = () => inject(FlowbiteTableHeadConfigToken, { optional: true }) ?? defaultFlowbiteTableHeadConfig;
+
+const FlowbiteTableHeadStateToken = createStateToken('Flowbite TableHead');
+const provideFlowbiteTableHeadState = createStateProvider(FlowbiteTableHeadStateToken);
+const injectFlowbiteTableHeadState = createStateInjector(FlowbiteTableHeadStateToken);
+const flowbiteTableHeadState = createState(FlowbiteTableHeadStateToken);
+
+class TableHead {
+    constructor() {
+        this.config = injectFlowbiteTableHeadConfig();
+        this.tableState = injectFlowbiteTableState();
+        /**
+         * @see {@link injectFlowbiteTableHeadConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, colorToTheme(mergedTheme.host.color, this.tableState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTableHeadState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TableHead, isStandalone: true, selector: "\n    tr[flowbiteTableHead]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTableHeadState()], exportAs: ["flowbiteTableHead"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableHead, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    tr[flowbiteTableHead]
+  `,
+                    exportAs: 'flowbiteTableHead',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteTableHeadState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+const flowbiteTableBodyTheme = createTheme({
+    host: {
+        base: 'border-b',
+        color: {
+            default: {
+                light: 'border-gray-200 data-striped:odd:bg-white data-striped:even:bg-gray-50',
+                dark: 'dark:border-gray-700 data-striped:odd:dark:bg-gray-900 data-striped:even:dark:bg-gray-800',
+            },
+            info: {
+                light: 'border-blue-200 data-striped:odd:bg-white data-striped:even:bg-blue-50',
+                dark: 'dark:border-blue-900 data-striped:odd:dark:bg-blue-950 data-striped:even:dark:bg-blue-900',
+            },
+            failure: {
+                light: 'border-red-200 data-striped:odd:bg-white data-striped:even:bg-red-50',
+                dark: 'dark:border-red-900 data-striped:odd:dark:bg-red-950 data-striped:even:dark:bg-red-900',
+            },
+            success: {
+                light: 'border-green-200 data-striped:odd:bg-white data-striped:even:bg-green-50',
+                dark: 'dark:border-green-900 data-striped:odd:dark:bg-green-950 data-striped:even:dark:bg-green-900',
+            },
+            warning: {
+                light: 'border-yellow-200 data-striped:odd:bg-white data-striped:even:bg-yellow-50',
+                dark: 'dark:border-yellow-900 data-striped:odd:dark:bg-yellow-950 data-striped:even:dark:bg-yellow-900',
+            },
+            primary: {
+                light: 'border-primary-200 data-striped:even:bg-primary-50 data-striped:odd:bg-white',
+                dark: 'dark:border-primary-900 data-striped:odd:dark:bg-primary-950 data-striped:even:dark:bg-primary-900',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTableBodyConfig = {
+    baseTheme: flowbiteTableBodyTheme,
+    customTheme: {},
+};
+const FlowbiteTableBodyConfigToken = new InjectionToken('FlowbiteTableBodyConfigToken');
+/**
+ * Provide the default TableBody configuration
+ * @param config The TableBody configuration
+ * @returns The provider
+ */
+const provideFlowbiteTableBodyConfig = (config) => [
+    {
+        provide: FlowbiteTableBodyConfigToken,
+        useValue: { ...defaultFlowbiteTableBodyConfig, ...config },
+    },
+];
+/**
+ * Inject the TableBody configuration
+ * @see {@link defaultFlowbiteTableBodyConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTableBodyConfig = () => inject(FlowbiteTableBodyConfigToken, { optional: true }) ?? defaultFlowbiteTableBodyConfig;
+
+const FlowbiteTableBodyStateToken = createStateToken('Flowbite TableBody');
+const provideFlowbiteTableBodyState = createStateProvider(FlowbiteTableBodyStateToken);
+const injectFlowbiteTableBodyState = createStateInjector(FlowbiteTableBodyStateToken);
+const flowbiteTableBodyState = createState(FlowbiteTableBodyStateToken);
+
+class TableBody {
+    constructor() {
+        this.config = injectFlowbiteTableBodyConfig();
+        this.tableState = injectFlowbiteTableState();
+        /**
+         * @see {@link injectFlowbiteTableBodyConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, colorToTheme(mergedTheme.host.color, this.tableState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTableBodyState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TableBody, isStandalone: true, selector: "\n    tr[flowbiteTableBody]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root", "attr.data-striped": "tableState().striped() || undefined" } }, providers: [provideFlowbiteTableBodyState()], exportAs: ["flowbiteTableBody"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableBody, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    tr[flowbiteTableBody]
+  `,
+                    exportAs: 'flowbiteTableBody',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteTableBodyState()],
+                    host: {
+                        '[class]': `theme().host.root`,
+                        '[attr.data-striped]': 'tableState().striped() || undefined',
+                    },
+                }]
+        }] });
+
+const flowbiteTableFootTheme = createTheme({
+    host: {
+        base: 'font-semibold',
+        color: {
+            default: {
+                light: 'text-gray-900',
+                dark: 'dark:text-white',
+            },
+            info: {
+                light: 'text-gray-900',
+                dark: 'dark:text-white',
+            },
+            failure: {
+                light: 'text-gray-900',
+                dark: 'dark:text-white',
+            },
+            success: {
+                light: 'text-gray-900',
+                dark: 'dark:text-white',
+            },
+            warning: {
+                light: 'text-gray-900',
+                dark: 'dark:text-white',
+            },
+            primary: {
+                light: 'text-gray-900',
+                dark: 'dark:text-white',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTableFootConfig = {
+    baseTheme: flowbiteTableFootTheme,
+    customTheme: {},
+};
+const FlowbiteTableFootConfigToken = new InjectionToken('FlowbiteTableFootConfigToken');
+/**
+ * Provide the default TableFoot configuration
+ * @param config The TableFoot configuration
+ * @returns The provider
+ */
+const provideFlowbiteTableFootConfig = (config) => [
+    {
+        provide: FlowbiteTableFootConfigToken,
+        useValue: { ...defaultFlowbiteTableFootConfig, ...config },
+    },
+];
+/**
+ * Inject the TableFoot configuration
+ * @see {@link defaultFlowbiteTableFootConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTableFootConfig = () => inject(FlowbiteTableFootConfigToken, { optional: true }) ?? defaultFlowbiteTableFootConfig;
+
+const FlowbiteTableFootStateToken = createStateToken('Flowbite TableFoot');
+const provideFlowbiteTableFootState = createStateProvider(FlowbiteTableFootStateToken);
+const injectFlowbiteTableFootState = createStateInjector(FlowbiteTableFootStateToken);
+const flowbiteTableFootState = createState(FlowbiteTableFootStateToken);
+
+class TableFoot {
+    constructor() {
+        this.config = injectFlowbiteTableFootConfig();
+        this.tableState = injectFlowbiteTableState();
+        /**
+         * @see {@link injectFlowbiteTableFootConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, colorToTheme(mergedTheme.host.color, this.tableState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTableFootState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableFoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TableFoot, isStandalone: true, selector: "\n    tr[flowbiteTableFoot]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTableFootState()], exportAs: ["flowbiteTableFoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TableFoot, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    tr[flowbiteTableFoot]
+  `,
+                    exportAs: 'flowbiteTableFoot',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteTableFootState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+/* Table */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlowbiteTableBodyConfigToken, FlowbiteTableBodyStateToken, FlowbiteTableConfigToken, FlowbiteTableFootConfigToken, FlowbiteTableFootStateToken, FlowbiteTableHeadConfigToken, FlowbiteTableHeadStateToken, FlowbiteTableStateToken, Table, TableBody, TableFoot, TableHead, defaultFlowbiteTableBodyConfig, defaultFlowbiteTableConfig, defaultFlowbiteTableFootConfig, defaultFlowbiteTableHeadConfig, flowbiteTableBodyState, flowbiteTableBodyTheme, flowbiteTableFootState, flowbiteTableFootTheme, flowbiteTableHeadState, flowbiteTableHeadTheme, flowbiteTableState, flowbiteTableTheme, injectFlowbiteTableBodyConfig, injectFlowbiteTableBodyState, injectFlowbiteTableConfig, injectFlowbiteTableFootConfig, injectFlowbiteTableFootState, injectFlowbiteTableHeadConfig, injectFlowbiteTableHeadState, injectFlowbiteTableState, provideFlowbiteTableBodyConfig, provideFlowbiteTableBodyState, provideFlowbiteTableConfig, provideFlowbiteTableFootConfig, provideFlowbiteTableFootState, provideFlowbiteTableHeadConfig, provideFlowbiteTableHeadState, provideFlowbiteTableState };
+//# sourceMappingURL=flowbite-angular-table.mjs.map