angular-tabler-icons
Version:
Tabler Icons components library for your Angular applications
1 lines • 10.1 kB
Source Map (JSON)
{"version":3,"file":"angular-tabler-icons.mjs","sources":["../../../projects/angular-tabler-icons/src/lib/options.provider.ts","../../../projects/angular-tabler-icons/src/lib/utils.ts","../../../projects/angular-tabler-icons/src/lib/tabler-icon.component.ts","../../../projects/angular-tabler-icons/src/lib/tabler-icons.module.ts","../../../projects/angular-tabler-icons/src/lib/tabler-icons.provider.ts","../../../projects/angular-tabler-icons/src/public-api.ts","../../../projects/angular-tabler-icons/src/angular-tabler-icons.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { Options } from './options.interfaces';\n\nexport const OPTIONS_TOKEN = new InjectionToken<Options[]>('OPTIONS_TOKEN');\n\nexport class OptionsProvider {\n constructor(private options: Options[]) {}\n}\n","/**\n * Converts a given string to UpperCamelCase (PascalCase).\n *\n * This function transforms the input string by:\n * 1. Converting the entire string to lowercase.\n * 2. Capitalizing the first letter of each word or uppercase letter.\n * 3. Removing any hyphens or underscores.\n *\n * @example\n * ```ts\n * upperCamelCase('foo-bar'); // FooBar\n * ```\n *\n * @param str - The input string to be converted.\n * @returns The transformed string in UpperCamelCase format.\n */\nexport function upperCamelCase(str: string) {\n return str\n .toLowerCase()\n .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (firstLetter) => {\n return firstLetter.toUpperCase();\n })\n .replace(/[-_]/g, '');\n}\n","import {\n Component,\n ElementRef,\n inject,\n ChangeDetectionStrategy,\n input,\n linkedSignal,\n untracked,\n effect,\n} from '@angular/core';\nimport { OPTIONS_TOKEN } from './options.provider';\nimport { upperCamelCase } from './utils';\n\n/**\n * A component that renders Tabler icons as SVG elements.\n *\n * This component takes an icon name as input and renders the corresponding SVG icon\n * by injecting it into the DOM. It supports multiple icon sets through an options token\n * and provides warnings when icons are not found.\n *\n * @example\n * ```html\n * <tabler-icon name=\"user\"></tabler-icon>\n * ```\n *\n * @remarks\n * The component uses Angular's dependency injection to get ElementRef and options.\n * Icons are rendered using innerHTML after being retrieved from the configured icon sets.\n * Warning messages are logged to the console when icons are not found (unless warnings are ignored in options).\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'i-tabler, tabler-icon',\n template: `<ng-content />`,\n styles: `\n :host {\n display: inline-block;\n width: 24px;\n height: 24px;\n fill: none;\n stroke: currentColor;\n stroke-width: 2px;\n stroke-linecap: round;\n stroke-linejoin: round;\n }`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TablerIconComponent {\n readonly #elem = inject<ElementRef>(ElementRef);\n readonly #options = inject(OPTIONS_TOKEN);\n\n /**\n * Icon name in kebab-case format.\n * @example\n * - \"user\"\n * - \"heart-filled\"\n * - \"camera-off\"\n * - \"brand-github\"\n * etc\n */\n readonly name = input.required<string>();\n\n readonly #svg = linkedSignal<string>(() => this.#getSvgIcon(this.name()));\n\n setNativeSvg = effect(() => {\n const svg = this.#svg();\n if (!svg) {\n return;\n }\n\n // Set innerHTML to render SVG\n untracked(() => {\n this.#elem.nativeElement.innerHTML = svg;\n });\n });\n\n /**\n * Retrieves the SVG markup for a given icon name from the configured icon sets.\n *\n * @param iconName - The name of the icon to retrieve in kebab-case format\n * @returns The SVG markup string for the icon, or an empty string if not found\n *\n * @remarks\n * This method:\n * - Merges all icon sets from the configured options\n * - Converts the icon name to upper camel case and prepends \"Icon\"\n * - Returns empty string if icon name is undefined\n * - Logs a warning if icon is not found (unless warnings are ignored in options)\n */\n #getSvgIcon(iconName: string | undefined) {\n // Merge all icon sets from options\n const icons = Object.assign(\n {},\n ...this.#options.map((option) => option.icons)\n );\n\n if (!iconName) {\n return '';\n }\n\n const icon = `Icon${upperCamelCase(iconName)}`;\n\n // Use optional chaining and nullish coalescing for safer property access\n const svg = icons?.[icon] ?? '';\n\n if (!svg && !this.#options.some((option) => option.ignoreWarnings)) {\n console.warn(\n `Tabler Icon not found: ${iconName}\\n\n Refer to documentation on https://github.com/pierreavn/angular-tabler-icons`\n );\n }\n\n return svg;\n }\n}\n","import { NgModule, ModuleWithProviders, inject } from '@angular/core';\nimport { TablerIconComponent } from './tabler-icon.component';\nimport { OPTIONS_TOKEN } from './options.provider';\nimport { OptionIcons, Options } from './options.interfaces';\n\n/**\n * @deprecated\n *\n */\n@NgModule({\n imports: [TablerIconComponent],\n exports: [TablerIconComponent],\n})\nexport class TablerIconsModule {\n private options = inject(OPTIONS_TOKEN, { optional: true });\n\n constructor() {\n if (!this.options) {\n throw new Error(\n `No icon provided. Make sure to use 'TablerIconsModule.pick({ ... })' when importing the module\\n` +\n `Refer to documentation on https://github.com/pierreavn/angular-tabler-icons`\n );\n }\n }\n\n /**\n * Initialize module with given icons and options\n * @param icons\n * @returns Module with options\n */\n static pick(\n icons: OptionIcons,\n options?: Options\n ): ModuleWithProviders<TablerIconsModule> {\n return {\n ngModule: TablerIconsModule,\n providers: [\n {\n provide: OPTIONS_TOKEN,\n useValue: {\n icons,\n ...options,\n },\n multi: true,\n },\n ],\n };\n }\n}\n","import { OptionIcons, Options } from './options.interfaces';\nimport { OPTIONS_TOKEN } from './options.provider';\nimport { Provider } from '@angular/core';\n\nexport function provideTablerIcons(\n icons: OptionIcons,\n options?: Options\n): Provider[] {\n return [\n {\n provide: OPTIONS_TOKEN,\n useValue: {\n icons,\n ...options,\n },\n multi: true,\n },\n ];\n}\n","/*\n * Public API Surface of angular-tabler-icons\n */\n\nexport { TablerIconComponent } from './lib/tabler-icon.component';\nexport { TablerIconsModule } from './lib/tabler-icons.module';\nexport { provideTablerIcons } from './lib/tabler-icons.provider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}