Aspenify Web Components 🛠

A collection of web components built for Aspenify Platform for reusability and performance. These WebComponents can be used across any JavaScript framework or no framework at all. We accomplish this by using standardized web platform APIs and Web Components.

api-aspenify - "1.19.18" demo-aspenify - "1.20.2" dev-aspenify - "1.20.1"

cisco-components -

state-aspenify - "1.20.13" cisco-prod = "1.20.14"

Components

We will gradually add useful components under this project. You can use these components to integrate with Aspenify Platform within any web based UI application. Please check component details in the table below.

| Sr. No. | Tag Name | Descritpion | | ------- | ------------------- |------------------------------------------------------| | 1 | aspenify-playbook | Get and display Playbooks from specified workspace | | 2 | aspenify-content | Get and display Content from specified workspace |

Features

• Can be used with any JavaScript framework.
• No external dependencies.
• Built with accessibility in mind.
• Supports all modern browsers and screen readers.
• Additionally, limited support offered for IE11 and Edge 17+.
• Comes with modified interface for mobile devices to provide better user experience.
• Built using Stencil.js and Web Components.
• Free to use under the MIT license.

Browser support

• Google Chrome 61+
• Apple Safari 10+
• Firefox 63+
• Microsoft Edge 17+
• Opera 63+
• Samsung Browser 8.2+
• Internet Explorer 11

Package size

You don't need to worry about the package size as it will only download the components that you have used on your page. 🤩

Usage

This components collection is based on "differential bundling" strategy. The advantage of differential bundling is that modern browsers can avoid all the polyfills and bloated legacy JavaScript, and use the modern APIs already baked into the browser.

For example, the modern browsers will only download util-components.esm.js as they out-of-the-box support latest JavaScript features like ES Modules, async/await, Classes, etc. For IE11, it will download the util-components.js file which is in the ES5 syntax and has all the polyfills.

Script tag

• Put script tags as shown above in the head of your web page.
• Then you can use the custom elements anywhere in your template, JSX, html etc.

Unpkg CDN

<script type="module"
    src="https://unpkg.com/[email protected]/dist/web-component-aspenify/web-component-aspenify.esm.js"></script> 
<script nomodule src="https://unpkg.com/[email protected]/dist/web-component-aspenify/web-component-aspenify.js"></script>

jsDelivr CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web-component-aspenify/web-component-aspenify.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web-component-aspenify/web-component-aspenify.esm.js"></script>