-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: add
demo/api.js
into bundler
- Loading branch information
Showing
4 changed files
with
165 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import '../index.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
import { css, LitElement, html } from 'lit'; | ||
import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; | ||
|
||
var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`; | ||
|
||
var colorCss = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`; | ||
|
||
var tokensCss = css`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`; | ||
|
||
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license | ||
// See LICENSE in the project root for license information. | ||
|
||
|
||
// See https://git.io/JJ6SJ for "How to document your components using JSDoc" | ||
/** | ||
* The auro-loader element is an easy to use animated loader component. | ||
* | ||
* @attr {Boolean} pulse - sets loader type | ||
* @attr {Boolean} ringworm - sets loader type | ||
* @attr {Boolean} laser - sets loader type | ||
* @attr {Boolean} orbit - sets loader type | ||
* @attr {Boolean} white - sets color of loader to white | ||
* @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark | ||
* @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light | ||
* @attr {Boolean} xs - sets size to extra small | ||
* @attr {Boolean} sm - sets size to small | ||
* @attr {Boolean} md - sets size to medium | ||
* @attr {Boolean} lg - sets size to large | ||
* @csspart element - apply style to adjust speed of animation | ||
*/ | ||
|
||
// build the component class | ||
class AuroLoader extends LitElement { | ||
constructor() { | ||
super(); | ||
|
||
/** | ||
* @private | ||
*/ | ||
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; | ||
|
||
/** | ||
* @private | ||
*/ | ||
this.mdCount = 3; | ||
|
||
/** | ||
* @private | ||
*/ | ||
this.smCount = 2; | ||
|
||
/** | ||
* @private | ||
*/ | ||
this.runtimeUtils = new AuroLibraryRuntimeUtils(); | ||
|
||
this.orbit = false; | ||
this.ringworm = false; | ||
this.laser = false; | ||
this.pulse = false; | ||
} | ||
|
||
// function to define props used within the scope of this component | ||
static get properties() { | ||
return { | ||
pulse: { | ||
type: Boolean, | ||
reflect: true | ||
}, | ||
orbit: { | ||
type: Boolean, | ||
reflect: true | ||
}, | ||
ringworm: { | ||
type: Boolean, | ||
reflect: true | ||
}, | ||
laser: { | ||
type: Boolean, | ||
reflect: true | ||
} | ||
}; | ||
} | ||
|
||
static get styles() { | ||
return [ | ||
css`${styleCss}`, | ||
css`${colorCss}`, | ||
css`${tokensCss}` | ||
]; | ||
} | ||
|
||
/** | ||
* This will register this element with the browser. | ||
* @param {string} [name="auro-loader"] - The name of element that you want to register to. | ||
* | ||
* @example | ||
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/> | ||
* | ||
*/ | ||
static register(name = "auro-loader") { | ||
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader); | ||
} | ||
|
||
firstUpdated() { | ||
// Add the tag name as an attribute if it is different than the component name | ||
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader'); | ||
} | ||
|
||
connectedCallback() { | ||
super.connectedCallback(); | ||
} | ||
|
||
/** | ||
* @private | ||
* @returns {Array} Numbered array for template map. | ||
*/ | ||
defineTemplate() { | ||
let nodes = Array.from(Array(this.mdCount).keys()); | ||
|
||
if (this.orbit || this.laser) { | ||
nodes = Array.from(Array(this.smCount).keys()); | ||
} else if (this.ringworm) { | ||
nodes = Array.from(Array(0).keys()); | ||
} | ||
|
||
return nodes; | ||
} | ||
|
||
// When using auroElement, use the following attribute and function when hiding content from screen readers. | ||
// aria-hidden="${this.hideAudible(this.hiddenAudible)}" | ||
|
||
// function that renders the HTML and CSS into the scope of the component | ||
render() { | ||
return html` | ||
${this.defineTemplate().map((idx) => html` | ||
<span part="element" class="loader node-${idx}"></span> | ||
`)} | ||
<div class="no-animation">Loading...</div> | ||
${this.ringworm ? html` | ||
<svg part="element" class="circular" viewBox="25 25 50 50"> | ||
<circle class="path" cx="50" cy="50" r="20" fill="none"/> | ||
</svg>` | ||
: `` | ||
} | ||
`; | ||
} | ||
} | ||
|
||
AuroLoader.register(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters