import { CSSResult } from 'lit'; import { LitElement } from 'lit'; import { TemplateResult } from 'lit-html'; declare const $areResourcesAvailable: unique symbol; declare const $areSettingsEnabled: unique symbol; declare const $buttonMode: unique symbol; declare const $closeModelViewerModal: unique symbol; declare const $collectComponentMetadata: unique symbol; declare const $dispatchQRModalRequestedEvent: unique symbol; declare const $epigraphAnalytics: unique symbol; declare const $epigraphArMediator: unique symbol; declare const $epigraphNextElement: unique symbol; declare const $epigraphParentElement: unique symbol; declare const $epigraphPrevElement: unique symbol; declare const $exitFullscreen: unique symbol; declare const $handleSlotChange: unique symbol; declare const $hideAllChildren: unique symbol; declare const $isMobile: unique symbol; declare const $launchExperience: unique symbol; declare const $modelViewer: unique symbol; declare const $modelViewerDecorators: unique symbol; declare const $modelViewerModal: unique symbol; declare const $nexusAnalyticsPlugin: unique symbol; declare const $onArButtonClick: unique symbol; declare const $onArButtonHover: unique symbol; declare const $onArStatusChange: unique symbol; declare const $onLoadingError: unique symbol; declare const $onModelLoaded: unique symbol; declare const $onModelLoadedAnalyticsEventHandler: unique symbol; declare const $onModelViewerDecoratorRendered: unique symbol; declare const $onModelViewerInteraction: unique symbol; declare const $onProductValidated: unique symbol; declare const $onProgress: unique symbol; declare const $onQuickLookButtonTapped: unique symbol; declare const $openModelViewerModal: unique symbol; declare const $productTour: unique symbol; declare const $qrButton: unique symbol; declare const $qrModal: unique symbol; declare const $registerModelViewerDecorator: unique symbol; declare const $renderArButton: unique symbol; declare const $renderArButtonDefault: unique symbol; declare const $renderArButtonRolloverNudge: unique symbol; declare const $renderArButtonStyle: unique symbol; declare const $renderedFeatures: unique symbol; declare const $renderIndicator: unique symbol; declare const $renderMobileProductTourButton: unique symbol; declare const $renderModelViewer: unique symbol; declare const $renderModelViewerModal: unique symbol; declare const $renderModelViewerModalClose: unique symbol; declare const $renderPoster: unique symbol; declare const $renderPosterBackground: unique symbol; declare const $renderPosterIcon: unique symbol; declare const $renderProductTour: unique symbol; declare const $renderQrModal: unique symbol; declare const $renderQrModalContent: unique symbol; declare const $renderViewer: unique symbol; declare const $renderWebXRBanner: unique symbol; declare const $requestFullscreen: unique symbol; declare const $sendArCapabilityEvent: unique symbol; declare const $sendArLoadedEvent: unique symbol; declare const $sendExperienceTypeEvent: unique symbol; declare const $setAndroidSrcAttribute: unique symbol; declare const $setArButtonMode: unique symbol; declare const $setGaEventLabel: unique symbol; declare const $setIosSrcAttribute: unique symbol; declare const $setNormalSrcAttribute: unique symbol; declare const $shouldRenderArButton: unique symbol; declare const $shouldRenderAsModal: unique symbol; declare const $shouldRenderModelViewer: unique symbol; declare const $shouldRenderProductTour: unique symbol; declare const $shouldRenderQrModal: unique symbol; declare const $shouldSetAndroidSrc: unique symbol; declare const $shouldSetIosSrc: unique symbol; declare const $shouldShowModelViewer: unique symbol; declare const $showAllChildren: unique symbol; declare const $utmParameters: unique symbol; declare const $webXRBanner: unique symbol; /** * Epigraph's custom web component for AR based on Google's ``. * As such, it mostly follows their coding conventions except for public APIs. * For more information, @see https://github.com/google/model-viewer/wiki/Code-conventions * * @element `` * * @module EpigraphAr * * @example Quick Start with the latest stable version * * ```html * * * ``` * * @example Quick Start with a Specific Version * * ```html * * * ``` * * @example epigraph-ar as an AR button * * ```html * * ``` * * @example epigraph-ar as a standalone 3D viewer * * ```html * * ``` * * * @example epigraph-ar as a standalone 3D viewer with product tour * * ```html * * ``` * * @example epigraph-ar with product tour and AR * * ```html * * ``` * * @slot ar-button - replaces the ar-button but maintains the onclick function * @slot ar-button-rollover-nudge - replaces the rollover nudge that appears onhover, if enabled * * @slot progress-bar - replaces the progress indicator * @slot poster - replaces the viewer poster * * @slot qr-modal-close - replaces the qr-modal close button * @slot qr-modal-title - replaces the qr-modal title * @slot qr-modal-instruction - replaces the qr-modal instruction * @slot qr-modal-requirement - replaces the qr-modal requirement * @slot qr-modal-done - replaces the qr-modal done button * * @slot mobile-product-tour-button - replaces the mobile product tour launch button * * @slot mobile-poster-foreground - replaces the mobile poster foreground * * @slot viewer-modal-exit-button - replaces the button that exits the fullscreen viewer * * @example Using a slot * * ```html * * * * ``` * * @csspart model-viewer - points to the `` element * @csspart viewer-modal-exit-button - points to the button that exits the fullscreen viewer on mobile * @csspart ar-button-container - points to the ar button container * @csspart ar-button-rollover-nudge - points to the rollover nudge that displays on hover * @csspart default-ar-button - points to the default ar button * @csspart hotspot-button - points to the hotspot buttons * @csspart hotspot-button-inner-circle - points to the inner circle of the hotspot button * @csspart hotspot-button-annotation - points to the hotspot button annotation * @csspart poster-foreground - points to the poster icon * @csspart poster-foreground-image - points to the poster icon image * @csspart mobile-poster-foreground - points to the mobile poster icon * @csspart mobile-poster-foreground-image - points to the poster icon image * @csspart default-poster-foreground - points to the default poster icon * @csspart default-poster-background - points to the default poster background * @csspart default-poster-background - points to the default poster background image * * @csspart qr-modal - points to the `` element * @csspart qr-modal-container - points to the main modal * @csspart qr-modal-background - points to the modal background * @csspart qr-modal-close-default - points to the default close button in the qr-modal * @csspart qr-modal-title-default - points to the default title in the qr-modal * @csspart qr-modal-instruction-default - points to the default instruction in the qr-modal * @csspart qr-modal-requirement-default - points to the default requirement in the qr-modal * @csspart qr-modal-qr-container - points to the qr container within the qr-modal * @csspart qr-modal-qr-image - points to the qr image in the modal * @csspart qr-modal-done-default - points to the default done button in the qr-modal * * @csspart product-tour - points to the `` element * @csspart product-tour-container - points to the side panel container * @csspart product-tour-close-container - points to the side panel close button container * @csspart product-tour-close-default - points to the side panel default close button * @csspart product-tour-inner-content-container - points to the side panel inner content container * @csspart product-tour-feature-content-container - points to the side panel feature content containers * @csspart product-tour-feature-text-container - points to the container housing the feature text * @csspart product-tour-feature-title - points to the title of the feature text * @csspart product-tour-feature-description - points to the description of the feature text * @csspart product-tour-feature-media-container - points to the containers housing feature media * @csspart product-tour-media-carousel - points to the feature media carousels * @csspart product-tour-media-title - points to the feature media titles * @csspart product-tour-carousel-media - points to the media housed inside media carousels * @csspart product-tour-media-controls-container - points to the containers housing the control buttons for the media carousels * @csspart product-tour-media-carousel-dot - points to the control buttons for the media carousels * @csspart mobile-product-tour-button-default - points to the default mobile product tour launch button * @csspart webxr-banner - points to the webxr banner * @csspart webxr-banner-text - points to the text portion of the webxr banner * @csspart webxr-banner-name - points to the product name in the text portion * @csspart webxr-banner-pdp - points to the the url text below the name in the text portion * @csspart webxr-banner-visit-button - points to the visit button in the banner * * @example Using a CSS Shadow Part * * ```css * epigraph-ar::part(part-name) { * some-rule: some-value; * } * ``` * * @cssprop --progress-ring-color - edits the progress ring color * @cssprop --progress-ring-radius - edits the progress ring radius * @cssprop --progress-ring-thickness - edits the progress ring thickness * @cssprop --ar-button-text-color - edits ar-button text color * @cssprop --ar-button-hover-text-color - edits ar-button text color when hovered * @cssprop --ar-button-background-color - edits ar-button background color * @cssprop --ar-button-hover-background-color - edits ar-button background color when hovered * @cssprop --ar-button-active-background-color - edits ar-button background color when clicked * @cssprop --ar-button-border-color - edits ar-button border color * @cssprop --ar-icon-vector-1-color - edits ar-icon vector 1 (top face) color * @cssprop --ar-icon-hover-vector-1-color - edits ar-icon vector 1 color when hovered * @cssprop --ar-icon-vector-2-color - edits ar-icon vector 2 (left face) color * @cssprop --ar-icon-hover-vector-2-color - edits ar-icon vector 2 color when hovered * @cssprop --ar-icon-vector-3-color - edits ar-icon vector 3 (right face) color * @cssprop --ar-icon-hover-vector-3-color - edits ar-icon vector 3 color when hovered * @cssprop --ar-icon-frame-color - edits ar-icon frame color * @cssprop --ar-icon-hover-frame-color - edits ar-icon frame color when hovered * @cssprop --hotspot-button-border-color - edits hotspot button border color * @cssprop --hotspot-button-background-color - edits hotspot button background color * @cssprop --hotspot-button-focus-border-color - edits hotspot button border color when focused * @cssprop --hotspot-inner-circle-border-color - edits hotspot button inner circle border color * @cssprop --hotspot-inner-circle-viewed-border-color - edits hotspot button inner circle border color when viewed * * @cssprop --qr-modal-close-button-stroke-color - edits qr-modal close button stroke color * @cssprop --qr-modal-title-color - edits qr-modal title text color * @cssprop --qr-modal-instruction-color - edits qr-modal instruction text color * @cssprop --qr-modal-requirement-color - edits qr-modal requirement text color * @cssprop --qr-modal-done-button-text-color - edits qr-modal done button text color * @cssprop --qr-modal-done-button-hover-text-color - edits qr-modal done button text color when hovered * @cssprop --qr-modal-done-button-background-color - edits qr-modal done button background color * @cssprop --qr-modal-done-button-hover-background-color - edits qr-modal done button background color when hovered * @cssprop --qr-modal-done-button-active-background-color - edits qr-modal done button background color when clicked * @cssprop --qr-modal-done-button-border-color - edits qr-modal done button border color * * @cssprop --product-tour-background-color - edits product-tour background color * @cssprop --product-tour-dot-background-color - edits product-tour control dot background color * @cssprop --product-tour-current-dot-background-color - edits product-tour control dot background color when it points to a current image * @cssprop --product-tour-close-button-stroke-color - edits product-tour close-button stroke color * @cssprop --product-tour-close-button-hover-stroke-color - edits product-tour close-button stroke color when hovered * @cssprop --product-tour-close-button-fill-color - edits product-tour close button fill color * @cssprop --product-tour-close-button-hover-fill-color - edits product-tour close button fill color when hovered * @cssprop --mobile-product-tour-button-text-color - edits product-tour mobile button text color * @cssprop --mobile-product-tour-button-background-color - edits product-tour mobile button background color * @cssprop --product-tour-mobile-close-button-stroke-color - edits product-tour mobile close button stroke color * @cssprop --product-tour-mobile-close-button-outline-color - edits product-tour mobile close button outline color * * @example Using a CSS Custom Property * * ```css * epigraph-ar { * --some-css-property: some-new-value; * } * ``` * * @fires epigraph-ar-capability-determined - custom event to indicate whether the device is AR capable * @fires epigraph-ar-model-loaded - custom event to bubble up the model loaded event from model-viewer * @fires epigraph-ar-modal-close - custom event to buggle up the modal closing event * @fires epigraph-experience-type - custom event to detail what experience is currently being rendered * @fires epigraph-invalid-product - custom event to indicate product associated with the sku is invalid * @fires epigraph-ar-loading-error - custom event to bubble up the model load error event from model-viewer, inheriting message and stack * @fires epigraph-valid-product - custom event to indicate product associated with the sku is valid * * @example Listening to Events * * ```JavaScript * const epigraphAR = document.querySelector('epigraph-ar'); * * epigraphAR.addEventListener('event-name', () => { * doSomething(); * }) * ``` */ export declare class EpigraphAr extends LitElement implements ILoggable { /** * The version of the `@epigraph/ar` package. */ static version: string; /** * name to be used for the internal logging service */ name: string; /** * static list of style template literals to be used for this web component */ static styles: CSSResult[]; private [$utmParameters]; /** * to be used as a pointer for enumeration ArButtonModes */ private [$buttonMode]; /** * a reference instance of EpigraphArMediator * * @memberof EpigraphArMediator */ private [$epigraphArMediator]; /** * a combination check for mobile or touch devices in general */ private [$isMobile]; /** * reference to the rendered `` element */ private [$modelViewer]; /** * a list to be populated with `` decorators */ private [$modelViewerDecorators]; /** * reference to the rendered `` element */ private [$qrModal]; /** * reference to the rendered `` element */ private [$productTour]; /** * reference to the parent element containing epigraph-ar */ private [$epigraphParentElement]; /** * reference to the sibling element previous to epigraph-ar */ private [$epigraphPrevElement]; /** * reference to the sibling element after epigraph-ar */ private [$epigraphNextElement]; /** * reference to the rendered modal containing `` element */ private [$modelViewerModal]; /** * reference to the Banner only rendered in WebXR mode */ private [$webXRBanner]; /** * Reference to the QR button */ private [$qrButton]; private [$epigraphAnalytics]; private [$nexusAnalyticsPlugin]; private [$renderedFeatures]; /** * toggles the ability to show a * * rollover nudge when the AR/QR button is hovered */ arButtonRolloverNudge: boolean; /** * sets ar modes for the ar experience * * webxr/scene-viewer - android * * quick-look - iOS */ arModes: string; /** * sets ar placement for the ar experience * * floor - place ar object on the floor * * wall - place ar object on the wall */ arPlacement: string; /** * used to load the 3D viewer automatically on desktop */ autoStart: boolean; /** * sets ar button modes for the ar-button, maps to the enumeration * * empty string - NONE * * mobile - MOBILE * * desktop - DESKTOP * * mobile desktop - BOTH */ arButtonModeAttribute: string; /** * sets the viewer camera orbit values */ cameraOrbit: string; /** * sets environmental lighting * * empty string - default scene optimized for load speed * * neutral - applies even lighting on all sides * * HDR Image - supply HDR Image source url to this to apply custom lighting */ environmentImage: string; /** * flag to use different values for GA event label * * name - use product name or hotspot feature name * * sku - use product sku * * name and sku - use '{name} - {sku}' * * sku and name - use '{sku} - {name}' */ gaEventLabelType: string; /** * flag to toggle UserWithArSupport/UserWithQrSupport GA event reporting */ gaQrArSupportEvent: boolean; /** * modifies amount of idling time before interaction prompt appears */ interactionPromptThreshold: number; /** * sets the minimum camera orbit * * each part of the string represents the following in order: roll(theta) yaw(phi) radius * * this uses Euler angles @see https://en.wikipedia.org/wiki/Euler_angles#Proper_Euler_angles_2 for more information */ minCameraOrbit: string; /** * sets the maximum camera orbit * * each part of the string represents the following in order: roll(theta) yaw(phi) radius * * this uses Euler angles @see https://en.wikipedia.org/wiki/Euler_angles#Proper_Euler_angles_2 for more information */ maxCameraOrbit: string; /** * sets the orbit sensitivity * * takes any number, negative values reverse orbit */ orbitSensitivity: number; /** * sets the source url for the poster background */ posterBackground: string; /** * saves the original source url for the poster background to reference if changed */ posterSrc: string; /** * sets the source url for the icon to display on top of the poster */ posterForeground: string; /** * sets the source url for the icon to display on top of the mobile poster */ mobilePosterForeground: string; /** * sets visibility of product tour */ productTourVisible: boolean; /** * modifies the exposure of the model */ exposure: number; /** * modifies the shadow intensity of the model */ shadowIntensity: number; /** * modifies whether touch events on the 3D viewer are allowed to propagate */ stopTouchPropagation: boolean; /** * to be used with epigraph product skus */ sku: string; /** * used to indicate UI/UX themes */ theme: string; /** * to be used with client ua-code */ uaCode: string; /** * to be used with client ga-measurement-id */ gaMeasurementId: string; /** * The name of the consent plugin you would like to use for analytics */ consentPlugin: string; /** * The value to look for from the consent plugin */ consentIdentifier: string; /** * used to log debugging information */ verboseLogging: boolean; /** * disables fullscreen and fullscreen-modal functionality on mobile */ disableMobileFullscreen: boolean; /** * solution for slideshows incompatible with fullscreen modal * when true, appends epigraph-ar to the body upon opening the modal and re-appends it to its previous parent upon closing it */ appendModal: boolean; /** * sets visibility of the 3D viewer * TODO: set a method call to toggle this property based on response from mediator */ viewerVisible: boolean; /** * sets visibility of the 3D viewer * TODO: set a method call to toggle this property based on response from mediator */ viewerTabIndex: number; /** * sets ability to reset model-viewer to poster upon closing fullscreen */ showPosterOnClose: boolean; /** * sets ability to suppress the QR modal dialog */ suppressQRModal: boolean; /** * sets ability to suppress the product-tour modal dialogues */ suppressTourModal: boolean; /** * sets ability to set minimum render scale for low-end devices */ minimumRenderScale: number; /** * keeps track of whether the poster has already been dismissed for this instance of epigraph-ar */ posterDismissed: boolean; /** * this method will be called automatically when using the defined custom element `` */ constructor(); /** * public method to get ar-capability status */ get canActivateAR(): any; /** * public method to show viewer poster */ showPoster(): void; /** * public method to dismiss viewer poster */ dismissPoster(e: Event): Promise; /** * method to display UI elements based on ar-status event * fired by model-viewer * @param {CustomEvent} e custom event fired by the model-viewer to indicate ar status change */ private [$onArStatusChange]; /** * method to dictate indicator display * @param {CustomEvent} e custom event fired by the model-viewer to indicate loading progress */ private [$onProgress]; /** * method to determine what the ga event label should be. * * @param eventLabelType - a string flag representing event label type * @return a event label string */ private [$setGaEventLabel]; /** * method to set the ar-button modes use cases * TODO: maybe use cache directive to cache this result */ private [$setArButtonMode]; /** * method to check if all input settings are enabled in the CMS * * @param settings - input strings describing the settings to check * @return a boolean value representing whether all settings are enabled */ private [$areSettingsEnabled]; /** * method to determine ar-button visibility */ private [$shouldRenderArButton]; /** * Conditionally performs an action on ar-button clicked */ private [$onArButtonClick]; /** * Fires a CustomEvent up to the DOM to alert that a QR modal was requested * This may also fire an event that the QR modal was requested but failed * For more information on firing custom events: https://lit.dev/docs/components/events/#standard-custom-events * * @param event The firing event(Where the item was opened from) * @private */ private [$dispatchQRModalRequestedEvent]; private [$onArButtonHover]; /** * On quick-look button tapped, opens a window to point to the indicated pdpUrl */ private [$onQuickLookButtonTapped]; /** * conditionally send an analytics event as soon as product is validated */ private [$onProductValidated]; /** * Used to capture self event and fire GA analytics event for model loading */ private [$onModelLoadedAnalyticsEventHandler]; private [$onModelViewerInteraction]; /** * method to send a custom event as soon as AR capability is determined */ private [$sendArCapabilityEvent]; /** * Collects full access url metadata * @returns Object containing URL path */ private [$collectComponentMetadata]; /** * Sends an analytics event to NexusAnalyticsPlugin when the component loads */ private [$sendArLoadedEvent]; /** * send a custom event to renderRoot detailing what kind of * experience this component is going to render * * @param {ExperienceDetails} options - details to pass */ private [$sendExperienceTypeEvent]; private [$onLoadingError]; /** * executes a set of instructions as soon as the model loads */ private [$onModelLoaded]; /** * public method to hide all child components of epigraph-ar */ [$hideAllChildren](): void; [$showAllChildren](): void; /** * Invoked when a component is added to the document's DOM. */ connectedCallback(): void; /** * Event listener that fires off opening the modal in the event that it's a button only mode. * * @param kbEvent */ private _handleKeyboardARButton; /** * Event listener that fires off dismissing the poster in the event that the viewer is visible and the poster is not already dismissed. * * @param kbEvent */ private _handleKeyboardPoster; /** * @ignore */ disconnectedCallback(): void; /** * @ignore */ willUpdate(changedProperties: Map): void; /** * @ignore */ protected render(): TemplateResult<1> | null; /** * method to check if should render generic model-viewer modal */ private [$shouldRenderAsModal]; /** * render method for the generic model-viewer modal */ private [$renderModelViewerModal]; /** * render method for the model viewer modal close button modal */ private [$renderModelViewerModalClose]; /** * * render method for the mobile product tour button */ private [$renderMobileProductTourButton]; /** * If show-poster-on-close enabled and fullscreen is closed, reset the viewer to the poster and hide all sub-components of model-viewer */ onFullScreenStateChange(): void; /** * public method to dismiss poster and call launchExperience for mobile devices */ launchFullscreen(e: CustomEvent): void; /** * method to detect whether to launch the experience and if mobile open fullscreen normally or as modal */ private [$launchExperience]; /** * method to detect and dynamically execute fullscreen requests * * @param {PrefixedHTMLElement} ele - a HTMLElement but extended * with vendor prefixes */ private [$requestFullscreen]; /** * method to detect and execute exit requests for fullscreen * * @param {PrefixedDocument} doc - global document but extended * with vendor prefixes */ private [$exitFullscreen]; /** * a method to open the model viewer modal */ private [$openModelViewerModal]; /** * public method to call closeModelViewerModal */ closeModal(): void; /** * a method used to close the model viewer modal */ private [$closeModelViewerModal]; /** * render method for epigraph-ar with normal use-cases */ private [$renderViewer]; /** * render method for the ar-button style */ private [$renderArButtonStyle]; /** * render method for the ar-button */ private [$renderArButton]; /** * render method for the default ar-button */ private [$renderArButtonDefault]; private [$renderArButtonRolloverNudge]; private [$areResourcesAvailable]; private [$shouldShowModelViewer]; private [$shouldRenderModelViewer]; private [$setNormalSrcAttribute]; /** * method to render model-viewer */ private [$renderModelViewer]; private [$renderWebXRBanner]; /** * method to conditionally set the ios-src attribute */ private [$setIosSrcAttribute]; /** * method to determine whether to set ios-src */ private [$shouldSetIosSrc]; /** * method to conditionally set src attribute to android format */ private [$setAndroidSrcAttribute]; /** * method to determine whether to set android specific src */ private [$shouldSetAndroidSrc]; /** * render method for the progress indicator */ private [$renderIndicator]; /** * render method for the poster foreground icon */ private [$renderPosterIcon]; /** * render method for the viewer poster background */ private [$renderPosterBackground]; /** * render method for the viewer poster */ private [$renderPoster]; /** * render method for the main qr modal */ private [$renderQrModal]; /** * decides whether to render the qr modal */ private [$shouldRenderQrModal]; /** * render method for the qr modal content */ private [$renderQrModalContent]; /** * handler method for qr modal slot changes * @param {Event} e the slotchange event */ private [$handleSlotChange]; private [$shouldRenderProductTour]; /** * render method for the product tour */ private [$renderProductTour]; /** * Defines the action to be performed when a modelViewerDecorator is rendered * @param {IModelViewerDecorator} modelViewerDecorator */ private [$onModelViewerDecoratorRendered]; /** * Registers the decorator to the decorator list * @param {IModelViewerDecorator} modelViewerDecorator the decorator to be registered */ private [$registerModelViewerDecorator]; } /** * @license * Copyright (c) 2022 Epigraph LLC. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the 'License'); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an 'AS IS' BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ declare interface ILoggable { name: string; } export { }