@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
304 lines (303 loc) • 15.7 kB
TypeScript
/**
* 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: <value></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>;
}