@cirkay-eng/cirkay-components v0.7.62

Fan Pass Web Components Library README

A lightweight bundle for loading Cirkay components via CDN. This bundle provides three main components: FanPassClaim, FanPassUnlock, and MobilePass.

Using via Cirkay Fan Pass CDN

Installation

UMD Bundle (Standalone)

The UMD bundle includes all components and dependencies in a single file. Add the following script tag to your HTML:

<!-- Production -->
<script src="https://cdn.n3xus.services/fan-pass-cdn/cirkay-fan-pass-standalone-umd.0.7.6.umd.js"></script>

Modular Bundle (ES Modules)

The modular bundle splits components into separate chunks for better tree-shaking and code splitting. First, load the vendor bundle, then the modular bundle:

<script type="module">
  // Load main bundle
  import { FanPassClaim, FanPassUnlock, MobilePass } from 'https://cdn.n3xus.services/fan-pass-cdn/cirkay-fan-pass-standalone-es.0.7.6.esm.js';
</script>

Components

FanPassUnlock

A component that handles the unlocking of Fan Pass content.

<fp-unlock
  apiKey="your-api-key"
  fanPassTitle="Fan Pass"
  buttonLabel="Connect"
  :logoSet="{
    large: { src: 'path/to/large-logo.png' },
    medium: { src: 'path/to/medium-logo.png' },
    small: { src: 'path/to/small-logo.png' },
    alt: 'Fan Pass Logo'
  }"
  :inline="false"
  :loading="false"
  :staging="false"
  :debugLogging="false"
  :cta="false"
  ctaText="Connect to unlock"
  btnBackgroundColor="#D60455"
  btnTextColor="#FFFFFF"
></fp-unlock>

Props

Events

FanPassClaim

A component for claiming Fan Passes.

<fp-claim
  apiKey="your-api-key"
  fanPassTitle="Fan Pass"
  :logoSet="{
    large: { src: 'path/to/large-logo.png' },
    medium: { src: 'path/to/medium-logo.png' },
    small: { src: 'path/to/small-logo.png' },
    alt: 'Fan Pass Logo'
  }"
  :modal="false"
  :validateAfterModal="false"
  redeemCode=""
  successUrl="https://example.com/success"
  :autoRedirect="false"
  :showRedeemInput="true"
  :staging="false"
  :debugLogging="false"
  btnBackgroundColor="#D60455"
  btnTextColor="#FFFFFF"
></fp-claim>

Props

Events

MobilePass

A component for displaying mobile pass information.

<fp-mobile-pass
  fanPassTitle="Fan Pass"
  androidLink="https://play.google.com/store/apps/details?id=com.example"
  appleLink="https://apps.apple.com/app/example"
  downloadLink="https://example.com/download"
  :displayIntro="false"
  :debugLogging="false"
></fp-mobile-pass>

Props

Event Handling

Example of handling events:

// Listen for unlock events
document.querySelector('fp-unlock').addEventListener('fp-unlock-complete', (event) => {
  console.log('Unlock complete:', event.detail);
});

// Listen for claim events
document.querySelector('fp-claim').addEventListener('fp-claim-claimed', (event) => {
  console.log('Claim complete:', event.detail);
});

Bundle Types

Production

For production, use the minified versions:

<!-- UMD -->
<script src="https://cdn.n3xus.services/fan-pass-cdn/cirkay-fan-pass-standalone-umd.0.7.6.umd.js"></script>

<!-- ES Modules -->
<script type="module">
        // Load main bundle
        import { FanPassClaim, FanPassUnlock, MobilePass } from 'https://cdn.n3xus.services/fan-pass-cdn/cirkay-fan-pass-standalone-es.0.7.6.esm.js';
    </script>

Browser Support

The components are built using modern web standards and support all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Dependencies

The components require the following dependencies:

• Lit (for web components)
• Push Web Components (for UI elements)

These are included in the standalone bundle but need to be loaded separately when using the modular bundle.

Fan Pass Web Components Library Via NPM Beta

Welcome to the Fan Pass Web Components library! This library provides a collection of UX frontend components designed to be fast, reusable, and highly customisable for any project, without relying on proprietary technologies or frameworks. These components leverage standard Web APIs and are compatible with all modern browsers.

Installation

Requires Node v20.0+ minimum.

1. Install Node.js globally using one of the following methods:

• Mac: NVM
• Windows: NVM for Windows
• Direct download: Node.js

2. Install PNPM globally using one of the following methods:

• Mac: brew install pnpm
• Windows PowerShell: Run the command iwr https://get.pnpm.io/install.ps1 -useb | iex

Build scripts

We've provided the following build scripts to streamline the development process:

Fan Pass application:

• Develop main library: pnpm fan-pass:serve
• Build main library: pnpm fan-pass:build
• Build main library docs: pnpm fan-pass:build:docs

Importing components into your project

Our components are written as ES6 modules for seamless integration into your project without the need for transpilation through tools like Webpack or Babel. You can still use pre-processors like Vite, Webpack, or Roll-up for tree shaking and minification while preserving ES modules.

To initialise a web component and render it in your HTML and the DOM, simply import the component script within your page's entry scripts or as a script tag directly inside your page.