import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import * as i0 from "@angular/core";
const POSITION_MAP = {
    'top-left': '0% 0%',
    top: '50% 0%',
    'top-right': '100% 0%',
    left: '0% 50%',
    center: '50% 50%',
    right: '100% 50%',
    'bottom-left': '0% 100%',
    bottom: '50% 100%',
    'bottom-right': '100% 100%',
};
const SIZE_MAP = {
    small: '300px',
    medium: '500px',
    large: '800px',
    xlarge: '1200px',
};
const INTENSITY_MAP = {
    subtle: 0.08,
    medium: 0.18,
    strong: 0.35,
};
const LINEAR_ANGLE_MAP = {
    'top-left': '135deg',
    top: '180deg',
    'top-right': '225deg',
    left: '90deg',
    center: '180deg',
    right: '270deg',
    'bottom-left': '45deg',
    bottom: '0deg',
    'bottom-right': '315deg',
};
/**
 * `val-glow` — wrapper that paints a colored radial or linear gradient behind its
 * projected content. Uses Ionic color tokens, so it respects light/dark theme.
 *
 * @example
 * <val-glow [props]="{ color: 'primary', position: 'top', size: 'large' }">
 *   <h1>Hero title</h1>
 *   <p>Body copy...</p>
 * </val-glow>
 *
 * @example Two-tone radial
 * <val-glow [props]="{ color: 'primary', secondaryColor: 'tertiary', position: 'center' }">
 *   ...
 * </val-glow>
 *
 * @example Linear sweep from top
 * <val-glow [props]="{ color: 'success', shape: 'linear', position: 'top', intensity: 'strong' }">
 *   ...
 * </val-glow>
 */
