import * as i0 from '@angular/core';
import { Component, inject, ElementRef, ApplicationRef, EnvironmentInjector, Injector, Renderer2, input, booleanAttribute, computed, createComponent, Directive } from '@angular/core';

class BadgeContent {
    content;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BadgeContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BadgeContent, isStandalone: true, selector: "ngs-badge-content", ngImport: i0, template: `{{ content }}`, isInline: true, styles: [":host.ngs-primary{--ngs-badge-background: var(--ngs-color-primary);--ngs-badge-text-color: var(--ngs-color-on-primary)}:host.ngs-accent{--ngs-badge-background: var(--ngs-color-secondary);--ngs-badge-text-color: var(--ngs-color-on-secondary)}:host.ngs-warn{--ngs-badge-background: var(--ngs-color-danger);--ngs-badge-text-color: var(--ngs-color-on-danger)}:host{position:absolute;display:flex;justify-content:center;align-content:center;align-items:center;border-radius:16px;font-family:var(--font-sans),serif;font-size:var(--ngs-badge-font-size, 10px);font-weight:600!important;white-space:nowrap;padding:0 4px;text-overflow:ellipsis;background:var(--ngs-badge-background-color, var(--ngs-color-primary));color:var(--ngs-badge-text-color, var(--ngs-color-on-primary));--_ngs-badge-current-size: var(--ngs-badge-size, 16px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);transition:transform .2s ease-in-out;pointer-events:none;z-index:1}:host-context(.ngs-badge-small) :host{--_ngs-badge-current-size: var(--ngs-badge-small-size, 6px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:0;color:transparent;padding:0}:host-context(.ngs-badge-small) :host:after{content:none}:host-context(.ngs-badge-small) :host *{display:none}:host-context(.ngs-badge-large) :host{--_ngs-badge-current-size: var(--ngs-badge-large-size, 18px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:12px}:host-context(.ngs-badge-hidden) :host{display:none}:host-context(.ngs-badge-disabled) :host{background:var(--ngs-color-surface-container-high);color:var(--ngs-color-on-surface-variant)}:host-context(.ngs-badge-above) :host{top:6px}:host-context(.ngs-badge-below) :host{bottom:6px}:host-context(.ngs-badge-before) :host{left:2px}:host-context(.ngs-badge-after) :host{right:2px}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-above{top:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-below{bottom:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-before{left:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-after{right:0}:host-context(.ngs-badge-overlap.ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(50%)}:host-context(.ngs-badge-overlap.ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-before) :host{transform:translate(-50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-after) :host{transform:translate(50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-before) :host{transform:translate(-50%,50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-after) :host{transform:translate(50%,50%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-before) :host{transform:translate(-100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-after) :host{transform:translate(100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-before) :host{transform:translate(-100%,100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-after) :host{transform:translate(100%,100%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BadgeContent, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-badge-content', standalone: true, template: `{{ content }}`, styles: [":host.ngs-primary{--ngs-badge-background: var(--ngs-color-primary);--ngs-badge-text-color: var(--ngs-color-on-primary)}:host.ngs-accent{--ngs-badge-background: var(--ngs-color-secondary);--ngs-badge-text-color: var(--ngs-color-on-secondary)}:host.ngs-warn{--ngs-badge-background: var(--ngs-color-danger);--ngs-badge-text-color: var(--ngs-color-on-danger)}:host{position:absolute;display:flex;justify-content:center;align-content:center;align-items:center;border-radius:16px;font-family:var(--font-sans),serif;font-size:var(--ngs-badge-font-size, 10px);font-weight:600!important;white-space:nowrap;padding:0 4px;text-overflow:ellipsis;background:var(--ngs-badge-background-color, var(--ngs-color-primary));color:var(--ngs-badge-text-color, var(--ngs-color-on-primary));--_ngs-badge-current-size: var(--ngs-badge-size, 16px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);transition:transform .2s ease-in-out;pointer-events:none;z-index:1}:host-context(.ngs-badge-small) :host{--_ngs-badge-current-size: var(--ngs-badge-small-size, 6px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:0;color:transparent;padding:0}:host-context(.ngs-badge-small) :host:after{content:none}:host-context(.ngs-badge-small) :host *{display:none}:host-context(.ngs-badge-large) :host{--_ngs-badge-current-size: var(--ngs-badge-large-size, 18px);min-width:var(--_ngs-badge-current-size);height:var(--_ngs-badge-current-size);line-height:var(--_ngs-badge-current-size);font-size:12px}:host-context(.ngs-badge-hidden) :host{display:none}:host-context(.ngs-badge-disabled) :host{background:var(--ngs-color-surface-container-high);color:var(--ngs-color-on-surface-variant)}:host-context(.ngs-badge-above) :host{top:6px}:host-context(.ngs-badge-below) :host{bottom:6px}:host-context(.ngs-badge-before) :host{left:2px}:host-context(.ngs-badge-after) :host{right:2px}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-above{top:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-below{bottom:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-before{left:0}:host-context(.ngs-badge:not(.ngs-badge-overlap)) :host.ngs-badge-after{right:0}:host-context(.ngs-badge-overlap.ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(50%)}:host-context(.ngs-badge-overlap.ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-50%)}:host-context(.ngs-badge-overlap.ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-before) :host{transform:translate(-50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-above.ngs-badge-after) :host{transform:translate(50%,-50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-before) :host{transform:translate(-50%,50%)}:host-context(.ngs-badge-overlap.ngs-badge-below.ngs-badge-after) :host{transform:translate(50%,50%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below:not(.ngs-badge-before):not(.ngs-badge-after)) :host{transform:translateY(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-before:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-after:not(.ngs-badge-above):not(.ngs-badge-below)) :host{transform:translate(100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-before) :host{transform:translate(-100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-above.ngs-badge-after) :host{transform:translate(100%,-100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-before) :host{transform:translate(-100%,100%)}:host-context(.ngs-badge:not(.ngs-badge-overlap).ngs-badge-below.ngs-badge-after) :host{transform:translate(100%,100%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class Badge {
    _elementRef = inject(ElementRef);
    _applicationRef = inject(ApplicationRef);
    _environmentInjector = inject(EnvironmentInjector);
    _injector = inject(Injector);
    renderer = inject(Renderer2);
    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'ngsBadge' });
    color = input('primary', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'ngsBadgeColor' });
    overlap = input(true, { ...(ngDevMode ? { debugName: "overlap" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsBadgeOverlap' });
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsBadgeDisabled' });
    position = input('above after', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'ngsBadgePosition' });
    size = input('medium', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'ngsBadgeSize' });
    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'ngsBadgeHidden' });
    description = input('', { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), alias: 'ngsBadgeDescription' });
    isAbove = computed(() => this.position().indexOf('below') === -1, ...(ngDevMode ? [{ debugName: "isAbove" }] : /* istanbul ignore next */ []));
    isAfter = computed(() => this.position().indexOf('before') === -1, ...(ngDevMode ? [{ debugName: "isAfter" }] : /* istanbul ignore next */ []));
    _componentRef = null;
    ngOnInit() {
        this.renderer.setStyle(this._elementRef.nativeElement, 'position', 'relative');
        this.renderer.setStyle(this._elementRef.nativeElement, 'overflow', 'visible');
    }
    ngOnChanges() {
        this._updateBadge();
    }
    ngOnDestroy() {
        if (this._componentRef) {
            this._applicationRef.detachView(this._componentRef.hostView);
            this._componentRef.destroy();
            this._componentRef = null;
        }
    }
    _updateBadge() {
        if (!this.content() && this._componentRef) {
            this._applicationRef.detachView(this._componentRef.hostView);
            this._componentRef.destroy();
            this._componentRef = null;
            return;
        }
        if (this.content() && !this._componentRef) {
            this._componentRef = createComponent(BadgeContent, {
                environmentInjector: this._environmentInjector,
                elementInjector: this._injector
            });
            this._applicationRef.attachView(this._componentRef.hostView);
            this._elementRef.nativeElement.appendChild(this._componentRef.location.nativeElement);
        }
        if (this._componentRef) {
            this._componentRef.instance.content = this.content();
            this._componentRef.changeDetectorRef.markForCheck();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: Badge, isStandalone: true, selector: "[ngsBadge]", inputs: { content: { classPropertyName: "content", publicName: "ngsBadge", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "ngsBadgeColor", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "ngsBadgeOverlap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngsBadgeDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "ngsBadgePosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "ngsBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "ngsBadgeHidden", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "ngsBadgeDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngs-badge-small": "size() === \"small\"", "class.ngs-badge-medium": "size() === \"medium\"", "class.ngs-badge-large": "size() === \"large\"", "class.ngs-badge-hidden": "hidden() || !content()", "class.ngs-badge-disabled": "disabled()", "class.ngs-primary": "color() === \"primary\"", "class.ngs-accent": "color() === \"accent\"", "class.ngs-warn": "color() === \"warn\"", "class.ngs-badge-above": "isAbove()", "class.ngs-badge-below": "!isAbove()", "class.ngs-badge-before": "!isAfter()", "class.ngs-badge-after": "isAfter()", "class.ngs-badge-overlap": "overlap()" }, classAttribute: "ngs-badge" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Badge, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsBadge]',
                    standalone: true,
                    host: {
                        'class': 'ngs-badge',
                        '[class.ngs-badge-small]': 'size() === "small"',
                        '[class.ngs-badge-medium]': 'size() === "medium"',
                        '[class.ngs-badge-large]': 'size() === "large"',
                        '[class.ngs-badge-hidden]': 'hidden() || !content()',
                        '[class.ngs-badge-disabled]': 'disabled()',
                        '[class.ngs-primary]': 'color() === "primary"',
                        '[class.ngs-accent]': 'color() === "accent"',
                        '[class.ngs-warn]': 'color() === "warn"',
                        '[class.ngs-badge-above]': 'isAbove()',
                        '[class.ngs-badge-below]': '!isAbove()',
                        '[class.ngs-badge-before]': '!isAfter()',
                        '[class.ngs-badge-after]': 'isAfter()',
                        '[class.ngs-badge-overlap]': 'overlap()',
                    },
                }]
        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadge", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeColor", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeOverlap", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeDisabled", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgePosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeSize", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeHidden", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsBadgeDescription", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { Badge, BadgeContent };
//# sourceMappingURL=ngstarter-ui-components-badge.mjs.map
