flowbite-angular
Version:
<div align="center"> <h1>:construction: flowbite-angular (unreleased) :construction:</h1> <p> <a href="https://flowbite.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github
322 lines (314 loc) • 20.5 kB
JavaScript
import { mergeTheme, createTheme } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { twMerge } from 'tailwind-merge';
import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
import { NgTemplateOutlet } from '@angular/common';
/**
* `InjectionToken` used to import `ButtonTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_BUTTON_THEME_TOKEN)
* ```
*/
const FLOWBITE_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_BUTTON_THEME_TOKEN');
class ButtonThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_BUTTON_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(properties.gradientDuoTone && properties.fill == 'outline'
? theme.root.base['span']
: `${theme.root.base['default']} ${theme.root.size[properties.size]}`, properties.gradientDuoTone
? theme.root.gradientDuoTone[properties.gradientDuoTone][properties.fill]
: properties.gradientMonochrome
? theme.root.gradientMonochrome[properties.gradientMonochrome]
: theme.root.color[properties.color][properties.fill], theme.root.isPill[properties.isPill], theme.root.isDisabled[properties.isDisabled]),
spanClass: twMerge(theme.span.base, theme.span.isPill[properties.isPill], theme.span.size[properties.size]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE');
const FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE');
const FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE');
const FLOWBITE_BUTTON_FILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_FILL_DEFAULT_VALUE');
const FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE');
const FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE');
const FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE');
const FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
const buttonDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE,
useValue: 'md',
},
{
provide: FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_BUTTON_FILL_DEFAULT_VALUE,
useValue: 'solid',
},
{
provide: FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/buttons/
*/
class ButtonComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(ButtonThemeService);
//#region properties
/**
* Set the button color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE));
/**
* Set the button size
*
* @default md
*/
this.size = model(inject(FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE));
/**
* Set if the button is pill
*
* @default false
*/
this.isPill = model(inject(FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE));
/**
* Set the button fill
*
* @default solid
*/
this.fill = model(inject(FLOWBITE_BUTTON_FILL_DEFAULT_VALUE));
/**
* Set if the button is disabled
*
* @default false
*/
this.isDisabled = model(inject(FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE));
/**
* Set the button gradient monochrome
*
* @default undefined
*/
this.gradientMonochrome = model(inject(FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE));
/**
* Set the button gradient duotone
*
* @default undefined
*/
this.gradientDuoTone = model(inject(FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE));
/**
* Set the custom style for this button
*/
this.customStyle = model(inject(FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
isDisabled: booleanToFlowbiteBoolean(this.isDisabled()),
fill: this.fill(),
isPill: booleanToFlowbiteBoolean(this.isPill()),
size: this.size(),
gradientMonochrome: this.gradientMonochrome(),
gradientDuoTone: this.gradientDuoTone(),
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ButtonComponent, isStandalone: true, selector: "flowbite-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, gradientMonochrome: { classPropertyName: "gradientMonochrome", publicName: "gradientMonochrome", isSignal: true, isRequired: false, transformFunction: null }, gradientDuoTone: { classPropertyName: "gradientDuoTone", publicName: "gradientDuoTone", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", size: "sizeChange", isPill: "isPillChange", fill: "fillChange", isDisabled: "isDisabledChange", gradientMonochrome: "gradientMonochromeChange", gradientDuoTone: "gradientDuoToneChange", customStyle: "customStyleChange" }, host: { properties: { "attr.type": "button" } }, usesInheritance: true, ngImport: i0, template: `
(gradientDuoTone() && fill() === 'outline') {
<span [class]="contentClasses().spanClass">
<ng-content *ngTemplateOutlet="content" />
</span>
} {
<ng-content *ngTemplateOutlet="content" />
}
<ng-template #content>
<ng-content />
</ng-template>
`, 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: "19.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [NgTemplateOutlet],
selector: 'flowbite-button',
template: `
(gradientDuoTone() && fill() === 'outline') {
<span [class]="contentClasses().spanClass">
<ng-content *ngTemplateOutlet="content" />
</span>
} {
<ng-content *ngTemplateOutlet="content" />
}
<ng-template #content>
<ng-content />
</ng-template>
`,
host: {
'[attr.type]': 'button',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `ButtonComponent`
*/
const buttonTheme = createTheme({
root: {
base: {
default: 'cursor-pointer group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
span: 'cursor-pointer group inline-flex relative items-center justify-center p-0.5 font-medium overflow-hidden',
},
color: {
dark: {
solid: 'text-white bg-gray-800 dark:bg-gray-800 border border-transparent dark:border-gray-700 hover:bg-gray-900 dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-800 disabled:hover:bg-gray-800 dark:disabled:hover:bg-gray-800',
outline: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 dark:hover:bg-gray-600 dark:focus:ring-gray-800',
},
primary: {
solid: 'text-white bg-primary-700 border border-transparent hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-700 dark:hover:bg-primary-800 dark:focus:ring-primary-900',
outline: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 dark:focus:ring-primary-900',
},
red: {
solid: 'text-white bg-red-700 border border-transparent hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
outline: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
},
blue: {
solid: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
outline: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
},
light: {
solid: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700',
outline: 'text-gray-900 bg-transparent border border-gray-200 hover:bg-white focus:ring-4 focus:ring-blue-300 dark:bg-transparent dark:text-white dark:border-white dark:hover:text-gray-900 dark:hover:bg-white dark:hover:border-gray-700 dark:focus:ring-gray-700',
},
purple: {
solid: 'text-white bg-purple-700 border border-transparent hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900',
outline: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900',
},
green: {
solid: 'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
outline: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
},
yellow: {
solid: 'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900',
outline: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
},
},
isDisabled: {
enabled: 'cursor-not-allowed opacity-50',
disabled: '',
},
gradientMonochrome: {
cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800',
blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800',
lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800',
pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800',
purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800',
green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800',
teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800',
},
gradientDuoTone: {
purpleToBlue: {
solid: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
outline: 'text-gray-900 bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
},
cyanToBlue: {
solid: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800',
outline: 'text-gray-900 bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
},
greenToBlue: {
solid: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
outline: 'text-gray-900 bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
},
purpleToPink: {
solid: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
outline: 'text-gray-900 bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
},
pinkToOrange: {
solid: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
outline: 'text-gray-900 bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
},
tealToLime: {
solid: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700',
outline: 'text-gray-900 bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800',
},
redToYellow: {
solid: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
outline: 'text-gray-900 bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
},
},
size: {
xs: 'text-xs py-2 px-3',
sm: 'text-sm py-2 px-3',
md: 'text-sm px-5 py-2.5',
lg: 'text-base py-3 px-5',
xl: 'text-base px-6 py-3.5',
},
isPill: {
enabled: 'rounded-full',
disabled: 'rounded-lg',
},
},
span: {
base: 'cursor-pointer relative inline-flex items-center bg-white transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-gray-900',
isPill: {
enabled: 'rounded-full',
disabled: 'rounded-md',
},
size: {
xs: 'text-xs py-2 px-3',
sm: 'text-sm py-2 px-3',
md: 'text-sm px-5 py-2.5',
lg: 'text-base py-3 px-5',
xl: 'text-base px-6 py-3.5',
},
},
});
/**
* Generated bundle index. Do not edit.
*/
export { ButtonComponent, ButtonThemeService, FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE, FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BUTTON_FILL_DEFAULT_VALUE, FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE, FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE, FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE, FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE, FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE, FLOWBITE_BUTTON_THEME_TOKEN, buttonDefaultValueProvider, buttonTheme };
//# sourceMappingURL=flowbite-angular-button.mjs.map