flowbite-angular
Version:
<div align="center"> <h1>flowbite-angular</h1> <p> Build websites even faster with components on top of Angular and Tailwind CSS </p> <p> <a href="https://discord.com/invite/4eeurUVvTy"> <img src="https://img.shields.io/discord/90291
345 lines (329 loc) • 14.8 kB
JavaScript
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 { twMerge } from 'tailwind-merge';
const flowbiteCardTheme = createTheme({
host: {
base: 'flex size-fit rounded-lg border shadow-sm',
transition: '',
orientation: {
horizontal: 'flex-row',
vertical: 'flex-col',
},
color: {
default: {
light: 'border-gray-100 bg-white shadow-gray-100',
dark: 'dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-800',
},
info: {
light: 'border-blue-100 bg-white shadow-blue-100',
dark: 'dark:border-blue-900 dark:bg-gray-900 dark:shadow-blue-900',
},
failure: {
light: 'border-red-100 bg-white shadow-red-100',
dark: 'dark:border-red-900 dark:bg-gray-900 dark:shadow-red-900',
},
success: {
light: 'border-green-100 bg-white shadow-green-100',
dark: 'dark:border-green-900 dark:bg-gray-900 dark:shadow-green-900',
},
warning: {
light: 'border-yellow-100 bg-white shadow-yellow-100',
dark: 'dark:border-yellow-900 dark:bg-gray-900 dark:shadow-yellow-900',
},
primary: {
light: 'border-primary-100 shadow-primary-100 bg-white',
dark: 'dark:border-primary-900 dark:shadow-primary-900 dark:bg-gray-900',
},
},
size: {
xs: 'w-xs',
sm: 'w-sm',
md: 'w-md',
lg: 'w-lg',
xl: 'w-xl',
},
},
});
const defaultFlowbiteCardConfig = {
baseTheme: flowbiteCardTheme,
color: 'default',
size: 'md',
orientation: 'vertical',
customTheme: {},
};
const FlowbiteCardConfigToken = new InjectionToken('FlowbiteCardConfigToken');
/**
* Provide the default Card configuration
* @param config The Card configuration
* @returns The provider
*/
const provideFlowbiteCardConfig = (config) => [
{
provide: FlowbiteCardConfigToken,
useValue: { ...defaultFlowbiteCardConfig, ...config },
},
];
/**
* Inject the Card configuration
* @see {@link defaultFlowbiteCardConfig}
* @returns The configuration
*/
const injectFlowbiteCardConfig = () => inject(FlowbiteCardConfigToken, { optional: true }) ?? defaultFlowbiteCardConfig;
const FlowbiteCardStateToken = createStateToken('Flowbite Card');
const provideFlowbiteCardState = createStateProvider(FlowbiteCardStateToken);
const injectFlowbiteCardState = createStateInjector(FlowbiteCardStateToken);
const flowbiteCardState = createState(FlowbiteCardStateToken);
class Card {
constructor() {
this.config = injectFlowbiteCardConfig();
/**
* @see {@link injectFlowbiteCardConfig}
*/
this.color = input(this.config.color);
/**
* @see {@link injectFlowbiteCardConfig}
*/
this.size = input(this.config.size);
/**
* @see {@link injectFlowbiteCardConfig}
*/
this.orientation = input(this.config.orientation);
/**
* @see {@link injectFlowbiteCardConfig}
*/
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.state.color()), mergedTheme.host.orientation[this.state.orientation()], this.state.orientation() === 'vertical' && mergedTheme.host.size[this.state.size()]),
},
};
});
/**
* @internal
*/
this.state = flowbiteCardState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Card, isStandalone: true, selector: "\n [flowbiteCard]\n ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteCardState()], exportAs: ["flowbiteCard"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Card, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
[flowbiteCard]
`,
exportAs: 'flowbiteCard',
hostDirectives: [],
providers: [provideFlowbiteCardState()],
host: { '[class]': `theme().host.root` },
}]
}] });
const flowbiteCardHeaderTheme = createTheme({
host: {
base: 'mb-2 text-2xl font-bold tracking-tight',
transition: '',
color: {
default: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
info: {
light: 'text-blue-900',
dark: 'dark:text-blue-700',
},
failure: {
light: 'text-red-900',
dark: 'dark:text-red-700',
},
success: {
light: 'text-green-900',
dark: 'dark:text-green-700',
},
warning: {
light: 'text-yellow-900',
dark: 'dark:text-yellow-700',
},
primary: {
light: 'text-primary-900',
dark: 'dark:text-primary-700',
},
},
},
});
const defaultFlowbiteCardHeaderConfig = {
baseTheme: flowbiteCardHeaderTheme,
customTheme: {},
};
const FlowbiteCardHeaderConfigToken = new InjectionToken('FlowbiteCardHeaderConfigToken');
/**
* Provide the default CardHeader configuration
* @param config The CardHeader configuration
* @returns The provider
*/
const provideFlowbiteCardHeaderConfig = (config) => [
{
provide: FlowbiteCardHeaderConfigToken,
useValue: { ...defaultFlowbiteCardHeaderConfig, ...config },
},
];
/**
* Inject the CardHeader configuration
* @see {@link defaultFlowbiteCardHeaderConfig}
* @returns The configuration
*/
const injectFlowbiteCardHeaderConfig = () => inject(FlowbiteCardHeaderConfigToken, { optional: true }) ?? defaultFlowbiteCardHeaderConfig;
const FlowbiteCardHeaderStateToken = createStateToken('Flowbite CardHeader');
const provideFlowbiteCardHeaderState = createStateProvider(FlowbiteCardHeaderStateToken);
const injectFlowbiteCardHeaderState = createStateInjector(FlowbiteCardHeaderStateToken);
const flowbiteCardHeaderState = createState(FlowbiteCardHeaderStateToken);
class CardHeader {
constructor() {
this.config = injectFlowbiteCardHeaderConfig();
this.cardState = injectFlowbiteCardState();
/**
* @see {@link injectFlowbiteCardHeaderConfig}
*/
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.cardState().color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteCardHeaderState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: CardHeader, isStandalone: true, selector: "\n [flowbiteCardHeader]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteCardHeaderState()], exportAs: ["flowbiteCardHeader"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardHeader, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
[flowbiteCardHeader]
`,
exportAs: 'flowbiteCardHeader',
hostDirectives: [],
providers: [provideFlowbiteCardHeaderState()],
host: { '[class]': `theme().host.root` },
}]
}] });
const flowbiteCardContentTheme = createTheme({
host: {
base: 'p-6 font-normal',
transition: '',
color: {
default: {
light: 'text-gray-700',
dark: 'dark:text-gray-100',
},
info: {
light: 'text-gray-700',
dark: 'dark:text-gray-100',
},
failure: {
light: 'text-gray-700',
dark: 'dark:text-gray-100',
},
success: {
light: 'text-gray-700',
dark: 'dark:text-gray-100',
},
warning: {
light: 'text-gray-700',
dark: 'dark:text-gray-100',
},
primary: {
light: 'text-gray-700',
dark: 'dark:text-gray-100',
},
},
size: {
xs: 'w-xs',
sm: 'w-sm',
md: 'w-md',
lg: 'w-lg',
xl: 'w-xl',
},
},
});
const defaultFlowbiteCardContentConfig = {
baseTheme: flowbiteCardContentTheme,
customTheme: {},
};
const FlowbiteCardContentConfigToken = new InjectionToken('FlowbiteCardContentConfigToken');
/**
* Provide the default CardContent configuration
* @param config The CardContent configuration
* @returns The provider
*/
const provideFlowbiteCardContentConfig = (config) => [
{
provide: FlowbiteCardContentConfigToken,
useValue: { ...defaultFlowbiteCardContentConfig, ...config },
},
];
/**
* Inject the CardContent configuration
* @see {@link defaultFlowbiteCardContentConfig}
* @returns The configuration
*/
const injectFlowbiteCardContentConfig = () => inject(FlowbiteCardContentConfigToken, { optional: true }) ?? defaultFlowbiteCardContentConfig;
const FlowbiteCardContentStateToken = createStateToken('Flowbite CardContent');
const provideFlowbiteCardContentState = createStateProvider(FlowbiteCardContentStateToken);
const injectFlowbiteCardContentState = createStateInjector(FlowbiteCardContentStateToken);
const flowbiteCardContentState = createState(FlowbiteCardContentStateToken);
class CardContent {
constructor() {
this.config = injectFlowbiteCardContentConfig();
this.cardState = injectFlowbiteCardState();
/**
* @see {@link injectFlowbiteCardContentConfig}
*/
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.cardState().color()), this.cardState().orientation() === 'horizontal' &&
mergedTheme.host.size[this.cardState().size()]),
},
};
});
/**
* @internal
*/
this.state = flowbiteCardContentState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: CardContent, isStandalone: true, selector: "\n [flowbiteCardContent]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteCardContentState()], exportAs: ["flowbiteCardContent"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CardContent, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
[flowbiteCardContent]
`,
exportAs: 'flowbiteCardContent',
hostDirectives: [],
providers: [provideFlowbiteCardContentState()],
host: { '[class]': `theme().host.root` },
}]
}] });
/* Card */
/**
* Generated bundle index. Do not edit.
*/
export { Card, CardContent, CardHeader, FlowbiteCardConfigToken, FlowbiteCardContentConfigToken, FlowbiteCardContentStateToken, FlowbiteCardHeaderConfigToken, FlowbiteCardHeaderStateToken, FlowbiteCardStateToken, defaultFlowbiteCardConfig, defaultFlowbiteCardContentConfig, defaultFlowbiteCardHeaderConfig, flowbiteCardContentState, flowbiteCardContentTheme, flowbiteCardHeaderState, flowbiteCardHeaderTheme, flowbiteCardState, flowbiteCardTheme, injectFlowbiteCardConfig, injectFlowbiteCardContentConfig, injectFlowbiteCardContentState, injectFlowbiteCardHeaderConfig, injectFlowbiteCardHeaderState, injectFlowbiteCardState, provideFlowbiteCardConfig, provideFlowbiteCardContentConfig, provideFlowbiteCardContentState, provideFlowbiteCardHeaderConfig, provideFlowbiteCardHeaderState, provideFlowbiteCardState };
//# sourceMappingURL=flowbite-angular-card.mjs.map