UNPKG

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

1 lines 3.94 kB
{"version":3,"file":"flowbite-angular-theme.mjs","sources":["../../../../libs/flowbite-angular/theme/flowbite-theme.directive.ts","../../../../libs/flowbite-angular/theme/flowbite-angular-theme.ts"],"sourcesContent":["import type { FlowbiteTheme } from 'flowbite-angular';\n\nimport type { OnInit } from '@angular/core';\nimport { afterNextRender, Directive, inject, Injector, signal, untracked } from '@angular/core';\n\n/**\n * Use to give a clean API on the current application theme\n */\n@Directive({\n standalone: true,\n selector: '[flowbiteTheme]',\n})\nexport class FlowbiteThemeDirective implements OnInit {\n private readonly injector = inject(Injector);\n\n private readonly localStorageKey = 'color-theme';\n private readonly _currentTheme = signal<FlowbiteTheme>('light');\n\n public ngOnInit(): void {\n afterNextRender(\n () => {\n this.toggleTheme(this.getLocalStorageTheme());\n },\n { injector: this.injector }\n );\n }\n\n /**\n * Get the application theme based on `signals`\n */\n public readonly currentTheme = this._currentTheme.asReadonly();\n\n /**\n * Get theme from the `localStorage`\n *\n * @returns The current theme saved in the `localStorage` with the key `color-theme`\n */\n public getLocalStorageTheme(): FlowbiteTheme {\n return localStorage.getItem(this.localStorageKey) === 'dark' ? 'dark' : 'light';\n }\n\n /**\n * Toggle the theme saved in the `localStorage` and available in `currentTheme`\n *\n * @param theme If provided, force the theme instead of toggling it between light and dark mode\n */\n public toggleTheme(theme?: FlowbiteTheme): void {\n if (!theme) {\n const tmpTheme = untracked(() => this.currentTheme());\n\n if (tmpTheme === 'dark') theme = 'light';\n else theme = 'dark';\n }\n\n this.setTheme(theme);\n }\n\n /**\n * Set the theme inside the page\n *\n * @param theme Theme to apply\n */\n public setTheme(theme: FlowbiteTheme): void {\n try {\n localStorage.setItem(this.localStorageKey, theme);\n } catch (error) {\n console.warn('Failed to save theme to localStorage:', error);\n }\n this._currentTheme.set(theme);\n\n theme === 'dark'\n ? document.documentElement.classList.add('dark')\n : document.documentElement.classList.remove('dark');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAKA;;AAEG;MAKU,sBAAsB,CAAA;AAJnC,IAAA,WAAA,GAAA;AAKmB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QAE3B,IAAe,CAAA,eAAA,GAAG,aAAa;AAC/B,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAgB,OAAO,CAAC;AAW/D;;AAEG;AACa,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE;AA4C/D;IAxDQ,QAAQ,GAAA;QACb,eAAe,CACb,MAAK;YACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC9C,EACD,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAC5B;;AAQH;;;;AAIG;IACI,oBAAoB,GAAA;AACzB,QAAA,OAAO,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO;;AAGjF;;;;AAIG;AACI,IAAA,WAAW,CAAC,KAAqB,EAAA;QACtC,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YAErD,IAAI,QAAQ,KAAK,MAAM;gBAAE,KAAK,GAAG,OAAO;;gBACnC,KAAK,GAAG,MAAM;;AAGrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;AAGtB;;;;AAIG;AACI,IAAA,QAAQ,CAAC,KAAoB,EAAA;AAClC,QAAA,IAAI;YACF,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;;QACjD,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,IAAI,CAAC,uCAAuC,EAAE,KAAK,CAAC;;AAE9D,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAE7B,QAAA,KAAK,KAAK;cACN,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM;cAC7C,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;;8GA5D5C,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;;;ACXD;;AAEG;;;;"}