@visa/nova-angular/fesm2022/visa-nova-angular.mjs

Visa Product Design System Nova Angular library. Compatible with Angular ^19.0.0 || ^20.0.0 || ^21.0.0.

import * as i0 from '@angular/core';
import { effect, Injectable, afterNextRender, inject, ElementRef, signal, computed, input, booleanAttribute, EventEmitter, Directive, contentChildren, RendererFactory2, numberAttribute, NgModule, PLATFORM_ID, APP_ID, forwardRef, Renderer2, model, untracked, contentChild, Injector, isDevMode, output, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import { NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, RadioControlValueAccessor, NgControl } from '@angular/forms';
import { offset, flip, shift, hide, arrow, autoUpdate, computePosition } from '@floating-ui/dom';

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
class ListenerService {
    listeners = [];
    navListeners = []; // For navigation events added by nova-lib-service
    navSubscriptions = []; // For navigation subscriptions added by nova-lib-service
    subscriptions = [];
    cleanupEffect = effect((onCleanup) => {
        onCleanup(() => {
            this.cleanup();
            this.cleanupNavListeners();
        });
    }, ...(ngDevMode ? [{ debugName: "cleanupEffect" }] : []));
    cleanup() {
        this.listeners?.forEach((listener) => listener());
        this.listeners = [];
        this.subscriptions?.forEach((subscription) => subscription?.unsubscribe());
        this.subscriptions = [];
    }
    cleanupNavListeners() {
        this.navListeners?.forEach((listener) => listener());
        this.navListeners = [];
        this.navSubscriptions?.forEach((sub) => sub?.unsubscribe());
        this.navSubscriptions = [];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ListenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ListenerService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ListenerService, decorators: [{
            type: Injectable
        }] });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
class DropdownItemDirective {
    constructor() {
        afterNextRender({
            read: () => {
                this.tagName.set(this.el.nativeElement.tagName.toLowerCase());
            }
        });
    }
    el = inject(ElementRef);
    listenerService = inject(ListenerService);
    tagName = signal('', ...(ngDevMode ? [{ debugName: "tagName" }] : []));
    buttonItem = computed(() => this.tagName() === 'button', ...(ngDevMode ? [{ debugName: "buttonItem" }] : []));
    /**
     * Marks item as selected when true.
     * @default false
     */
    disabled = input(null, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute }); // used for floating-ui-container closeOnClick
    /**
     * Emits event when host interactive element is clicked.
     */
    clicked = new EventEmitter();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: DropdownItemDirective, isStandalone: true, selector: "[v-dropdown-item]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "clicked.emit($event)" }, properties: { "attr.disabled": "disabled() ? \"disabled\" : null", "class.v-button": "buttonItem()", "class.v-button-tertiary": "buttonItem()", "class.v-justify-content-start": "buttonItem()" }, classAttribute: "v-dropdown-item v-listbox-item" }, providers: [ListenerService], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DropdownItemDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'v-dropdown-item v-listbox-item',
                        '[attr.disabled]': 'disabled() ? "disabled" : null',
                        '[class.v-button]': 'buttonItem()',
                        '[class.v-button-tertiary]': 'buttonItem()',
                        '[class.v-justify-content-start]': 'buttonItem()',
                        '(click)': 'clicked.emit($event)'
                    },
                    providers: [ListenerService],
                    selector: '[v-dropdown-item]',
                    standalone: true
                }]
        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
