UNPKG

@visa/nova-angular

Version:

Visa Product Design System Nova Angular library

304 lines (303 loc) 15.7 kB
/** * Copyright (c) 2025 Visa, Inc. * * 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. * **/ import { BooleanInput, NumberInput } from '@angular/cdk/coercion'; import { SpacingProperties } from '../nova-lib.constants'; import * as i0 from "@angular/core"; export declare class FlexDirective { get hostClasses(): string; /** * Sets property <code>display: flex</code>. <br> * This property is also a selector and can be used by itself on a flex element. */ get vFlex(): boolean; set vFlex(value: BooleanInput); _vFlex: boolean; /** * Sets property <code>display: inline-flex</code>. <br> * This property is also a selector and can be used by itself on a flex element. */ get vFlexInline(): boolean; set vFlexInline(value: BooleanInput); _vFlexInline: boolean; /** * Sets property <code>flex-direction: column</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexCol(): boolean; set vFlexCol(value: BooleanInput); _vFlexCol: boolean; /** * Sets property <code>flex-direction: column-reverse</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexColReverse(): boolean; set vFlexColReverse(value: BooleanInput); _vFlexColReverse: boolean; /** * Sets property <code>flex-direction: row</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexRow(): boolean; set vFlexRow(value: BooleanInput); _vFlexRow: boolean; /** * Sets property <code>flex-direction: row-reverse</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexRowReverse(): boolean; set vFlexRowReverse(value: BooleanInput); _vFlexRowReverse: boolean; /** * Sets property <code>flex-wrap: wrap</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexWrap(): boolean; set vFlexWrap(value: BooleanInput); _vFlexWrap: boolean; /** * Sets property <code>flex-wrap: wrap-reverse</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexWrapReverse(): boolean; set vFlexWrapReverse(value: BooleanInput); _vFlexWrapReverse: boolean; /** * Sets property <code>flex-wrap: no-wrap</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vFlexNoWrap(): boolean; set vFlexNoWrap(value: BooleanInput); _vFlexNoWrap: boolean; /** * 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. */ get vFlexBasis(): string; set vFlexBasis(value: string); _vFlexBasis: string; get hostFlexBasis(): string | null; /** * 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. */ get vFlexGrow(): boolean; set vFlexGrow(value: BooleanInput); _vFlexGrow: boolean; /** * 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. */ get vFlexGrow0(): boolean; set vFlexGrow0(value: BooleanInput); _vFlexGrow0: boolean; /** * 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. */ get vFlexShrink(): boolean; set vFlexShrink(value: BooleanInput); _vFlexShrink: boolean; /** * 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. */ get vFlexShrink0(): boolean; set vFlexShrink0(value: BooleanInput); _vFlexShrink0: boolean; /** * Sets property <code>align-content: center</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignContentCenter(): boolean; set vAlignContentCenter(value: BooleanInput); _vAlignContentCenter: boolean; /** * Sets property <code>align-content: start</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignContentStart(): boolean; set vAlignContentStart(value: BooleanInput); _vAlignContentStart: boolean; /** * Sets property <code>align-content: end</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignContentEnd(): boolean; set vAlignContentEnd(value: BooleanInput); _vAlignContentEnd: boolean; /** * Sets property <code>align-content: space-between</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignContentBetween(): boolean; set vAlignContentBetween(value: BooleanInput); _vAlignContentBetween: boolean; /** * Sets property <code>align-content: space-around</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignContentAround(): boolean; set vAlignContentAround(value: BooleanInput); _vAlignContentAround: boolean; /** * Sets property <code>align-content: space-evenly</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignContentEvenly(): boolean; set vAlignContentEvenly(value: BooleanInput); _vAlignContentEvenly: boolean; /** * Sets property <code>align-content: center</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignItemsCenter(): boolean; set vAlignItemsCenter(value: BooleanInput); _vAlignItemsCenter: boolean; /** * Sets property <code>align-content: start</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignItemsStart(): boolean; set vAlignItemsStart(value: BooleanInput); _vAlignItemsStart: boolean; /** * Sets property <code>align-content: end</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignItemsEnd(): boolean; set vAlignItemsEnd(value: BooleanInput); _vAlignItemsEnd: boolean; /** * Sets property <code>align-items: baseline</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignItemsBaseline(): boolean; set vAlignItemsBaseline(value: BooleanInput); _vAlignItemsBaseline: boolean; /** * Sets property <code>align-items: stretch</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vAlignItemsStretch(): boolean; set vAlignItemsStretch(value: BooleanInput); _vAlignItemsStretch: boolean; /** * 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. */ get vAlignSelfCenter(): boolean; set vAlignSelfCenter(value: BooleanInput); _vAlignSelfCenter: boolean; /** * 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. */ get vAlignSelfStart(): boolean; set vAlignSelfStart(value: BooleanInput); _vAlignSelfStart: boolean; /** * 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. */ get vAlignSelfEnd(): boolean; set vAlignSelfEnd(value: BooleanInput); _vAlignSelfEnd: boolean; /** * 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. */ get vAlignSelfBaseline(): boolean; set vAlignSelfBaseline(value: BooleanInput); _vAlignSelfBaseline: boolean; /** * 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. */ get vAlignSelfStretch(): boolean; set vAlignSelfStretch(value: BooleanInput); _vAlignSelfStretch: boolean; /** * 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. */ get vAlignSelfAuto(): boolean; set vAlignSelfAuto(value: BooleanInput); _vAlignSelfAuto: boolean; /** * Sets property <code>justify-content: center</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vJustifyContentCenter(): boolean; set vJustifyContentCenter(value: BooleanInput); _vJustifyContentCenter: boolean; /** * Sets property <code>justify-content: start</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vJustifyContentStart(): boolean; set vJustifyContentStart(value: BooleanInput); _vJustifyContentStart: boolean; /** * Sets property <code>justify-content: end</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vJustifyContentEnd(): boolean; set vJustifyContentEnd(value: BooleanInput); _vJustifyContentEnd: boolean; /** * Sets property <code>justify-content: space-between</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vJustifyContentBetween(): boolean; set vJustifyContentBetween(value: BooleanInput); _vJustifyContentBetween: boolean; /** * Sets property <code>justify-content: space-around</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vJustifyContentAround(): boolean; set vJustifyContentAround(value: BooleanInput); _vJustifyContentAround: boolean; /** * Sets property <code>justify-content: space-evenly</code>. <br> * This property should be used alongside a FlexDirective selector (see selectors above). */ get vJustifyContentEvenly(): boolean; set vJustifyContentEvenly(value: BooleanInput); _vJustifyContentEvenly: boolean; /** * Sets property <code>gap</code>. <br>Accepts gap: 0 - 48 and SpacingProperties. */ get vGap(): number | SpacingProperties | NumberInput; set vGap(value: number | SpacingProperties | NumberInput); _vGap: number | SpacingProperties | NumberInput; /** * Sets property <code>column-gap</code>. <br>Accepts gap: 0 - 48 and SpacingProperties. */ get vColGap(): number | SpacingProperties | NumberInput; set vColGap(value: number | SpacingProperties | NumberInput); _vColGap: number | SpacingProperties | NumberInput; /** * Sets property <code>row-gap</code>. <br>Accepts gap: 0 - 48 and SpacingProperties. */ get vRowGap(): number | SpacingProperties | NumberInput; set vRowGap(value: number | SpacingProperties | NumberInput); _vRowGap: number | SpacingProperties | NumberInput; static ɵfac: i0.ɵɵFactoryDeclaration<FlexDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<FlexDirective, "[vFlex], [vFlexInline], [vGap], [vFlexGrow], [vFlexGrow0], [vFlexShrink], [vFlexShrink0], [vFlexBasis], [vAlignSelfStart], [vAlignSelfEnd], [vAlignSelfCenter], [vAlignSelfStretch], [vAlignSelfAuto], [vAlignSelfBaseline],", never, { "vFlex": { "alias": "vFlex"; "required": false; }; "vFlexInline": { "alias": "vFlexInline"; "required": false; }; "vFlexCol": { "alias": "vFlexCol"; "required": false; }; "vFlexColReverse": { "alias": "vFlexColReverse"; "required": false; }; "vFlexRow": { "alias": "vFlexRow"; "required": false; }; "vFlexRowReverse": { "alias": "vFlexRowReverse"; "required": false; }; "vFlexWrap": { "alias": "vFlexWrap"; "required": false; }; "vFlexWrapReverse": { "alias": "vFlexWrapReverse"; "required": false; }; "vFlexNoWrap": { "alias": "vFlexNoWrap"; "required": false; }; "vFlexBasis": { "alias": "vFlexBasis"; "required": false; }; "vFlexGrow": { "alias": "vFlexGrow"; "required": false; }; "vFlexGrow0": { "alias": "vFlexGrow0"; "required": false; }; "vFlexShrink": { "alias": "vFlexShrink"; "required": false; }; "vFlexShrink0": { "alias": "vFlexShrink0"; "required": false; }; "vAlignContentCenter": { "alias": "vAlignContentCenter"; "required": false; }; "vAlignContentStart": { "alias": "vAlignContentStart"; "required": false; }; "vAlignContentEnd": { "alias": "vAlignContentEnd"; "required": false; }; "vAlignContentBetween": { "alias": "vAlignContentBetween"; "required": false; }; "vAlignContentAround": { "alias": "vAlignContentAround"; "required": false; }; "vAlignContentEvenly": { "alias": "vAlignContentEvenly"; "required": false; }; "vAlignItemsCenter": { "alias": "vAlignItemsCenter"; "required": false; }; "vAlignItemsStart": { "alias": "vAlignItemsStart"; "required": false; }; "vAlignItemsEnd": { "alias": "vAlignItemsEnd"; "required": false; }; "vAlignItemsBaseline": { "alias": "vAlignItemsBaseline"; "required": false; }; "vAlignItemsStretch": { "alias": "vAlignItemsStretch"; "required": false; }; "vAlignSelfCenter": { "alias": "vAlignSelfCenter"; "required": false; }; "vAlignSelfStart": { "alias": "vAlignSelfStart"; "required": false; }; "vAlignSelfEnd": { "alias": "vAlignSelfEnd"; "required": false; }; "vAlignSelfBaseline": { "alias": "vAlignSelfBaseline"; "required": false; }; "vAlignSelfStretch": { "alias": "vAlignSelfStretch"; "required": false; }; "vAlignSelfAuto": { "alias": "vAlignSelfAuto"; "required": false; }; "vJustifyContentCenter": { "alias": "vJustifyContentCenter"; "required": false; }; "vJustifyContentStart": { "alias": "vJustifyContentStart"; "required": false; }; "vJustifyContentEnd": { "alias": "vJustifyContentEnd"; "required": false; }; "vJustifyContentBetween": { "alias": "vJustifyContentBetween"; "required": false; }; "vJustifyContentAround": { "alias": "vJustifyContentAround"; "required": false; }; "vJustifyContentEvenly": { "alias": "vJustifyContentEvenly"; "required": false; }; "vGap": { "alias": "vGap"; "required": false; }; "vColGap": { "alias": "vColGap"; "required": false; }; "vRowGap": { "alias": "vRowGap"; "required": false; }; }, {}, never, never, true, never>; }