import { type OnInit } from '@angular/core';
import { type Observable } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * Represents a svg sprite.
 *
 * @see {@link NgxSvgSpriteFragment.sprite}
 * @see {@link NgxSvgSprites.register}
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use `use` Element}
 */
export interface NgxSvgSprite {
    /**
     * A unique name identifying this sprite.
     */
    name: string;
    /**
     * E.g. `path/to/my/sprite.svg`
     */
    baseUrl: string;
    /**
     * @param baseUrl reference to this {@link baseUrl}
     * @param fragment
     * @returns a url pointing to a specified svg in this sprite by using a `fragment` e.g `path/to/my/sprite.svg#${fragment}`
     *
     * @see {@link https://svgwg.org/svg2-draft/linking.html#URLReference}
     */
    url: (baseUrl: string, fragment: string) => string;
    /**
     * Whether to copy the `viewBox` attribute from the `symbol` in the svg sprite.
     */
    autoViewBox?: boolean;
    /**
     *
     * @param fragment
     * @returns a list of classes that are applied to the svg element.
     */
    classes?: (fragment: string) => string[] | string;
}
/**
 * This service registers {@link NgxSvgSprite svg sprites}, which can be rendered via {@link NgxSvgSpriteFragment}.
 */
export declare class NgxSvgSprites {
    /**
     * @ignore
     */
    private readonly ngZone;
    /**
     * <{@link NgxSvgSprite.name}, {@link NgxSvgSprite}>
     */
    private readonly sprites;
    /**
     * Registers a sprite.
     *
     * @param sprite
     *
     * @see {@link NgxSvgSpriteFragment.sprite}
     */
    readonly register: (sprite: NgxSvgSprite) => void;
    /**
     *
     * @param name
     * @returns a registered sprite by its name or undefined if not registered.
     */
    readonly get: (name: string) => NgxSvgSprite & {
        svg$: Observable<SVGGraphicsElement>;
    };
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSvgSprites, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<NgxSvgSprites>;
}
export type CreateNgxSvgSpriteOptions = Omit<NgxSvgSprite, 'url'> & Partial<Pick<NgxSvgSprite, 'url'>>;
/**
 *
 * @param sprites
 * @returns an environment provider which registers svg sprites. The default `url` of a sprite will be `${baseUrl}#${fragment}`.
 */
export declare const provideSvgSprites: (...sprites: CreateNgxSvgSpriteOptions[]) => import("@angular/core").EnvironmentProviders;
/**
 * A directive for rendering _symbols_ of svg sprites. It is done with the [`use`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) element.
 *
 * ## Import
 *
 * ```typescript
 * import { NgxSvgSpriteFragment } from 'ngxtension/svg-sprite';
 * ```
 *
 * ## Usage
 *
 * In this example the symbol `github` of the [fontawesome](https://fontawesome.com/) svg sprite `fa-brands` is rendered. A symbol is identified by a `fragment`. Learn more about [URLs](https://svgwg.org/svg2-draft/linking.html#URLReference).
 *
 * ```html
 * <svg fragment="github" sprite="fa-brands"></svg>
 * ```
 *
 * Without `NgxSvgSpriteFragment`:
 *
 * ```html
 * <svg viewBox="0 0 496 512">
 * 	<use href="assets/fontawesome/sprites/brands.svg#github"></use>
 * </svg>
 * ```
 *
 * ### With Directive Composition Api
 *
 * In your project you can utilize the [Directive Composition Api](https://angular.dev/guide/directives/directive-composition-api) to create specific svg sprites.
 *
 * In this example a _fontawesome brands_ svg sprite is created.
 *
 * ```html
 * <svg faBrand="github"></svg>
 * ```
 *
 * ```ts
 * @Directive({
 * 	selector: 'svg[faBrand]',
 *
 * 	hostDirectives: [
 * 		{ directive: NgxSvgSpriteFragment, inputs: ['fragment:faBrand'] },
 * 	],
 * })
 * export class FaBrandSvg {
 * 	constructor() {
 * 		inject(NgxSvgSpriteFragment).sprite = 'fa-brands';
 * 	}
 * }
 * ```
 *
 * ## Configuration
 *
 * In order to render a symbol, sprites have to be provided.
 *
 * ```ts
 * provideSvgSprites({
 * 	name: 'fa-brands',
 * 	baseUrl: 'assets/fontawesome/sprites/brands.svg',
 * });
 * ```
 *
 * The `name` property can reference any arbitrary value, but should be unique, since you can register multiple different svg sprites.
 *
 * The `sprite` input of the `NgxSvgSpriteFragment` should reference the `name` property of a provided sprite.
 *
 * ### Auto View Box
 *
 * When a symbol of an svg sprite is rendered the `viewBox` attribute or `height` and `width` _should_ be set. The `svg` element does not copy/use the `viewBox` attribute of the symbol in the svg sprite, therefore the svg will have default dimensions of 300x150 px, which is probably not preferred.
 *
 * Per default when an svg sprite is registered, the svg sprite is fetched with js in addition. `NgxSvgSpriteFragment` will copy the `viewBox` attribute of the symbol to its host.
 *
 * This behavior can be disabled.
 *
 * #### Disable via DI
 *
 * Auto View Box is disabled for the svg sprite.
 *
 * ```ts
 * provideSvgSprites({
 * 	name: 'fa-brands',
 * 	baseUrl: 'assets/fontawesome/sprites/brands.svg',
 * 	autoViewBox: false,
 * });
 * ```
 *
 * #### Disable via `autoViewBoxDisabled` Input
 *
 * Auto View Box is disabled for a `svg` element, when the `autoViewBoxDisabled` input is set to `false`.
 *
 * ```html
 * <svg fragment="github" sprite="fa-brands" autoViewBoxDisabled></svg>
 * ```
 *
 * #### Disable via `viewBox` Attribute
 *
 * Auto View Box is disabled for a `svg` element, when the `viewBox` attribute already is defined.
 *
 * ```html
 * <svg fragment="github" sprite="fa-brands" viewBox="0 0 32 32"></svg>
 * ```
 *
 * ### Classes
 *
 * When the `classes` function is set, a list of classes will be added by the `NgxSvgSpriteFragment` to its host.
 *
 * ```ts
 * provideSvgSprites({
 * 	name: 'my-sprite',
 * 	baseUrl: 'path/to/my/sprite.svg',
 * 	classes: (fragment) => ['some-class', `some-other-class-${fragment}`],
 * });
 * ```
 *
 * ### Url
 *
 * Per default when providing a sprite, the `url` will return `'${baseUrl}#${fragment}'`. This can be overwritten:
 *
 * ```ts
 * provideSvgSprites({
 * 	name: 'my-sprite',
 * 	baseUrl: 'path/to/my/sprite.svg',
 * 	url: (baseUrl, fragment) => `${baseUrl}#some-prefix-${fragment}`,
 * });
 * ```
 */
