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
194 lines (188 loc) • 8.48 kB
JavaScript
import { mergeTheme, CHEVRON_UP_SVG_ICON, 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 } from 'flowbite-angular';
import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
import { NgTemplateOutlet } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
/**
* `InjectionToken` used to import `ScrollTopTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SCROLL_TOP_THEME_TOKEN)
* ```
*/
const FLOWBITE_SCROLL_TOP_THEME_TOKEN = new InjectionToken('FLOWBITE_SCROLL_TOP_THEME_TOKEN');
class ScrollTopThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SCROLL_TOP_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color[properties.color], theme.root.position[properties.position]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ScrollTopThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ScrollTopThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ScrollTopThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE');
const FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE');
const FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE');
const FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE');
const scrollTopDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,
useValue: 'bottom-right',
},
{
provide: FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* Provide a way to go at the top of the page via a button
*/
class ScrollTopComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(ScrollTopThemeService);
/**
* `IconRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
//#region properties
/**
* Set the scroll top color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE));
/**
* Set the scroll top position
*
* @default bottom-right
*/
this.position = model(inject(FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE));
/**
* Set the scroll top icon
*
* @default undefined
*/
this.icon = model(inject(FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE));
/**
* Set the custom style for this scroll top
*
* @default {}
*/
this.customStyle = model(inject(FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implemenation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
position: this.position(),
customStyle: this.customStyle(),
});
}
init() {
this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-up', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_UP_SVG_ICON));
}
//#endregion
/**
* Navigate to the top of the page
*/
onClick() {
window.scrollTo(window.scrollX, 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ScrollTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ScrollTopComponent, isStandalone: true, selector: "flowbite-scroll-top", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", position: "positionChange", icon: "iconChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
(icon()) {
<ng-container [ngTemplateOutlet]="icon()!" />
} {
<flowbite-icon
svgIcon="flowbite-angular:chevron-up"
class="w-5 h-5" />
}
`, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }, { 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: ScrollTopComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-scroll-top',
imports: [IconComponent, NgTemplateOutlet],
template: `
(icon()) {
<ng-container [ngTemplateOutlet]="icon()!" />
} {
<flowbite-icon
svgIcon="flowbite-angular:chevron-up"
class="w-5 h-5" />
}
`,
host: {
'(click)': 'onClick()',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `ScrollTopComponent`
*/
const scrollTopTheme = createTheme({
root: {
base: 'cursor-pointer fixed flex flex-row place-items-center p-2 rounded-lg',
color: {
primary: 'bg-primary-100',
dark: 'bg-gray-100 dark:bg-gray-800 dark:text-white',
blue: 'bg-blue-100',
gray: 'bg-gray-100',
green: 'bg-green-100',
lime: 'bg-lime-100',
purple: 'bg-purple-100',
red: 'bg-red-100',
},
position: {
'bottom-center': 'bottom-3 left-1/2 right-1/2',
'bottom-left': 'bottom-3 left-3',
'bottom-right': 'bottom-3 right-3',
'center-left': 'left-3 top-1/2 bottom-1/2',
'center-right': 'right-3 top-1/2 bottom-1/2',
'top-center': 'top-3 left-1/2 right-1/2',
'top-left': 'top-3 left-3',
'top-right': 'top-3 right-3',
},
},
});
/**
* Generated bundle index. Do not edit.
*/
export { FLOWBITE_SCROLL_TOP_COLOR_DEFAULT_VALUE, FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE, FLOWBITE_SCROLL_TOP_THEME_TOKEN, ScrollTopComponent, ScrollTopThemeService, scrollTopDefaultValueProvider, scrollTopTheme };
//# sourceMappingURL=flowbite-angular-scroll-top.mjs.map