@visa/nova-angular

Version:

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

1 lines • 690 kB

Source Map (JSON)

{"version":3,"file":"visa-nova-angular.mjs","sources":["../../../projects/nova-angular/src/lib/listener-service/listener.service.ts","../../../projects/nova-angular/src/lib/dropdown-item/dropdown-item.directive.ts","../../../projects/nova-angular/src/lib/nova-lib.constants.ts","../../../projects/nova-angular/src/lib/add-arrow-keys/add-arrow-keys.directive.ts","../../../projects/nova-angular/src/lib/alternate/alternate.directive.ts","../../../projects/nova-angular/src/lib/breakpoints/breakpoints.directive.ts","../../../projects/nova-angular/src/lib/dual-icons/dual-icons.directive.ts","../../../projects/nova-angular/src/lib/elevation/elevation.directive.ts","../../../projects/nova-angular/src/lib/flex/flex.directive.ts","../../../projects/nova-angular/src/lib/nova-lib.utils.ts","../../../projects/nova-angular/src/lib/margin/margin.directive.ts","../../../projects/nova-angular/src/lib/opens-in-new-tab/opens-in-new-tab.directive.ts","../../../projects/nova-angular/src/lib/padding/padding.directive.ts","../../../projects/nova-angular/src/lib/screenreader-only/screenreader-only.directive.ts","../../../projects/nova-angular/src/lib/surface/surface.directive.ts","../../../projects/nova-angular/src/lib/nova-common.module.ts","../../../projects/nova-angular/src/lib/app-ready/app-ready.service.ts","../../../projects/nova-angular/src/lib/id-generator/id-generator.service.ts","../../../projects/nova-angular/src/lib/checkbox/checkbox.directive.ts","../../../projects/nova-angular/src/lib/utilities/values-differ.ts","../../../projects/nova-angular/src/lib/utilities/index.ts","../../../projects/nova-angular/src/lib/radio-group/radio-group.directive.ts","../../../projects/nova-angular/src/lib/toggle-button/toggle-button.directive.ts","../../../projects/nova-angular/src/lib/toggle-container/toggle-container.directive.ts","../../../projects/nova-angular/src/lib/toggle/toggle.directive.ts","../../../projects/nova-angular/src/lib/radio/radio.directive.ts","../../../projects/nova-angular/src/lib/checkbox-panel/checkbox-panel.directive.ts","../../../projects/nova-angular/src/lib/badge/badge.directive.ts","../../../projects/nova-angular/src/lib/dropdown-menu/dropdown-menu.directive.ts","../../../projects/nova-angular/src/lib/floating-ui-element/floating-ui-element.directive.ts","../../../projects/nova-angular/src/lib/floating-ui-trigger/floating-ui-trigger.directive.ts","../../../projects/nova-angular/src/lib/floating-ui/floating-ui.constants.ts","../../../projects/nova-angular/src/lib/floating-ui/floating-ui.service.ts","../../../projects/nova-angular/src/lib/accordion/accordion.directive.ts","../../../projects/nova-angular/src/lib/button/button.constants.ts","../../../projects/nova-angular/src/lib/accordion-heading/accordion-heading.directive.ts","../../../projects/nova-angular/src/lib/accordion-item/accordion-item.directive.ts","../../../projects/nova-angular/src/lib/nav/nav.directive.ts","../../../projects/nova-angular/src/lib/listbox/listbox.service.ts","../../../projects/nova-angular/src/lib/listbox/listbox.directive.ts","../../../projects/nova-angular/src/lib/listbox-item/listbox-item.component.ts","../../../projects/nova-angular/src/lib/listbox-item/listbox-item.component.html","../../../projects/nova-angular/src/lib/nova-lib.service.ts","../../../projects/nova-angular/src/lib/panel-content/panel-content.directive.ts","../../../projects/nova-angular/src/lib/tab-list/tab-list.directive.ts","../../../projects/nova-angular/src/lib/tab-item/tab-item.directive.ts","../../../projects/nova-angular/src/lib/icon-toggle-default/icon-toggle-default.directive.ts","../../../projects/nova-angular/src/lib/icon-toggle-rotated/icon-toggle-rotated.directive.ts","../../../projects/nova-angular/src/lib/icon-toggle/icon-toggle.component.ts","../../../projects/nova-angular/src/lib/icon-toggle/icon-toggle.component.html","../../../projects/nova-angular/src/lib/icon/icon.constants.ts","../../../projects/nova-angular/src/lib/icon-toggle/icon-toggle.directive.ts","../../../projects/nova-angular/src/lib/arrow/arrow.directive.ts","../../../projects/nova-angular/src/lib/tooltip/tooltip.directive.ts","../../../projects/nova-angular/src/lib/floating-ui-container/floating-ui-container.directive.ts","../../../projects/nova-angular/src/lib/input/input.directive.ts","../../../projects/nova-angular/src/lib/select/select.directive.ts","../../../projects/nova-angular/src/lib/input-container/input-container.component.ts","../../../projects/nova-angular/src/lib/input-container/input-container.component.html","../../../projects/nova-angular/src/lib/circular-progress/circular-progress.component.ts","../../../projects/nova-angular/src/lib/circular-progress/circular-progress.component.html","../../../projects/nova-angular/src/lib/label/label.directive.ts","../../../projects/nova-angular/src/lib/listbox-container/listbox-container.directive.ts","../../../projects/nova-angular/src/lib/combobox/combobox.directive.ts","../../../projects/nova-angular/src/lib/button/button.directive.ts","../../../projects/nova-angular/src/lib/chip/chip.directive.ts","../../../projects/nova-angular/src/lib/input-message/input-message.directive.ts","../../../projects/nova-angular/src/lib/switch/switch.directive.ts","../../../projects/nova-angular/src/lib/nova-forms.module.ts","../../../projects/nova-angular/src/lib/accordion-panel/accordion-panel.directive.ts","../../../projects/nova-angular/src/lib/anchor-link-menu-header/anchor-link-menu-header.directive.ts","../../../projects/nova-angular/src/lib/anchor-link-menu/anchor-link-menu.directive.ts","../../../projects/nova-angular/src/lib/avatar/avatar.directive.ts","../../../projects/nova-angular/src/lib/banner/banner.directive.ts","../../../projects/nova-angular/src/lib/breadcrumbs/breadcrumbs.directive.ts","../../../projects/nova-angular/src/lib/content-card-body/content-card-body.directive.ts","../../../projects/nova-angular/src/lib/content-card-image/content-card-image.directive.ts","../../../projects/nova-angular/src/lib/content-card-subtitle/content-card-subtitle.directive.ts","../../../projects/nova-angular/src/lib/content-card/content-card.directive.ts","../../../projects/nova-angular/src/lib/content-card-title-link/content-card-title-link.directive.ts","../../../projects/nova-angular/src/lib/content-card-title/content-card-title.directive.ts","../../../projects/nova-angular/src/lib/dialog/dialog.directive.ts","../../../projects/nova-angular/src/lib/dialog-header/dialog-header.directive.ts","../../../projects/nova-angular/src/lib/dialog-text/dialog-text.directive.ts","../../../projects/nova-angular/src/lib/divider/divider.directive.ts","../../../projects/nova-angular/src/lib/dropdown-list/dropdown-list.directive.ts","../../../projects/nova-angular/src/lib/flag/flag.directive.ts","../../../projects/nova-angular/src/lib/footer/footer.directive.ts","../../../projects/nova-angular/src/lib/icon/icon.component.ts","../../../projects/nova-angular/src/lib/icon/icon.component.html","../../../projects/nova-angular/src/lib/linear-progress/linear-progress.directive.ts","../../../projects/nova-angular/src/lib/link/link.directive.ts","../../../projects/nova-angular/src/lib/message-content/message-content.directive.ts","../../../projects/nova-angular/src/lib/message-icon/message-icon.directive.ts","../../../projects/nova-angular/src/lib/message/message.constants.ts","../../../projects/nova-angular/src/lib/message/message.directive.ts","../../../projects/nova-angular/src/lib/pagination-overflow/pagination-overflow.directive.ts","../../../projects/nova-angular/src/lib/pagination/pagination.directive.ts","../../../projects/nova-angular/src/lib/panel-body/panel-body.directive.ts","../../../projects/nova-angular/src/lib/panel-toggle-button/panel-toggle-button.directive.ts","../../../projects/nova-angular/src/lib/panel/panel.directive.ts","../../../projects/nova-angular/src/lib/section-message/section-message.directive.ts","../../../projects/nova-angular/src/lib/skip-to-content/skip-to-content.directive.ts","../../../projects/nova-angular/src/lib/table-wrapper/table-wrapper.directive.ts","../../../projects/nova-angular/src/lib/table/table.constants.ts","../../../projects/nova-angular/src/lib/table/table.directive.ts","../../../projects/nova-angular/src/lib/td/td.directive.ts","../../../projects/nova-angular/src/lib/th/th.directive.ts","../../../projects/nova-angular/src/lib/typography/typography.directive.ts","../../../projects/nova-angular/src/lib/visa-logo/visa-logo.component.ts","../../../projects/nova-angular/src/lib/wizard-step/wizard-step.directive.ts","../../../projects/nova-angular/src/lib/wizard/wizard.directive.ts","../../../projects/nova-angular/src/lib/nova-lib.module.ts","../../../projects/nova-angular/src/lib/combobox/combobox.constants.ts","../../../projects/nova-angular/src/lib/divider/divider.constants.ts","../../../projects/nova-angular/src/lib/pagination-control/pagination.control.ts","../../../projects/nova-angular/src/lib/combobox/combobox.service.ts","../../../projects/nova-angular/src/index.ts","../../../projects/nova-angular/src/visa-nova-angular.ts"],"sourcesContent":["/**\n * © 2025-2026 Visa\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 { effect, Injectable } from '@angular/core';\nimport { Unsubscribable } from '../types';\n\n@Injectable()\nexport class ListenerService {\n public listeners: (() => void)[] = [];\n public navListeners: (() => void)[] = []; // For navigation events added by nova-lib-service\n public navSubscriptions: (Unsubscribable | undefined)[] = []; // For navigation subscriptions added by nova-lib-service\n public subscriptions: (Unsubscribable | undefined)[] = [];\n\n cleanupEffect = effect((onCleanup) => {\n onCleanup(() => {\n this.cleanup();\n this.cleanupNavListeners();\n });\n });\n\n cleanup(): void {\n this.listeners?.forEach((listener) => listener());\n this.listeners = [];\n this.subscriptions?.forEach((subscription) => subscription?.unsubscribe());\n this.subscriptions = [];\n }\n\n cleanupNavListeners(): void {\n this.navListeners?.forEach((listener) => listener());\n this.navListeners = [];\n this.navSubscriptions?.forEach((sub) => sub?.unsubscribe());\n this.navSubscriptions = [];\n }\n}\n","/**\n * © 2025-2026 Visa\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 {\n afterNextRender,\n booleanAttribute,\n computed,\n Directive,\n ElementRef,\n EventEmitter,\n inject,\n input,\n InputSignalWithTransform,\n Signal,\n signal,\n WritableSignal\n} from '@angular/core';\nimport { ListenerService } from '../listener-service/listener.service';\n\n@Directive({\n host: {\n class: 'v-dropdown-item v-listbox-item',\n\n '[attr.disabled]': 'disabled() ? \"disabled\" : null',\n\n '[class.v-button]': 'buttonItem()',\n '[class.v-button-tertiary]': 'buttonItem()',\n '[class.v-justify-content-start]': 'buttonItem()',\n\n '(click)': 'clicked.emit($event)'\n },\n providers: [ListenerService],\n selector: '[v-dropdown-item]',\n standalone: true\n})\nexport class DropdownItemDirective {\n constructor() {\n afterNextRender({\n read: () => {\n this.tagName.set(this.el.nativeElement.tagName.toLowerCase());\n }\n });\n }\n public readonly el: ElementRef = inject(ElementRef);\n public readonly listenerService: ListenerService = inject(ListenerService);\n private readonly tagName: WritableSignal<string> = signal<string>('');\n protected readonly buttonItem: Signal<boolean> = computed(() => this.tagName() === 'button');\n\n /**\n * Marks item as selected when true.\n * @default false\n */\n readonly disabled: InputSignalWithTransform<boolean | null, unknown> = input<boolean | null, unknown>(null, {\n transform: booleanAttribute\n }); // used for floating-ui-container closeOnClick\n\n /**\n * Emits event when host interactive element is clicked.\n */\n readonly clicked: EventEmitter<Event> = new EventEmitter<Event>();\n}\n","/**\n * © 2025-2026 Visa\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 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 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 ENTER_KEY = 'Enter';\nexport const BACKSPACE_KEY = 'Backspace';\n\nexport const SpacingProperties = {\n INHERIT: 'inherit',\n NORMAL: 'normal',\n AUTO: 'auto'\n} as const;\n\nexport type SpacingProperties = (typeof SpacingProperties)[keyof typeof SpacingProperties] | number;\n","/**\n * © 2025-2026 Visa\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, Renderer2, RendererFactory2, Signal, contentChildren, inject } from '@angular/core';\nimport { DropdownItemDirective } from '../dropdown-item/dropdown-item.directive';\nimport { DOWN_ARROW_KEY, ESCAPE_KEY, LEFT_ARROW_KEY, RIGHT_ARROW_KEY, UP_ARROW_KEY } from '../nova-lib.constants';\n\n@Directive({\n selector: '[vAddArrowKeys]',\n standalone: true\n})\nexport class AddArrowKeysDirective {\n private readonly items: Signal<readonly DropdownItemDirective[]> = contentChildren(DropdownItemDirective, {\n descendants: true\n });\n private readonly renderer: Renderer2 = inject(RendererFactory2).createRenderer(null, null);\n\n ngAfterContentInit() {\n const itemsArray = this.items()?.filter((item) => !item.el.nativeElement.disabled) ?? [];\n\n if (!itemsArray.length) return;\n\n itemsArray.forEach((item, index) => {\n item.listenerService.navListeners.push(\n this.renderer.listen(item.el.nativeElement, 'keydown', (event: KeyboardEvent) => {\n if (\n event.key === ESCAPE_KEY ||\n ![DOWN_ARROW_KEY, RIGHT_ARROW_KEY, UP_ARROW_KEY, LEFT_ARROW_KEY].includes(event.key)\n )\n return;\n\n event.preventDefault();\n const isForward = [DOWN_ARROW_KEY, RIGHT_ARROW_KEY].includes(event.key);\n const nextIndex = isForward\n ? (index + 1) % itemsArray.length\n : (index - 1 + itemsArray.length) % itemsArray.length;\n itemsArray[nextIndex].el.nativeElement.focus();\n })\n );\n });\n }\n}\n","/**\n * © 2025-2026 Visa\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 } from '@angular/core';\n\n/**\n * Directive to add alternate surface class, <code>class=\"v-alternate\"</code>, to the host element.\n */\n@Directive({\n host: {\n class: 'v-alternate'\n },\n standalone: true,\n selector: '[vAlternate]'\n})\nexport class AlternateDirective {}\n","/**\n * © 2025-2026 Visa\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 { booleanAttribute, computed, Directive, input, InputSignalWithTransform, Signal } from '@angular/core';\n\nexport const BreakpointType = {\n XS: 'xs',\n SM: 'sm',\n MD: 'md',\n LG: 'lg',\n XL: 'xl',\n XXL: 'xxl',\n MOBILE: 'mobile',\n DESKTOP: 'desktop'\n} as const;\n\nexport type BreakpointType = (typeof BreakpointType)[keyof typeof BreakpointType];\n\nexport const coerceBreakpoint = (\n type: 'container' | 'media',\n classes: BreakpointType | BreakpointType[] | null\n): string | null => {\n if (!classes) return null;\n if (Array.isArray(classes)) return classes.map((bp) => `v-${bp}-${type}-hide`).join(' ');\n return `v-${classes}-${type}-hide`;\n};\n\n@Directive({\n host: {\n '[class]': 'classes()',\n '[class.v-hide]': 'vHide()'\n },\n selector: '[vContainerHide], [vMediaHide], [vHide]',\n standalone: true\n})\nexport class BreakpointsDirective {\n protected readonly classes: Signal<string> = computed(() => [this.vContainerHide(), this.vMediaHide()].join(' '));\n\n /**\n * Hides element when within given _container_ breakpoint.\n */\n readonly vContainerHide: InputSignalWithTransform<string | null, BreakpointType | BreakpointType[] | null> = input<\n null | string,\n BreakpointType | BreakpointType[] | null\n >(null, {\n transform: (v) => coerceBreakpoint('container', v)\n });\n\n /**\n * Hides element when true.\n */\n readonly vHide: InputSignalWithTransform<boolean | null, unknown> = input<boolean | null, unknown>(null, {\n transform: booleanAttribute\n });\n\n /**\n * Hides element when within given _media_ breakpoint.\n */\n readonly vMediaHide: InputSignalWithTransform<string | null, BreakpointType | BreakpointType[] | null> = input<\n null | string,\n BreakpointType | BreakpointType[] | null\n >(null, {\n transform: (v) => coerceBreakpoint('media', v)\n });\n}\n","/**\n * © 2025-2026 Visa\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 } from '@angular/core';\n\n/**\n * The class, <code>class=\"v-icon-tow-color\"</code>, applied by this directive only changes Visa Library icons.\n */\n@Directive({\n host: {\n class: 'v-icon-two-color'\n },\n selector: '[v-icon-two-color], ',\n standalone: true\n})\nexport class DualIconDirective {}\n","/**\n * © 2025-2026 Visa\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, input, InputSignal } from '@angular/core';\n\nexport const ElevationType = {\n NONE: 'none',\n INSET: 'inset',\n XS: 'xs',\n SM: 'sm',\n MD: 'md',\n LG: 'lg',\n XL: 'xl',\n XXL: 'xxl'\n} as const;\n\nexport type ElevationType = (typeof ElevationType)[keyof typeof ElevationType];\n\n@Directive({\n host: {\n '[class.v-elevation-none]': 'vElevation() === \"none\"',\n '[class.v-elevation-inset]': 'vElevation() === \"inset\"',\n '[class.v-elevation-xsmall]': 'vElevation() === \"xs\"',\n '[class.v-elevation-small]': 'vElevation() === \"sm\"',\n '[class.v-elevation-medium]': 'vElevation() === \"md\"',\n '[class.v-elevation-large]': 'vElevation() === \"lg\"',\n '[class.v-elevation-xlarge]': 'vElevation() === \"xl\"',\n '[class.v-elevation-xxlarge]': 'vElevation() === \"xxl\"'\n },\n selector: '[vElevation]',\n standalone: true\n})\nexport class ElevationDirective {\n /**\n * Applies elevation given.\n */\n readonly vElevation: InputSignal<ElevationType | undefined> = input<ElevationType>();\n}\n","/**\n * © 2025-2026 Visa\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 {\n booleanAttribute,\n computed,\n Directive,\n input,\n InputSignal,\n InputSignalWithTransform,\n Signal\n} from '@angular/core';\nimport { SpacingProperties } from '../nova-lib.constants';\n\n@Directive({\n host: {\n '[class.v-align-content-around]': 'vAlignContentAround()',\n '[class.v-align-content-between]': 'vAlignContentBetween()',\n '[class.v-align-content-center]': 'vAlignContentCenter()',\n '[class.v-align-content-end]': 'vAlignContentEnd()',\n '[class.v-align-content-evenly]': 'vAlignContentEvenly()',\n '[class.v-align-content-start]': 'vAlignContentStart()',\n\n '[class.v-align-items-baseline]': 'vAlignItemsBaseline()',\n '[class.v-align-items-center]': 'vAlignItemsCenter()',\n '[class.v-align-items-end]': 'vAlignItemsEnd()',\n '[class.v-align-items-start]': 'vAlignItemsStart()',\n '[class.v-align-items-stretch]': 'vAlignItemsStretch()',\n\n '[class.v-align-self-auto]': 'vAlignSelfAuto()',\n '[class.v-align-self-baseline]': 'vAlignSelfBaseline()',\n '[class.v-align-self-center]': 'vAlignSelfCenter()',\n '[class.v-align-self-end]': 'vAlignSelfEnd()',\n '[class.v-align-self-start]': 'vAlignSelfStart()',\n '[class.v-align-self-stretch]': 'vAlignSelfStretch()',\n\n '[class.v-flex]': 'vFlex() || vFlexCol() || vFlexRow()',\n '[class.v-flex-col]': 'vFlexCol()',\n '[class.v-flex-col-reverse]': 'vFlexColReverse()',\n '[class.v-flex-grow]': 'vFlexGrow()',\n '[class.v-flex-grow-0]': 'vFlexGrow0()',\n '[class.v-flex-inline]': 'vFlexInline()',\n '[class.v-flex-nowrap]': 'vFlexNoWrap()',\n '[class.v-flex-row]': 'vFlexRow() || (vFlex() && (!vFlexCol() && !vFlexColReverse() && !vFlexRowReverse()))',\n '[class.v-flex-row-reverse]': 'vFlexRowReverse()',\n '[class.v-flex-shrink]': 'vFlexShrink()',\n '[class.v-flex-shrink-0]': 'vFlexShrink0()',\n '[class.v-flex-wrap]': 'vFlexWrap()',\n '[class.v-flex-wrap-reverse]': 'vFlexWrapReverse()',\n\n '[class.v-justify-content-around]': 'vJustifyContentAround()',\n '[class.v-justify-content-between]': 'vJustifyContentBetween()',\n '[class.v-justify-content-center]': 'vJustifyContentCenter()',\n '[class.v-justify-content-end]': 'vJustifyContentEnd()',\n '[class.v-justify-content-evenly]': 'vJustifyContentEvenly()',\n '[class.v-justify-content-start]': 'vJustifyContentStart()',\n\n '[class]': 'classes()',\n\n '[style.flex-basis]': 'vFlexBasis()'\n },\n selector: `[vFlex], [vFlexInline], [vGap], [vFlexGrow], [vFlexGrow0],\n [vFlexShrink], [vFlexShrink0], [vFlexBasis], [vAlignSelfStart], [vAlignSelfEnd],\n [vAlignSelfCenter], [vAlignSelfStretch], [vAlignSelfAuto], [vAlignSelfBaseline],`,\n standalone: true\n})\nexport class FlexDirective {\n protected readonly classes: Signal<string> = computed(() =>\n [\n this.vColGap() ? `v-col-gap-${this.vColGap()}` : null, // vGap=\"4\"\n this.vGap() ? `v-gap-${this.vGap()}` : null, // vGap=\"4\"\n this.vRowGap() ? `v-row-gap-${this.vRowGap()}` : null // vGap=\"4\"\n ].join(' ')\n );\n\n /**\n /**\n * Sets property <code>align-content: space-around</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignContentAround: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: space-between</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignContentBetween: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: center</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above)\n */\n readonly vAlignContentCenter: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: end</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignContentEnd: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: start</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above)\n */\n readonly vAlignContentStart: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: space-evenly</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignContentEvenly: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-items: baseline</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignItemsBaseline: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: center</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignItemsCenter: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: end</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignItemsEnd: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-content: start</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignItemsStart: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-items: stretch</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vAlignItemsStretch: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-self: auto</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vAlignSelfAuto: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-self: baseline</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vAlignSelfBaseline: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-self: center</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vAlignSelfCenter: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-self: end</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vAlignSelfEnd: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-self: start</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vAlignSelfStart: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>align-self: stretch</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vAlignSelfStretch: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>column-gap</code>. Accepts gap: 0 - 48 and SpacingProperties.\n */\n readonly vColGap: InputSignal<null | number | SpacingProperties | string | undefined> = input<\n null | number | SpacingProperties | string | undefined\n >(null);\n\n /**\n * Sets property <code>display: flex</code>. \n * This property is also a selector and can be used by itself on a flex element.\n */\n readonly vFlex: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-basis: <value></code>. \n * Accepts a string that should be in the form of a percentage or CSS unit. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vFlexBasis: InputSignal<null | string> = input<null | string>(null);\n\n /**\n * Sets property <code>flex-direction: column</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexCol: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-direction: column-reverse</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexColReverse: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-grow: 1</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vFlexGrow: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-grow: 0</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vFlexGrow0: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>display: inline-flex</code>. \n * This property is also a selector and can be used by itself on a flex element.\n */\n readonly vFlexInline: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-wrap: no-wrap</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexNoWrap: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-direction: row</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexRow: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-direction: row-reverse</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexRowReverse: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-shrink: 1</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vFlexShrink: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-shrink: 0</code>. \n * This property is also a selector and can be used by itself on the child of a flex element.\n */\n readonly vFlexShrink0: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-wrap: wrap</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexWrap: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>flex-wrap: wrap-reverse</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vFlexWrapReverse: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>gap</code>. Accepts gap: 0 - 48 and SpacingProperties.\n */\n readonly vGap: InputSignal<null | number | SpacingProperties | string | undefined> = input<\n null | number | SpacingProperties | string | undefined\n >(null);\n\n /**\n * Sets property <code>justify-content: space-around</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vJustifyContentAround: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>justify-content: space-between</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vJustifyContentBetween: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>justify-content: center</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vJustifyContentCenter: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>justify-content: end</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vJustifyContentEnd: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>justify-content: space-evenly</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vJustifyContentEvenly: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>justify-content: start</code>. \n * This property should be used alongside a FlexDirective selector (see selectors above).\n */\n readonly vJustifyContentStart: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n transform: booleanAttribute\n });\n\n /**\n * Sets property <code>row-gap</code>. Accepts gap: 0 - 48 and SpacingProperties.\n */\n readonly vRowGap: InputSignal<null | number | SpacingProperties | string | undefined> = input<\n null | number | SpacingProperties | string | undefined\n >(null);\n}\n","/**\n * © 2025-2026 Visa\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 { numberAttribute } from '@angular/core';\n\nexport function coerceSpacing(v: string | number | null | undefined, prefix: string): string | null {\n if (!v && v !== 0) return null;\n const num = +v;\n // If negative number, return with - prefix\n if (!isNaN(num) && num < 0) return `-${prefix}${v}`;\n return `${prefix}-${v}`;\n}\n\nexport const pxAttribute = <T = unknown | null>(value: unknown, fallback = null as T): string | T => {\n const asNumber = numberAttribute(value);\n return Number.isNaN(asNumber) ? fallback : `${asNumber}px`;\n};\n","/**\n * © 2025-2026 Visa\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 { computed, Directive, input, InputSignalWithTransform, Signal } from '@angular/core';\nimport { SpacingProperties } from '../nova-lib.constants';\nimport { coerceSpacing } from '../nova-lib.utils';\n\n@Directive({\n host: {\n '[class]': 'classes()'\n },\n selector:\n '[vM], ' + // all margins\n '[vMB], ' + // margin block end\n '[vML], ' + // margin inline start\n '[vMR], ' + // margin inline end\n '[vMT], ' + // margin block start\n '[vMX], ' + // margin inline\n '[vMY], ', // margin block\n standalone: true\n})\nexport class MarginDirective {\n protected readonly classes: Signal<string> = computed(() =>\n [this.vM(), this.vMB(), this.vML(), this.vMR(), this.vMT(), this.vMX(), this.vMY()].join(' ')\n );\n\n /**\n * Sets margin-block-start property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vM: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-m')\n });\n\n /**\n * Sets margin-inline-end property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vMB: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-mb')\n });\n\n /**\n * Sets margin-block-end property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vML: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-ml')\n });\n\n /**\n * Sets margin-inline-start property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vMR: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-mr')\n });\n\n /**\n * Sets margin-inline property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vMT: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-mt')\n });\n\n /**\n * Sets margin-block property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vMX: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-mx')\n });\n\n /**\n * Sets margin property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vMY: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-my')\n });\n}\n","/**\n * © 2025-2026 Visa\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 {\n afterNextRender,\n computed,\n Directive,\n ElementRef,\n inject,\n input,\n InputSignal,\n Signal,\n signal,\n WritableSignal\n} from '@angular/core';\n\n@Directive({\n host: {\n rel: 'noopener noreferrer',\n target: 'blank',\n\n '[attr.aria-label]': 'ariaLabel()'\n },\n selector: '[vOpensInNewTab], ',\n standalone: true\n})\nexport class OpensInNewTabDirective {\n constructor() {\n afterNextRender({\n read: () => {\n // Ensure the textContent is trimmed to avoid leading/trailing whitespace issues\n this.textContent.set(this.el.nativeElement.textContent?.trim() || null);\n }\n });\n }\n\n private readonly el: ElementRef<HTMLAnchorElement> = inject(ElementRef);\n private readonly textContent: WritableSignal<string | null> = signal(null);\n\n /**\n * Allows user to set custom aria-label attribute.\n * @default '<inner-text-of-link> (opens in new tab)'\n */\n readonly ariaLabelInput: InputSignal<string | null> = input<string | null>(null, { alias: 'aria-label' });\n readonly ariaLabel: Signal<string | null> = computed(() => {\n const textContent = this.textContent();\n // If ariaLabelInput is set, use it; otherwise, construct a default label\n const customLabel = textContent ? `${textContent} (opens in new tab)` : null;\n return this.ariaLabelInput() ?? customLabel;\n });\n}\n","/**\n * © 2025-2026 Visa\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 { computed, Directive, input, InputSignalWithTransform, Signal } from '@angular/core';\nimport { type SpacingProperties } from '../nova-lib.constants';\nimport { coerceSpacing } from '../nova-lib.utils';\n\n@Directive({\n host: {\n '[class]': 'classes()'\n },\n selector:\n '[vP], ' + // all paddings\n '[vPB], ' + // padding block end\n '[vPL], ' + // padding inline start\n '[vPR], ' + // padding inline end\n '[vPT], ' + // padding block start\n '[vPX], ' + // padding inline\n '[vPY], ', // padding block\n standalone: true\n})\nexport class PaddingDirective {\n protected readonly classes: Signal<string> = computed(() =>\n [this.vP(), this.vPB(), this.vPL(), this.vPR(), this.vPT(), this.vPX(), this.vPY()].join(' ')\n );\n\n /**\n * Sets padding-block-start property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vP: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-p')\n });\n\n /**\n * Sets padding-inline-end property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vPB: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-pb')\n });\n\n /**\n * Sets padding-block-end property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vPL: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-pl')\n });\n\n /**\n * Sets padding-inline-start property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vPR: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-pr')\n });\n\n /**\n * Sets padding-inline property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vPT: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-pt')\n });\n\n /**\n * Sets padding-block property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vPX: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-px')\n });\n\n /**\n * Sets padding property. \n * Accepts: 0 - 48 or <code>SpacingProperties</code>.\n */\n readonly vPY: InputSignalWithTransform<string | null, SpacingProperties | string | undefined> = input<\n string | null,\n SpacingProperties | string | undefined\n >(null, {\n transform: (v) => coerceSpacing(v, 'v-py')\n });\n}\n","/**\n * ©