/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { EventAction, Experience } from "./components/dxp-experience/models"; import { HrefTarget, IconSize } from "./components/dxp-badge/dxp-badge"; import { CollapsibleEventDetail } from "./components/dxp-collapsible/dxp-collapsible"; import { StoryInput } from "./models"; import { DxpSourceType } from "./components/dxp-link/dxp-link"; import { BeforeCloseEventDetail } from "./components/dxp-modal/dxp-modal"; import { MenuItem } from "./components/dxp-nav/models/menu-item"; import { RadioGroupChangeEventDetail } from "./components/dxp-radio-group/radio-group-interface"; import { TooltipOpenMode, TooltipPosition, TooltipSize } from "./components/dxp-tooltip/dxp-tooltip"; import { IconSize as IconSize1, LabelPosition } from "./components/dxp-truncate/dxp-truncate"; import { WayfinderOrientation, WayfinderPopupDirection } from "./components/dxp-wayfinder/dxp-wayfinder"; export { EventAction, Experience } from "./components/dxp-experience/models"; export { HrefTarget, IconSize } from "./components/dxp-badge/dxp-badge"; export { CollapsibleEventDetail } from "./components/dxp-collapsible/dxp-collapsible"; export { StoryInput } from "./models"; export { DxpSourceType } from "./components/dxp-link/dxp-link"; export { BeforeCloseEventDetail } from "./components/dxp-modal/dxp-modal"; export { MenuItem } from "./components/dxp-nav/models/menu-item"; export { RadioGroupChangeEventDetail } from "./components/dxp-radio-group/radio-group-interface"; export { TooltipOpenMode, TooltipPosition, TooltipSize } from "./components/dxp-tooltip/dxp-tooltip"; export { IconSize as IconSize1, LabelPosition } from "./components/dxp-truncate/dxp-truncate"; export { WayfinderOrientation, WayfinderPopupDirection } from "./components/dxp-wayfinder/dxp-wayfinder"; export namespace Components { interface DxpAccordion { /** * If `true`, only one dxp-collapsible within the accordion can be open at a time */ "dependent": boolean; /** * If `true`, dxp-collapsibles within the accordion will all be open initially, unless this is dependant */ "expanded": boolean; /** * Heading level for dxp-collapsible descendants */ "headingLevel": number | null; /** * Controls transition time for child dxp-collapsible components. Default: '.5s' NOTE: Make sure to specify the time measurement (i.e, s - seconds; m - minutes; etc...) */ "transitionTime": string | null; } interface DxpAction { /** * The command to execute. */ "command": | 'set-data' | 'set-event' | 'set-milestone' | 'set-complete' | 'set-converted' | 'set-entity'; /** * Get the underlying actionEvent instance. Used by the n-action-activator element. */ "getAction": () => Promise | null>; /** * Send this action to the the action messaging system. */ "sendAction": () => Promise; /** * This is the topic this action-command is targeting. no need to change */ "topic": string; /** * A predicate to evaluate prior to sending the action. */ "when"?: string; } interface DxpAnimatedSvg { /** * Set the aria-label for accessibility enhancements associated with role="img". */ "label"?: string; /** * Define the local or remote source for the image asset. */ "src": string; /** * Set the width of the rendered image. */ "width"?: string; } interface DxpBadge { /** * Alt text to display if icon asset not found */ "altText"?: string; /** * Changes color of video controls **Note** Header and content can be styled externally by adding classes to the slot. */ "color": string; /** * Flag to determine if contents are aligned horizontally */ "horizontal": boolean; /** * Specifies the badges destination when clicked */ "href"?: string; /** * This sets the size of the desired badge icon */ "iconSize": IconSize; /** * Specifies the URL for the badge image */ "imageSrc"?: string; /** * Sets a border radius for badge icon */ "radius": string; /** * Specifies where to open the link */ "target": HrefTarget; /** * Specifies the URL for the badge image */ "videoSrc"?: string; } interface DxpCalendarLink { /** * (optional) Whether or not this is an all day event */ "allDay": boolean; /** * (optional) Placement of button icon */ "buttonIconPlacement"?: 'left' | 'right' | 'textOnly'; /** * (optional) Default button label */ "buttonLabel"?: string; /** * (optional) The description for the event. */ "description": string; /** * (optional) Toggle displaying calendar type icons */ "displayItemIcons"?: boolean; /** * The datetime the event ends (Standard ISO 8601 format - `yyyy-MM-dd`T`HH:mm:ss.SSS`Z). Can be bound to dynamic data. */ "endTime": string; /** * The event name as it will be seen in the user's calendar. */ "eventTitle": string; /** * (optional) The location for the event. */ "location": string; /** * The datetime the event begins (Standard ISO 8601 format - `yyyy-MM-dd`T`HH:mm:ss.SSS`Z). Can be bound to dynamic data. */ "startTime": string; } interface DxpCalendly { /** * URL for Calendly Widget */ "calendarUrl": string; /** * Value for email prefill input */ "emailInputKey"?: any; /** * Value for firstname prefill input */ "firstNameInputKey"?: any; /** * Value for lastname prefill input */ "lastNameInputKey"?: any; /** * Value for phone prefill input */ "phoneInputKey"?: any; } interface DxpCloudinary { /** * Cloud name for cloudinary account */ "cloudName": string; /** * Changes the size of the delivered asset according to the requested width & height dimensions. */ "crop": string; /** * Desired extension for the displayed asset NOTE: This is required if using inputKey */ "extension"?: string; /** * Sets the desired height for the displayed asset */ "height"?: string; /** * Provide an input key from the story to display an asset based an experience value */ "inputKey"?: string; /** * Specify if this element is rendering a video */ "isVideo": boolean; /** * Sets the desired overlay text or spliced video */ "overlay"?: string; /** * Sets the desired font to bold NOTE: Only for text overlay */ "overlayBold": boolean; /** * Sets the text to the desired color NOTE: Only for text overlay */ "overlayColor"?: string; /** * Sets the desired font NOTE: Only for text overlay */ "overlayFont"?: string; /** * This setting determines where to place the overlay. NOTE: Only for text overlay */ "overlayGravity"?: string; /** * Sets the desired font to italic NOTE: Only for text overlay */ "overlayItalic": boolean; /** * Sets the spacing between multiple lines in pixels. NOTE: Only for text overlay */ "overlayLineSpacing"?: string; /** * Adjusts the horizontal offset of the corresponding transformation action. */ "overlayOffsetX"?: string; /** * Adjusts the vertical offset of the corresponding transformation action. */ "overlayOffsetY"?: string; /** * Sets the desired font size NOTE: Only for text overlay */ "overlaySize"?: string; /** * Specifies the first second to include in the overlay video NOTE: Only for video splice */ "overlayStartOffset": number; /** * Sets the desired font to underline NOTE: Only for text overlay */ "overlayUnderline": boolean; /** * Public Id of the asset */ "publicId": string; /** * Version of specified asset */ "version"?: string; /** * Sets the desired width for the displayed asset */ "width"?: string; } interface DxpCmsData { /** * (required) The key of the data to fetch */ "dataKey": string; /** * (optional) The fallback key to use if the dataKey is not found */ "fallbackKey"?: string; /** * (optional) The text to display when no value is found for the given site and key. Default "N/A". */ "placeHolder": string; /** * (optional) The key of the site data to fetch. Default: "Scheduled". */ "siteDataKey": 'Scheduled'; /** * (required) The Id of the site to fetch data from */ "siteId": string; } interface DxpCmsHtml { /** * Provide a GUID from CMS to pull down associated raw html */ "cmsDataId": string; } interface DxpCmsMarkdown { /** * Provide a GUID from CMS to pull down associated markdown */ "cmsDataId": string; } /** * A child component for dxp-accordion that contains the collapsible content */ interface DxpCollapsible { /** * Set to `true` to expand */ "expanded": boolean; /** * Default aria-level for heading */ "headingLevel": number; /** * Controls transition time it takes to open the collapsed content. Default: '.5s' NOTE: Make sure to specify the time measurement (i.e, s - seconds; m - minutes; etc...) */ "transitionTime": string; } interface DxpDetectEvent { /** * The key for the dxp-event to check against the experience recorded events */ "dxpEvent": string; } interface DxpDetectProgress { /** * The name of the progress state to search for (Optional) supports regex string for condition matching */ "condition": string; /** * Operator used to evaluate weight condition weight and current weight "eq" Equal to (default) "lt" less than "le" Less than/Equal to "gt" Greater than "ge" Greater than/Equal to "not" will negate your operator */ "operator": 'eq' | 'lt' | 'le' | 'gt' | 'ge' | 'not'; } /** * This is the experience-host component that provides the * mechanism for retrieving the experience to the page. * @extension actions * @extension provider */ interface DxpExperience { /** * Enable verbose logging (falls back to ?debug ) */ "debug": boolean; /** * This method resets the stored session-id & experience-key, effectively resetting the current experience. Useful for testing or dynamically switching experiences in-page. */ "reset": () => Promise; /** * Story Key (required!) * @required */ "storyKey": string; /** * Experience API Url (required) * @required */ "xapiUrl": string; } interface DxpExperienceData { /** * A default value to display if the data in get is not found. */ "default"?: string; /** * The input-key to display */ "inputKey": string; /** * A pipe separated list of modifier expressions to modify the captured data. clip: length truncate: length date format: expression lowercase uppercase capitalize size encode currency display * @example clip:5|capitalize */ "modify"?: string; } /** * A component to store values that will be filtered within an input component. */ interface DxpFilter { /** * The value of the data being filtered. */ "value": string; } interface DxpForm { /** * Use tp append all known data to redirect-url value. This is helpful when sending users to new DXP experience. */ "appendData": boolean; /** * Debug mode won't redirect */ "debug": boolean; /** * The URL to redirect to on submit, if all fields are valid. Leave empty to show results HTML. */ "redirectUrl"?: string; /** * By default, this component attaches to the first element with a type submit attribute: [type=submit] If you are using an alternative, provide the query using this property. This allows developers to provide their own button. We will attach the event to this element instead. */ "submitSelector": string; /** * Milliseconds to wait before redirecting. */ "waitTime": number; } interface DxpGtm { /** * GTM Account ID */ "accountId"?: string; /** * Use the already loaded dataLayer and skip adding the gtm reference. */ "skipScript": boolean; } /** * This component can be used to control navigation on a site. */ interface DxpHeader { /** * (optional) Set this to a MenuItem Id value to default as the active route If not set, the default active route is set to the first navigation entry */ "activeRouteId"?: string; /** * (optional) JSON structured array of navigation menu items. Note if this is set, it will override all child dxp-nav-item elements ex: ` [ { "label": "Topic One", "id": "Topic One", "children": [{ "label": "Second Level", "id": "Second Level 3", "children": [{ "label": "Third Level", "id": "Third Level 4", "href": "#third-level" }] }] } ] ` */ "mainNavigation"?: any; } interface DxpHtml { /** * Set this to true if the HTML template has tokens and should be re-fetched on experience data-changes. */ "hasTokens": boolean; /** * Story HTML Template Key */ "templateKey": string; } /** * This component uses a DXP story's input definition to render HTML inputs. * @docs */ interface DxpInput { /** * Checking the validity of the input. */ "checkValidity": () => Promise; /** * (optional) The filter type Has two types: Include & Exclude that will filter a set of data using the value set within each child dxp-filter component. */ "filterType"?: FilterType; /** * Provide an input key from the story to display a form-field */ "inputKey": string; /** * Hide the label for this input */ "label"?: string; /** * (optional) Removes the associated label element for the input */ "noLabel": boolean; /** * Customized pattern validation (regular expression). Note: Inputs with a display type of 'email' or 'phone' have default patterns: - Email: Must contain an '@' and a valid top-level domain (e.g. ".com", ".edu"). - Phone: Must contain 10 digits, can optionally include non-digit characters (e.g., "-") but cannot start or end with them. */ "pattern"?: string; /** * The placeholder within the element. Defaults to the field name. Specify a value if you want to override it or false to turn it off */ "placeholder"?: string; /** * Reporting the validity of the input. */ "reportValidity": () => Promise; /** * Override the requirement for this input */ "required": boolean; "setButtonTabIndex": (val: number) => Promise; "setFocus": (ev: any) => Promise; /** * The value to set this input. */ "setValue"?: any; /** * By default this component validates itself in real-time. To validate later, like when in a form set this value to true and make sure to use ask each input to report its validity. */ "skipValidate": boolean; /** * For binding directly to a DXP story-input object. */ "storyInput"?: StoryInput; /** * (optional) Override the default classes for the input element */ "styles": string; /** * Update the input value for the associated DXP experience. **NOTE** Call this to ensure values are updated before a parent event (i.e., form submission, redirect) */ "submitInputValue": () => Promise; /** * Customized message to show if this field is marked invalid for any reason. Tip: 'State ALL field requirements' */ "validationMessage"?: string; } interface DxpInputButtons { /** * Classes to add to each button displayed for options. */ "classes"?: string; /** * Provide an input key from the story to display a form-field */ "inputKey": string; /** * For binding directly to a DXP story-input object. */ "storyInput": StoryInput | null; } interface DxpInputLink { /** * The class to add when the matching route is active in the browser */ "activeClass"?: string; /** * Only active on the exact href match, and not on child routes */ "exact": boolean; /** * Provide an input key from the story to set the value on click */ "inputKey": string; /** * The class to add to the anchor tag */ "linkClass"?: string; /** * The destination route for this link */ "path": string; /** * The value to set against the provided input key */ "setValue": any; /** * Only active on the exact href match using every aspect of the URL including parameters. */ "strict": boolean; /** * Validates any current-route inputs before navigating. Disables navigation if any inputs are invalid. */ "validate": boolean; } interface DxpLink { /** * When present, the link will include all experience data, url-encoded in the querystring * @example output: (link-url?xid=(xid)&name=John%2Smith&email=jsmith%40gmail.com */ "appendData": boolean; /** * Additional parameters to include * @example "utm=324k&cid=aug-2021#/path" */ "appendParameters"?: string; /** * Append the PXID parameter instead of the XID. Use this when we are linking to a new story. */ "appendPxid": boolean; /** * The custom-link key from the story */ "linkKey": string; /** * The input source types to include as parameters when using append-data */ "srcType": DxpSourceType; /** * Anchor target */ "target": string; } interface DxpLogo { /** * Provide the alternate information for an image if the user cannot view it. */ "alt": string; /** * Value for background color of component, to help with visibilty of the logo image. */ "backgroundColor"?: any; /** * Value for border styling: stroke width --> stroke type --> stroke color */ "border"?: any; /** * Setting the link to route an an external site or internal route onClick */ "href": string; /** * For setting the margin of the component */ "margin"?: any; /** * For setting the max-width of the component */ "maxWidth"?: any; /** * For setting the padding of the component */ "padding"?: any; /** * Source for the large image asset, that acts as the default image. */ "src": string; /** * This value acts as a responsive breakpoint for when the large image asset transitions to the smaller image. This value is mutable because some images may be wider than others, and the break may happen prematurely. */ "srcBreakpoint"?: any; /** * Source for a smaller image, that responds to mobile or responsive design. Examples of this would be a vertically stacked logo, or a favicon-like image asset that looks better on smaller screen sizes. */ "srcSmall": string; /** * This is to set the value to '_blank' to open in a new tab. Leave as an empty string if routing to a scene within the experience. */ "target"?: string; } interface DxpMarkdown { /** * Set this to true if the HTML template has tokens and should be re-fetched on experience data-changes. */ "hasTokens": boolean; /** * Story Text Template Key */ "templateKey": string; } interface DxpModal { /** * (optional) Alignment of action buttons */ "alignActions"?: 'right' | 'left'; /** * (optional) Label for close button */ "closeButtonLabel"?: string; /** * (optional) Custom class */ "customClass"?: string; /** * (optional) Transition duration */ "duration"?: number; /** * (optional) Sets the aria-label & title for the modal */ "modalLabel"?: string; /** * (optional) If `true`, the Modal is open. */ "opened"?: boolean; /** * (optional) Override modal popup placement */ "placement": | 'top' | 'bottom' | 'left' | 'right' | 'overlay' | 'center'; /** * (optional) Modal size */ "size"?: string; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavIcon { /** * (optional) Toggles if this item is active */ "active": boolean; /** * (optional) Function to call after icon interaction */ "clickEventHandler"?: ( event: KeyboardEvent | MouseEvent | undefined, ) => void; /** * (optional) Href value for navigation */ "href"?: string; /** * The name of the icon to display Note - currently only 'action-circle-close' || 'action-menu' are supported This component will have access to all of the UXDS icons upon re-integration. */ "icon": string; /** * Controls whether or not the mobile menu is open. */ "mobileMenuOpen"?: boolean; /** * (optional) Reference to this element from parent element. */ "refMobileMenuToggle"?: (el: HTMLAnchorElement | undefined) => void; } /** * This is a child component for the `dxp-header` to capture navigation menu items. */ interface DxpNavItem { /** * (optional) Additional action to take when this item is clicked. */ "clickHandler"?: (event: MouseEvent | KeyboardEvent) => void; /** * Href value for navigation when item is clicked. */ "href": string; /** * (optional) Icon to display with */ "icon"?: string; /** * Label to display for this link in the navigation bar. */ "label": string; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavMain { /** * (optional) if this item is active */ "active": boolean; /** * (optional) Additional action to take when this item is clicked. */ "clickHandler"?: (event: any) => void; /** * (optional) href value */ "href"?: string; /** * (optional) label value */ "label": string; /** * (optional) if this item's menu-panel is visible */ "menuPanelVisible": boolean; /** * (optional) if this item has an associated popup */ "popup": boolean; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavMobile { /** * (optional) Set this to a MenuItem Id value to default as the active route If not set, the default active route is set to the first navigation entry */ "activeRouteId": string; /** * (optional) callback when hiding this element. */ "hideHandler"?: () => void; /** * (optional) JSON structured array of navigation menu items. ex: ` [ { "label": "Topic One", "id": "Topic One", "children": [{ "label": "Second Level", "id": "Second Level 3", "children": [{ "label": "Third Level", "id": "Third Level 4", "href": "#third-level" }] }] } ] ` */ "navigationData"?: MenuItem[]; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavPanel { /** * Controls if this element is visible or not */ "active": boolean; /** * (optional) Set this to a MenuItem Id value to default as the active route If not set, the default active route is set to the first navigation entry */ "activeRouteId"?: string; /** * (optional) Controls whether the top level item is just a title or link */ "header"?: boolean; /** * (optional) callback when hiding this element. */ "hideHandler"?: () => void; /** * (optional) JSON structured array of navigation menu items. ex: ` [ { "label": "Topic One", "id": "Topic One", "children": [{ "label": "Second Level", "id": "Second Level 3", "children": [{ "label": "Third Level", "id": "Third Level 4", "href": "#third-level" }] }] } ] ` */ "navigationData"?: MenuItem[]; } interface DxpOrganizationData { /** * The input-key to display */ "dataPoint"?: string; /** * A default value to display if the data in get is not found. */ "default"?: string; /** * Deprecated in favor of dataPoint The input-key to display */ "inputKey"?: string; /** * A pipe separated list of modifier expressions to modify the captured data. clip: length truncate: length date format: expression lowercase uppercase capitalize size encode currency orgpoint * @example clip:5|capitalize */ "modify"?: string; /** * (optional) Set to true to toggle that this is a scheduled data item for an organization */ "scheduledData"?: string; } interface DxpPopoutMenu { /** * (optional) Determines whether the popout should close when a menu item is selected. Default: true */ "closeOnSelect": boolean; /** * (optional) The Id of the site's logo element to include in the mobile display header */ "logoElementId"?: string; } interface DxpProgressBar { /** * Changes the color of the vertical slashes */ "slashColor": string; /** * Set the amount of vertical slashes to display */ "slashCount": string; } interface DxpProgressMade { /** * Sets the width of the progress-bar component when the view this component is defined in is loaded Note: This value is clamped between 0-100 */ "value": number; } interface DxpRadioGroup { /** * If `true`, the radios can be deselected. */ "allowEmptySelection": boolean; /** * The name of the control, which is submitted with the form data. */ "name": string; /** * the value of the radio group. */ "value"?: any | null; } interface DxpSitemapSearch { /** * Text to display as placeholder */ "placeHolderText": string; /** * Relative URL path to location of sitemap */ "sitemapPath": string; } interface DxpSpacer { /** * Value for setting the spacer height. Interprets any string value for height: px, rem, %, vh, etc. */ "height": string; } interface DxpTabs { /** * (optional) Starting index that displays content; defaults to first item. */ "selectedIndex": number; } /** * A child component of `dxp-tabs` meant to be used in the `panel` slot */ interface DxpTabsItem { /** * Label displayed on the control element for this content. Alternatively, the `label` slot can be used to add additional HTML */ "label"?: string; } interface DxpTooltip { /** * Alt text to display if image asset not found */ "altText"?: string; /** * Tooltip background color */ "backgroundColor": string; /** * Set error state */ "error"?: boolean; /** * Label to display along with icon */ "iconLabel"?: string; /** * Sets whether the toast will open automatically immediately after widget's initialization. Default value: false */ "tooltipOpenMode": TooltipOpenMode; /** * Tooltip alignment prop to where the tooltip will appear */ "tooltipPosition"?: TooltipPosition; /** * This sets the size of the desired image */ "tooltipSize": TooltipSize; /** * This is asset path to the desired image for the icon */ "tooltipSource"?: string; /** * Set tooltip text */ "tooltipText"?: string; } interface DxpTruncate { /** * (optional) Controls the icon size */ "iconSize": IconSize1; /** * (optional) Icon to display alongside close label */ "iconSrcClose"?: string; /** * (optional) Icon to display alongside expand label */ "iconSrcExpand"?: string; /** * (optional) Text displayed for close link */ "labelClose"?: string; /** * (optional) Text displayed for expansion link */ "labelExpand": string; /** * (optional) Changes which side the icon will appear on */ "labelPosition": LabelPosition; /** * (optional) Sets default state to open on render */ "opened": boolean; } interface DxpVideo { /** * (optional) URL for the closed caption text file. Can be relative or absolute. */ "ccUrl"?: string; /** * (optional) Sets the height of the video element */ "height"?: string; /** * (required) URL for the poster image asset. Can be relative or absolute. */ "posterUrl": string; /** * (optional) Sets the border radius for all video display elements (i.e. video, preview, modal). Default: (5px) */ "radius": string | null; /** * (optional) Video timer */ "timer": any; /** * (optional) If set, video will open up in modal on desktop when play button hit */ "useModal": boolean; /** * (required) URL for the video asset. Can be relative or absolute. */ "videoUrl": string; /** * (optional) Sets the width of the video element */ "width"?: string; } interface DxpVideoPlayer { /** * Value used specifically for Vimeo video identification. */ "vimeoId": string; /** * Value used specifically for YouTube video identification. This value can be found in the URL of the desired YouTube video, appended after 'v=' For example, this YouTube link's: https://www.youtube.com/watch?v=5qap5aO4i9A youtubeId= '5qap5aO4i9A' */ "youtubeId": string; } interface DxpWayfinder { /** * Required to set relative container Id for mobile navigation pop-up */ "containerId": string; /** * Set the direction that the mobile popup will appear */ "directionPopup": WayfinderPopupDirection; /** * Change this to display steps horizontally (default) or vertically */ "orientation": WayfinderOrientation; } interface DxpWayfinderStep { /** * (optional) Provide name of event to watch to conditionally display `node` or `node-complete` slots. */ "dxpEvent"?: string; /** * Only active on the exact href match, and not on child routes */ "exact": boolean; /** * Set to true to disable navigation on this step. Note: `path` property is still required to determine active node. This will be overridden if used in conjunction with `dxp-event`. */ "noRedirect": boolean; /** * Set the direction that the mobile popup will appear. */ "path": string; /** * Only active on the exact href match using every aspect of the URL including parameters. */ "strict": boolean; } /** * A component to display a dynamic year, updating based on an effective date. */ interface DxpYear { /** * The day of the month when the year should increment (1-31) */ "effectiveDay": number; /** * The month when the year should increment (1-12) */ "effectiveMonth": number; /** * The number of years to increment (default is 0) */ "incrementYear": number; } } export interface DxpCollapsibleCustomEvent extends CustomEvent { detail: T; target: HTMLDxpCollapsibleElement; } export interface DxpDetectEventCustomEvent extends CustomEvent { detail: T; target: HTMLDxpDetectEventElement; } export interface DxpExperienceCustomEvent extends CustomEvent { detail: T; target: HTMLDxpExperienceElement; } export interface DxpFormCustomEvent extends CustomEvent { detail: T; target: HTMLDxpFormElement; } export interface DxpInputCustomEvent extends CustomEvent { detail: T; target: HTMLDxpInputElement; } export interface DxpModalCustomEvent extends CustomEvent { detail: T; target: HTMLDxpModalElement; } export interface DxpNavMobileCustomEvent extends CustomEvent { detail: T; target: HTMLDxpNavMobileElement; } export interface DxpRadioGroupCustomEvent extends CustomEvent { detail: T; target: HTMLDxpRadioGroupElement; } export interface DxpVideoCustomEvent extends CustomEvent { detail: T; target: HTMLDxpVideoElement; } declare global { interface HTMLDxpAccordionElement extends Components.DxpAccordion, HTMLStencilElement { } var HTMLDxpAccordionElement: { prototype: HTMLDxpAccordionElement; new (): HTMLDxpAccordionElement; }; interface HTMLDxpActionElement extends Components.DxpAction, HTMLStencilElement { } var HTMLDxpActionElement: { prototype: HTMLDxpActionElement; new (): HTMLDxpActionElement; }; interface HTMLDxpAnimatedSvgElement extends Components.DxpAnimatedSvg, HTMLStencilElement { } var HTMLDxpAnimatedSvgElement: { prototype: HTMLDxpAnimatedSvgElement; new (): HTMLDxpAnimatedSvgElement; }; interface HTMLDxpBadgeElement extends Components.DxpBadge, HTMLStencilElement { } var HTMLDxpBadgeElement: { prototype: HTMLDxpBadgeElement; new (): HTMLDxpBadgeElement; }; interface HTMLDxpCalendarLinkElement extends Components.DxpCalendarLink, HTMLStencilElement { } var HTMLDxpCalendarLinkElement: { prototype: HTMLDxpCalendarLinkElement; new (): HTMLDxpCalendarLinkElement; }; interface HTMLDxpCalendlyElement extends Components.DxpCalendly, HTMLStencilElement { } var HTMLDxpCalendlyElement: { prototype: HTMLDxpCalendlyElement; new (): HTMLDxpCalendlyElement; }; interface HTMLDxpCloudinaryElement extends Components.DxpCloudinary, HTMLStencilElement { } var HTMLDxpCloudinaryElement: { prototype: HTMLDxpCloudinaryElement; new (): HTMLDxpCloudinaryElement; }; interface HTMLDxpCmsDataElement extends Components.DxpCmsData, HTMLStencilElement { } var HTMLDxpCmsDataElement: { prototype: HTMLDxpCmsDataElement; new (): HTMLDxpCmsDataElement; }; interface HTMLDxpCmsHtmlElement extends Components.DxpCmsHtml, HTMLStencilElement { } var HTMLDxpCmsHtmlElement: { prototype: HTMLDxpCmsHtmlElement; new (): HTMLDxpCmsHtmlElement; }; interface HTMLDxpCmsMarkdownElement extends Components.DxpCmsMarkdown, HTMLStencilElement { } var HTMLDxpCmsMarkdownElement: { prototype: HTMLDxpCmsMarkdownElement; new (): HTMLDxpCmsMarkdownElement; }; /** * A child component for dxp-accordion that contains the collapsible content */ interface HTMLDxpCollapsibleElement extends Components.DxpCollapsible, HTMLStencilElement { } var HTMLDxpCollapsibleElement: { prototype: HTMLDxpCollapsibleElement; new (): HTMLDxpCollapsibleElement; }; interface HTMLDxpDetectEventElement extends Components.DxpDetectEvent, HTMLStencilElement { } var HTMLDxpDetectEventElement: { prototype: HTMLDxpDetectEventElement; new (): HTMLDxpDetectEventElement; }; interface HTMLDxpDetectProgressElement extends Components.DxpDetectProgress, HTMLStencilElement { } var HTMLDxpDetectProgressElement: { prototype: HTMLDxpDetectProgressElement; new (): HTMLDxpDetectProgressElement; }; /** * This is the experience-host component that provides the * mechanism for retrieving the experience to the page. * @extension actions * @extension provider */ interface HTMLDxpExperienceElement extends Components.DxpExperience, HTMLStencilElement { } var HTMLDxpExperienceElement: { prototype: HTMLDxpExperienceElement; new (): HTMLDxpExperienceElement; }; interface HTMLDxpExperienceDataElement extends Components.DxpExperienceData, HTMLStencilElement { } var HTMLDxpExperienceDataElement: { prototype: HTMLDxpExperienceDataElement; new (): HTMLDxpExperienceDataElement; }; /** * A component to store values that will be filtered within an input component. */ interface HTMLDxpFilterElement extends Components.DxpFilter, HTMLStencilElement { } var HTMLDxpFilterElement: { prototype: HTMLDxpFilterElement; new (): HTMLDxpFilterElement; }; interface HTMLDxpFormElement extends Components.DxpForm, HTMLStencilElement { } var HTMLDxpFormElement: { prototype: HTMLDxpFormElement; new (): HTMLDxpFormElement; }; interface HTMLDxpGtmElement extends Components.DxpGtm, HTMLStencilElement { } var HTMLDxpGtmElement: { prototype: HTMLDxpGtmElement; new (): HTMLDxpGtmElement; }; /** * This component can be used to control navigation on a site. */ interface HTMLDxpHeaderElement extends Components.DxpHeader, HTMLStencilElement { } var HTMLDxpHeaderElement: { prototype: HTMLDxpHeaderElement; new (): HTMLDxpHeaderElement; }; interface HTMLDxpHtmlElement extends Components.DxpHtml, HTMLStencilElement { } var HTMLDxpHtmlElement: { prototype: HTMLDxpHtmlElement; new (): HTMLDxpHtmlElement; }; /** * This component uses a DXP story's input definition to render HTML inputs. * @docs */ interface HTMLDxpInputElement extends Components.DxpInput, HTMLStencilElement { } var HTMLDxpInputElement: { prototype: HTMLDxpInputElement; new (): HTMLDxpInputElement; }; interface HTMLDxpInputButtonsElement extends Components.DxpInputButtons, HTMLStencilElement { } var HTMLDxpInputButtonsElement: { prototype: HTMLDxpInputButtonsElement; new (): HTMLDxpInputButtonsElement; }; interface HTMLDxpInputLinkElement extends Components.DxpInputLink, HTMLStencilElement { } var HTMLDxpInputLinkElement: { prototype: HTMLDxpInputLinkElement; new (): HTMLDxpInputLinkElement; }; interface HTMLDxpLinkElement extends Components.DxpLink, HTMLStencilElement { } var HTMLDxpLinkElement: { prototype: HTMLDxpLinkElement; new (): HTMLDxpLinkElement; }; interface HTMLDxpLogoElement extends Components.DxpLogo, HTMLStencilElement { } var HTMLDxpLogoElement: { prototype: HTMLDxpLogoElement; new (): HTMLDxpLogoElement; }; interface HTMLDxpMarkdownElement extends Components.DxpMarkdown, HTMLStencilElement { } var HTMLDxpMarkdownElement: { prototype: HTMLDxpMarkdownElement; new (): HTMLDxpMarkdownElement; }; interface HTMLDxpModalElement extends Components.DxpModal, HTMLStencilElement { } var HTMLDxpModalElement: { prototype: HTMLDxpModalElement; new (): HTMLDxpModalElement; }; /** * This component is designed to be embedded in the `dxp-header` component. */ interface HTMLDxpNavIconElement extends Components.DxpNavIcon, HTMLStencilElement { } var HTMLDxpNavIconElement: { prototype: HTMLDxpNavIconElement; new (): HTMLDxpNavIconElement; }; /** * This is a child component for the `dxp-header` to capture navigation menu items. */ interface HTMLDxpNavItemElement extends Components.DxpNavItem, HTMLStencilElement { } var HTMLDxpNavItemElement: { prototype: HTMLDxpNavItemElement; new (): HTMLDxpNavItemElement; }; /** * This component is designed to be embedded in the `dxp-header` component. */ interface HTMLDxpNavMainElement extends Components.DxpNavMain, HTMLStencilElement { } var HTMLDxpNavMainElement: { prototype: HTMLDxpNavMainElement; new (): HTMLDxpNavMainElement; }; /** * This component is designed to be embedded in the `dxp-header` component. */ interface HTMLDxpNavMobileElement extends Components.DxpNavMobile, HTMLStencilElement { } var HTMLDxpNavMobileElement: { prototype: HTMLDxpNavMobileElement; new (): HTMLDxpNavMobileElement; }; /** * This component is designed to be embedded in the `dxp-header` component. */ interface HTMLDxpNavPanelElement extends Components.DxpNavPanel, HTMLStencilElement { } var HTMLDxpNavPanelElement: { prototype: HTMLDxpNavPanelElement; new (): HTMLDxpNavPanelElement; }; interface HTMLDxpOrganizationDataElement extends Components.DxpOrganizationData, HTMLStencilElement { } var HTMLDxpOrganizationDataElement: { prototype: HTMLDxpOrganizationDataElement; new (): HTMLDxpOrganizationDataElement; }; interface HTMLDxpPopoutMenuElement extends Components.DxpPopoutMenu, HTMLStencilElement { } var HTMLDxpPopoutMenuElement: { prototype: HTMLDxpPopoutMenuElement; new (): HTMLDxpPopoutMenuElement; }; interface HTMLDxpProgressBarElement extends Components.DxpProgressBar, HTMLStencilElement { } var HTMLDxpProgressBarElement: { prototype: HTMLDxpProgressBarElement; new (): HTMLDxpProgressBarElement; }; interface HTMLDxpProgressMadeElement extends Components.DxpProgressMade, HTMLStencilElement { } var HTMLDxpProgressMadeElement: { prototype: HTMLDxpProgressMadeElement; new (): HTMLDxpProgressMadeElement; }; interface HTMLDxpRadioGroupElement extends Components.DxpRadioGroup, HTMLStencilElement { } var HTMLDxpRadioGroupElement: { prototype: HTMLDxpRadioGroupElement; new (): HTMLDxpRadioGroupElement; }; interface HTMLDxpSitemapSearchElement extends Components.DxpSitemapSearch, HTMLStencilElement { } var HTMLDxpSitemapSearchElement: { prototype: HTMLDxpSitemapSearchElement; new (): HTMLDxpSitemapSearchElement; }; interface HTMLDxpSpacerElement extends Components.DxpSpacer, HTMLStencilElement { } var HTMLDxpSpacerElement: { prototype: HTMLDxpSpacerElement; new (): HTMLDxpSpacerElement; }; interface HTMLDxpTabsElement extends Components.DxpTabs, HTMLStencilElement { } var HTMLDxpTabsElement: { prototype: HTMLDxpTabsElement; new (): HTMLDxpTabsElement; }; /** * A child component of `dxp-tabs` meant to be used in the `panel` slot */ interface HTMLDxpTabsItemElement extends Components.DxpTabsItem, HTMLStencilElement { } var HTMLDxpTabsItemElement: { prototype: HTMLDxpTabsItemElement; new (): HTMLDxpTabsItemElement; }; interface HTMLDxpTooltipElement extends Components.DxpTooltip, HTMLStencilElement { } var HTMLDxpTooltipElement: { prototype: HTMLDxpTooltipElement; new (): HTMLDxpTooltipElement; }; interface HTMLDxpTruncateElement extends Components.DxpTruncate, HTMLStencilElement { } var HTMLDxpTruncateElement: { prototype: HTMLDxpTruncateElement; new (): HTMLDxpTruncateElement; }; interface HTMLDxpVideoElement extends Components.DxpVideo, HTMLStencilElement { } var HTMLDxpVideoElement: { prototype: HTMLDxpVideoElement; new (): HTMLDxpVideoElement; }; interface HTMLDxpVideoPlayerElement extends Components.DxpVideoPlayer, HTMLStencilElement { } var HTMLDxpVideoPlayerElement: { prototype: HTMLDxpVideoPlayerElement; new (): HTMLDxpVideoPlayerElement; }; interface HTMLDxpWayfinderElement extends Components.DxpWayfinder, HTMLStencilElement { } var HTMLDxpWayfinderElement: { prototype: HTMLDxpWayfinderElement; new (): HTMLDxpWayfinderElement; }; interface HTMLDxpWayfinderStepElement extends Components.DxpWayfinderStep, HTMLStencilElement { } var HTMLDxpWayfinderStepElement: { prototype: HTMLDxpWayfinderStepElement; new (): HTMLDxpWayfinderStepElement; }; /** * A component to display a dynamic year, updating based on an effective date. */ interface HTMLDxpYearElement extends Components.DxpYear, HTMLStencilElement { } var HTMLDxpYearElement: { prototype: HTMLDxpYearElement; new (): HTMLDxpYearElement; }; interface HTMLElementTagNameMap { "dxp-accordion": HTMLDxpAccordionElement; "dxp-action": HTMLDxpActionElement; "dxp-animated-svg": HTMLDxpAnimatedSvgElement; "dxp-badge": HTMLDxpBadgeElement; "dxp-calendar-link": HTMLDxpCalendarLinkElement; "dxp-calendly": HTMLDxpCalendlyElement; "dxp-cloudinary": HTMLDxpCloudinaryElement; "dxp-cms-data": HTMLDxpCmsDataElement; "dxp-cms-html": HTMLDxpCmsHtmlElement; "dxp-cms-markdown": HTMLDxpCmsMarkdownElement; "dxp-collapsible": HTMLDxpCollapsibleElement; "dxp-detect-event": HTMLDxpDetectEventElement; "dxp-detect-progress": HTMLDxpDetectProgressElement; "dxp-experience": HTMLDxpExperienceElement; "dxp-experience-data": HTMLDxpExperienceDataElement; "dxp-filter": HTMLDxpFilterElement; "dxp-form": HTMLDxpFormElement; "dxp-gtm": HTMLDxpGtmElement; "dxp-header": HTMLDxpHeaderElement; "dxp-html": HTMLDxpHtmlElement; "dxp-input": HTMLDxpInputElement; "dxp-input-buttons": HTMLDxpInputButtonsElement; "dxp-input-link": HTMLDxpInputLinkElement; "dxp-link": HTMLDxpLinkElement; "dxp-logo": HTMLDxpLogoElement; "dxp-markdown": HTMLDxpMarkdownElement; "dxp-modal": HTMLDxpModalElement; "dxp-nav-icon": HTMLDxpNavIconElement; "dxp-nav-item": HTMLDxpNavItemElement; "dxp-nav-main": HTMLDxpNavMainElement; "dxp-nav-mobile": HTMLDxpNavMobileElement; "dxp-nav-panel": HTMLDxpNavPanelElement; "dxp-organization-data": HTMLDxpOrganizationDataElement; "dxp-popout-menu": HTMLDxpPopoutMenuElement; "dxp-progress-bar": HTMLDxpProgressBarElement; "dxp-progress-made": HTMLDxpProgressMadeElement; "dxp-radio-group": HTMLDxpRadioGroupElement; "dxp-sitemap-search": HTMLDxpSitemapSearchElement; "dxp-spacer": HTMLDxpSpacerElement; "dxp-tabs": HTMLDxpTabsElement; "dxp-tabs-item": HTMLDxpTabsItemElement; "dxp-tooltip": HTMLDxpTooltipElement; "dxp-truncate": HTMLDxpTruncateElement; "dxp-video": HTMLDxpVideoElement; "dxp-video-player": HTMLDxpVideoPlayerElement; "dxp-wayfinder": HTMLDxpWayfinderElement; "dxp-wayfinder-step": HTMLDxpWayfinderStepElement; "dxp-year": HTMLDxpYearElement; } } declare namespace LocalJSX { interface DxpAccordion { /** * If `true`, only one dxp-collapsible within the accordion can be open at a time */ "dependent"?: boolean; /** * If `true`, dxp-collapsibles within the accordion will all be open initially, unless this is dependant */ "expanded"?: boolean; /** * Heading level for dxp-collapsible descendants */ "headingLevel"?: number | null; /** * Controls transition time for child dxp-collapsible components. Default: '.5s' NOTE: Make sure to specify the time measurement (i.e, s - seconds; m - minutes; etc...) */ "transitionTime"?: string | null; } interface DxpAction { /** * The command to execute. */ "command": | 'set-data' | 'set-event' | 'set-milestone' | 'set-complete' | 'set-converted' | 'set-entity'; /** * This is the topic this action-command is targeting. no need to change */ "topic"?: string; /** * A predicate to evaluate prior to sending the action. */ "when"?: string; } interface DxpAnimatedSvg { /** * Set the aria-label for accessibility enhancements associated with role="img". */ "label"?: string; /** * Define the local or remote source for the image asset. */ "src": string; /** * Set the width of the rendered image. */ "width"?: string; } interface DxpBadge { /** * Alt text to display if icon asset not found */ "altText"?: string; /** * Changes color of video controls **Note** Header and content can be styled externally by adding classes to the slot. */ "color"?: string; /** * Flag to determine if contents are aligned horizontally */ "horizontal"?: boolean; /** * Specifies the badges destination when clicked */ "href"?: string; /** * This sets the size of the desired badge icon */ "iconSize"?: IconSize; /** * Specifies the URL for the badge image */ "imageSrc"?: string; /** * Sets a border radius for badge icon */ "radius"?: string; /** * Specifies where to open the link */ "target"?: HrefTarget; /** * Specifies the URL for the badge image */ "videoSrc"?: string; } interface DxpCalendarLink { /** * (optional) Whether or not this is an all day event */ "allDay"?: boolean; /** * (optional) Placement of button icon */ "buttonIconPlacement"?: 'left' | 'right' | 'textOnly'; /** * (optional) Default button label */ "buttonLabel"?: string; /** * (optional) The description for the event. */ "description": string; /** * (optional) Toggle displaying calendar type icons */ "displayItemIcons"?: boolean; /** * The datetime the event ends (Standard ISO 8601 format - `yyyy-MM-dd`T`HH:mm:ss.SSS`Z). Can be bound to dynamic data. */ "endTime": string; /** * The event name as it will be seen in the user's calendar. */ "eventTitle": string; /** * (optional) The location for the event. */ "location": string; /** * The datetime the event begins (Standard ISO 8601 format - `yyyy-MM-dd`T`HH:mm:ss.SSS`Z). Can be bound to dynamic data. */ "startTime": string; } interface DxpCalendly { /** * URL for Calendly Widget */ "calendarUrl": string; /** * Value for email prefill input */ "emailInputKey"?: any; /** * Value for firstname prefill input */ "firstNameInputKey"?: any; /** * Value for lastname prefill input */ "lastNameInputKey"?: any; /** * Value for phone prefill input */ "phoneInputKey"?: any; } interface DxpCloudinary { /** * Cloud name for cloudinary account */ "cloudName": string; /** * Changes the size of the delivered asset according to the requested width & height dimensions. */ "crop"?: string; /** * Desired extension for the displayed asset NOTE: This is required if using inputKey */ "extension"?: string; /** * Sets the desired height for the displayed asset */ "height"?: string; /** * Provide an input key from the story to display an asset based an experience value */ "inputKey"?: string; /** * Specify if this element is rendering a video */ "isVideo"?: boolean; /** * Sets the desired overlay text or spliced video */ "overlay"?: string; /** * Sets the desired font to bold NOTE: Only for text overlay */ "overlayBold"?: boolean; /** * Sets the text to the desired color NOTE: Only for text overlay */ "overlayColor"?: string; /** * Sets the desired font NOTE: Only for text overlay */ "overlayFont"?: string; /** * This setting determines where to place the overlay. NOTE: Only for text overlay */ "overlayGravity"?: string; /** * Sets the desired font to italic NOTE: Only for text overlay */ "overlayItalic"?: boolean; /** * Sets the spacing between multiple lines in pixels. NOTE: Only for text overlay */ "overlayLineSpacing"?: string; /** * Adjusts the horizontal offset of the corresponding transformation action. */ "overlayOffsetX"?: string; /** * Adjusts the vertical offset of the corresponding transformation action. */ "overlayOffsetY"?: string; /** * Sets the desired font size NOTE: Only for text overlay */ "overlaySize"?: string; /** * Specifies the first second to include in the overlay video NOTE: Only for video splice */ "overlayStartOffset"?: number; /** * Sets the desired font to underline NOTE: Only for text overlay */ "overlayUnderline"?: boolean; /** * Public Id of the asset */ "publicId": string; /** * Version of specified asset */ "version"?: string; /** * Sets the desired width for the displayed asset */ "width"?: string; } interface DxpCmsData { /** * (required) The key of the data to fetch */ "dataKey": string; /** * (optional) The fallback key to use if the dataKey is not found */ "fallbackKey"?: string; /** * (optional) The text to display when no value is found for the given site and key. Default "N/A". */ "placeHolder"?: string; /** * (optional) The key of the site data to fetch. Default: "Scheduled". */ "siteDataKey"?: 'Scheduled'; /** * (required) The Id of the site to fetch data from */ "siteId": string; } interface DxpCmsHtml { /** * Provide a GUID from CMS to pull down associated raw html */ "cmsDataId": string; } interface DxpCmsMarkdown { /** * Provide a GUID from CMS to pull down associated markdown */ "cmsDataId": string; } /** * A child component for dxp-accordion that contains the collapsible content */ interface DxpCollapsible { /** * Set to `true` to expand */ "expanded"?: boolean; /** * Default aria-level for heading */ "headingLevel"?: number; /** * Emitted so parent knows about it */ "onDxp-expand"?: (event: DxpCollapsibleCustomEvent) => void; /** * Controls transition time it takes to open the collapsed content. Default: '.5s' NOTE: Make sure to specify the time measurement (i.e, s - seconds; m - minutes; etc...) */ "transitionTime"?: string; } interface DxpDetectEvent { /** * The key for the dxp-event to check against the experience recorded events */ "dxpEvent": string; /** * Fires off when the defined event is found to have occurred */ "onEventChanged"?: (event: DxpDetectEventCustomEvent) => void; } interface DxpDetectProgress { /** * The name of the progress state to search for (Optional) supports regex string for condition matching */ "condition": string; /** * Operator used to evaluate weight condition weight and current weight "eq" Equal to (default) "lt" less than "le" Less than/Equal to "gt" Greater than "ge" Greater than/Equal to "not" will negate your operator */ "operator"?: 'eq' | 'lt' | 'le' | 'gt' | 'ge' | 'not'; } /** * This is the experience-host component that provides the * mechanism for retrieving the experience to the page. * @extension actions * @extension provider */ interface DxpExperience { /** * Enable verbose logging (falls back to ?debug ) */ "debug"?: boolean; /** * When an experience data is updated this event fires with 'event.detail' being the full experience, w/ data methods like 'setData()' and 'setComplete()'. */ "onDxp:changed"?: (event: DxpExperienceCustomEvent) => void; /** * When an experience is unable to be retrieved, this event fires with 'event.detail' = error message. */ "onDxp:errored"?: (event: DxpExperienceCustomEvent) => void; /** * When an experience is retrieved, this event fires with 'event.detail' being the full experience, w/ data methods like 'setData()' and 'setComplete()'. */ "onDxp:initialized"?: (event: DxpExperienceCustomEvent) => void; /** * Submit actions to the NENT action-bus */ "onNent:actions"?: (event: DxpExperienceCustomEvent>) => void; /** * Story Key (required!) * @required */ "storyKey": string; /** * Experience API Url (required) * @required */ "xapiUrl": string; } interface DxpExperienceData { /** * A default value to display if the data in get is not found. */ "default"?: string; /** * The input-key to display */ "inputKey": string; /** * A pipe separated list of modifier expressions to modify the captured data. clip: length truncate: length date format: expression lowercase uppercase capitalize size encode currency display * @example clip:5|capitalize */ "modify"?: string; } /** * A component to store values that will be filtered within an input component. */ interface DxpFilter { /** * The value of the data being filtered. */ "value"?: string; } interface DxpForm { /** * Use tp append all known data to redirect-url value. This is helpful when sending users to new DXP experience. */ "appendData"?: boolean; /** * Debug mode won't redirect */ "debug"?: boolean; /** * This event fires off and bubbles up before performing a redirect after form submission. Note: This event is cancellable to allow preventing redirects. Event detail includes: - `redirectUrl`: The URL the form is redirecting to. - `formContext`: An object containing the form's state and data. */ "onDxp:redirect-started"?: (event: DxpFormCustomEvent<{ redirectUrl: string formContext: { state: boolean data: Record } }>) => void; /** * The URL to redirect to on submit, if all fields are valid. Leave empty to show results HTML. */ "redirectUrl"?: string; /** * By default, this component attaches to the first element with a type submit attribute: [type=submit] If you are using an alternative, provide the query using this property. This allows developers to provide their own button. We will attach the event to this element instead. */ "submitSelector"?: string; /** * Milliseconds to wait before redirecting. */ "waitTime"?: number; } interface DxpGtm { /** * GTM Account ID */ "accountId"?: string; /** * Use the already loaded dataLayer and skip adding the gtm reference. */ "skipScript"?: boolean; } /** * This component can be used to control navigation on a site. */ interface DxpHeader { /** * (optional) Set this to a MenuItem Id value to default as the active route If not set, the default active route is set to the first navigation entry */ "activeRouteId"?: string; /** * (optional) JSON structured array of navigation menu items. Note if this is set, it will override all child dxp-nav-item elements ex: ` [ { "label": "Topic One", "id": "Topic One", "children": [{ "label": "Second Level", "id": "Second Level 3", "children": [{ "label": "Third Level", "id": "Third Level 4", "href": "#third-level" }] }] } ] ` */ "mainNavigation"?: any; } interface DxpHtml { /** * Set this to true if the HTML template has tokens and should be re-fetched on experience data-changes. */ "hasTokens"?: boolean; /** * Story HTML Template Key */ "templateKey": string; } /** * This component uses a DXP story's input definition to render HTML inputs. * @docs */ interface DxpInput { /** * (optional) The filter type Has two types: Include & Exclude that will filter a set of data using the value set within each child dxp-filter component. */ "filterType"?: FilterType; /** * Provide an input key from the story to display a form-field */ "inputKey": string; /** * Hide the label for this input */ "label"?: string; /** * (optional) Removes the associated label element for the input */ "noLabel"?: boolean; /** * This event is bubbled when the component is done loading */ "onDxp-input:initialized"?: (event: DxpInputCustomEvent) => void; /** * Customized pattern validation (regular expression). Note: Inputs with a display type of 'email' or 'phone' have default patterns: - Email: Must contain an '@' and a valid top-level domain (e.g. ".com", ".edu"). - Phone: Must contain 10 digits, can optionally include non-digit characters (e.g., "-") but cannot start or end with them. */ "pattern"?: string; /** * The placeholder within the element. Defaults to the field name. Specify a value if you want to override it or false to turn it off */ "placeholder"?: string; /** * Override the requirement for this input */ "required"?: boolean; /** * The value to set this input. */ "setValue"?: any; /** * By default this component validates itself in real-time. To validate later, like when in a form set this value to true and make sure to use ask each input to report its validity. */ "skipValidate"?: boolean; /** * For binding directly to a DXP story-input object. */ "storyInput"?: StoryInput; /** * (optional) Override the default classes for the input element */ "styles"?: string; /** * Customized message to show if this field is marked invalid for any reason. Tip: 'State ALL field requirements' */ "validationMessage"?: string; } interface DxpInputButtons { /** * Classes to add to each button displayed for options. */ "classes"?: string; /** * Provide an input key from the story to display a form-field */ "inputKey": string; /** * For binding directly to a DXP story-input object. */ "storyInput"?: StoryInput | null; } interface DxpInputLink { /** * The class to add when the matching route is active in the browser */ "activeClass"?: string; /** * Only active on the exact href match, and not on child routes */ "exact"?: boolean; /** * Provide an input key from the story to set the value on click */ "inputKey": string; /** * The class to add to the anchor tag */ "linkClass"?: string; /** * The destination route for this link */ "path": string; /** * The value to set against the provided input key */ "setValue": any; /** * Only active on the exact href match using every aspect of the URL including parameters. */ "strict"?: boolean; /** * Validates any current-route inputs before navigating. Disables navigation if any inputs are invalid. */ "validate"?: boolean; } interface DxpLink { /** * When present, the link will include all experience data, url-encoded in the querystring * @example output: (link-url?xid=(xid)&name=John%2Smith&email=jsmith%40gmail.com */ "appendData"?: boolean; /** * Additional parameters to include * @example "utm=324k&cid=aug-2021#/path" */ "appendParameters"?: string; /** * Append the PXID parameter instead of the XID. Use this when we are linking to a new story. */ "appendPxid"?: boolean; /** * The custom-link key from the story */ "linkKey": string; /** * The input source types to include as parameters when using append-data */ "srcType"?: DxpSourceType; /** * Anchor target */ "target"?: string; } interface DxpLogo { /** * Provide the alternate information for an image if the user cannot view it. */ "alt": string; /** * Value for background color of component, to help with visibilty of the logo image. */ "backgroundColor"?: any; /** * Value for border styling: stroke width --> stroke type --> stroke color */ "border"?: any; /** * Setting the link to route an an external site or internal route onClick */ "href": string; /** * For setting the margin of the component */ "margin"?: any; /** * For setting the max-width of the component */ "maxWidth"?: any; /** * For setting the padding of the component */ "padding"?: any; /** * Source for the large image asset, that acts as the default image. */ "src": string; /** * This value acts as a responsive breakpoint for when the large image asset transitions to the smaller image. This value is mutable because some images may be wider than others, and the break may happen prematurely. */ "srcBreakpoint"?: any; /** * Source for a smaller image, that responds to mobile or responsive design. Examples of this would be a vertically stacked logo, or a favicon-like image asset that looks better on smaller screen sizes. */ "srcSmall": string; /** * This is to set the value to '_blank' to open in a new tab. Leave as an empty string if routing to a scene within the experience. */ "target"?: string; } interface DxpMarkdown { /** * Set this to true if the HTML template has tokens and should be re-fetched on experience data-changes. */ "hasTokens"?: boolean; /** * Story Text Template Key */ "templateKey": string; } interface DxpModal { /** * (optional) Alignment of action buttons */ "alignActions"?: 'right' | 'left'; /** * (optional) Label for close button */ "closeButtonLabel"?: string; /** * (optional) Custom class */ "customClass"?: string; /** * (optional) Transition duration */ "duration"?: number; /** * (optional) Sets the aria-label & title for the modal */ "modalLabel"?: string; /** * Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing */ "onArcher-before-close"?: (event: DxpModalCustomEvent) => void; /** * Fires when the modal has been closed */ "onArcher-close"?: (event: DxpModalCustomEvent) => void; /** * Fires when the modal has been opened */ "onArcher-open"?: (event: DxpModalCustomEvent) => void; /** * (optional) If `true`, the Modal is open. */ "opened"?: boolean; /** * (optional) Override modal popup placement */ "placement"?: | 'top' | 'bottom' | 'left' | 'right' | 'overlay' | 'center'; /** * (optional) Modal size */ "size"?: string; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavIcon { /** * (optional) Toggles if this item is active */ "active"?: boolean; /** * (optional) Function to call after icon interaction */ "clickEventHandler"?: ( event: KeyboardEvent | MouseEvent | undefined, ) => void; /** * (optional) Href value for navigation */ "href"?: string; /** * The name of the icon to display Note - currently only 'action-circle-close' || 'action-menu' are supported This component will have access to all of the UXDS icons upon re-integration. */ "icon": string; /** * Controls whether or not the mobile menu is open. */ "mobileMenuOpen"?: boolean; /** * (optional) Reference to this element from parent element. */ "refMobileMenuToggle"?: (el: HTMLAnchorElement | undefined) => void; } /** * This is a child component for the `dxp-header` to capture navigation menu items. */ interface DxpNavItem { /** * (optional) Additional action to take when this item is clicked. */ "clickHandler"?: (event: MouseEvent | KeyboardEvent) => void; /** * Href value for navigation when item is clicked. */ "href": string; /** * (optional) Icon to display with */ "icon"?: string; /** * Label to display for this link in the navigation bar. */ "label": string; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavMain { /** * (optional) if this item is active */ "active"?: boolean; /** * (optional) Additional action to take when this item is clicked. */ "clickHandler"?: (event: any) => void; /** * (optional) href value */ "href"?: string; /** * (optional) label value */ "label"?: string; /** * (optional) if this item's menu-panel is visible */ "menuPanelVisible"?: boolean; /** * (optional) if this item has an associated popup */ "popup"?: boolean; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavMobile { /** * (optional) Set this to a MenuItem Id value to default as the active route If not set, the default active route is set to the first navigation entry */ "activeRouteId"?: string; /** * (optional) callback when hiding this element. */ "hideHandler"?: () => void; /** * (optional) JSON structured array of navigation menu items. ex: ` [ { "label": "Topic One", "id": "Topic One", "children": [{ "label": "Second Level", "id": "Second Level 3", "children": [{ "label": "Third Level", "id": "Third Level 4", "href": "#third-level" }] }] } ] ` */ "navigationData"?: MenuItem[]; /** * Event of dxp nav mobile */ "onCloseMenu"?: (event: DxpNavMobileCustomEvent) => void; } /** * This component is designed to be embedded in the `dxp-header` component. */ interface DxpNavPanel { /** * Controls if this element is visible or not */ "active"?: boolean; /** * (optional) Set this to a MenuItem Id value to default as the active route If not set, the default active route is set to the first navigation entry */ "activeRouteId"?: string; /** * (optional) Controls whether the top level item is just a title or link */ "header"?: boolean; /** * (optional) callback when hiding this element. */ "hideHandler"?: () => void; /** * (optional) JSON structured array of navigation menu items. ex: ` [ { "label": "Topic One", "id": "Topic One", "children": [{ "label": "Second Level", "id": "Second Level 3", "children": [{ "label": "Third Level", "id": "Third Level 4", "href": "#third-level" }] }] } ] ` */ "navigationData"?: MenuItem[]; } interface DxpOrganizationData { /** * The input-key to display */ "dataPoint"?: string; /** * A default value to display if the data in get is not found. */ "default"?: string; /** * Deprecated in favor of dataPoint The input-key to display */ "inputKey"?: string; /** * A pipe separated list of modifier expressions to modify the captured data. clip: length truncate: length date format: expression lowercase uppercase capitalize size encode currency orgpoint * @example clip:5|capitalize */ "modify"?: string; /** * (optional) Set to true to toggle that this is a scheduled data item for an organization */ "scheduledData"?: string; } interface DxpPopoutMenu { /** * (optional) Determines whether the popout should close when a menu item is selected. Default: true */ "closeOnSelect"?: boolean; /** * (optional) The Id of the site's logo element to include in the mobile display header */ "logoElementId"?: string; } interface DxpProgressBar { /** * Changes the color of the vertical slashes */ "slashColor"?: string; /** * Set the amount of vertical slashes to display */ "slashCount"?: string; } interface DxpProgressMade { /** * Sets the width of the progress-bar component when the view this component is defined in is loaded Note: This value is clamped between 0-100 */ "value"?: number; } interface DxpRadioGroup { /** * If `true`, the radios can be deselected. */ "allowEmptySelection"?: boolean; /** * The name of the control, which is submitted with the form data. */ "name"?: string; /** * Emitted when the value has changed. */ "onRadioChange"?: (event: DxpRadioGroupCustomEvent) => void; /** * the value of the radio group. */ "value"?: any | null; } interface DxpSitemapSearch { /** * Text to display as placeholder */ "placeHolderText"?: string; /** * Relative URL path to location of sitemap */ "sitemapPath": string; } interface DxpSpacer { /** * Value for setting the spacer height. Interprets any string value for height: px, rem, %, vh, etc. */ "height"?: string; } interface DxpTabs { /** * (optional) Starting index that displays content; defaults to first item. */ "selectedIndex"?: number; } /** * A child component of `dxp-tabs` meant to be used in the `panel` slot */ interface DxpTabsItem { /** * Label displayed on the control element for this content. Alternatively, the `label` slot can be used to add additional HTML */ "label"?: string; } interface DxpTooltip { /** * Alt text to display if image asset not found */ "altText"?: string; /** * Tooltip background color */ "backgroundColor"?: string; /** * Set error state */ "error"?: boolean; /** * Label to display along with icon */ "iconLabel"?: string; /** * Sets whether the toast will open automatically immediately after widget's initialization. Default value: false */ "tooltipOpenMode"?: TooltipOpenMode; /** * Tooltip alignment prop to where the tooltip will appear */ "tooltipPosition"?: TooltipPosition; /** * This sets the size of the desired image */ "tooltipSize"?: TooltipSize; /** * This is asset path to the desired image for the icon */ "tooltipSource"?: string; /** * Set tooltip text */ "tooltipText"?: string; } interface DxpTruncate { /** * (optional) Controls the icon size */ "iconSize"?: IconSize1; /** * (optional) Icon to display alongside close label */ "iconSrcClose"?: string; /** * (optional) Icon to display alongside expand label */ "iconSrcExpand"?: string; /** * (optional) Text displayed for close link */ "labelClose"?: string; /** * (optional) Text displayed for expansion link */ "labelExpand"?: string; /** * (optional) Changes which side the icon will appear on */ "labelPosition"?: LabelPosition; /** * (optional) Sets default state to open on render */ "opened"?: boolean; } interface DxpVideo { /** * (optional) URL for the closed caption text file. Can be relative or absolute. */ "ccUrl"?: string; /** * (optional) Sets the height of the video element */ "height"?: string; /** * This is fired when the video is ready */ "onReady"?: (event: DxpVideoCustomEvent) => void; /** * (required) URL for the poster image asset. Can be relative or absolute. */ "posterUrl": string; /** * (optional) Sets the border radius for all video display elements (i.e. video, preview, modal). Default: (5px) */ "radius"?: string | null; /** * (optional) Video timer */ "timer"?: any; /** * (optional) If set, video will open up in modal on desktop when play button hit */ "useModal"?: boolean; /** * (required) URL for the video asset. Can be relative or absolute. */ "videoUrl": string; /** * (optional) Sets the width of the video element */ "width"?: string; } interface DxpVideoPlayer { /** * Value used specifically for Vimeo video identification. */ "vimeoId": string; /** * Value used specifically for YouTube video identification. This value can be found in the URL of the desired YouTube video, appended after 'v=' For example, this YouTube link's: https://www.youtube.com/watch?v=5qap5aO4i9A youtubeId= '5qap5aO4i9A' */ "youtubeId": string; } interface DxpWayfinder { /** * Required to set relative container Id for mobile navigation pop-up */ "containerId"?: string; /** * Set the direction that the mobile popup will appear */ "directionPopup"?: WayfinderPopupDirection; /** * Change this to display steps horizontally (default) or vertically */ "orientation"?: WayfinderOrientation; } interface DxpWayfinderStep { /** * (optional) Provide name of event to watch to conditionally display `node` or `node-complete` slots. */ "dxpEvent"?: string; /** * Only active on the exact href match, and not on child routes */ "exact"?: boolean; /** * Set to true to disable navigation on this step. Note: `path` property is still required to determine active node. This will be overridden if used in conjunction with `dxp-event`. */ "noRedirect"?: boolean; /** * Set the direction that the mobile popup will appear. */ "path": string; /** * Only active on the exact href match using every aspect of the URL including parameters. */ "strict"?: boolean; } /** * A component to display a dynamic year, updating based on an effective date. */ interface DxpYear { /** * The day of the month when the year should increment (1-31) */ "effectiveDay"?: number; /** * The month when the year should increment (1-12) */ "effectiveMonth"?: number; /** * The number of years to increment (default is 0) */ "incrementYear"?: number; } interface IntrinsicElements { "dxp-accordion": DxpAccordion; "dxp-action": DxpAction; "dxp-animated-svg": DxpAnimatedSvg; "dxp-badge": DxpBadge; "dxp-calendar-link": DxpCalendarLink; "dxp-calendly": DxpCalendly; "dxp-cloudinary": DxpCloudinary; "dxp-cms-data": DxpCmsData; "dxp-cms-html": DxpCmsHtml; "dxp-cms-markdown": DxpCmsMarkdown; "dxp-collapsible": DxpCollapsible; "dxp-detect-event": DxpDetectEvent; "dxp-detect-progress": DxpDetectProgress; "dxp-experience": DxpExperience; "dxp-experience-data": DxpExperienceData; "dxp-filter": DxpFilter; "dxp-form": DxpForm; "dxp-gtm": DxpGtm; "dxp-header": DxpHeader; "dxp-html": DxpHtml; "dxp-input": DxpInput; "dxp-input-buttons": DxpInputButtons; "dxp-input-link": DxpInputLink; "dxp-link": DxpLink; "dxp-logo": DxpLogo; "dxp-markdown": DxpMarkdown; "dxp-modal": DxpModal; "dxp-nav-icon": DxpNavIcon; "dxp-nav-item": DxpNavItem; "dxp-nav-main": DxpNavMain; "dxp-nav-mobile": DxpNavMobile; "dxp-nav-panel": DxpNavPanel; "dxp-organization-data": DxpOrganizationData; "dxp-popout-menu": DxpPopoutMenu; "dxp-progress-bar": DxpProgressBar; "dxp-progress-made": DxpProgressMade; "dxp-radio-group": DxpRadioGroup; "dxp-sitemap-search": DxpSitemapSearch; "dxp-spacer": DxpSpacer; "dxp-tabs": DxpTabs; "dxp-tabs-item": DxpTabsItem; "dxp-tooltip": DxpTooltip; "dxp-truncate": DxpTruncate; "dxp-video": DxpVideo; "dxp-video-player": DxpVideoPlayer; "dxp-wayfinder": DxpWayfinder; "dxp-wayfinder-step": DxpWayfinderStep; "dxp-year": DxpYear; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "dxp-accordion": LocalJSX.DxpAccordion & JSXBase.HTMLAttributes; "dxp-action": LocalJSX.DxpAction & JSXBase.HTMLAttributes; "dxp-animated-svg": LocalJSX.DxpAnimatedSvg & JSXBase.HTMLAttributes; "dxp-badge": LocalJSX.DxpBadge & JSXBase.HTMLAttributes; "dxp-calendar-link": LocalJSX.DxpCalendarLink & JSXBase.HTMLAttributes; "dxp-calendly": LocalJSX.DxpCalendly & JSXBase.HTMLAttributes; "dxp-cloudinary": LocalJSX.DxpCloudinary & JSXBase.HTMLAttributes; "dxp-cms-data": LocalJSX.DxpCmsData & JSXBase.HTMLAttributes; "dxp-cms-html": LocalJSX.DxpCmsHtml & JSXBase.HTMLAttributes; "dxp-cms-markdown": LocalJSX.DxpCmsMarkdown & JSXBase.HTMLAttributes; /** * A child component for dxp-accordion that contains the collapsible content */ "dxp-collapsible": LocalJSX.DxpCollapsible & JSXBase.HTMLAttributes; "dxp-detect-event": LocalJSX.DxpDetectEvent & JSXBase.HTMLAttributes; "dxp-detect-progress": LocalJSX.DxpDetectProgress & JSXBase.HTMLAttributes; /** * This is the experience-host component that provides the * mechanism for retrieving the experience to the page. * @extension actions * @extension provider */ "dxp-experience": LocalJSX.DxpExperience & JSXBase.HTMLAttributes; "dxp-experience-data": LocalJSX.DxpExperienceData & JSXBase.HTMLAttributes; /** * A component to store values that will be filtered within an input component. */ "dxp-filter": LocalJSX.DxpFilter & JSXBase.HTMLAttributes; "dxp-form": LocalJSX.DxpForm & JSXBase.HTMLAttributes; "dxp-gtm": LocalJSX.DxpGtm & JSXBase.HTMLAttributes; /** * This component can be used to control navigation on a site. */ "dxp-header": LocalJSX.DxpHeader & JSXBase.HTMLAttributes; "dxp-html": LocalJSX.DxpHtml & JSXBase.HTMLAttributes; /** * This component uses a DXP story's input definition to render HTML inputs. * @docs */ "dxp-input": LocalJSX.DxpInput & JSXBase.HTMLAttributes; "dxp-input-buttons": LocalJSX.DxpInputButtons & JSXBase.HTMLAttributes; "dxp-input-link": LocalJSX.DxpInputLink & JSXBase.HTMLAttributes; "dxp-link": LocalJSX.DxpLink & JSXBase.HTMLAttributes; "dxp-logo": LocalJSX.DxpLogo & JSXBase.HTMLAttributes; "dxp-markdown": LocalJSX.DxpMarkdown & JSXBase.HTMLAttributes; "dxp-modal": LocalJSX.DxpModal & JSXBase.HTMLAttributes; /** * This component is designed to be embedded in the `dxp-header` component. */ "dxp-nav-icon": LocalJSX.DxpNavIcon & JSXBase.HTMLAttributes; /** * This is a child component for the `dxp-header` to capture navigation menu items. */ "dxp-nav-item": LocalJSX.DxpNavItem & JSXBase.HTMLAttributes; /** * This component is designed to be embedded in the `dxp-header` component. */ "dxp-nav-main": LocalJSX.DxpNavMain & JSXBase.HTMLAttributes; /** * This component is designed to be embedded in the `dxp-header` component. */ "dxp-nav-mobile": LocalJSX.DxpNavMobile & JSXBase.HTMLAttributes; /** * This component is designed to be embedded in the `dxp-header` component. */ "dxp-nav-panel": LocalJSX.DxpNavPanel & JSXBase.HTMLAttributes; "dxp-organization-data": LocalJSX.DxpOrganizationData & JSXBase.HTMLAttributes; "dxp-popout-menu": LocalJSX.DxpPopoutMenu & JSXBase.HTMLAttributes; "dxp-progress-bar": LocalJSX.DxpProgressBar & JSXBase.HTMLAttributes; "dxp-progress-made": LocalJSX.DxpProgressMade & JSXBase.HTMLAttributes; "dxp-radio-group": LocalJSX.DxpRadioGroup & JSXBase.HTMLAttributes; "dxp-sitemap-search": LocalJSX.DxpSitemapSearch & JSXBase.HTMLAttributes; "dxp-spacer": LocalJSX.DxpSpacer & JSXBase.HTMLAttributes; "dxp-tabs": LocalJSX.DxpTabs & JSXBase.HTMLAttributes; /** * A child component of `dxp-tabs` meant to be used in the `panel` slot */ "dxp-tabs-item": LocalJSX.DxpTabsItem & JSXBase.HTMLAttributes; "dxp-tooltip": LocalJSX.DxpTooltip & JSXBase.HTMLAttributes; "dxp-truncate": LocalJSX.DxpTruncate & JSXBase.HTMLAttributes; "dxp-video": LocalJSX.DxpVideo & JSXBase.HTMLAttributes; "dxp-video-player": LocalJSX.DxpVideoPlayer & JSXBase.HTMLAttributes; "dxp-wayfinder": LocalJSX.DxpWayfinder & JSXBase.HTMLAttributes; "dxp-wayfinder-step": LocalJSX.DxpWayfinderStep & JSXBase.HTMLAttributes; /** * A component to display a dynamic year, updating based on an effective date. */ "dxp-year": LocalJSX.DxpYear & JSXBase.HTMLAttributes; } } }