import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, contentChild, TemplateRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';

class ZMarqueeComponent {
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zDirection = input('left', ...(ngDevMode ? [{ debugName: "zDirection" }] : []));
    zPauseOnHover = input(false, { ...(ngDevMode ? { debugName: "zPauseOnHover" } : {}), transform: zTransform });
    zRepeat = input(4, ...(ngDevMode ? [{ debugName: "zRepeat" }] : []));
    zDuration = input(60, ...(ngDevMode ? [{ debugName: "zDuration" }] : []));
    zGap = input('1rem', ...(ngDevMode ? [{ debugName: "zGap" }] : []));
    zFade = input('none', ...(ngDevMode ? [{ debugName: "zFade" }] : []));
    contentTemplate = contentChild(TemplateRef, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
    isVertical = computed(() => {
        const dir = this.zDirection();
        return dir === 'up' || dir === 'down';
    }, ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
    isReverse = computed(() => {
        const dir = this.zDirection();
        return dir === 'right' || dir === 'down';
    }, ...(ngDevMode ? [{ debugName: "isReverse" }] : []));
    showLeftFade = computed(() => {
        const fade = this.zFade();
        return fade === 'left' || (fade === 'both' && !this.isVertical());
    }, ...(ngDevMode ? [{ debugName: "showLeftFade" }] : []));
    showRightFade = computed(() => {
        const fade = this.zFade();
        return fade === 'right' || (fade === 'both' && !this.isVertical());
    }, ...(ngDevMode ? [{ debugName: "showRightFade" }] : []));
    showTopFade = computed(() => {
        const fade = this.zFade();
        return fade === 'top' || (fade === 'both' && this.isVertical());
    }, ...(ngDevMode ? [{ debugName: "showTopFade" }] : []));
    showBottomFade = computed(() => {
        const fade = this.zFade();
        return fade === 'bottom' || (fade === 'both' && this.isVertical());
    }, ...(ngDevMode ? [{ debugName: "showBottomFade" }] : []));
    hostClasses = computed(() => zMergeClasses('relative flex overflow-hidden', this.zPauseOnHover() ? 'z-marquee--pause-on-hover' : '', this.isVertical() ? 'h-full flex-col' : 'flex-row', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    repeatItems = computed(() => {
        const repeat = Math.max(1, Math.floor(this.zRepeat()));
        return Array.from({ length: repeat }, (_, index) => index);
    }, ...(ngDevMode ? [{ debugName: "repeatItems" }] : []));
    copyItems = [0, 1];
    runnerClasses = computed(() => zMergeClasses('z-marquee-runner flex shrink-0 justify-start', this.isVertical() ? 'min-h-full flex-col items-stretch' : 'flex-row items-center', this.animationClasses()), ...(ngDevMode ? [{ debugName: "runnerClasses" }] : []));
    animationClasses = computed(() => {
        const vertical = this.isVertical();
        const reverse = this.isReverse();
        const base = vertical ? 'z-marquee--animate-y' : 'z-marquee--animate-x';
        const dir = reverse ? ' z-marquee--reverse' : '';
        return `${base}${dir}`;
    }, ...(ngDevMode ? [{ debugName: "animationClasses" }] : []));
    trackClasses = computed(() => zMergeClasses('z-marquee-track flex shrink-0 justify-start', this.isVertical() ? 'flex-col items-stretch' : 'flex-row items-center'), ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
    contentClasses = computed(() => zMergeClasses('z-marquee-content flex shrink-0 justify-start', this.isVertical() ? 'flex-col items-stretch' : 'flex-row items-center'), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMarqueeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZMarqueeComponent, isStandalone: true, selector: "z-marquee", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zDirection: { classPropertyName: "zDirection", publicName: "zDirection", isSignal: true, isRequired: false, transformFunction: null }, zPauseOnHover: { classPropertyName: "zPauseOnHover", publicName: "zPauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, zRepeat: { classPropertyName: "zRepeat", publicName: "zRepeat", isSignal: true, isRequired: false, transformFunction: null }, zDuration: { classPropertyName: "zDuration", publicName: "zDuration", isSignal: true, isRequired: false, transformFunction: null }, zGap: { classPropertyName: "zGap", publicName: "zGap", isSignal: true, isRequired: false, transformFunction: null }, zFade: { classPropertyName: "zFade", publicName: "zFade", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"z-marquee-viewport flex min-w-full\"\n  [class.flex-row]=\"!isVertical()\"\n  [class.h-full]=\"isVertical()\"\n  [class.flex-col]=\"isVertical()\"\n  [style.gap]=\"zGap()\"\n  [style.--z-marquee-gap]=\"zGap()\"\n  [style.--z-marquee-duration]=\"zDuration() + 's'\">\n  <div [class]=\"runnerClasses()\">\n    @for (copy of copyItems; track copy) {\n      <div [class]=\"trackClasses()\" [style.gap]=\"zGap()\" [attr.aria-hidden]=\"copy === 0 ? null : 'true'\">\n        @for (item of repeatItems(); track item) {\n          <div [class]=\"contentClasses()\" [style.gap]=\"zGap()\">\n            @if (contentTemplate(); as tmpl) {\n              <ng-container [ngTemplateOutlet]=\"tmpl\" />\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (showLeftFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 left-0 w-12 bg-gradient-to-r via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showRightFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 right-0 w-12 bg-gradient-to-l via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showTopFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b via-55% to-transparent sm:h-12\"></div>\n}\n\n@if (showBottomFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t via-55% to-transparent sm:h-12\"></div>\n}\n", styles: ["@keyframes z-marquee-scroll-x{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--z-marquee-gap, 1rem) / 2))}}@keyframes z-marquee-scroll-y{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--z-marquee-gap, 1rem) / 2))}}.z-marquee-viewport{min-height:0}.z-marquee-runner{gap:var(--z-marquee-gap, 1rem);will-change:transform}.z-marquee--animate-x{animation:z-marquee-scroll-x var(--z-marquee-duration, 40s) linear infinite}.z-marquee--animate-y{animation:z-marquee-scroll-y var(--z-marquee-duration, 40s) linear infinite}.z-marquee--reverse{animation-direction:reverse}.z-marquee--pause-on-hover:hover .z-marquee--animate-x,.z-marquee--pause-on-hover:hover .z-marquee--animate-y{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.z-marquee--animate-x,.z-marquee--animate-y{animation-play-state:paused}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMarqueeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-marquee', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 'hostClasses()',
                    }, template: "<div\n  class=\"z-marquee-viewport flex min-w-full\"\n  [class.flex-row]=\"!isVertical()\"\n  [class.h-full]=\"isVertical()\"\n  [class.flex-col]=\"isVertical()\"\n  [style.gap]=\"zGap()\"\n  [style.--z-marquee-gap]=\"zGap()\"\n  [style.--z-marquee-duration]=\"zDuration() + 's'\">\n  <div [class]=\"runnerClasses()\">\n    @for (copy of copyItems; track copy) {\n      <div [class]=\"trackClasses()\" [style.gap]=\"zGap()\" [attr.aria-hidden]=\"copy === 0 ? null : 'true'\">\n        @for (item of repeatItems(); track item) {\n          <div [class]=\"contentClasses()\" [style.gap]=\"zGap()\">\n            @if (contentTemplate(); as tmpl) {\n              <ng-container [ngTemplateOutlet]=\"tmpl\" />\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (showLeftFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 left-0 w-12 bg-gradient-to-r via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showRightFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 right-0 w-12 bg-gradient-to-l via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showTopFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b via-55% to-transparent sm:h-12\"></div>\n}\n\n@if (showBottomFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t via-55% to-transparent sm:h-12\"></div>\n}\n", styles: ["@keyframes z-marquee-scroll-x{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--z-marquee-gap, 1rem) / 2))}}@keyframes z-marquee-scroll-y{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--z-marquee-gap, 1rem) / 2))}}.z-marquee-viewport{min-height:0}.z-marquee-runner{gap:var(--z-marquee-gap, 1rem);will-change:transform}.z-marquee--animate-x{animation:z-marquee-scroll-x var(--z-marquee-duration, 40s) linear infinite}.z-marquee--animate-y{animation:z-marquee-scroll-y var(--z-marquee-duration, 40s) linear infinite}.z-marquee--reverse{animation-direction:reverse}.z-marquee--pause-on-hover:hover .z-marquee--animate-x,.z-marquee--pause-on-hover:hover .z-marquee--animate-y{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.z-marquee--animate-x,.z-marquee--animate-y{animation-play-state:paused}}\n"] }]
        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDirection", required: false }] }], zPauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPauseOnHover", required: false }] }], zRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRepeat", required: false }] }], zDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDuration", required: false }] }], zGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGap", required: false }] }], zFade: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFade", required: false }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });

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

export { ZMarqueeComponent };
//# sourceMappingURL=shival99-z-ui-components-z-marquee.mjs.map
