@visa/nova-angular
Version:
Visa Product Design System Nova Angular library
191 lines (190 loc) • 8.14 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 { AfterContentInit, ElementRef, EventEmitter, QueryList } from '@angular/core';
import { BaseInteractiveDirective } from '../_utilities/angular-specific-directives/base-interactive.directive';
import { BadgeDirective } from '../badge/badge.directive';
import { IconToggleComponent } from '../icon-toggle/icon-toggle.component';
import { IconToggleDirective } from '../icon-toggle/icon-toggle.directive';
import { IconComponent } from '../icon/icon.component';
import { ButtonColor, ButtonSize } from './button.constants';
import * as i0 from "@angular/core";
export declare class ButtonDirective extends BaseInteractiveDirective implements AfterContentInit {
badge: BadgeDirective;
_roleSetByUser: boolean;
_buttonColorSetByUser: boolean;
_buttonSizeSetByUser: boolean;
/**
* Sets custom id.
*/
id: string;
get hostId(): string;
/**
* Sets custom type.
* @default 'button'
*/
type: string;
get hostType(): string;
/**
* Provides custom class(es) for custom styling.
* @default .v-button.v-button-<buttonColor>.v-button-<buttonSize>
*/
get class(): string;
set class(value: string);
_class: string;
get hostClass(): string;
/**
* Sets button size.
* @default 'medium' / ButtonSize.MEDIUM
* @options 'small' | ButtonSize.SMALL | <br> 'medium' | ButtonSize.MEDIUM | <br> 'large' | ButtonSize.LARGE
*/
get buttonSize(): ButtonSize;
set buttonSize(value: ButtonSize);
_buttonSize: ButtonSize;
/**
* Sets button color scheme.
* @default 'primary' / ButtonColor.PRIMARY
* @options 'primary' | ButtonSize.PRIMARY | <br> 'secondary' | ButtonSize.SECONDARY | <br> 'tertiary' | ButtonSize.TERTIARY
*/
get buttonColor(): ButtonColor;
set buttonColor(value: ButtonColor);
_buttonColor: ButtonColor;
/**
* Sets button to subtle variant when true.
* @default false
*/
get subtle(): boolean;
set subtle(value: BooleanInput);
_subtle: boolean;
/**
* Sets button to destructive variant when true.
* @default false
*/
get destructive(): boolean;
set destructive(value: BooleanInput);
_destructive: boolean;
/**
* Disables button when true.
* @default false
*/
get disabled(): boolean;
set disabled(value: BooleanInput);
_disabled: boolean;
/**
* Emits a boolean value indicating the new disabled state when the disabled state changes.
*/
readonly disabledChange: EventEmitter<boolean>;
/**
* Aria attribute pointing to id of descriptive element. <br />
* If the button has a badge, the <code>aria-describedby</code> will be set to the badge's id by default.
* @default false
*/
get ariaDescribedby(): string | null;
set ariaDescribedby(value: string | null);
_ariaDescribedby: string | null;
get hostAriaDescribedby(): string | void;
constructor(el: ElementRef);
ngAfterContentInit(): void;
/** Below items needed for tab */
icons: QueryList<IconComponent>;
_roleSetByTab: boolean;
_isInNavOrNested: boolean;
/**
* Sets role of button. <br />
* If no custom role is set, role may be set by a parent component (nav, tabs, etc.).
* @builtin true
*/
get role(): string | null;
set role(value: string | null);
_role: string | null;
get hostRole(): string | void | null;
/**
* Aria attribute relaying whether button is selected. <br />
* <code>aria-current</code> and <code>aria-selected</code> should not be used together.
* @default null
* @builtin true
*/
get ariaSelected(): boolean | null;
set ariaSelected(value: BooleanInput);
_ariaSelected: boolean | null;
get hostAriaSelected(): string | void;
/**
* Aria attribute relaying whether button is selected. <br />
* <code>aria-current</code> and <code>aria-selected</code> should not be used together.
* @default null
* @builtin true
*/
get ariaCurrent(): boolean | string | null;
set ariaCurrent(value: BooleanInput);
_ariaCurrent: boolean | string | null;
get hostAriaCurrent(): string | void;
/**
* Aria attribute relaying whether button is expanded.
* @default null
* @builtin true
*/
get ariaExpanded(): boolean | null;
set ariaExpanded(value: BooleanInput);
_ariaExpanded: boolean | null;
get hostAriaExpanded(): string | void;
/**
* Sets aria disabled state for accessibility purposes. <br />
* When true, indicates that the button is disabled and not interactive.
* @default false
*/
get ariaDisabled(): boolean;
set ariaDisabled(value: BooleanInput);
_ariaDisabled: boolean;
/** Below needed for Accordion */
toggleIcon: IconToggleDirective;
toggleIconComponent: IconToggleComponent;
/**
* Aria attribute relaying what element the button controls.
* @default null
* @default '<accordion-panel-id>' when button is used within Accordion.
* @default '<panel-content-id>' when button is used within Panel.
* @builtin true
*/
get ariaControls(): string | null;
set ariaControls(value: string | null);
_ariaControls: string | null;
get hostAriaControls(): string | void;
/** Below needed for combobox */
_inCombobox: boolean;
/**
* Sets button to combobox toggle button when true.
* @default false
* @default true when button is used within combobox and no custom value is given.
* @builtin true
*/
get ariaHaspopup(): boolean | null;
set ariaHaspopup(value: BooleanInput);
_ariaHaspopup: boolean | null;
get hostAriaHaspopup(): string | void;
/**
* Sets button's tabIndex.
* @default null
* @default -1 when button is used within combobox and no custom value is given.
* @builtin true
*/
get tabindex(): number | null;
set tabindex(value: NumberInput);
_tabindex: number | null;
get hostTabindex(): string | void;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDirective, "[v-button], [v-button-icon], [v-button-stacked], [v-panel-toggle]", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "buttonColor": { "alias": "buttonColor"; "required": false; }; "subtle": { "alias": "subtle"; "required": false; }; "destructive": { "alias": "destructive"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaSelected": { "alias": "aria-selected"; "required": false; }; "ariaCurrent": { "alias": "aria-current"; "required": false; }; "ariaExpanded": { "alias": "aria-expanded"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "ariaControls": { "alias": "aria-controls"; "required": false; }; "ariaHaspopup": { "alias": "aria-haspopup"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; }, { "disabledChange": "disabledChange"; }, ["badge", "toggleIcon", "toggleIconComponent", "icons"], never, true, never>;
}