UNPKG

@visa/nova-angular

Version:

Visa Product Design System Nova Angular library

17 lines 827 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. * **/ {"version":3,"file":"visa-nova-angular.mjs","sources":["../../../../libs/nova-lib/src/lib/nova-lib.constants.ts","../../../../libs/nova-lib/src/lib/_utilities/angular-specific-directives/base-interactive.directive.ts","../../../../libs/nova-lib/src/lib/dropdown-item/dropdown-item.directive.ts","../../../../libs/nova-lib/src/lib/_utilities/services/uuid.service.ts","../../../../libs/nova-lib/src/lib/_utilities/services/app-stable-check.service.ts","../../../../libs/nova-lib/src/lib/badge/badge.directive.ts","../../../../libs/nova-lib/src/lib/icon-toggle-default/icon-toggle-default.directive.ts","../../../../libs/nova-lib/src/lib/icon-toggle-rotated/icon-toggle-rotated.directive.ts","../../../../libs/nova-lib/src/lib/icon-toggle/icon-toggle.component.ts","../../../../libs/nova-lib/src/lib/icon-toggle/icon-toggle.component.html","../../../../libs/nova-lib/src/lib/icon/icon.constants.ts","../../../../libs/nova-lib/src/lib/icon/icon.component.ts","../../../../libs/nova-lib/src/lib/icon/icon.component.html","../../../../libs/nova-lib/src/lib/icon-toggle/icon-toggle.directive.ts","../../../../libs/nova-lib/src/lib/button/button.constants.ts","../../../../libs/nova-lib/src/lib/button/button.directive.ts","../../../../libs/nova-lib/src/lib/checkbox/checkbox.directive.ts","../../../../libs/nova-lib/src/lib/radio/radio.directive.ts","../../../../libs/nova-lib/src/lib/toggle-control/toggle-control.service.ts","../../../../libs/nova-lib/src/lib/listbox-item/listbox-item.component.ts","../../../../libs/nova-lib/src/lib/listbox-item/listbox-item.component.html","../../../../libs/nova-lib/src/lib/button-stacked/button-stacked.directive.ts","../../../../libs/nova-lib/src/lib/floating-ui-trigger/floating-ui-trigger.directive.ts","../../../../libs/nova-lib/src/lib/tab-item/tab-item.directive.ts","../../../../libs/nova-lib/src/lib/nova-lib.service.ts","../../../../libs/nova-lib/src/lib/_utilities/angular-specific-directives/add-arrow-keys.directive.ts","../../../../libs/nova-lib/src/lib/_utilities/angular-specific-directives/opens-in-new-tab.directive.ts","../../../../libs/nova-lib/src/lib/accordion-heading/accordion-heading.directive.ts","../../../../libs/nova-lib/src/lib/accordion-button-heading/accordion-button-heading.directive.ts","../../../../libs/nova-lib/src/lib/accordion-panel/accordion-panel.directive.ts","../../../../libs/nova-lib/src/lib/accordion-item/accordion-item.directive.ts","../../../../libs/nova-lib/src/lib/flex/flex.directive.ts","../../../../libs/nova-lib/src/lib/wizard-step/wizard-step.directive.ts","../../../../libs/nova-lib/src/lib/wizard/wizard.directive.ts","../../../../libs/nova-lib/src/lib/accordion/accordion.service.ts","../../../../libs/nova-lib/src/lib/accordion/accordion.directive.ts","../../../../libs/nova-lib/src/lib/alternate/alternate.directive.ts","../../../../libs/nova-lib/src/lib/anchor-link-menu-header/anchor-link-menu-header.directive.ts","../../../../libs/nova-lib/src/lib/anchor-link-menu/anchor-link-menu.directive.ts","../../../../libs/nova-lib/src/lib/arrow/arrow.directive.ts","../../../../libs/nova-lib/src/lib/avatar-role-img/avatar-role-img.directive.ts","../../../../libs/nova-lib/src/lib/avatar/avatar.directive.ts","../../../../libs/nova-lib/src/lib/banner/banner.directive.ts","../../../../libs/nova-lib/src/lib/link/link.directive.ts","../../../../libs/nova-lib/src/lib/breadcrumbs/breadcrumbs.directive.ts","../../../../libs/nova-lib/src/lib/breakpoints/breakpoints.directive.ts","../../../../libs/nova-lib/src/lib/button-as-disabled-a-tag/button-as-disabled-a-tag.directive.ts","../../../../libs/nova-lib/src/lib/button-disabled/button-disabled.directive.ts","../../../../libs/nova-lib/src/lib/button-icon/button-icon.directive.ts","../../../../libs/nova-lib/src/lib/checkbox-panel/checkbox-panel.directive.ts","../../../../libs/nova-lib/src/lib/chip/chip.directive.ts","../../../../libs/nova-lib/src/lib/label/label.directive.ts","../../../../libs/nova-lib/src/lib/circular-progress/circular-progress.component.ts","../../../../libs/nova-lib/src/lib/circular-progress/circular-progress.component.html","../../../../libs/nova-lib/src/lib/disclosure-tab-item/disclosure-tab-item.directive.ts","../../../../libs/nova-lib/src/lib/dropdown-list/dropdown-list.directive.ts","../../../../libs/nova-lib/src/lib/dropdown-menu/dropdown-menu.directive.ts","../../../../libs/nova-lib/src/lib/floating-ui-element/floating-ui-element.directive.ts","../../../../libs/nova-lib/src/lib/floating-ui/floating-ui.constants.ts","../../../../libs/nova-lib/src/lib/floating-ui/floating-ui.service.ts","../../../../libs/nova-lib/src/lib/listbox/listbox.service.ts","../../../../libs/nova-lib/src/lib/listbox/listbox.directive.ts","../../../../libs/nova-lib/src/lib/tooltip/tooltip.directive.ts","../../../../libs/nova-lib/src/lib/floating-ui-container/floating-ui-container.directive.ts","../../../../libs/nova-lib/src/lib/input-message/input-message.directive.ts","../../../../libs/nova-lib/src/lib/input/input.directive.ts","../../../../libs/nova-lib/src/lib/select/select.directive.ts","../../../../libs/nova-lib/src/lib/input-container/input-container.component.ts","../../../../libs/nova-lib/src/lib/input-container/input-container.component.html","../../../../libs/nova-lib/src/lib/listbox-container/listbox-container.directive.ts","../../../../libs/nova-lib/src/lib/combobox/combobox.constants.ts","../../../../libs/nova-lib/src/lib/combobox/combobox.directive.ts","../../../../libs/nova-lib/src/lib/content-card-body/content-card-body.directive.ts","../../../../libs/nova-lib/src/lib/content-card-image/content-card-image.directive.ts","../../../../libs/nova-lib/src/lib/content-card-subtitle/content-card-subtitle.directive.ts","../../../../libs/nova-lib/src/lib/content-card-title-link/content-card-title-link.directive.ts","../../../../libs/nova-lib/src/lib/content-card-title/content-card-title.directive.ts","../../../../libs/nova-lib/src/lib/content-card/content-card.directive.ts","../../../../libs/nova-lib/src/lib/message/message.constants.ts","../../../../libs/nova-lib/src/lib/dialog/dialog.component.ts","../../../../libs/nova-lib/src/lib/dialog/dialog.component.html","../../../../libs/nova-lib/src/lib/dialog-header/dialog-header.directive.ts","../../../../libs/nova-lib/src/lib/dialog-text/dialog-text.directive.ts","../../../../libs/nova-lib/src/lib/divider/divider.constants.ts","../../../../libs/nova-lib/src/lib/divider/divider.directive.ts","../../../../libs/nova-lib/src/lib/dual-icons/dual-icons.directive.ts","../../../../libs/nova-lib/src/lib/elevation/elevation.directive.ts","../../../../libs/nova-lib/src/lib/flag/flag.directive.ts","../../../../libs/nova-lib/src/lib/footer/footer.directive.ts","../../../../libs/nova-lib/src/lib/linear-progress/linear-progress.directive.ts","../../../../libs/nova-lib/src/lib/margin/margin.directive.ts","../../../../libs/nova-lib/src/lib/message-content/message-content.directive.ts","../../../../libs/nova-lib/src/lib/message-icon/message-icon.directive.ts","../../../../libs/nova-lib/src/lib/message/message.directive.ts","../../../../libs/nova-lib/src/lib/tab-list/tab-list.directive.ts","../../../../libs/nova-lib/src/lib/nav/nav.directive.ts","../../../../libs/nova-lib/src/lib/padding/padding.directive.ts","../../../../libs/nova-lib/src/lib/pagination-overflow/pagination-overflow.directive.ts","../../../../libs/nova-lib/src/lib/pagination/pagination.service.ts","../../../../libs/nova-lib/src/lib/pagination/pagination.directive.ts","../../../../libs/nova-lib/src/lib/panel-body/panel-body.directive.ts","../../../../libs/nova-lib/src/lib/panel-content/panel-content.directive.ts","../../../../libs/nova-lib/src/lib/panel-toggle-button/panel-toggle-button.directive.ts","../../../../libs/nova-lib/src/lib/panel/panel.component.ts","../../../../libs/nova-lib/src/lib/panel/panel.component.html","../../../../libs/nova-lib/src/lib/radio-group/radio-group.directive.ts","../../../../libs/nova-lib/src/lib/screenreader-only/screenreader-only.directive.ts","../../../../libs/nova-lib/src/lib/section-message/section-message.directive.ts","../../../../libs/nova-lib/src/lib/skip-to-content/skip-to-content.component.ts","../../../../libs/nova-lib/src/lib/surface/surface.directive.ts","../../../../libs/nova-lib/src/lib/switch-label/switch-label.directive.ts","../../../../libs/nova-lib/src/lib/switch/switch.directive.ts","../../../../libs/nova-lib/src/lib/table-wrapper/table-wrapper.directive.ts","../../../../libs/nova-lib/src/lib/table/table.constants.ts","../../../../libs/nova-lib/src/lib/table/table.directive.ts","../../../../libs/nova-lib/src/lib/tbody/tbody.directive.ts","../../../../libs/nova-lib/src/lib/td/td.directive.ts","../../../../libs/nova-lib/src/lib/th/th.directive.ts","../../../../libs/nova-lib/src/lib/toggle-button/toggle-button.directive.ts","../../../../libs/nova-lib/src/lib/toggle-container/toggle-container.directive.ts","../../../../libs/nova-lib/src/lib/toggle/toggle.directive.ts","../../../../libs/nova-lib/src/lib/tr/tr.directive.ts","../../../../libs/nova-lib/src/lib/typography-color/typography-color.directive.ts","../../../../libs/nova-lib/src/lib/typography/typography.directive.ts","../../../../libs/nova-lib/src/lib/visa-logo/visa-logo.component.ts","../../../../libs/nova-lib/src/lib/visa-logo/visa-logo.component.html","../../../../libs/nova-lib/src/lib/nova-lib.module.ts","../../../../libs/nova-lib/src/lib/visa-logo/visa-logo.constants.ts","../../../../libs/nova-lib/src/lib/combobox/combobox.service.ts","../../../../libs/nova-lib/src/lib/id-generator/id-generator.service.ts","../../../../libs/nova-lib/src/lib/pagination-control/pagination.control.ts","../../../../libs/nova-lib/src/index.ts","../../../../libs/nova-lib/src/visa-nova-angular.ts"],"sourcesContent":["/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nexport const A_LOWERCASE_KEY = 'a';\nexport const DOWN_ARROW_KEY = 'ArrowDown';\nexport const END_KEY = 'End';\nexport const ESCAPE_KEY = 'Escape';\nexport const HOME_KEY = 'Home';\nexport const LEFT_ARROW_KEY = 'ArrowLeft';\nexport const PAGE_DOWN_KEY = 'PageDown';\nexport const PAGE_UP_KEY = 'PageUp';\nexport const RIGHT_ARROW_KEY = 'ArrowRight';\nexport const SPACE_KEY = ' ';\nexport const SPACE_CODE = 'Space';\nexport const TAB_KEY = 'Tab';\nexport const UP_ARROW_KEY = 'ArrowUp';\nexport const ALT_KEY = 'Alt';\nexport const SHIFT_KEY = 'Shift';\nexport const ENTER_KEY = 'Enter';\nexport const BACKSPACE_KEY = 'Backspace';\nexport const DELETE_KEY = 'Delete';\nexport const CTRL_KEY = 'Control';\nexport const META_KEY = 'Meta'; // command key on macs\n// Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use \"Del\" instead of \"Delete\" for the Del key.\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\nexport const DEL_KEY = 'Del';\n\nexport const SpacingProperties = {\n INHERIT: 'inherit',\n NORMAL: 'normal',\n AUTO: 'auto'\n} as const;\nexport type SpacingProperties = (typeof SpacingProperties)[keyof typeof SpacingProperties];\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { Directive, ElementRef, EventEmitter, HostListener, OnDestroy, Output } from '@angular/core';\n\n@Directive({\n selector: '[v-interactive]',\n standalone: true\n})\nexport class BaseInteractiveDirective implements OnDestroy {\n listeners: any[] = [];\n\n constructor(public el: ElementRef) {}\n\n ngOnDestroy(): void {\n this.listeners = [];\n }\n\n /**\n * Emits event when host interactive element is blurred.\n */\n @Output() blurred = new EventEmitter<any>();\n\n @HostListener('blur', ['$event'])\n hostBlur(event: Event) {\n this.blurred.emit(event);\n }\n\n /**\n * Emits event when host interactive element is focused.\n */\n @Output() focused = new EventEmitter<any>();\n\n @HostListener('focus', ['$event'])\n hostFocus(event: Event) {\n this.focused.emit(event);\n }\n\n /**\n * Emits event when host interactive element is clicked.\n */\n @Output() clicked = new EventEmitter<any>();\n\n @HostListener('click', ['$event'])\n hostClick(event: Event) {\n this.clicked.emit(event);\n }\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { Directive, ElementRef, HostBinding, Input } from '@angular/core';\nimport { BaseInteractiveDirective } from '../_utilities/angular-specific-directives/base-interactive.directive';\n\n@Directive({\n standalone: true,\n selector: '[v-dropdown-item]'\n})\nexport class DropdownItemDirective extends BaseInteractiveDirective {\n buttonItem: boolean = false;\n\n cssClasses = '';\n constructor(override el: ElementRef) {\n super(el);\n this.cssClasses = 'v-listbox-item v-dropdown-item';\n if (this.el.nativeElement.tagName.toLowerCase() === 'button') {\n this.buttonItem = true;\n this.cssClasses = 'v-listbox-item v-dropdown-item v-button v-button-tertiary v-justify-content-start';\n }\n }\n\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n * @default .v-listbox-item.v-dropdown-item\n * @default .v-listbox-item.v-dropdown-item.v-button.v-button-tertiary.v-justify-content-start when the host element is a button.\n */\n @Input() class = ''; // override the standard class attr with a new one.\n @HostBinding('class')\n get hostClasses(): string | '' | null {\n return [this.class, this.cssClasses].join(' ');\n }\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { Injectable } from '@angular/core';\n\n/**\n * This unique ID generator service is primarily used internally by the library but can be leveraged directly for custom implementations.\n */\n@Injectable({\n providedIn: 'root'\n})\nexport class UUIDService {\n /**\n * Object to store generated IDs.\n */\n private UUIDs: any = {};\n\n /** @ignore */\n private _getRandomId() {\n return (\n Math.floor(Math.random() * 10).toString() +\n Math.floor(Math.random() * 10).toString() +\n Math.floor(Math.random() * 10).toString() +\n Math.floor(Math.random() * 10).toString() +\n Math.floor(Math.random() * 10).toString() +\n Math.floor(Math.random() * 10).toString()\n );\n }\n\n /**\n * The getUUID method generates a random ID. <br>\n * Works in tandem with <code>checkUUID</code> until a unique ID is generated.\n * @param name Optional string to start the ID.\n * @returns string\n */\n getUUID(prefix?: string): string {\n prefix = prefix ? prefix : '';\n const uuid = '' + prefix + this._getRandomId();\n return this.checkUUID(uuid, prefix);\n }\n\n /**\n * The checkUUID method verifies that the ID has not already been generated by the getUUID method. <br>\n * Works in tandem with <code>getUUID</code> until a unique ID is generated.\n * @param uuid ID to check.\n * @param name Optional string to start the ID.\n * @returns uuid\n */\n checkUUID(uuid: string, prefix?: string): string {\n if (this.UUIDs[uuid]) {\n return this.getUUID(prefix);\n }\n this.UUIDs[uuid] = 1;\n return uuid;\n }\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { ApplicationRef, Injectable, Inject, PLATFORM_ID, signal, WritableSignal } from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\n/**\n * This service is used internally by the library and can optionally be used directly. <br />\n * It’s required for SSR integration but not necessary for functions behind Angular's renderer.\n */\n@Injectable({\n providedIn: 'root'\n})\nexport class AppReadyService {\n /**\n * Signal to indicate if the application is stable.\n */\n appStable: WritableSignal<boolean> = signal(false);\n /** @ignore */\n _browserAndDomReady = false;\n\n constructor(\n private appRef: ApplicationRef,\n @Inject(DOCUMENT) private document: Document,\n @Inject(PLATFORM_ID) private platformId: object\n ) {\n this.appRef.isStable.subscribe((isStable) => {\n this.appStable.set(isStable);\n });\n }\n\n /**\n * The checkDocumentExists method checks and returns the document object if applicable.\n */\n checkDocumentExists(): Document | boolean {\n if (this.document) {\n return this.document;\n } else return false;\n }\n\n /**\n * The checkIsPlatformBrowser method checks if the platform is a browser (as opposed to server).\n * @returns boolean\n */\n checkIsPlatformBrowser(): boolean {\n return isPlatformBrowser(this.platformId);\n }\n\n /**\n * The isBrowserAndDomAvailable method checks for both the document and the browser platform.\n * @returns boolean\n */\n isBrowserAndDomAvailable(): boolean {\n if (this._browserAndDomReady) return true; // prevent calling the functions every time\n this._browserAndDomReady = this.checkDocumentExists() && this.checkIsPlatformBrowser();\n return this._browserAndDomReady;\n }\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Directive, HostBinding, Input } from '@angular/core';\nimport { UUIDService } from '../_utilities/services/uuid.service';\n\nexport const BadgeType = {\n DEFAULT: 'default',\n NEUTRAL: 'neutral',\n CRITICAL: 'critical',\n NEGATIVE: 'negative',\n STABLE: 'stable',\n WARNING: 'warning',\n SUBTLE: 'subtle',\n NUMBER: 'number',\n ACTIVE: 'active'\n} as const;\n\nexport type BadgeType = (typeof BadgeType)[keyof typeof BadgeType];\n@Directive({\n standalone: true,\n selector: '[v-badge]'\n})\nexport class BadgeDirective {\n /**\n * Sets badge type.\n * @default 'default' | BadgeType.DEFAULT\n * @options 'default' | BadgeType.DEFAULT | <br> 'neutral' | BadgeType.NEUTRAL | <br> 'critical' | BadgeType.CRITICAL | <br> 'stable' | BadgeType.STABLE | <br> 'warning' | BadgeType.WARNING | <br> 'subtle' | BadgeType.SUBTLE | <br> 'number' | BadgeType.NUMBER\n */\n @Input()\n get badgeType(): BadgeType {\n return this._badgeType;\n }\n set badgeType(value: BadgeType) {\n this._badgeType = value;\n }\n _badgeType: BadgeType = BadgeType.DEFAULT;\n\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n * @default .v-badge\n */\n @Input()\n get class(): string {\n return [\n this._class,\n this.badgeType && this.badgeType != 'default'\n ? this.badgeType === BadgeType.NEGATIVE\n ? 'v-badge-critical'\n : `v-badge-${this.badgeType}`\n : '',\n this.number ? 'v-badge-number' : '',\n this.noBackground ? 'v-badge-clear' : '',\n this.icon ? 'v-badge-icon' : ''\n ].join(' ');\n }\n set class(value: string) {\n this._class = value;\n }\n _class: string = 'v-badge';\n @HostBinding('class')\n get hostClass(): string {\n return this.class;\n }\n\n /**\n * Sets custom id.\n * @default uuidService.getUUID('v-badge-')\n * @builtin true\n */\n @Input()\n id: string = this.uuidService.getUUID('v-badge-');\n @HostBinding('attr.id')\n get hostId(): string {\n return this.id;\n }\n\n constructor(private uuidService: UUIDService) {}\n\n /**\n * Sets badge to number variant when true. <br />\n * Using this flag rather than <code>badgeType=\"number\"</code> allows for number badges with other badge types.\n * @default false\n */\n @Input()\n get number(): boolean {\n return this._number;\n }\n set number(value: BooleanInput) {\n this._number = coerceBooleanProperty(value);\n }\n _number: boolean = false;\n\n /**\n * Whether or not badge contains an icon.\n * @default false\n */\n @Input()\n get icon(): boolean {\n return this._icon;\n }\n set icon(value: BooleanInput) {\n this._icon = coerceBooleanProperty(value);\n }\n _icon: boolean = false;\n\n /**\n * Removes background color from badge when true.\n */\n @Input()\n get noBackground(): boolean {\n return this._noBackground;\n }\n set noBackground(value: BooleanInput) {\n this._noBackground = coerceBooleanProperty(value);\n }\n _noBackground: boolean = false;\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { Directive, ElementRef, HostBinding, Input } from '@angular/core';\n\n@Directive({\n standalone: true,\n selector: '[v-toggle-default-template]'\n})\nexport class IconToggleDefaultTemplateDirective {\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n */\n @Input() class: string;\n @HostBinding('class')\n get hostClasses(): string {\n return [this.class].join(' ');\n }\n\n constructor(public el: ElementRef) {}\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { Directive, ElementRef, HostBinding, Input } from '@angular/core';\n\n@Directive({\n standalone: true,\n selector: '[v-toggle-rotated-template]'\n})\nexport class IconToggleRotatedTemplateDirective {\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n */\n @Input() class: string;\n @HostBinding('class')\n get hostClasses(): string {\n return [this.class].join(' ');\n }\n\n constructor(public el: ElementRef) {}\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';\nimport { IconToggleDefaultTemplateDirective } from '../icon-toggle-default/icon-toggle-default.directive';\nimport { IconToggleRotatedTemplateDirective } from '../icon-toggle-rotated/icon-toggle-rotated.directive';\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n selector: 'v-icon-visa-toggle',\n templateUrl: './icon-toggle.component.html'\n})\nexport class IconToggleComponent {\n @ContentChild(IconToggleDefaultTemplateDirective) defaultTemplate: IconToggleDefaultTemplateDirective;\n @ContentChild(IconToggleRotatedTemplateDirective) rotatedTemplate: IconToggleRotatedTemplateDirective;\n _floatingUIToggle: boolean = false;\n _selectToggle: boolean = false;\n _accordionToggle: boolean = false;\n\n constructor(public el: ElementRef) {} // used for tabs\n\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n * @default .v-accordion-toggle-icon\n */\n @Input()\n get class(): string {\n return [this._class, 'v-icon', 'v-icon-tiny', this._accordionToggle ? 'v-accordion-toggle-icon' : ''].join(' ');\n }\n set class(value: string) {\n this._class = value;\n }\n _class: string = '';\n @HostBinding('class')\n get hostClass(): string {\n return this.class;\n }\n\n /**\n * Shows the rotated template when true and the default template when false.\n * @default false\n **/\n @Input()\n get rotated(): boolean {\n return this._rotated;\n }\n set rotated(value: boolean) {\n this._rotated = value;\n }\n _rotated: boolean = false;\n\n /** @ignore */\n @HostBinding('style.align-items')\n @HostBinding('style.justify-content')\n @Input()\n alignment: string = 'center';\n\n // don't allow this component to be styled with colors\n // \"pass\" the colors to the child svg\n /** @ignore */\n @HostBinding('style.--v-icon-primary')\n @HostBinding('style.--v-icon-secondary')\n @Input()\n color: string = 'inherit';\n\n /** @ignore */\n @HostBinding('style.pointer-events')\n @Input()\n pointerEvents: string = 'none';\n}\n","<!--\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n -->\n<ng-container *ngIf=\"!rotated; else rotatedTemplate\">\n <ng-content select=\"[v-toggle-default-template]\"></ng-content>\n</ng-container>\n\n<ng-template #rotatedTemplate>\n <ng-content select=\"[v-toggle-rotated-template]\"></ng-content>\n</ng-template>\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nexport const IconSize = {\n TINY: 'tiny',\n LOW: 'low',\n HIGH: 'high'\n} as const\n\nexport type IconSize = (typeof IconSize)[keyof typeof IconSize];\n\nexport const IconLibrary = {\n VISA: 'visa',\n GENERIC: 'generic',\n} as const\n\nexport type IconLibrary = (typeof IconLibrary)[keyof typeof IconLibrary];\n\nexport const IconToggle = {\n EXPANDED: 'chevron-up',\n COLLAPSED: 'chevron-down',\n} as const\n\nexport type IconToggle = (typeof IconToggle)[keyof typeof IconToggle];","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { IconLibrary, IconSize } from './icon.constants';\n\n/**\n * <code>IconComponent</code> is intended <i>only</i> for use with icons used with an icon sprite. <br />\n * <strong>Standalone icons from @visa/nova-icons-angular is recommended over using the <code>IconComponent</code>.</strong>. <br />\n * Icon component for displaying icons from VPDS' [Icon Library](https://design.visa.com/icons). <br />\n */\n@Component({\n standalone: true,\n imports: [CommonModule],\n selector: '[v-icon]',\n templateUrl: './icon.component.html'\n})\nexport class IconComponent implements OnInit {\n _computedSize: number = 24;\n _iconRef: string;\n\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n * @default .v-icon.v-icon-&lt;iconSize&gt;.v-icon-&lt;library&gt;\n */\n @Input()\n get class(): string {\n return [\n this._class,\n 'v-icon',\n 'v-icon-' + this.iconSize,\n 'v-icon-' + this.library,\n this.isBadgeEllipse ? 'v-badge-ellipse' : '',\n this.rtl ? 'v-icon-rtl' : ''\n ].join(' ');\n }\n set class(value: string) {\n this._class = value;\n }\n _class: string = '';\n @HostBinding('class')\n get hostClass(): string {\n return this.class;\n }\n\n /**\n * Flips icon from right to left when true and <code>dir=\"rtl\" is present on a parent element.\n * @default false\n */\n @Input()\n get rtl(): boolean {\n return this._rtl;\n }\n set rtl(value: BooleanInput) {\n this._rtl = coerceBooleanProperty(value);\n }\n _rtl: boolean = false;\n\n /**\n * Sets icon resolution/size.\n * @default 'tiny' / IconSize.TINY\n * @options 'tiny' | IconSize.TINY | <br> 'low' | IconSize.LOW | <br> 'high' | IconSize.HIGH\n */\n // default of tiny chosen because it is the default for majority of buttons\n @Input()\n get iconSize(): IconSize {\n return this._iconSize;\n }\n set iconSize(value: IconSize) {\n this._iconSize = value;\n this.setIcon();\n }\n _iconSize: IconSize = IconSize.TINY;\n\n /**\n * Tells icon which library to reference.\n * @default 'visa' / IconLibrary.VISA\n * @options 'visa' | IconLibrary.VISA | <br> 'generic' | IconLibrary.GENERIC\n */\n @Input()\n get library(): IconLibrary {\n return this._library;\n }\n set library(value: IconLibrary) {\n this._library = value;\n }\n _library: IconLibrary = IconLibrary.VISA;\n\n /**\n * Name of icon to display. <br />\n * Should refer to an icon in VPDS' [Icon Library](https://design.visa.com/icons).\n */\n @Input()\n get icon(): string {\n return this._icon;\n }\n set icon(value: string) {\n this._icon = value;\n this.setIcon();\n }\n _icon: string;\n\n /**\n * Sets icon to badge-ellipse variant when true. <br />\n * Intended for use in badges with an indicator.\n * @default false\n */\n @Input()\n get isBadgeEllipse(): boolean {\n return this._isBadgeEllipse;\n }\n set isBadgeEllipse(value: BooleanInput) {\n this._isBadgeEllipse = coerceBooleanProperty(value);\n }\n _isBadgeEllipse: boolean = false;\n\n @HostBinding('style.--v-icon-primary')\n @HostBinding('style.--v-icon-secondary')\n get hostStyleFill(): string | void {\n if (this.isBadgeEllipse) {\n return 'var(--v-badge-ellipse-color)';\n }\n }\n\n @HostBinding('style.--v-icon-height')\n get hostStyleIconHeight(): string | void {\n if (this.isBadgeEllipse) {\n return `var(--size-scalable-${this.customHeight})`;\n }\n }\n\n @HostBinding('style.--v-icon-width')\n get hostStyleIconWidth(): string | void {\n if (this.isBadgeEllipse) {\n return `var(--size-scalable-${this.customWidth})`;\n }\n }\n\n /**\n * Set CSS variable <code>--v-icon-height</code> which customizes icon height.\n * @default '--size-scalable-8'\n */\n @Input()\n get customHeight(): string {\n return this._customHeight;\n }\n set customHeight(value: string) {\n this._customHeight = value;\n }\n _customHeight: string = '8';\n\n /**\n * Set CSS variable <code>--v-icon-width</code> which customizes icon width.\n * @default '--size-scalable-8'\n */\n @Input()\n get customWidth(): string {\n return this._customWidth;\n }\n set customWidth(value: string) {\n this._customWidth = value;\n }\n _customWidth: string = '8';\n\n /**\n * Name of <strong>custom</strong> icon reference. <br />\n * Should refer to an icon within an icon sprite in your application. <br />\n * The href will reference the string provided directly. No library or iconSize will be added.\n */\n @Input()\n get customIcon(): string {\n return this._customIcon;\n }\n set customIcon(value: string) {\n this._customIcon = value;\n this.setIcon();\n }\n _customIcon: string;\n\n @HostBinding('attr.viewBox')\n get hostViewBox() {\n return `0 0 ${this._computedSize} ${this._computedSize}`;\n }\n\n @HostBinding('attr.height')\n get hostHeight() {\n return `${this._computedSize}`;\n }\n\n @HostBinding('attr.width')\n get hostWidth() {\n return `${this._computedSize}`;\n }\n\n @HostBinding('attr.focusable')\n get hostFocusable() {\n return 'false';\n }\n\n @HostBinding('attr.aria-hidden')\n get hostAriaHidden() {\n return 'true';\n }\n\n constructor() {}\n\n ngOnInit(): void {\n this.setIcon();\n }\n\n setIcon() {\n this._computedSize = this.iconSize === IconSize.LOW ? 24 : this.iconSize === IconSize.HIGH ? 48 : 16;\n this._iconRef = this.customIcon\n ? this.customIcon\n : this.icon\n ? `${this.library}-${this.icon}-${this.iconSize}`\n : '';\n }\n}\n","<!--\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n -->\n<svg:use *ngIf=\"_iconRef\" [attr.href]=\"'#' + _iconRef\" [attr.xlink:href]=\"'#' + _iconRef\"></svg:use>\n<svg:circle *ngIf=\"isBadgeEllipse\" cx=\"8\" cy=\"8\" r=\"8\" style=\"fill: var(--v-badge-ellipse-color)\"></svg:circle>\n<ng-content></ng-content>\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { Directive, HostBinding, Input, OnInit } from '@angular/core';\nimport { IconComponent } from '../icon/icon.component';\nimport { IconToggle } from '../icon/icon.constants';\n\n@Directive({\n standalone: true,\n // tslint:disable-next-line:directive-selector\n selector: '[v-icon-toggle]'\n})\nexport class IconToggleDirective implements OnInit {\n _expanded: boolean = false;\n _iconSet: boolean = false;\n _expandedSet: boolean = false;\n _collapsedSet: boolean = false;\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n * @default .v-accordion-toggle-icon\n */\n @Input()\n get class(): string {\n return [this._class].join(' ');\n }\n set class(value: string) {\n this._class = value;\n }\n _class: string = '';\n @HostBinding('class')\n get hostClass(): string {\n return this.class;\n }\n\n /**\n * Icon to show when item is expanded / shown. <br>\n * Will render this icon when no <code>icon</code> or <code>customIcon</code> is provided to <code>v-icon</code>. <br>\n * Should refer to an icon in VPDS' [Icon Library](https://design.visa.com/icons).\n * @default 'chevron-down' / IconToggle.EXPANDED <br>\n * @builtin true\n */\n @Input()\n get expandedIcon(): string {\n return this._expandedIcon;\n }\n set expandedIcon(value: string) {\n this._expandedIcon = value;\n this._expandedSet = true;\n }\n _expandedIcon: string = IconToggle.EXPANDED;\n\n /**\n * Icon to show when item is collapsed / hidden. <br>\n * Will render this icon when no <code>icon</code> or <code>customIcon</code> is provided to <code>v-icon</code>. <br>\n * Should refer to an icon in VPDS' [Icon Library](https://design.visa.com/icons).\n * @default 'chevron-right' / IconToggle.COLLAPSED <br>\n * @builtin true\n */\n @Input()\n get collapsedIcon(): string {\n return this._collapsedIcon;\n }\n set collapsedIcon(value: string) {\n this._collapsedIcon = value;\n this._collapsedSet = true;\n }\n _collapsedIcon: string = IconToggle.COLLAPSED;\n\n constructor(public icon: IconComponent) {} // used in floating-ui or accordion service\n\n ngOnInit(): void {\n if (this.icon && (this.icon.icon || this.icon.customIcon)) {\n this._iconSet = true;\n }\n }\n}\n","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nexport const ButtonSize = {\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large'\n} as const\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\n\nexport const ButtonColor = {\n PRIMARY: 'primary',\n SECONDARY: 'secondary',\n TERTIARY: 'tertiary'\n} as const\n\nexport type ButtonColor = (typeof ButtonColor)[keyof typeof ButtonColor];","/**\n * Copyright (c) 2025 Visa, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n **/\nimport { BooleanInput, NumberInput, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n AfterContentInit,\n ContentChild,\n ContentChildren,\n Directive,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n QueryList\n} from '@angular/core';\nimport { BaseInteractiveDirective } from '../_utilities/angular-specific-directives/base-interactive.directive';\nimport { BadgeDirective } from '../badge/badge.directive';\nimport { IconToggleComponent } from '../icon-toggle/icon-toggle.component';\nimport { IconToggleDirective } from '../icon-toggle/icon-toggle.directive';\nimport { IconComponent } from '../icon/icon.component';\nimport { ButtonColor, ButtonSize } from './button.constants';\n\n@Directive({\n standalone: true,\n // tslint:disable-next-line:directive-selector\n selector: '[v-button], [v-button-icon], [v-button-stacked], [v-panel-toggle]'\n})\nexport class ButtonDirective extends BaseInteractiveDirective implements AfterContentInit {\n @ContentChild(BadgeDirective) badge: BadgeDirective;\n _roleSetByUser = false; // prevents parent component from overriding if role if role is given directly by user\n _buttonColorSetByUser = false; // prevents parent component from overriding if buttonColor if buttonColor is given directly by user\n _buttonSizeSetByUser = false; // prevents parent component from overriding if buttonSize if buttonSize is given directly by user\n\n /**\n * Sets custom id.\n */\n @Input()\n id: string;\n @HostBinding('attr.id')\n get hostId(): string {\n return this.id;\n }\n\n /**\n * Sets custom type.\n * @default 'button'\n */\n @Input()\n type: string = 'button';\n @HostBinding('attr.type')\n get hostType(): string {\n return this.type;\n }\n\n /**\n * Provides custom class&#40;es&#41; for custom styling.\n * @default .v-button.v-button-&lt;buttonColor&gt;.v-button-&lt;buttonSize&gt;\n */\n @Input()\n get class(): string {\n return [\n this._class,\n 'v-button',\n this.buttonColor !== ButtonColor.PRIMARY ? 'v-button-' + this.buttonColor : '',\n this.buttonSize !== ButtonSize.MEDIUM ? 'v-button-' + this.buttonSize : '',\n this.subtle ? 'v-button-subtle' : '',\n this.destructive ? 'v-button-destructive' : ''\n ].join(' ');\n }\n set class(value: string) {\n this._class = value;\n }\n _class: string = '';\n @HostBinding('class')\n get hostClass(): string {\n return this.class;\n }\n\n /**\n * Sets button size.\n * @default 'medium' / ButtonSize.MEDIUM\n * @options 'small' | ButtonSize.SMALL | <br> 'medium' | ButtonSize.MEDIUM | <br> 'large' | ButtonSize.LARGE\n */\n @Input()\n get buttonSize(): ButtonSize {\n return this._buttonSize;\n }\n set buttonSize(value: ButtonSize) {\n this._buttonSize = value;\n this._buttonSizeSetByUser = true;\n }\n _buttonSize: ButtonSize = ButtonSize.MEDIUM;\n\n /**\n * Sets button color scheme.\n * @default 'primary' / ButtonColor.PRIMARY\n * @options 'primary' | ButtonSize.PRIMARY | <br> 'secondary' | ButtonSize.SECONDARY | <br> 'tertiary' | ButtonSize.TERTIARY\n */\n @Input()\n get buttonColor(): ButtonColor {\n return this._buttonColor;\n }\n set buttonColor(value: ButtonColor) {\n this._buttonColor = value;\n this._buttonColorSetByUser = true;\n }\n _buttonColor: ButtonColor = ButtonColor.PRIMARY;\n\n /**\n * Sets button to subtle variant when true.\n * @default false\n */\n @Input()\n get subtle(): boolean {\n return this._subtle;\n }\n set subtle(value: BooleanInput) {\n this._subtle = coerceBooleanProperty(value);\n }\n _subtle: boolean = false;\n\n /**\n * Sets button to destructive variant when true.\n * @default false\n */\n @Input()\n get destructive(): boolean {\n return this._destructive;\n }\n set destructive(value: BooleanInput) {\n this._destructive = coerceBooleanProperty(value);\n }\n _destructive: boolean = false;\n\n /**\n * Disables button when true.\n * @default false\n */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: BooleanInput) {\n this._disabled = coerceBooleanProperty(value);\n this.disabledChange.emit(this.disabled);\n }\n _disabled: boolean = false;\n\n /**\n * Emits a boolean value indicating the new disabled state when the disabled state changes.\n */\n @Output() readonly disabledChange = new EventEmitter<boolean>();\n\n /**\n * Aria attribute pointing to id of descriptive element. <br />\n * If the button has a badge, the <code>aria-describedby</code> will be set to the badge's id by default.\n * @default false\n */\n @Input('aria-describedby')\n get ariaDescribedby(): string | null {\n return this._ariaDescribedby;\n }\n set ariaDescribedby(value) {\n this._ariaDescribedby = value;\n }\n _ariaDescribedby: string | null = null;\n\n @HostBinding('attr.aria-describedby')\n get hostAriaDescribedby(): string | void {\n if (this.ariaDescribedby !== null) {\n return this.ariaDescribedby;\n }\n }\n\n constructor(el: ElementRef) {\n super(el);\n } // used in accordion service\n\n ngAfterContentInit(): void {\n if (this.badge) {\n this.ariaDescribedby = this.badge.id;\n }\n }\n\n /** Below items needed for tab */\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n _roleSetByTab: boolean = false;\n _isInNavOrNested: boolean = false;\n /**\n * Sets role of button. <br />\n * If no custom role is set, role may be set by a parent component (nav, tabs, etc.).\n * @builtin true\n */\n @Input()\n get role(): string | null {\n return this._role;\n }\n set role(value: string | null) {\n this._role = value;\n this._roleSetByUser = true;\n }\n _role: string | null;\n @HostBinding('attr.role')\n get hostRole(): string | void | null {\n if (this.role || this.role === null) return this.role;\n }\n\n /**\n * Aria attribute relaying whether button is selected. <br />\n * <code>aria-current</code> and <code>aria-selected</code> should not be used together.\n * @default null\n * @builtin true\n */\n @Input('aria-selected')\n get ariaSelected(): boolean | null {\n return this._ariaSelected;\n }\n set ariaSelected(value: BooleanInput) {\n this._ariaSelected = coerceBooleanProperty(value);\n }\n _ariaSelected: boolean | null = null;\n\n @HostBinding('attr.aria-selected')\n get hostAriaSelected(): string | void {\n if (this.ariaSelected !== null && !this._isInNavOrNested) {\n return this.ariaSelected.toString();\n }\n }\n\n /**\n * Aria attribute relaying whether button is selected. <br />\n * <code>aria-current</code> and <code>aria-selected</code> should not be used together.\n * @default null\n * @builtin true\n */\n @Input('aria-current')\n get ariaCurre