const DOWN_ARROW_KEY = 'ArrowDown';
const END_KEY = 'End';
const ESCAPE_KEY = 'Escape';
const HOME_KEY = 'Home';
const LEFT_ARROW_KEY = 'ArrowLeft';
const RIGHT_ARROW_KEY = 'ArrowRight';
const SPACE_KEY = ' ';
const SPACE_CODE = 'Space';
const TAB_KEY = 'Tab';
const UP_ARROW_KEY = 'ArrowUp';
const ENTER_KEY = 'Enter';
const BACKSPACE_KEY = 'Backspace';
const SpacingProperties = {
    INHERIT: 'inherit',
    NORMAL: 'normal',
    AUTO: 'auto'
};

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
class AddArrowKeysDirective {
    items = contentChildren(DropdownItemDirective, { ...(ngDevMode ? { debugName: "items" } : {}), descendants: true });
    renderer = inject(RendererFactory2).createRenderer(null, null);
    ngAfterContentInit() {
        const itemsArray = this.items()?.filter((item) => !item.el.nativeElement.disabled) ?? [];
        if (!itemsArray.length)
            return;
        itemsArray.forEach((item, index) => {
            item.listenerService.navListeners.push(this.renderer.listen(item.el.nativeElement, 'keydown', (event) => {
                if (event.key === ESCAPE_KEY ||
                    ![DOWN_ARROW_KEY, RIGHT_ARROW_KEY, UP_ARROW_KEY, LEFT_ARROW_KEY].includes(event.key))
                    return;
                event.preventDefault();
                const isForward = [DOWN_ARROW_KEY, RIGHT_ARROW_KEY].includes(event.key);
                const nextIndex = isForward
                    ? (index + 1) % itemsArray.length
                    : (index - 1 + itemsArray.length) % itemsArray.length;
                itemsArray[nextIndex].el.nativeElement.focus();
            }));
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AddArrowKeysDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.6", type: AddArrowKeysDirective, isStandalone: true, selector: "[vAddArrowKeys]", queries: [{ propertyName: "items", predicate: DropdownItemDirective, descendants: true, isSignal: true }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AddArrowKeysDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[vAddArrowKeys]',
                    standalone: true
                }]
        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownItemDirective), { ...{
                            descendants: true
                        }, isSignal: true }] }] } });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
/**
 * Directive to add alternate surface class, <code>class="v-alternate"</code>, to the host element.
 */
class AlternateDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AlternateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: AlternateDirective, isStandalone: true, selector: "[vAlternate]", host: { classAttribute: "v-alternate" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AlternateDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'v-alternate'
                    },
                    standalone: true,
                    selector: '[vAlternate]'
                }]
        }] });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
const BreakpointType = {
    XS: 'xs',
    SM: 'sm',
    MD: 'md',
    LG: 'lg',
    XL: 'xl',
    XXL: 'xxl',
    MOBILE: 'mobile',
    DESKTOP: 'desktop'
};
const coerceBreakpoint = (type, classes) => {
    if (!classes)
        return null;
    if (Array.isArray(classes))
        return classes.map((bp) => `v-${bp}-${type}-hide`).join(' ');
    return `v-${classes}-${type}-hide`;
};
class BreakpointsDirective {
    classes = computed(() => [this.vContainerHide(), this.vMediaHide()].join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : []));
    /**
     * Hides element when within given _container_ breakpoint.
     */
    vContainerHide = input(null, { ...(ngDevMode ? { debugName: "vContainerHide" } : {}), transform: (v) => coerceBreakpoint('container', v) });
    /**
     * Hides element when true.
     */
    vHide = input(null, { ...(ngDevMode ? { debugName: "vHide" } : {}), transform: booleanAttribute });
    /**
     * Hides element when within given _media_ breakpoint.
     */
    vMediaHide = input(null, { ...(ngDevMode ? { debugName: "vMediaHide" } : {}), transform: (v) => coerceBreakpoint('media', v) });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BreakpointsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: BreakpointsDirective, isStandalone: true, selector: "[vContainerHide], [vMediaHide], [vHide]", inputs: { vContainerHide: { classPropertyName: "vContainerHide", publicName: "vContainerHide", isSignal: true, isRequired: false, transformFunction: null }, vHide: { classPropertyName: "vHide", publicName: "vHide", isSignal: true, isRequired: false, transformFunction: null }, vMediaHide: { classPropertyName: "vMediaHide", publicName: "vMediaHide", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.v-hide": "vHide()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: BreakpointsDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        '[class]': 'classes()',
                        '[class.v-hide]': 'vHide()'
                    },
                    selector: '[vContainerHide], [vMediaHide], [vHide]',
                    standalone: true
                }]
        }], propDecorators: { vContainerHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "vContainerHide", required: false }] }], vHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "vHide", required: false }] }], vMediaHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "vMediaHide", required: false }] }] } });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
