myuw-compact-card has no known usages and is not currently maintained.
This is a compact card web component used with MyUW.
Add the following to your page's <head>:
<script src="https://unpkg.com/@myuw-web-components/myuw-compact-card@^1"></script>Using the component
<myuw-compact-card
title="My Account"
uid="unique-identifier"
url="/star"
md-icon="account_circle"
>
</myuw-compact-card>Required:
title: The title of the content represented by the card. Example: "Search the Library Catalog"uid: The unique ID of the card. For current MyUW content, this is thefname. Example: "madison-library-catalog"url: The URL to open when the card is clicked. If the URL starts withhttporhttpsthe link will open in a new tab. If it is relative it will open in the same tab.
Set up to one of:
md-icon: Material UI icon name. Example:account_balance_walletfa-icon: Font Awesome icon name. Example:font-awesome. Note these values do not have thefa-prefix.svg-icon: URL to an SVG file to use as icon Example:/images/widgetIcons/linkedin-logo.svg
If none of these are set, myuw-compact-card shows a default icon.
myuw-compact-cards have a contextual menu with a delete menu item. When users
attempt to delete the card, this web component fires a custom deleteCardNotify
DOM event on the myuw-compact-card element where event.detail is the UID
of the card.
This event is both bubbles and composed so it will bubble up into the parent
document (beyond this web component's shadow DOM).
Handling that event to actually delete the card is an exercise left to the implementer.
const el = document.getElementById('my-card');
el.addEventListener('deleteCardNotify', event => {
console.log(event.detail);
});- Ignores
fa-iconattribute when its value includes{. This is so that an AngularJS application can naively invoke this web component feeding thefa-iconattribute an AngularJS expression, with this web component ignoring the attribute until the AngularJS expression resolves. Without this bit of complexity,FontAwesome: Could not find icon with iconName={{widget.faIcon |littered the logs whereuPortal-app-frameworkuses this web component. - Likewise, ignores
svg-iconattribute when its value includes{. This is likewise so that an AngularJS application can naively invoke this web component feeding thesvg-iconattribute an AngularJS expression, with this web component ignoring the attribute until the AngularJS expression resolves. Without this bit of complexity,
Error retrieving icon: Http failure response for .../web/%7B%7B::widget.iconUrl%7D%7D: 404 Not FoundInstall dependencies with npm install
Run local server with npm run serve:element
**We're treating the 1.x series as unstable, so just bump the PATCH version and don't worry about it.
Build the element into a single JavaScript file with
npm run build-element.
A single file will be generated in element/element.js. This build path can be
changed in build-elements.js.
This compile step ensures that the element.js that will be used at runtime
by downstream applications matches the source code.
Bump the version number. We're not yet tracking breaking changes, so all releases are patch releases.
npm version patch
npm publish --access public