export declare class NgxSvgSpriteFragment implements OnInit {
    /**
     * @ignore
     */
    private readonly element;
    /**
     * @ignore
     */
    private readonly document;
    /**
     * @ignore
     */
    private readonly autoEffect;
    /**
     * @ignore
     */
    private readonly sprites;
    /**
     * @ignore
     */
    ngOnInit(): void;
    /**
     * The `fragment` which identifies a `symbol` in this {@link NgxSvgSpriteFragment.sprite svg sprite}.
     */
    readonly fragment$: import("@angular/core").WritableSignal<string | undefined>;
    /**
     * The `name` of the {@link NgxSvgSprite svg sprite} this {@link NgxSvgSpriteFragment.fragment fragment} is a part of.
     *
     * @see {@link NgxSvgSprite.name}
     */
    readonly sprite$: import("@angular/core").WritableSignal<string | undefined>;
    /**
     * Whether `autoViewBox` is disabled.
     *
     * @see overrides {@link NgxSvgSprite.autoViewBox}
     */
    readonly autoViewBoxDisabled$: import("@angular/core").WritableSignal<boolean>;
    /**
     * @ignore
     */
    private readonly spriteConfig$;
    /**
     * @ignore
     */
    private readonly svg$;
    /**
     * @ignore
     */
    private readonly autoViewBox$;
    /**
     * The `fragment` which identifies a `symbol` in this {@link NgxSvgSpriteFragment.sprite svg sprite}.
     */
    set fragment(fragment: string | undefined);
    get fragment(): string | undefined;
    /**
     * The `name` of the {@link NgxSvgSprite svg sprite} this {@link NgxSvgSpriteFragment.fragment fragment} is a part of.
     *
     * @see {@link NgxSvgSprite.name}
     */
    set sprite(sprite: string | undefined);
    get sprite(): string | undefined;
    /**
     * Whether `autoViewBox` is disabled.
     *
     * @see overrides {@link NgxSvgSprite.autoViewBox}
     */
    set autoViewBoxDisabled(autoViewBoxDisabled: boolean);
    get autoViewBoxDisabled(): boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxSvgSpriteFragment, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxSvgSpriteFragment, "svg[fragment]", never, { "fragment": { "alias": "fragment"; "required": false; }; "sprite": { "alias": "sprite"; "required": false; }; "autoViewBoxDisabled": { "alias": "autoViewBoxDisabled"; "required": false; }; }, {}, never, never, true, never>;
    static ngAcceptInputType_autoViewBoxDisabled: unknown;
}