import * as i0 from '@angular/core';
import { inject, ElementRef, input, Component } from '@angular/core';

class ContentFade {
    _elementRef = inject(ElementRef);
    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
    position = input('both', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
    ngOnChanges(changes) {
        if (changes['width']) {
            this._elementRef.nativeElement.style.setProperty('--ngs-content-fade-width', changes['width'].currentValue, 'important');
        }
        if (changes['color']) {
            this._elementRef.nativeElement.style.setProperty('--ngs-content-fade-color', changes['color'].currentValue, 'important');
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentFade, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: ContentFade, isStandalone: true, selector: "ngs-content-fade", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.position-both": "position() === \"both\"", "class.position-start": "position() === \"start\"", "class.position-end": "position() === \"end\"" }, classAttribute: "ngs-content-fade" }, exportAs: ["ngsContentFade"], usesOnChanges: true, ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-content-fade-color: var(--ngs-color-background);--ngs-content-fade-width: 20%;display:block;position:relative}:host.position-both:before,:host.position-start:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:var(--ngs-content-fade-width);background:linear-gradient(to left,transparent,var(--ngs-content-fade-color))}:host.position-both:after,:host.position-end:after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:var(--ngs-content-fade-width);background:linear-gradient(to right,transparent,var(--ngs-content-fade-color))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentFade, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-content-fade', exportAs: 'ngsContentFade', host: {
                        'class': 'ngs-content-fade',
                        '[class.position-both]': 'position() === "both"',
                        '[class.position-start]': 'position() === "start"',
                        '[class.position-end]': 'position() === "end"',
                    }, template: "<ng-content/>\n", styles: [":host{--ngs-content-fade-color: var(--ngs-color-background);--ngs-content-fade-width: 20%;display:block;position:relative}:host.position-both:before,:host.position-start:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:var(--ngs-content-fade-width);background:linear-gradient(to left,transparent,var(--ngs-content-fade-color))}:host.position-both:after,:host.position-end:after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:var(--ngs-content-fade-width);background:linear-gradient(to right,transparent,var(--ngs-content-fade-color))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });

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

export { ContentFade };
//# sourceMappingURL=ngstarter-ui-components-content-fade.mjs.map