/**
 * The class, <code>class="v-icon-tow-color"</code>, applied by this directive only changes Visa Library icons.
 */
class DualIconDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DualIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: DualIconDirective, isStandalone: true, selector: "[v-icon-two-color], ", host: { classAttribute: "v-icon-two-color" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DualIconDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'v-icon-two-color'
                    },
                    selector: '[v-icon-two-color], ',
                    standalone: true
                }]
        }] });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
const ElevationType = {
    NONE: 'none',
    INSET: 'inset',
    XS: 'xs',
    SM: 'sm',
    MD: 'md',
    LG: 'lg',
    XL: 'xl',
    XXL: 'xxl'
};
class ElevationDirective {
    /**
     * Applies elevation given.
     */
    vElevation = input(...(ngDevMode ? [undefined, { debugName: "vElevation" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ElevationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ElevationDirective, isStandalone: true, selector: "[vElevation]", inputs: { vElevation: { classPropertyName: "vElevation", publicName: "vElevation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-elevation-none": "vElevation() === \"none\"", "class.v-elevation-inset": "vElevation() === \"inset\"", "class.v-elevation-xsmall": "vElevation() === \"xs\"", "class.v-elevation-small": "vElevation() === \"sm\"", "class.v-elevation-medium": "vElevation() === \"md\"", "class.v-elevation-large": "vElevation() === \"lg\"", "class.v-elevation-xlarge": "vElevation() === \"xl\"", "class.v-elevation-xxlarge": "vElevation() === \"xxl\"" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ElevationDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        '[class.v-elevation-none]': 'vElevation() === "none"',
                        '[class.v-elevation-inset]': 'vElevation() === "inset"',
                        '[class.v-elevation-xsmall]': 'vElevation() === "xs"',
                        '[class.v-elevation-small]': 'vElevation() === "sm"',
                        '[class.v-elevation-medium]': 'vElevation() === "md"',
                        '[class.v-elevation-large]': 'vElevation() === "lg"',
                        '[class.v-elevation-xlarge]': 'vElevation() === "xl"',
                        '[class.v-elevation-xxlarge]': 'vElevation() === "xxl"'
                    },
                    selector: '[vElevation]',
                    standalone: true
                }]
        }], propDecorators: { vElevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "vElevation", required: false }] }] } });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