export class GlowComponent {
    constructor() {
        this.props = input.required();
        this.color = computed(() => this.props().color ?? 'primary');
        this.secondaryColor = computed(() => this.props().secondaryColor);
        this.hasSecondary = computed(() => Boolean(this.secondaryColor()));
        this.position = computed(() => this.props().position ?? 'center');
        this.size = computed(() => this.props().size ?? 'large');
        this.intensity = computed(() => this.props().intensity ?? 'medium');
        this.shape = computed(() => this.props().shape ?? 'radial');
        this.animated = computed(() => this.props().animated ?? false);
        this.blendMode = computed(() => this.props().blendMode ?? 'normal');
        this.colorRgbVar = computed(() => `var(--ion-color-${this.color()}-rgb)`);
        this.secondaryColorRgbVar = computed(() => this.secondaryColor() ? `var(--ion-color-${this.secondaryColor()}-rgb)` : null);
        this.positionCss = computed(() => POSITION_MAP[this.position()]);
        this.sizeCss = computed(() => SIZE_MAP[this.size()]);
        this.intensityValue = computed(() => INTENSITY_MAP[this.intensity()].toString());
        this.angleCss = computed(() => LINEAR_ANGLE_MAP[this.position()]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GlowComponent, isStandalone: true, selector: "val-glow", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.val-glow--radial": "shape() === 'radial'", "class.val-glow--linear": "shape() === 'linear'", "class.val-glow--animated": "animated()", "class.val-glow--dual": "hasSecondary()", "style.--val-glow-color-rgb": "colorRgbVar()", "style.--val-glow-color-secondary-rgb": "secondaryColorRgbVar()", "style.--val-glow-position": "positionCss()", "style.--val-glow-size": "sizeCss()", "style.--val-glow-intensity": "intensityValue()", "style.--val-glow-angle": "angleCss()", "style.--val-glow-blend-mode": "blendMode()" }, classAttribute: "val-glow" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{position:relative;display:block;isolation:isolate;overflow:hidden;--val-glow-color-rgb: var(--ion-color-primary-rgb);--val-glow-color-secondary-rgb: var(--val-glow-color-rgb);--val-glow-position: 50% 50%;--val-glow-size: 800px;--val-glow-intensity: .18;--val-glow-angle: 180deg;--val-glow-blend-mode: normal}:host:before{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;background-blend-mode:var(--val-glow-blend-mode);background-repeat:no-repeat}:host(.val-glow--radial):before{background-image:radial-gradient(circle var(--val-glow-size) at var(--val-glow-position),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-rgb),0) 70%)}:host(.val-glow--radial.val-glow--dual):before{background-image:radial-gradient(circle var(--val-glow-size) at var(--val-glow-position),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-secondary-rgb),calc(var(--val-glow-intensity) * .7)) 35%,rgba(var(--val-glow-color-secondary-rgb),0) 70%)}:host(.val-glow--linear):before{background-image:linear-gradient(var(--val-glow-angle),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-rgb),0) 100%)}:host(.val-glow--linear.val-glow--dual):before{background-image:linear-gradient(var(--val-glow-angle),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-secondary-rgb),calc(var(--val-glow-intensity) * .8)) 50%,rgba(var(--val-glow-color-secondary-rgb),0) 100%)}:host(.val-glow--animated):before{animation:val-glow-drift 16s ease-in-out infinite alternate}@keyframes val-glow-drift{0%{transform:translateZ(0) scale(1);opacity:1}50%{transform:translate3d(-2%,1.5%,0) scale(1.05);opacity:.95}to{transform:translate3d(2%,-1.5%,0) scale(1.02);opacity:1}}@media (prefers-reduced-motion: reduce){:host(.val-glow--animated):before{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-glow', standalone: true, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'val-glow',
                        '[class.val-glow--radial]': "shape() === 'radial'",
                        '[class.val-glow--linear]': "shape() === 'linear'",
                        '[class.val-glow--animated]': 'animated()',
                        '[class.val-glow--dual]': 'hasSecondary()',
                        '[style.--val-glow-color-rgb]': 'colorRgbVar()',
                        '[style.--val-glow-color-secondary-rgb]': 'secondaryColorRgbVar()',
                        '[style.--val-glow-position]': 'positionCss()',
                        '[style.--val-glow-size]': 'sizeCss()',
                        '[style.--val-glow-intensity]': 'intensityValue()',
                        '[style.--val-glow-angle]': 'angleCss()',
                        '[style.--val-glow-blend-mode]': 'blendMode()',
                    }, styles: [":host{position:relative;display:block;isolation:isolate;overflow:hidden;--val-glow-color-rgb: var(--ion-color-primary-rgb);--val-glow-color-secondary-rgb: var(--val-glow-color-rgb);--val-glow-position: 50% 50%;--val-glow-size: 800px;--val-glow-intensity: .18;--val-glow-angle: 180deg;--val-glow-blend-mode: normal}:host:before{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;background-blend-mode:var(--val-glow-blend-mode);background-repeat:no-repeat}:host(.val-glow--radial):before{background-image:radial-gradient(circle var(--val-glow-size) at var(--val-glow-position),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-rgb),0) 70%)}:host(.val-glow--radial.val-glow--dual):before{background-image:radial-gradient(circle var(--val-glow-size) at var(--val-glow-position),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-secondary-rgb),calc(var(--val-glow-intensity) * .7)) 35%,rgba(var(--val-glow-color-secondary-rgb),0) 70%)}:host(.val-glow--linear):before{background-image:linear-gradient(var(--val-glow-angle),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-rgb),0) 100%)}:host(.val-glow--linear.val-glow--dual):before{background-image:linear-gradient(var(--val-glow-angle),rgba(var(--val-glow-color-rgb),var(--val-glow-intensity)) 0%,rgba(var(--val-glow-color-secondary-rgb),calc(var(--val-glow-intensity) * .8)) 50%,rgba(var(--val-glow-color-secondary-rgb),0) 100%)}:host(.val-glow--animated):before{animation:val-glow-drift 16s ease-in-out infinite alternate}@keyframes val-glow-drift{0%{transform:translateZ(0) scale(1);opacity:1}50%{transform:translate3d(-2%,1.5%,0) scale(1.05);opacity:.95}to{transform:translate3d(2%,-1.5%,0) scale(1.02);opacity:1}}@media (prefers-reduced-motion: reduce){:host(.val-glow--animated):before{animation:none}}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 