flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-tab.mjs

@@ -0,0 +1,465 @@
+import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import * as i1 from 'ng-primitives/tabs';
+import { NgpTabset, NgpTabList, NgpTabButton, NgpTabPanel } from 'ng-primitives/tabs';
+import { twMerge } from 'tailwind-merge';
+import * as i3 from 'flowbite-angular/button';
+import { BaseButton } from 'flowbite-angular/button';
+import * as i2 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
+
+const flowbiteTabTheme = createTheme({
+    host: {
+        base: 'w-full rounded-md border',
+        transition: '',
+        size: {
+            sm: 'max-w-md p-2',
+            md: 'max-w-lg p-3',
+            lg: 'max-w-xl p-4',
+            full: 'w-full p-4',
+        },
+        color: {
+            default: {
+                light: 'border-gray-200 bg-gray-100',
+                dark: 'dark:border-gray-800 dark:bg-gray-900',
+            },
+            info: {
+                light: 'border-blue-200 bg-gray-100',
+                dark: 'dark:border-blue-800 dark:bg-gray-900',
+            },
+            failure: {
+                light: 'border-red-200 bg-gray-100',
+                dark: 'dark:border-red-800 dark:bg-gray-900',
+            },
+            success: {
+                light: 'border-green-200 bg-gray-100',
+                dark: 'dark:border-green-800 dark:bg-gray-900',
+            },
+            warning: {
+                light: 'border-yellow-200 bg-gray-100',
+                dark: 'dark:border-yellow-800 dark:bg-gray-900',
+            },
+            primary: {
+                light: 'border-primary-200 bg-gray-100',
+                dark: 'dark:border-primary-800 dark:bg-gray-900',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTabConfig = {
+    baseTheme: flowbiteTabTheme,
+    size: 'md',
+    color: 'default',
+    customTheme: {},
+};
+const FlowbiteTabConfigToken = new InjectionToken('FlowbiteTabConfigToken');
+/**
+ * Provide the default Tab configuration
+ * @param config The Tab configuration
+ * @returns The provider
+ */
+const provideFlowbiteTabConfig = (config) => [
+    {
+        provide: FlowbiteTabConfigToken,
+        useValue: { ...defaultFlowbiteTabConfig, ...config },
+    },
+];
+/**
+ * Inject the Tab configuration
+ * @see {@link defaultFlowbiteTabConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTabConfig = () => inject(FlowbiteTabConfigToken, { optional: true }) ?? defaultFlowbiteTabConfig;
+
+const FlowbiteTabStateToken = createStateToken('Flowbite Tab');
+const provideFlowbiteTabState = createStateProvider(FlowbiteTabStateToken);
+const injectFlowbiteTabState = createStateInjector(FlowbiteTabStateToken);
+const flowbiteTabState = createState(FlowbiteTabStateToken);
+
+class Tab {
+    constructor() {
+        this.config = injectFlowbiteTabConfig();
+        /**
+         * @see {@link injectFlowbiteTabConfig}
+         */
+        this.size = input(this.config.size);
+        /**
+         * @see {@link injectFlowbiteTabConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbiteTabConfig}
+         */
+        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, mergedTheme.host.transition, mergedTheme.host.size[this.state.size()], colorToTheme(mergedTheme.host.color, this.state.color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTabState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Tab, isStandalone: true, selector: "\n    [flowbiteTab]\n  ", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTabState()], exportAs: ["flowbiteTab"], hostDirectives: [{ directive: i1.NgpTabset, inputs: ["id", "id", "ngpTabsetValue", "value", "ngpTabsetActivateOnFocus", "activateOnFocus"], outputs: ["ngpTabsetValueChange", "valueChange"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Tab, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    [flowbiteTab]
+  `,
+                    exportAs: 'flowbiteTab',
+                    hostDirectives: [
+                        {
+                            directive: NgpTabset,
+                            inputs: ['id:id', 'ngpTabsetValue:value', 'ngpTabsetActivateOnFocus:activateOnFocus'],
+                            outputs: ['ngpTabsetValueChange:valueChange'],
+                        },
+                    ],
+                    providers: [provideFlowbiteTabState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+const flowbiteTabListTheme = createTheme({
+    host: {
+        base: 'flex overflow-x-scroll overflow-y-clip border-b text-center',
+        transition: '',
+        color: {
+            default: {
+                light: 'border-gray-200',
+                dark: 'dark:border-gray-700',
+            },
+            info: {
+                light: 'border-blue-200',
+                dark: 'dark:border-blue-700',
+            },
+            failure: {
+                light: 'border-red-200',
+                dark: 'dark:border-red-700',
+            },
+            success: {
+                light: 'border-green-200',
+                dark: 'dark:border-green-700',
+            },
+            warning: {
+                light: 'border-yellow-200',
+                dark: 'dark:border-yellow-700',
+            },
+            primary: {
+                light: 'border-primary-200',
+                dark: 'dark:border-primary-700',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTabListConfig = {
+    baseTheme: flowbiteTabListTheme,
+    customTheme: {},
+};
+const FlowbiteTabListConfigToken = new InjectionToken('FlowbiteTabListConfigToken');
+/**
+ * Provide the default TabList configuration
+ * @param config The TabList configuration
+ * @returns The provider
+ */
+const provideFlowbiteTabListConfig = (config) => [
+    {
+        provide: FlowbiteTabListConfigToken,
+        useValue: { ...defaultFlowbiteTabListConfig, ...config },
+    },
+];
+/**
+ * Inject the TabList configuration
+ * @see {@link defaultFlowbiteTabListConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTabListConfig = () => inject(FlowbiteTabListConfigToken, { optional: true }) ?? defaultFlowbiteTabListConfig;
+
+const FlowbiteTabListStateToken = createStateToken('Flowbite TabList');
+const provideFlowbiteTabListState = createStateProvider(FlowbiteTabListStateToken);
+const injectFlowbiteTabListState = createStateInjector(FlowbiteTabListStateToken);
+const flowbiteTabListState = createState(FlowbiteTabListStateToken);
+
+class TabList {
+    constructor() {
+        this.config = injectFlowbiteTabListConfig();
+        this.tabState = injectFlowbiteTabState();
+        /**
+         * @see {@link injectFlowbiteTabListConfig}
+         */
+        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, mergedTheme.host.transition, colorToTheme(mergedTheme.host.color, this.tabState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTabListState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TabList, isStandalone: true, selector: "\n    ul[flowbiteTabList]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTabListState()], exportAs: ["flowbiteTabList"], hostDirectives: [{ directive: i1.NgpTabList }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabList, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    ul[flowbiteTabList]
+  `,
+                    exportAs: 'flowbiteTabList',
+                    hostDirectives: [
+                        {
+                            directive: NgpTabList,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteTabListState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+const flowbiteTabButtonTheme = createTheme({
+    host: {
+        base: 'inline-block p-4 data-disabled:cursor-not-allowed data-hover:cursor-pointer',
+        transition: '',
+        color: {
+            default: {
+                light: 'text-gray-500 data-active:font-semibold data-active:text-gray-900 data-disabled:text-gray-300 data-hover:text-gray-900',
+                dark: 'dark:text-gray-500 dark:data-active:text-gray-100 dark:data-disabled:text-gray-700 dark:data-hover:text-gray-100',
+            },
+            info: {
+                light: 'text-gray-500 data-active:font-semibold data-active:text-blue-900 data-disabled:text-gray-300 data-hover:text-blue-900',
+                dark: 'dark:text-gray-500 dark:data-active:text-blue-100 dark:data-disabled:text-gray-700 dark:data-hover:text-blue-100',
+            },
+            failure: {
+                light: 'text-gray-500 data-active:font-semibold data-active:text-red-900 data-disabled:text-gray-300 data-hover:text-red-900',
+                dark: 'dark:text-gray-500 dark:data-active:text-red-100 dark:data-disabled:text-gray-700 dark:data-hover:text-red-100',
+            },
+            success: {
+                light: 'text-gray-500 data-active:font-semibold data-active:text-green-900 data-disabled:text-gray-300 data-hover:text-green-900',
+                dark: 'dark:text-gray-500 dark:data-active:text-green-100 dark:data-disabled:text-gray-700 dark:data-hover:text-green-100',
+            },
+            warning: {
+                light: 'text-gray-500 data-active:font-semibold data-active:text-yellow-900 data-disabled:text-gray-300 data-hover:text-yellow-900',
+                dark: 'dark:text-gray-500 dark:data-active:text-yellow-100 dark:data-disabled:text-gray-700 dark:data-hover:text-yellow-100',
+            },
+            primary: {
+                light: 'data-active:text-primary-900 data-hover:text-primary-900 text-gray-500 data-active:font-semibold data-disabled:text-gray-300',
+                dark: 'dark:data-active:text-primary-100 dark:data-hover:text-primary-100 dark:text-gray-500 dark:data-disabled:text-gray-700',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTabButtonConfig = {
+    baseTheme: flowbiteTabButtonTheme,
+    customTheme: {},
+};
+const FlowbiteTabButtonConfigToken = new InjectionToken('FlowbiteTabButtonConfigToken');
+/**
+ * Provide the default TabButton configuration
+ * @param config The TabButton configuration
+ * @returns The provider
+ */
+const provideFlowbiteTabButtonConfig = (config) => [
+    {
+        provide: FlowbiteTabButtonConfigToken,
+        useValue: { ...defaultFlowbiteTabButtonConfig, ...config },
+    },
+];
+/**
+ * Inject the TabButton configuration
+ * @see {@link defaultFlowbiteTabButtonConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTabButtonConfig = () => inject(FlowbiteTabButtonConfigToken, { optional: true }) ?? defaultFlowbiteTabButtonConfig;
+
+const FlowbiteTabButtonStateToken = createStateToken('Flowbite TabButton');
+const provideFlowbiteTabButtonState = createStateProvider(FlowbiteTabButtonStateToken);
+const injectFlowbiteTabButtonState = createStateInjector(FlowbiteTabButtonStateToken);
+const flowbiteTabButtonState = createState(FlowbiteTabButtonStateToken);
+
+class TabButton {
+    constructor() {
+        this.config = injectFlowbiteTabButtonConfig();
+        this.tabState = injectFlowbiteTabState();
+        /**
+         * @see {@link injectFlowbiteTabButtonConfig}
+         */
+        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, mergedTheme.host.transition, colorToTheme(mergedTheme.host.color, this.tabState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTabButtonState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TabButton, isStandalone: true, selector: "\n    li[flowbiteTabButton]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTabButtonState()], exportAs: ["flowbiteTabButton"], hostDirectives: [{ directive: i1.NgpTabButton, inputs: ["id", "id", "ngpTabButtonValue", "value", "ngpTabButtonDisabled", "disabled"] }, { directive: i2.NgpFocus }, { directive: i3.BaseButton }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabButton, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    li[flowbiteTabButton]
+  `,
+                    exportAs: 'flowbiteTabButton',
+                    hostDirectives: [
+                        {
+                            directive: NgpTabButton,
+                            inputs: ['id:id', 'ngpTabButtonValue:value', 'ngpTabButtonDisabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: [],
+                            outputs: [],
+                        },
+                        {
+                            directive: BaseButton,
+                            inputs: [],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteTabButtonState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+const flowbiteTabContentTheme = createTheme({
+    host: {
+        base: 'p-6 not-data-active:hidden',
+        transition: '',
+        color: {
+            default: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+            info: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+            failure: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+            success: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+            warning: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+            primary: {
+                light: 'text-gray-900',
+                dark: 'dark:text-gray-100',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteTabContentConfig = {
+    baseTheme: flowbiteTabContentTheme,
+    customTheme: {},
+};
+const FlowbiteTabContentConfigToken = new InjectionToken('FlowbiteTabContentConfigToken');
+/**
+ * Provide the default TabContent configuration
+ * @param config The TabContent configuration
+ * @returns The provider
+ */
+const provideFlowbiteTabContentConfig = (config) => [
+    {
+        provide: FlowbiteTabContentConfigToken,
+        useValue: { ...defaultFlowbiteTabContentConfig, ...config },
+    },
+];
+/**
+ * Inject the TabContent configuration
+ * @see {@link defaultFlowbiteTabContentConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteTabContentConfig = () => inject(FlowbiteTabContentConfigToken, { optional: true }) ?? defaultFlowbiteTabContentConfig;
+
+const FlowbiteTabContentStateToken = createStateToken('Flowbite TabContent');
+const provideFlowbiteTabContentState = createStateProvider(FlowbiteTabContentStateToken);
+const injectFlowbiteTabContentState = createStateInjector(FlowbiteTabContentStateToken);
+const flowbiteTabContentState = createState(FlowbiteTabContentStateToken);
+
+class TabContent {
+    constructor() {
+        this.config = injectFlowbiteTabContentConfig();
+        this.tabState = injectFlowbiteTabState();
+        /**
+         * @see {@link injectFlowbiteTabContentConfig}
+         */
+        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, mergedTheme.host.transition, colorToTheme(mergedTheme.host.color, this.tabState().color())),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteTabContentState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TabContent, isStandalone: true, selector: "\n    [flowbiteTabContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteTabContentState()], exportAs: ["flowbiteTabContent"], hostDirectives: [{ directive: i1.NgpTabPanel, inputs: ["id", "id", "ngpTabPanelValue", "value"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TabContent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    [flowbiteTabContent]
+  `,
+                    exportAs: 'flowbiteTabContent',
+                    hostDirectives: [
+                        {
+                            directive: NgpTabPanel,
+                            inputs: ['id:id', 'ngpTabPanelValue: value'],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteTabContentState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+const greeting = 'Hello World!';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FlowbiteTabButtonConfigToken, FlowbiteTabButtonStateToken, FlowbiteTabConfigToken, FlowbiteTabContentConfigToken, FlowbiteTabContentStateToken, FlowbiteTabListConfigToken, FlowbiteTabListStateToken, FlowbiteTabStateToken, Tab, TabButton, TabContent, TabList, defaultFlowbiteTabButtonConfig, defaultFlowbiteTabConfig, defaultFlowbiteTabContentConfig, defaultFlowbiteTabListConfig, flowbiteTabButtonState, flowbiteTabButtonTheme, flowbiteTabContentState, flowbiteTabContentTheme, flowbiteTabListState, flowbiteTabListTheme, flowbiteTabState, flowbiteTabTheme, greeting, injectFlowbiteTabButtonConfig, injectFlowbiteTabButtonState, injectFlowbiteTabConfig, injectFlowbiteTabContentConfig, injectFlowbiteTabContentState, injectFlowbiteTabListConfig, injectFlowbiteTabListState, injectFlowbiteTabState, provideFlowbiteTabButtonConfig, provideFlowbiteTabButtonState, provideFlowbiteTabConfig, provideFlowbiteTabContentConfig, provideFlowbiteTabContentState, provideFlowbiteTabListConfig, provideFlowbiteTabListState, provideFlowbiteTabState };
+//# sourceMappingURL=flowbite-angular-tab.mjs.map