class FlexDirective {
    classes = computed(() => [
        this.vColGap() ? `v-col-gap-${this.vColGap()}` : null, // vGap="4"
        this.vGap() ? `v-gap-${this.vGap()}` : null, // vGap="4"
        this.vRowGap() ? `v-row-gap-${this.vRowGap()}` : null // vGap="4"
    ].join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : []));
    /**
   /**
     * Sets property <code>align-content: space-around</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignContentAround = input(false, { ...(ngDevMode ? { debugName: "vAlignContentAround" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: space-between</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignContentBetween = input(false, { ...(ngDevMode ? { debugName: "vAlignContentBetween" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: center</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above)
     */
    vAlignContentCenter = input(false, { ...(ngDevMode ? { debugName: "vAlignContentCenter" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: end</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignContentEnd = input(false, { ...(ngDevMode ? { debugName: "vAlignContentEnd" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: start</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above)
     */
    vAlignContentStart = input(false, { ...(ngDevMode ? { debugName: "vAlignContentStart" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: space-evenly</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignContentEvenly = input(false, { ...(ngDevMode ? { debugName: "vAlignContentEvenly" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-items: baseline</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignItemsBaseline = input(false, { ...(ngDevMode ? { debugName: "vAlignItemsBaseline" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: center</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignItemsCenter = input(false, { ...(ngDevMode ? { debugName: "vAlignItemsCenter" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: end</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignItemsEnd = input(false, { ...(ngDevMode ? { debugName: "vAlignItemsEnd" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-content: start</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignItemsStart = input(false, { ...(ngDevMode ? { debugName: "vAlignItemsStart" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-items: stretch</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vAlignItemsStretch = input(false, { ...(ngDevMode ? { debugName: "vAlignItemsStretch" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-self: auto</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vAlignSelfAuto = input(false, { ...(ngDevMode ? { debugName: "vAlignSelfAuto" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-self: baseline</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vAlignSelfBaseline = input(false, { ...(ngDevMode ? { debugName: "vAlignSelfBaseline" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-self: center</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vAlignSelfCenter = input(false, { ...(ngDevMode ? { debugName: "vAlignSelfCenter" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-self: end</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vAlignSelfEnd = input(false, { ...(ngDevMode ? { debugName: "vAlignSelfEnd" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-self: start</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vAlignSelfStart = input(false, { ...(ngDevMode ? { debugName: "vAlignSelfStart" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>align-self: stretch</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vAlignSelfStretch = input(false, { ...(ngDevMode ? { debugName: "vAlignSelfStretch" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>column-gap</code>. <br>Accepts gap: 0 - 48 and SpacingProperties.
     */
    vColGap = input(null, ...(ngDevMode ? [{ debugName: "vColGap" }] : []));
    /**
     * Sets property <code>display: flex</code>. <br>
     * This property is also a selector and can be used by itself on a flex element.
     */
    vFlex = input(false, { ...(ngDevMode ? { debugName: "vFlex" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-basis: &lt;value&gt;</code>. <br>
     * Accepts a string that should be in the form of a percentage or CSS unit. <br />
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vFlexBasis = input(null, ...(ngDevMode ? [{ debugName: "vFlexBasis" }] : []));
    /**
     * Sets property <code>flex-direction: column</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexCol = input(false, { ...(ngDevMode ? { debugName: "vFlexCol" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-direction: column-reverse</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexColReverse = input(false, { ...(ngDevMode ? { debugName: "vFlexColReverse" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-grow: 1</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vFlexGrow = input(false, { ...(ngDevMode ? { debugName: "vFlexGrow" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-grow: 0</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vFlexGrow0 = input(false, { ...(ngDevMode ? { debugName: "vFlexGrow0" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>display: inline-flex</code>. <br>
     * This property is also a selector and can be used by itself on a flex element.
     */
    vFlexInline = input(false, { ...(ngDevMode ? { debugName: "vFlexInline" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-wrap: no-wrap</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexNoWrap = input(false, { ...(ngDevMode ? { debugName: "vFlexNoWrap" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-direction: row</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexRow = input(false, { ...(ngDevMode ? { debugName: "vFlexRow" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-direction: row-reverse</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexRowReverse = input(false, { ...(ngDevMode ? { debugName: "vFlexRowReverse" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-shrink: 1</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vFlexShrink = input(false, { ...(ngDevMode ? { debugName: "vFlexShrink" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-shrink: 0</code>. <br>
     * This property is also a selector and can be used by itself on the <i>child</i> of a flex element.
     */
    vFlexShrink0 = input(false, { ...(ngDevMode ? { debugName: "vFlexShrink0" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-wrap: wrap</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexWrap = input(false, { ...(ngDevMode ? { debugName: "vFlexWrap" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>flex-wrap: wrap-reverse</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vFlexWrapReverse = input(false, { ...(ngDevMode ? { debugName: "vFlexWrapReverse" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>gap</code>. <br>Accepts gap: 0 - 48 and SpacingProperties.
     */
    vGap = input(null, ...(ngDevMode ? [{ debugName: "vGap" }] : []));
    /**
     * Sets property <code>justify-content: space-around</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vJustifyContentAround = input(false, { ...(ngDevMode ? { debugName: "vJustifyContentAround" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>justify-content: space-between</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vJustifyContentBetween = input(false, { ...(ngDevMode ? { debugName: "vJustifyContentBetween" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>justify-content: center</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vJustifyContentCenter = input(false, { ...(ngDevMode ? { debugName: "vJustifyContentCenter" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>justify-content: end</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vJustifyContentEnd = input(false, { ...(ngDevMode ? { debugName: "vJustifyContentEnd" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>justify-content: space-evenly</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vJustifyContentEvenly = input(false, { ...(ngDevMode ? { debugName: "vJustifyContentEvenly" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>justify-content: start</code>. <br>
     * This property should be used alongside a FlexDirective selector (see selectors above).
     */
    vJustifyContentStart = input(false, { ...(ngDevMode ? { debugName: "vJustifyContentStart" } : {}), transform: booleanAttribute });
    /**
     * Sets property <code>row-gap</code>. <br>Accepts gap: 0 - 48 and SpacingProperties.
     */
    vRowGap = input(null, ...(ngDevMode ? [{ debugName: "vRowGap" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: FlexDirective, isStandalone: true, selector: "[vFlex], [vFlexInline], [vGap], [vFlexGrow], [vFlexGrow0],\n  [vFlexShrink], [vFlexShrink0], [vFlexBasis], [vAlignSelfStart], [vAlignSelfEnd],\n  [vAlignSelfCenter], [vAlignSelfStretch], [vAlignSelfAuto], [vAlignSelfBaseline],", inputs: { vAlignContentAround: { classPropertyName: "vAlignContentAround", publicName: "vAlignContentAround", isSignal: true, isRequired: false, transformFunction: null }, vAlignContentBetween: { classPropertyName: "vAlignContentBetween", publicName: "vAlignContentBetween", isSignal: true, isRequired: false, transformFunction: null }, vAlignContentCenter: { classPropertyName: "vAlignContentCenter", publicName: "vAlignContentCenter", isSignal: true, isRequired: false, transformFunction: null }, vAlignContentEnd: { classPropertyName: "vAlignContentEnd", publicName: "vAlignContentEnd", isSignal: true, isRequired: false, transformFunction: null }, vAlignContentStart: { classPropertyName: "vAlignContentStart", publicName: "vAlignContentStart", isSignal: true, isRequired: false, transformFunction: null }, vAlignContentEvenly: { classPropertyName: "vAlignContentEvenly", publicName: "vAlignContentEvenly", isSignal: true, isRequired: false, transformFunction: null }, vAlignItemsBaseline: { classPropertyName: "vAlignItemsBaseline", publicName: "vAlignItemsBaseline", isSignal: true, isRequired: false, transformFunction: null }, vAlignItemsCenter: { classPropertyName: "vAlignItemsCenter", publicName: "vAlignItemsCenter", isSignal: true, isRequired: false, transformFunction: null }, vAlignItemsEnd: { classPropertyName: "vAlignItemsEnd", publicName: "vAlignItemsEnd", isSignal: true, isRequired: false, transformFunction: null }, vAlignItemsStart: { classPropertyName: "vAlignItemsStart", publicName: "vAlignItemsStart", isSignal: true, isRequired: false, transformFunction: null }, vAlignItemsStretch: { classPropertyName: "vAlignItemsStretch", publicName: "vAlignItemsStretch", isSignal: true, isRequired: false, transformFunction: null }, vAlignSelfAuto: { classPropertyName: "vAlignSelfAuto", publicName: "vAlignSelfAuto", isSignal: true, isRequired: false, transformFunction: null }, vAlignSelfBaseline: { classPropertyName: "vAlignSelfBaseline", publicName: "vAlignSelfBaseline", isSignal: true, isRequired: false, transformFunction: null }, vAlignSelfCenter: { classPropertyName: "vAlignSelfCenter", publicName: "vAlignSelfCenter", isSignal: true, isRequired: false, transformFunction: null }, vAlignSelfEnd: { classPropertyName: "vAlignSelfEnd", publicName: "vAlignSelfEnd", isSignal: true, isRequired: false, transformFunction: null }, vAlignSelfStart: { classPropertyName: "vAlignSelfStart", publicName: "vAlignSelfStart", isSignal: true, isRequired: false, transformFunction: null }, vAlignSelfStretch: { classPropertyName: "vAlignSelfStretch", publicName: "vAlignSelfStretch", isSignal: true, isRequired: false, transformFunction: null }, vColGap: { classPropertyName: "vColGap", publicName: "vColGap", isSignal: true, isRequired: false, transformFunction: null }, vFlex: { classPropertyName: "vFlex", publicName: "vFlex", isSignal: true, isRequired: false, transformFunction: null }, vFlexBasis: { classPropertyName: "vFlexBasis", publicName: "vFlexBasis", isSignal: true, isRequired: false, transformFunction: null }, vFlexCol: { classPropertyName: "vFlexCol", publicName: "vFlexCol", isSignal: true, isRequired: false, transformFunction: null }, vFlexColReverse: { classPropertyName: "vFlexColReverse", publicName: "vFlexColReverse", isSignal: true, isRequired: false, transformFunction: null }, vFlexGrow: { classPropertyName: "vFlexGrow", publicName: "vFlexGrow", isSignal: true, isRequired: false, transformFunction: null }, vFlexGrow0: { classPropertyName: "vFlexGrow0", publicName: "vFlexGrow0", isSignal: true, isRequired: false, transformFunction: null }, vFlexInline: { classPropertyName: "vFlexInline", publicName: "vFlexInline", isSignal: true, isRequired: false, transformFunction: null }, vFlexNoWrap: { classPropertyName: "vFlexNoWrap", publicName: "vFlexNoWrap", isSignal: true, isRequired: false, transformFunction: null }, vFlexRow: { classPropertyName: "vFlexRow", publicName: "vFlexRow", isSignal: true, isRequired: false, transformFunction: null }, vFlexRowReverse: { classPropertyName: "vFlexRowReverse", publicName: "vFlexRowReverse", isSignal: true, isRequired: false, transformFunction: null }, vFlexShrink: { classPropertyName: "vFlexShrink", publicName: "vFlexShrink", isSignal: true, isRequired: false, transformFunction: null }, vFlexShrink0: { classPropertyName: "vFlexShrink0", publicName: "vFlexShrink0", isSignal: true, isRequired: false, transformFunction: null }, vFlexWrap: { classPropertyName: "vFlexWrap", publicName: "vFlexWrap", isSignal: true, isRequired: false, transformFunction: null }, vFlexWrapReverse: { classPropertyName: "vFlexWrapReverse", publicName: "vFlexWrapReverse", isSignal: true, isRequired: false, transformFunction: null }, vGap: { classPropertyName: "vGap", publicName: "vGap", isSignal: true, isRequired: false, transformFunction: null }, vJustifyContentAround: { classPropertyName: "vJustifyContentAround", publicName: "vJustifyContentAround", isSignal: true, isRequired: false, transformFunction: null }, vJustifyContentBetween: { classPropertyName: "vJustifyContentBetween", publicName: "vJustifyContentBetween", isSignal: true, isRequired: false, transformFunction: null }, vJustifyContentCenter: { classPropertyName: "vJustifyContentCenter", publicName: "vJustifyContentCenter", isSignal: true, isRequired: false, transformFunction: null }, vJustifyContentEnd: { classPropertyName: "vJustifyContentEnd", publicName: "vJustifyContentEnd", isSignal: true, isRequired: false, transformFunction: null }, vJustifyContentEvenly: { classPropertyName: "vJustifyContentEvenly", publicName: "vJustifyContentEvenly", isSignal: true, isRequired: false, transformFunction: null }, vJustifyContentStart: { classPropertyName: "vJustifyContentStart", publicName: "vJustifyContentStart", isSignal: true, isRequired: false, transformFunction: null }, vRowGap: { classPropertyName: "vRowGap", publicName: "vRowGap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-align-content-around": "vAlignContentAround()", "class.v-align-content-between": "vAlignContentBetween()", "class.v-align-content-center": "vAlignContentCenter()", "class.v-align-content-end": "vAlignContentEnd()", "class.v-align-content-evenly": "vAlignContentEvenly()", "class.v-align-content-start": "vAlignContentStart()", "class.v-align-items-baseline": "vAlignItemsBaseline()", "class.v-align-items-center": "vAlignItemsCenter()", "class.v-align-items-end": "vAlignItemsEnd()", "class.v-align-items-start": "vAlignItemsStart()", "class.v-align-items-stretch": "vAlignItemsStretch()", "class.v-align-self-auto": "vAlignSelfAuto()", "class.v-align-self-baseline": "vAlignSelfBaseline()", "class.v-align-self-center": "vAlignSelfCenter()", "class.v-align-self-end": "vAlignSelfEnd()", "class.v-align-self-start": "vAlignSelfStart()", "class.v-align-self-stretch": "vAlignSelfStretch()", "class.v-flex": "vFlex() || vFlexCol() || vFlexRow()", "class.v-flex-col": "vFlexCol()", "class.v-flex-col-reverse": "vFlexColReverse()", "class.v-flex-grow": "vFlexGrow()", "class.v-flex-grow-0": "vFlexGrow0()", "class.v-flex-inline": "vFlexInline()", "class.v-flex-nowrap": "vFlexNoWrap()", "class.v-flex-row": "vFlexRow() || (vFlex() && (!vFlexCol() && !vFlexColReverse() && !vFlexRowReverse()))", "class.v-flex-row-reverse": "vFlexRowReverse()", "class.v-flex-shrink": "vFlexShrink()", "class.v-flex-shrink-0": "vFlexShrink0()", "class.v-flex-wrap": "vFlexWrap()", "class.v-flex-wrap-reverse": "vFlexWrapReverse()", "class.v-justify-content-around": "vJustifyContentAround()", "class.v-justify-content-between": "vJustifyContentBetween()", "class.v-justify-content-center": "vJustifyContentCenter()", "class.v-justify-content-end": "vJustifyContentEnd()", "class.v-justify-content-evenly": "vJustifyContentEvenly()", "class.v-justify-content-start": "vJustifyContentStart()", "class": "classes()", "style.flex-basis": "vFlexBasis()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FlexDirective, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        '[class.v-align-content-around]': 'vAlignContentAround()',
                        '[class.v-align-content-between]': 'vAlignContentBetween()',
                        '[class.v-align-content-center]': 'vAlignContentCenter()',
                        '[class.v-align-content-end]': 'vAlignContentEnd()',
                        '[class.v-align-content-evenly]': 'vAlignContentEvenly()',
                        '[class.v-align-content-start]': 'vAlignContentStart()',
                        '[class.v-align-items-baseline]': 'vAlignItemsBaseline()',
                        '[class.v-align-items-center]': 'vAlignItemsCenter()',
                        '[class.v-align-items-end]': 'vAlignItemsEnd()',
                        '[class.v-align-items-start]': 'vAlignItemsStart()',
                        '[class.v-align-items-stretch]': 'vAlignItemsStretch()',
                        '[class.v-align-self-auto]': 'vAlignSelfAuto()',
                        '[class.v-align-self-baseline]': 'vAlignSelfBaseline()',
                        '[class.v-align-self-center]': 'vAlignSelfCenter()',
                        '[class.v-align-self-end]': 'vAlignSelfEnd()',
                        '[class.v-align-self-start]': 'vAlignSelfStart()',
                        '[class.v-align-self-stretch]': 'vAlignSelfStretch()',
                        '[class.v-flex]': 'vFlex() || vFlexCol() || vFlexRow()',
                        '[class.v-flex-col]': 'vFlexCol()',
                        '[class.v-flex-col-reverse]': 'vFlexColReverse()',
                        '[class.v-flex-grow]': 'vFlexGrow()',
                        '[class.v-flex-grow-0]': 'vFlexGrow0()',
                        '[class.v-flex-inline]': 'vFlexInline()',
                        '[class.v-flex-nowrap]': 'vFlexNoWrap()',
                        '[class.v-flex-row]': 'vFlexRow() || (vFlex() && (!vFlexCol() && !vFlexColReverse() && !vFlexRowReverse()))',
                        '[class.v-flex-row-reverse]': 'vFlexRowReverse()',
                        '[class.v-flex-shrink]': 'vFlexShrink()',
                        '[class.v-flex-shrink-0]': 'vFlexShrink0()',
                        '[class.v-flex-wrap]': 'vFlexWrap()',
                        '[class.v-flex-wrap-reverse]': 'vFlexWrapReverse()',
                        '[class.v-justify-content-around]': 'vJustifyContentAround()',
                        '[class.v-justify-content-between]': 'vJustifyContentBetween()',
                        '[class.v-justify-content-center]': 'vJustifyContentCenter()',
                        '[class.v-justify-content-end]': 'vJustifyContentEnd()',
                        '[class.v-justify-content-evenly]': 'vJustifyContentEvenly()',
                        '[class.v-justify-content-start]': 'vJustifyContentStart()',
                        '[class]': 'classes()',
                        '[style.flex-basis]': 'vFlexBasis()'
                    },
                    selector: `[vFlex], [vFlexInline], [vGap], [vFlexGrow], [vFlexGrow0],
  [vFlexShrink], [vFlexShrink0], [vFlexBasis], [vAlignSelfStart], [vAlignSelfEnd],
  [vAlignSelfCenter], [vAlignSelfStretch], [vAlignSelfAuto], [vAlignSelfBaseline],`,
                    standalone: true
                }]
        }], propDecorators: { vAlignContentAround: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignContentAround", required: false }] }], vAlignContentBetween: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignContentBetween", required: false }] }], vAlignContentCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignContentCenter", required: false }] }], vAlignContentEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignContentEnd", required: false }] }], vAlignContentStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignContentStart", required: false }] }], vAlignContentEvenly: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignContentEvenly", required: false }] }], vAlignItemsBaseline: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignItemsBaseline", required: false }] }], vAlignItemsCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignItemsCenter", required: false }] }], vAlignItemsEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignItemsEnd", required: false }] }], vAlignItemsStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignItemsStart", required: false }] }], vAlignItemsStretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignItemsStretch", required: false }] }], vAlignSelfAuto: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignSelfAuto", required: false }] }], vAlignSelfBaseline: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignSelfBaseline", required: false }] }], vAlignSelfCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignSelfCenter", required: false }] }], vAlignSelfEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignSelfEnd", required: false }] }], vAlignSelfStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignSelfStart", required: false }] }], vAlignSelfStretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "vAlignSelfStretch", required: false }] }], vColGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "vColGap", required: false }] }], vFlex: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlex", required: false }] }], vFlexBasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexBasis", required: false }] }], vFlexCol: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexCol", required: false }] }], vFlexColReverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexColReverse", required: false }] }], vFlexGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexGrow", required: false }] }], vFlexGrow0: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexGrow0", required: false }] }], vFlexInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexInline", required: false }] }], vFlexNoWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexNoWrap", required: false }] }], vFlexRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexRow", required: false }] }], vFlexRowReverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexRowReverse", required: false }] }], vFlexShrink: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexShrink", required: false }] }], vFlexShrink0: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexShrink0", required: false }] }], vFlexWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexWrap", required: false }] }], vFlexWrapReverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "vFlexWrapReverse", required: false }] }], vGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "vGap", required: false }] }], vJustifyContentAround: [{ type: i0.Input, args: [{ isSignal: true, alias: "vJustifyContentAround", required: false }] }], vJustifyContentBetween: [{ type: i0.Input, args: [{ isSignal: true, alias: "vJustifyContentBetween", required: false }] }], vJustifyContentCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "vJustifyContentCenter", required: false }] }], vJustifyContentEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "vJustifyContentEnd", required: false }] }], vJustifyContentEvenly: [{ type: i0.Input, args: [{ isSignal: true, alias: "vJustifyContentEvenly", required: false }] }], vJustifyContentStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "vJustifyContentStart", required: false }] }], vRowGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "vRowGap", required: false }] }] } });

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
function coerceSpacing(v, prefix) {
    if (!v && v !== 0)
        return null;
    const num = +v;
    // If negative number, return with - prefix
    if (!isNaN(num) && num < 0)
        return `-${prefix}${v}`;
    return `${prefix}-${v}`;
}
const pxAttribute = (value, fallback = null) => {
    const asNumber = numberAttribute(value);
    return Number.isNaN(asNumber) ? fallback : `${asNumber}px`;
};

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
class MarginDirective {
    classes = computed(() => [this.vM(), this.vMB(), this.vML(), this.vMR(), this.vMT(), this.vMX(), this.vMY()].join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : []));
    /**
     * Sets margin-block-start property.