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
241 lines (230 loc) • 12.3 kB
JavaScript
import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
import * as i0 from '@angular/core';
import { InjectionToken, inject, input, booleanAttribute, Directive, computed } from '@angular/core';
import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
import * as i1 from 'ng-primitives/button';
import { NgpButton } from 'ng-primitives/button';
import * as i2 from 'ng-primitives/interactions';
import { NgpFocus } from 'ng-primitives/interactions';
import { twMerge } from 'tailwind-merge';
const FlowbiteBaseButtonStateToken = createStateToken('Flowbite BaseButton');
const provideFlowbiteBaseButtonState = createStateProvider(FlowbiteBaseButtonStateToken);
const injectFlowbiteBaseButtonState = createStateInjector(FlowbiteBaseButtonStateToken);
const flowbiteBaseButtonState = createState(FlowbiteBaseButtonStateToken);
const defaultFlowbiteBaseButtonConfig = {
color: 'default',
size: 'md',
pill: false,
outline: false,
};
const FlowbiteBaseButtonConfigToken = new InjectionToken('FlowbiteBaseButtonConfigToken');
/**
* Provide the default BaseButton configuration
* @param config The BaseButton configuration
* @returns The provider
*/
const provideFlowbiteBaseButtonConfig = (config) => [
{
provide: FlowbiteBaseButtonConfigToken,
useValue: { ...defaultFlowbiteBaseButtonConfig, ...config },
},
];
/**
* Inject the BaseButton configuration
* @see {@link defaultFlowbiteBaseButtonConfig}
* @returns The configuration
*/
const injectFlowbiteBaseButtonConfig = () => inject(FlowbiteBaseButtonConfigToken, { optional: true }) ?? defaultFlowbiteBaseButtonConfig;
class BaseButton {
constructor() {
this.config = injectFlowbiteBaseButtonConfig();
/**
* @see {@link injectFlowbiteBaseButtonConfig}
*/
this.color = input(this.config.color);
/**
* @see {@link injectFlowbiteBaseButtonConfig}
*/
this.size = input(this.config.size);
/**
* @see {@link injectFlowbiteBaseButtonConfig}
*/
this.pill = input(this.config.pill, { transform: booleanAttribute });
/**
* @see {@link injectFlowbiteBaseButtonConfig}
*/
this.outline = input(this.config.outline, { transform: booleanAttribute });
/**
* @internal
*/
this.state = flowbiteBaseButtonState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideFlowbiteBaseButtonState()], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseButton, decorators: [{
type: Directive,
args: [{
standalone: true,
providers: [provideFlowbiteBaseButtonState()],
}]
}] });
const flowbiteButtonTheme = createTheme({
host: {
base: 'flex cursor-pointer items-center justify-center border text-center font-medium',
transition: '',
focus: 'data-focus:ring-2',
disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-75',
size: {
xs: 'px-3 py-2 text-xs',
sm: 'px-3 py-2 text-sm',
md: 'px-5 py-2.5 text-sm',
lg: 'px-5 py-3 text-base',
xl: 'px-6 py-3.5 text-base',
},
pill: {
on: 'rounded-full',
off: 'rounded-lg',
},
color: {
default: {
light: 'border-gray-200 bg-gray-100 text-gray-700 data-hover:bg-gray-200',
dark: 'dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100 dark:data-hover:bg-gray-700',
},
info: {
light: 'border-blue-700 bg-blue-600 text-gray-100 data-hover:bg-blue-700',
dark: 'dark:border-blue-900 dark:bg-blue-800 dark:text-blue-100 dark:data-hover:bg-blue-900',
},
failure: {
light: 'border-red-700 bg-red-600 text-gray-100 data-hover:bg-red-700',
dark: 'dark:border-red-900 dark:bg-red-800 dark:text-red-100 dark:data-hover:bg-red-900',
},
success: {
light: 'border-green-700 bg-green-600 text-gray-100 data-hover:bg-green-700',
dark: 'dark:border-green-900 dark:bg-green-800 dark:text-green-100 dark:data-hover:bg-green-900',
},
warning: {
light: 'border-yellow-700 bg-yellow-600 text-gray-100 data-hover:bg-yellow-700',
dark: 'dark:border-yellow-900 dark:bg-yellow-800 dark:text-yellow-100 dark:data-hover:bg-yellow-900',
},
primary: {
light: 'border-primary-800 bg-primary-700 data-hover:bg-primary-800 text-gray-100',
dark: 'dark:border-primary-900 dark:bg-primary-800 dark:text-primary-100 dark:data-hover:bg-primary-900',
},
},
colorOutline: {
default: {
light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100',
dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700',
},
info: {
light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100',
dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100',
},
failure: {
light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100',
dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100',
},
success: {
light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100',
dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100',
},
warning: {
light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100',
dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100',
},
primary: {
light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100',
dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100',
},
},
},
});
const defaultFlowbiteButtonConfig = {
baseTheme: flowbiteButtonTheme,
customTheme: {},
};
const FlowbiteButtonConfigToken = new InjectionToken('FlowbiteButtonConfigToken');
/**
* Provide the default Button configuration
* @param config The Button configuration
* @returns The provider
*/
const provideFlowbiteButtonConfig = (config) => [
{
provide: FlowbiteButtonConfigToken,
useValue: { ...defaultFlowbiteButtonConfig, ...config },
},
];
/**
* Inject the Button configuration
* @see {@link defaultFlowbiteButtonConfig}
* @returns The configuration
*/
const injectFlowbiteButtonConfig = () => inject(FlowbiteButtonConfigToken, { optional: true }) ?? defaultFlowbiteButtonConfig;
const FlowbiteButtonStateToken = createStateToken('Flowbite Button');
const provideFlowbiteButtonState = createStateProvider(FlowbiteButtonStateToken);
const injectFlowbiteButtonState = createStateInjector(FlowbiteButtonStateToken);
const flowbiteButtonState = createState(FlowbiteButtonStateToken);
class Button {
constructor() {
this.config = injectFlowbiteButtonConfig();
this.baseButtonState = injectFlowbiteBaseButtonState();
/**
* @see {@link injectFlowbiteButtonConfig}
*/
this.customTheme = input(this.config.customTheme);
/**
* @internal
*/
this.state = flowbiteButtonState(this);
this.theme = computed(() => {
const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
return {
host: {
root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.baseButtonState().size()], mergedTheme.host.pill[this.baseButtonState().pill() ? 'on' : 'off'], this.baseButtonState().outline()
? colorToTheme(mergedTheme.host.colorOutline, this.baseButtonState().color())
: colorToTheme(mergedTheme.host.color, this.baseButtonState().color())),
},
};
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Button, isStandalone: true, selector: "\n button[flowbiteButton],\n a[flowbiteButton]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteButtonState()], exportAs: ["flowbiteButton"], hostDirectives: [{ directive: i1.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i2.NgpFocus, inputs: ["ngpFocusDisabled", "focusDisabled"], outputs: ["ngpFocus", "ngpFocus"] }, { directive: BaseButton, inputs: ["color", "color", "size", "size", "pill", "pill", "outline", "outline"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
button[flowbiteButton],
a[flowbiteButton]
`,
exportAs: 'flowbiteButton',
hostDirectives: [
{
directive: NgpButton,
inputs: ['disabled:disabled'],
outputs: [],
},
{
directive: NgpFocus,
inputs: ['ngpFocusDisabled:focusDisabled'],
outputs: ['ngpFocus'],
},
{
directive: BaseButton,
inputs: ['color', 'size', 'pill', 'outline'],
outputs: [],
},
],
providers: [provideFlowbiteButtonState()],
host: { '[class]': `theme().host.root` },
}]
}] });
/* Button */
/**
* Generated bundle index. Do not edit.
*/
export { BaseButton, Button, FlowbiteBaseButtonConfigToken, FlowbiteBaseButtonStateToken, FlowbiteButtonConfigToken, FlowbiteButtonStateToken, defaultFlowbiteBaseButtonConfig, defaultFlowbiteButtonConfig, flowbiteBaseButtonState, flowbiteButtonState, flowbiteButtonTheme, injectFlowbiteBaseButtonConfig, injectFlowbiteBaseButtonState, injectFlowbiteButtonConfig, injectFlowbiteButtonState, provideFlowbiteBaseButtonConfig, provideFlowbiteBaseButtonState, provideFlowbiteButtonConfig, provideFlowbiteButtonState };
//# sourceMappingURL=flowbite-angular-button.mjs.map