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
267 lines (261 loc) • 13.2 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';
/**
* `InjectionToken` used to import `IndicatorTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_INDICATOR_THEME_TOKEN)
* ```
*/
const FLOWBITE_INDICATOR_THEME_TOKEN = new InjectionToken('FLOWBITE_INDICATOR_THEME_TOKEN');
class IndicatorThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_INDICATOR_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.hasBorder[properties.hasBorder], theme.root.color[properties.color], theme.root.isDisabled[properties.isDisabled], properties.placement &&
properties.hasOffset == 'enabled' &&
theme.root.hasOffset[properties.placement], theme.root.isOutline[properties.isOutline], theme.root.isPill[properties.isPill], properties.placement && 'absolute ' + theme.root.placement[properties.placement], theme.root.isRounded[properties.isRounded], theme.root.size[properties.size]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IndicatorThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IndicatorThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IndicatorThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE');
const FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE');
const indicatorDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE,
useValue: 'md',
},
{
provide: FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/indicators/
*/
class IndicatorComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(IndicatorThemeService);
//#region properties
/**
* Set if the indicator is pill
*
* @default false
*/
this.isPill = model(inject(FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE));
/**
* Set if the indicator is outline
*
* @default false
*/
this.isOutline = model(inject(FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE));
/**
* Set if the indicator is disable
*
* @default false
*/
this.isDisabled = model(inject(FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE));
/**
* Set if the indicator has offset
*
* @default false
*/
this.hasOffset = model(inject(FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE));
/**
* Set if the indicator is rounded
*
* @default false
*/
this.isRounded = model(inject(FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE));
/**
* Set if the indicator has border
*
* @default false
*/
this.hasBorder = model(inject(FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE));
/**
* Set the indicator color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE));
/**
* Set the indicator size
*
* @default md
*/
this.size = model(inject(FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE));
/**
* Set the indicator placement
*
* @default undefined
*/
this.placement = model(inject(FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE));
/**
* Set the custom style for this indicator
*/
this.customStyle = model(inject(FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
color: this.color(),
isDisabled: booleanToFlowbiteBoolean(this.isDisabled()),
hasOffset: booleanToFlowbiteBoolean(this.hasOffset()),
isOutline: booleanToFlowbiteBoolean(this.isOutline()),
isPill: booleanToFlowbiteBoolean(this.isPill()),
isRounded: booleanToFlowbiteBoolean(this.isRounded()),
size: this.size(),
placement: this.placement(),
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IndicatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: IndicatorComponent, isStandalone: true, selector: "flowbite-indicator", inputs: { isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, isOutline: { classPropertyName: "isOutline", publicName: "isOutline", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, hasOffset: { classPropertyName: "hasOffset", publicName: "hasOffset", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPill: "isPillChange", isOutline: "isOutlineChange", isDisabled: "isDisabledChange", hasOffset: "hasOffsetChange", isRounded: "isRoundedChange", hasBorder: "hasBorderChange", color: "colorChange", size: "sizeChange", placement: "placementChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IndicatorComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-indicator',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `IndicatorComponent`
*/
const indicatorTheme = createTheme({
root: {
base: 'inline-flex items-center justify-center shrink-0 font-bold',
hasBorder: {
enabled: 'border-2',
disabled: '',
},
color: {
dark: 'bg-gray-900 dark:bg-gray-700 border-white dark:border-gray-800 text-white',
primary: 'bg-primary-500 border-white dark:border-gray-800 text-white',
gray: 'bg-gray-200 border-white dark:border-gray-800 text-gray-900',
blue: 'bg-blue-600 border-white dark:border-gray-800 text-white',
green: 'bg-green-500 border-white dark:border-gray-800 text-white',
red: 'bg-red-500 border-white dark:border-gray-800 text-white',
purple: 'bg-purple-500 border-white dark:border-gray-800 text-white',
indigo: 'bg-indigo-500 border-white dark:border-gray-800 text-white',
yellow: 'bg-yellow-300 border-white dark:border-gray-800 text-gray-900',
teal: 'bg-teal-500 border-white dark:border-gray-800 text-white',
},
isDisabled: {
enabled: 'opacity-50',
disabled: '',
},
hasOffset: {
'top-left': '-translate-x-1/3 -translate-y-1/3',
'top-center': '-translate-y-1/3',
'top-right': 'translate-x-1/3 -translate-y-1/3',
'center-left': '-translate-x-1/3',
center: '',
'center-right': 'translate-x-1/3',
'bottom-left': '-translate-x-1/3 translate-y-1/3',
'bottom-center': 'translate-y-1/3',
'bottom-right': 'translate-x-1/3 translate-y-1/3',
},
placement: {
'top-left': 'top-0 left-0',
'top-center': 'top-0 left-1/2 -translate-x-1/2',
'top-right': 'top-0 right-0',
'center-left': 'top-1/2 -translate-y-1/2 left-0',
center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
'center-right': 'top-1/2 -translate-y-1/2 right-0',
'bottom-left': 'bottom-0 left-0',
'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
'bottom-right': 'bottom-0 right-0',
},
isOutline: {
enabled: '',
disabled: '',
},
isPill: {
enabled: '',
disabled: '',
},
isRounded: {
enabled: 'rounded',
disabled: 'rounded-full',
},
size: {
xs: 'w-2 h-2 text-xs',
sm: 'w-2.5 h-2.5 text-sm',
md: 'w-3 h-3 text-sm',
lg: 'w-3.5 h-3.5 text-sm',
xl: 'w-6 h-6 text-sm',
},
},
});
/**
* Generated bundle index. Do not edit.
*/
export { FLOWBITE_INDICATOR_COLOR_DEFAULT_VALUE, FLOWBITE_INDICATOR_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_INDICATOR_HAS_BORDER_DEFAULT_VALUE, FLOWBITE_INDICATOR_HAS_OFFSET_DEFAULT_VALUE, FLOWBITE_INDICATOR_IS_DISABLED_DEFAULT_VALUE, FLOWBITE_INDICATOR_IS_OUTLINE_DEFAULT_VALUE, FLOWBITE_INDICATOR_IS_PILL_DEFAULT_VALUE, FLOWBITE_INDICATOR_IS_ROUNDED_DEFAULT_VALUE, FLOWBITE_INDICATOR_PLACEMENT_DEFAULT_VALUE, FLOWBITE_INDICATOR_SIZE_DEFAULT_VALUE, FLOWBITE_INDICATOR_THEME_TOKEN, IndicatorComponent, IndicatorThemeService, indicatorDefaultValueProvider, indicatorTheme };
//# sourceMappingURL=flowbite-angular-indicator.mjs.map