import * as i0 from '@angular/core';
import { inject, ElementRef, PLATFORM_ID, input, booleanAttribute, viewChild, TemplateRef, Component, Directive } from '@angular/core';
import { isPlatformServer, NgTemplateOutlet } from '@angular/common';

class Marquee {
    _elementRef = inject(ElementRef);
    _platformId = inject(PLATFORM_ID);
    _intersectionObserver;
    reverse = input(false, { ...(ngDevMode ? { debugName: "reverse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    pauseOnHover = input(false, { ...(ngDevMode ? { debugName: "pauseOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    isInView = false;
    template = viewChild.required(TemplateRef);
    get nativeElement() {
        return this._elementRef.nativeElement;
    }
    ngOnChanges(changes) {
        if (changes['reverse']) {
            this.nativeElement.style.setProperty('--ngs-marquee-reverse', changes['reverse'].currentValue ? 'reverse' : '');
        }
        if (changes['pauseOnHover']) {
            this.nativeElement.style.setProperty('--ngs-marquee-pause', changes['pauseOnHover'].currentValue ? 'paused' : 'running');
        }
    }
    ngAfterContentInit() {
        if (isPlatformServer(this._platformId)) {
            return;
        }
        this._intersectionObserver = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                if (!this.isInView) {
                    this.isInView = true;
                }
            }
            else if (this.isInView) {
                this.isInView = false;
            }
        });
        this._intersectionObserver.observe(this.nativeElement);
    }
    ngOnDestroy() {
        if (this._intersectionObserver) {
            this._intersectionObserver.disconnect();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Marquee, isStandalone: true, selector: "ngs-marquee", inputs: { reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-marquee" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["ngsMarquee"], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n\n<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n</div>\n", styles: [":host{--ngs-marquee-animation-duration: 20s;--ngs-marquee-gap: calc(var(--spacing, .25rem) * 6);--ngs-marquee-reverse: ;--ngs-marquee-pause: running;display:block;width:100%}:host .content{width:100%;height:100%;display:flex;gap:var(--ngs-marquee-gap);overflow:hidden;padding:.5rem;flex-direction:row}:host .content .item{flex-direction:row;animation:ngs-marquee-animation var(--ngs-marquee-animation-duration) infinite linear var(--ngs-marquee-reverse)}:host .content .item{display:flex;gap:var(--ngs-marquee-gap);flex-shrink:0}:host .content:hover>.item{animation-play-state:var(--ngs-marquee-pause)}:host .content.out-of-view>.item{animation-play-state:paused}:host .invisible{width:0;height:0;display:none;pointer-events:none}@keyframes ngs-marquee-animation{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--ngs-marquee-gap)))}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Marquee, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-marquee', exportAs: 'ngsMarquee', imports: [NgTemplateOutlet], host: {
                        'class': 'ngs-marquee'
                    }, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n\n<div class=\"content\" [class.out-of-view]=\"!isInView\">\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n  <div class=\"item\">\n    <ng-template [ngTemplateOutlet]=\"template()\" />\n  </div>\n</div>\n", styles: [":host{--ngs-marquee-animation-duration: 20s;--ngs-marquee-gap: calc(var(--spacing, .25rem) * 6);--ngs-marquee-reverse: ;--ngs-marquee-pause: running;display:block;width:100%}:host .content{width:100%;height:100%;display:flex;gap:var(--ngs-marquee-gap);overflow:hidden;padding:.5rem;flex-direction:row}:host .content .item{flex-direction:row;animation:ngs-marquee-animation var(--ngs-marquee-animation-duration) infinite linear var(--ngs-marquee-reverse)}:host .content .item{display:flex;gap:var(--ngs-marquee-gap);flex-shrink:0}:host .content:hover>.item{animation-play-state:var(--ngs-marquee-pause)}:host .content.out-of-view>.item{animation-play-state:paused}:host .invisible{width:0;height:0;display:none;pointer-events:none}@keyframes ngs-marquee-animation{0%{transform:translate(0)}to{transform:translate(calc(-100% - var(--ngs-marquee-gap)))}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });

class MarqueeItemDirective {
    _elementRef = inject(ElementRef);
    get nativeElement() {
        return this._elementRef.nativeElement;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MarqueeItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MarqueeItemDirective, isStandalone: true, selector: "[ngsMarqueeItem]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MarqueeItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsMarqueeItem]',
                    standalone: true
                }]
        }] });

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

export { Marquee, MarqueeItemDirective };
//# sourceMappingURL=ngstarter-ui-components-marquee.mjs.map
