@aurodesignsystem-dev/auro-skeleton 0.0.0-pr58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +280 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +180 -0
  5. package/demo/api.html +56 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +100 -0
  8. package/demo/api.min.js +3 -0
  9. package/demo/auro-skeleton.min.js +167 -0
  10. package/demo/index.html +56 -0
  11. package/demo/index.js +4 -0
  12. package/demo/index.md +158 -0
  13. package/demo/index.min.js +4 -0
  14. package/dist/auro-skeleton-BBxn-8_4.js +6 -0
  15. package/dist/index.d.ts +21 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +140 -0
package/demo/api.html ADDED
@@ -0,0 +1,56 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/api.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-skeleton</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-skeleton's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
+ fetch('./api.md')
44
+ .then((response) => response.text())
45
+ .then((text) => {
46
+ const rawHtml = marked.parse(text);
47
+ document.querySelector('main').innerHTML = rawHtml;
48
+ Prism.highlightAll();
49
+ });
50
+ </script>
51
+ <script type="module" data-demo-script="true" src="./api.min.js"></script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
+ </body>
56
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1 @@
1
+ import "../src/registered";
package/demo/api.md ADDED
@@ -0,0 +1,100 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
+ <!-- The below content is automatically added from ../docs/api.md -->
3
+
4
+ # auro-skeleton
5
+
6
+ The auro-skeleton element provides users a way to indicate the loading of asynchronous content on a page.
7
+
8
+ ## Attributes
9
+
10
+ | Attribute | Type | Description |
11
+ |-----------|----------|----------------------------------------------|
12
+ | [shape](#shape) | `String` | Renders a circle, oval, or rectangle loader. |
13
+ <!-- AURO-GENERATED-CONTENT:END -->
14
+
15
+ ## API Examples
16
+
17
+ ### Attribute Examples
18
+
19
+ #### shape
20
+
21
+ The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute. Options are [`circle`, `oval`, `rectangle`]
22
+
23
+ <div class="exampleWrapper">
24
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_shape_circle.html) -->
25
+ <!-- The below content is automatically added from ../apiExamples/api_shape_circle.html -->
26
+ <auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
27
+ <auro-skeleton shape="circle" style="width: 100px; height: 100px"></auro-skeleton>
28
+ <auro-skeleton shape="circle" style="width: 300px; height: 300px"></auro-skeleton>
29
+ <!-- AURO-GENERATED-CONTENT:END -->
30
+ </div>
31
+ <auro-accordion alignRight>
32
+ <span slot="trigger">See code</span>
33
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_shape_circle.html) -->
34
+ <!-- The below code snippet is automatically added from ../apiExamples/api_shape_circle.html -->
35
+
36
+ ```html
37
+ <auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
38
+ <auro-skeleton shape="circle" style="width: 100px; height: 100px"></auro-skeleton>
39
+ <auro-skeleton shape="circle" style="width: 300px; height: 300px"></auro-skeleton>
40
+ ```
41
+ <!-- AURO-GENERATED-CONTENT:END -->
42
+ </auro-accordion>
43
+ <div class="exampleWrapper">
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_shape_oval.html) -->
45
+ <!-- The below content is automatically added from ../apiExamples/api_shape_oval.html -->
46
+ <auro-skeleton shape="oval" style="width: 80px; height: 40px"></auro-skeleton>
47
+ <auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
48
+ <auro-skeleton shape="oval" style="width: 600px; height: 300px"></auro-skeleton>
49
+ <!-- AURO-GENERATED-CONTENT:END -->
50
+ </div>
51
+ <auro-accordion alignRight>
52
+ <span slot="trigger">See code</span>
53
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_shape_oval.html) -->
54
+ <!-- The below code snippet is automatically added from ../apiExamples/api_shape_oval.html -->
55
+
56
+ ```html
57
+ <auro-skeleton shape="oval" style="width: 80px; height: 40px"></auro-skeleton>
58
+ <auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
59
+ <auro-skeleton shape="oval" style="width: 600px; height: 300px"></auro-skeleton>
60
+ ```
61
+ <!-- AURO-GENERATED-CONTENT:END -->
62
+ </auro-accordion>
63
+ <div class="exampleWrapper">
64
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_shape_rectangle.html) -->
65
+ <!-- The below content is automatically added from ../apiExamples/api_shape_rectangle.html -->
66
+ <auro-skeleton shape="rectangle" style="width: 100px; height: 50px"></auro-skeleton>
67
+ <auro-skeleton shape="rectangle" style="width: 400px; height: 150px"></auro-skeleton>
68
+ <auro-skeleton shape="rectangle" style="width: 800px; height: 300px"></auro-skeleton>
69
+ <!-- AURO-GENERATED-CONTENT:END -->
70
+ </div>
71
+ <auro-accordion alignRight>
72
+ <span slot="trigger">See code</span>
73
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_shape_rectangle.html) -->
74
+ <!-- The below code snippet is automatically added from ../apiExamples/api_shape_rectangle.html -->
75
+
76
+ ```html
77
+ <auro-skeleton shape="rectangle" style="width: 100px; height: 50px"></auro-skeleton>
78
+ <auro-skeleton shape="rectangle" style="width: 400px; height: 150px"></auro-skeleton>
79
+ <auro-skeleton shape="rectangle" style="width: 800px; height: 300px"></auro-skeleton>
80
+ ```
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+ </auro-accordion>
83
+
84
+ ### Theme Support
85
+
86
+ The component may be restyled using the following code sample and changing the values of the following token(s).
87
+
88
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../src/styles/tokens.scss) -->
89
+ <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
90
+
91
+ ```scss
92
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
93
+
94
+ :host {
95
+ --ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #{v.$ds-advanced-color-skeleton-background});
96
+ --ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #{v.$ds-advanced-color-skeleton-background});
97
+ --ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #{v.$ds-advanced-color-skeleton-wave});
98
+ }
99
+ ```
100
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js ADDED
@@ -0,0 +1,3 @@
1
+ import { A as AuroSkeleton } from './auro-skeleton.min.js';
2
+
3
+ AuroSkeleton.register();
package/demo/auro-skeleton.min.js ADDED
@@ -0,0 +1,167 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2019 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */
6
+ const t$1=globalThis,e$2=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$3=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s$2),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$2(o,t,s$2)},S$1=(s,o)=>{if(e$2)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
7
+
8
+ /**
9
+ * @license
10
+ * Copyright 2017 Google LLC
11
+ * SPDX-License-Identifier: BSD-3-Clause
12
+ */const{is:i$2,defineProperty:e$1,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$2(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$1(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=h.fromAttribute(s,t.type)??this._$Ej?.get(e)??null,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a$1.reactiveElementVersions??=[]).push("2.1.0");
13
+
14
+ /**
15
+ * @license
16
+ * Copyright 2017 Google LLC
17
+ * SPDX-License-Identifier: BSD-3-Clause
18
+ */
19
+ const t=globalThis,i$1=t.trustedTypes,s$1=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.0");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
20
+
21
+ /**
22
+ * @license
23
+ * Copyright 2017 Google LLC
24
+ * SPDX-License-Identifier: BSD-3-Clause
25
+ */const s=globalThis;class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o=s.litElementPolyfillSupport;o?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.0");
26
+
27
+ var colorCss = i$3`:host{background-color:var(--ds-auro-skeleton-container-color);background-image:linear-gradient(to right,var(--ds-auro-skeleton-container-gradient-color-one) 10%,var(--ds-auro-skeleton-container-gradient-color-two) 40%,var(--ds-auro-skeleton-container-gradient-color-one) 60%)}
28
+ `;
29
+
30
+ var styleCss = i$3`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, .375rem)}@keyframes place-holder-shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}
31
+ `;
32
+
33
+ var tokensCss = i$3`:host{--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #e4e8ec)}
34
+ `;
35
+
36
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
37
+ // See LICENSE in the project root for license information.
38
+
39
+ // ---------------------------------------------------------------------
40
+
41
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
42
+
43
+ class AuroLibraryRuntimeUtils {
44
+
45
+ /* eslint-disable jsdoc/require-param */
46
+
47
+ /**
48
+ * This will register a new custom element with the browser.
49
+ * @param {String} name - The name of the custom element.
50
+ * @param {Object} componentClass - The class to register as a custom element.
51
+ * @returns {void}
52
+ */
53
+ registerComponent(name, componentClass) {
54
+ if (!customElements.get(name)) {
55
+ customElements.define(name, class extends componentClass {});
56
+ }
57
+ }
58
+
59
+ /**
60
+ * Finds and returns the closest HTML Element based on a selector.
61
+ * @returns {void}
62
+ */
63
+ closestElement(
64
+ selector, // selector like in .closest()
65
+ base = this, // extra functionality to skip a parent
66
+ __Closest = (el, found = el && el.closest(selector)) =>
67
+ !el || el === document || el === window
68
+ ? null // standard .closest() returns null for non-found selectors also
69
+ : found
70
+ ? found // found a selector INside this element
71
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
72
+ ) {
73
+ return __Closest(base);
74
+ }
75
+ /* eslint-enable jsdoc/require-param */
76
+
77
+ /**
78
+ * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
79
+ * @param {Object} elem - The element to check.
80
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
81
+ * @returns {void}
82
+ */
83
+ handleComponentTagRename(elem, tagName) {
84
+ const tag = tagName.toLowerCase();
85
+ const elemTag = elem.tagName.toLowerCase();
86
+
87
+ if (elemTag !== tag) {
88
+ elem.setAttribute(tag, true);
89
+ }
90
+ }
91
+
92
+ /**
93
+ * Validates if an element is a specific Auro component.
94
+ * @param {Object} elem - The element to validate.
95
+ * @param {String} tagName - The name of the Auro component to check against.
96
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
97
+ */
98
+ elementMatch(elem, tagName) {
99
+ const tag = tagName.toLowerCase();
100
+ const elemTag = elem.tagName.toLowerCase();
101
+
102
+ return elemTag === tag || elem.hasAttribute(tag);
103
+ }
104
+ }
105
+
106
+ // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
107
+ // See LICENSE in the project root for license information.
108
+
109
+
110
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
111
+ /**
112
+ * The auro-skeleton element provides users a way to indicate the loading of asynchronous content on a page.
113
+ *
114
+ * @attr {String} shape - Renders a circle, oval, or rectangle loader.
115
+ */
116
+
117
+ // build the component class
118
+ class AuroSkeleton extends i {
119
+ constructor() {
120
+ super();
121
+
122
+ /**
123
+ * @private
124
+ */
125
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
126
+ }
127
+
128
+ // function to define props used within the scope of this component
129
+ static get properties() {
130
+ return {
131
+ // ...super.properties,
132
+ };
133
+ }
134
+
135
+ static get styles() {
136
+ return [styleCss, colorCss, tokensCss];
137
+ }
138
+
139
+ /**
140
+ * This will register this element with the browser.
141
+ * @param {string} [name="auro-skeleton"] - The name of element that you want to register to.
142
+ *
143
+ * @example
144
+ * AuroSkeleton.register("custom-skeleton") // this will register this element to <custom-skeleton/>
145
+ *
146
+ */
147
+ static register(name = "auro-skeleton") {
148
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSkeleton);
149
+ }
150
+
151
+ firstUpdated() {
152
+ // Add the tag name as an attribute if it is different than the component name
153
+ this.runtimeUtils.handleComponentTagRename(this, "auro-skeleton");
154
+ }
155
+
156
+ // When using auroElement, use the following attribute and function when hiding content from screen readers.
157
+ // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
158
+
159
+ // function that renders the HTML and CSS into the scope of the component
160
+ render() {
161
+ return x`
162
+ <span class="util_displayHiddenVisually">Loading...</span>
163
+ `;
164
+ }
165
+ }
166
+
167
+ export { AuroSkeleton as A };
package/demo/index.html ADDED
@@ -0,0 +1,56 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-skeleton</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-skeleton's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
+ fetch('./index.md')
44
+ .then((response) => response.text())
45
+ .then((text) => {
46
+ const rawHtml = marked.parse(text);
47
+ document.querySelector('main').innerHTML = rawHtml;
48
+ Prism.highlightAll();
49
+ });
50
+ </script>
51
+ <script type="module" data-demo-script="true" src="./index.min.js"></script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
+ </body>
56
+ </html>
package/demo/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { AuroSkeleton } from "../src/index";
2
+
3
+ AuroSkeleton.register(); // registering to `auro-skeleton`
4
+ AuroSkeleton.register("custom-skeleton");
package/demo/index.md ADDED
@@ -0,0 +1,158 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+ README.md is created by running `npm run build:docs`.
4
+ This file is generated based on a template fetched from `./docs/partials/index.md`
5
+ -->
6
+
7
+ # Skeleton
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ../docs/partials/description.md -->
11
+ The `<auro-skeleton>` custom element is for use when display content takes an extended amount of time to process and render on-screen. This indicator communicates to the user that data is being loaded and that the page is not frozen.
12
+
13
+ [Research](https://www.nngroup.com/articles/progress-indicators/) conducted by the Nielsen Norman Group states that using skeleton states and [loading indicators](https://auro.alaskaair.com/components/auro/loader) improve user satisfaction.
14
+
15
+ The `<auro-skeleton>` element uses animation to convey that the page is still loading in order to reduce user uncertainty.
16
+ <!-- AURO-GENERATED-CONTENT:END -->
17
+
18
+ ## auro-skeleton use cases
19
+
20
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
21
+ <!-- The below content is automatically added from ../docs/partials/useCases.md -->
22
+ The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists.
23
+ <!-- AURO-GENERATED-CONTENT:END -->
24
+
25
+ ## Do not...
26
+
27
+ `<auro-skeleton>` should not be used on action components like `<auro-button>`, `<auro-input>` or `<auro-radio>`.
28
+
29
+ Do not represent a loading state with `<auro-skeleton>` for an entire component such as a toast notification, dropdown menus, or a modal dialog. It is appropriate to use `<auro-skeleton>` for content inside those components, but never for the entire component.
30
+
31
+ ## Default examples
32
+
33
+ The `<auro-skeleton>` API consists of a standardized enumerated `shape` attribute and the use of customized CSS. The following examples illustrate use cases to include `circle`, `oval` and `rectangle`. With the use of CSS the user has infinite options for how the animated skeleton can be used in their loading UI.
34
+
35
+ <div class="exampleWrapper">
36
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
37
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
38
+ <auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
39
+ <auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
40
+ <auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
41
+ <!-- AURO-GENERATED-CONTENT:END -->
42
+ </div>
43
+ <auro-accordion alignRight>
44
+ <span slot="trigger">See code</span>
45
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
46
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
47
+
48
+ ```html
49
+ <auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
50
+ <auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
51
+ <auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
52
+ ```
53
+ <!-- AURO-GENERATED-CONTENT:END -->
54
+ </auro-accordion>
55
+
56
+ ## Be creative
57
+
58
+ Use your imagination. Wherever data can be placed, an `<auro-skeleton>` element can be used. In the following example see how `<auro-skeleton>` is used in place where data will be filled once the process is completed.
59
+
60
+ <div class="exampleWrapper">
61
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/table_example.html) -->
62
+ <!-- The below content is automatically added from ../apiExamples/table_example.html -->
63
+ <table class="auro_table">
64
+ <thead>
65
+ <tr>
66
+ <th>The table header</th>
67
+ <th>The table header</th>
68
+ </tr>
69
+ </thead>
70
+ <tbody>
71
+ <tr>
72
+ <td colspan="2">
73
+ <auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
74
+ </td>
75
+ </tr>
76
+ <tr>
77
+ <td colspan="2">
78
+ <auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
79
+ </td>
80
+ </tr>
81
+ <tr>
82
+ <td colspan="2">
83
+ <auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
84
+ </td>
85
+ </tr>
86
+ </tbody>
87
+ </table>
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+ </div>
90
+ <auro-accordion alignRight>
91
+ <span slot="trigger">See code</span>
92
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/table_example.html) -->
93
+ <!-- The below code snippet is automatically added from ../apiExamples/table_example.html -->
94
+
95
+ ```html
96
+ <table class="auro_table">
97
+ <thead>
98
+ <tr>
99
+ <th>The table header</th>
100
+ <th>The table header</th>
101
+ </tr>
102
+ </thead>
103
+ <tbody>
104
+ <tr>
105
+ <td colspan="2">
106
+ <auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
107
+ </td>
108
+ </tr>
109
+ <tr>
110
+ <td colspan="2">
111
+ <auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
112
+ </td>
113
+ </tr>
114
+ <tr>
115
+ <td colspan="2">
116
+ <auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
117
+ </td>
118
+ </tr>
119
+ </tbody>
120
+ </table>
121
+ ```
122
+ <!-- AURO-GENERATED-CONTENT:END -->
123
+ </auro-accordion>
124
+
125
+ ## Recommended Use and Version Control
126
+
127
+ There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-skeleton` custom element is defined automatically.
128
+
129
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroSkeleton.register(name)` method and pass in a unique name.
130
+
131
+ ```js
132
+ import { AuroSkeleton } from '@aurodesignsystem/auro-skeleton/class';
133
+
134
+ AuroSkeleton.register('custom-skeleton');
135
+ ```
136
+
137
+ This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` element.
138
+
139
+ <div class="exampleWrapper exampleWrapper--flex">
140
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
141
+ <!-- The below content is automatically added from ../apiExamples/custom.html -->
142
+ <custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
143
+ <custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
144
+ <custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
145
+ <!-- AURO-GENERATED-CONTENT:END -->
146
+ </div>
147
+ <auro-accordion alignRight>
148
+ <span slot="trigger">See code</span>
149
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
150
+ <!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
151
+
152
+ ```html
153
+ <custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
154
+ <custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
155
+ <custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
156
+ ```
157
+ <!-- AURO-GENERATED-CONTENT:END -->
158
+ </auro-accordion>
package/demo/index.min.js ADDED
@@ -0,0 +1,4 @@
1
+ import { A as AuroSkeleton } from './auro-skeleton.min.js';
2
+
3
+ AuroSkeleton.register(); // registering to `auro-skeleton`
4
+ AuroSkeleton.register("custom-skeleton");
package/dist/auro-skeleton-BBxn-8_4.js ADDED
@@ -0,0 +1,6 @@
1
+ import{css as e,LitElement as o,html as t}from"lit";var a=e`:host{background-color:var(--ds-auro-skeleton-container-color);background-image:linear-gradient(to right,var(--ds-auro-skeleton-container-gradient-color-one) 10%,var(--ds-auro-skeleton-container-gradient-color-two) 40%,var(--ds-auro-skeleton-container-gradient-color-one) 60%)}
2
+ `,n=e`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, .375rem)}@keyframes place-holder-shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}
3
+ `,r=e`:host{--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #e4e8ec)}
4
+ `;class i{registerComponent(e,o){customElements.get(e)||customElements.define(e,class extends o{})}closestElement(e,o=this,t=(o,a=o&&o.closest(e))=>o&&o!==document&&o!==window?a||t(o.getRootNode().host):null){return t(o)}handleComponentTagRename(e,o){const t=o.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,!0)}elementMatch(e,o){const t=o.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}}class s extends o{constructor(){super(),this.runtimeUtils=new i}static get properties(){return{}}static get styles(){return[n,a,r]}static register(e="auro-skeleton"){i.prototype.registerComponent(e,s)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-skeleton")}render(){return t`
5
+ <span class="util_displayHiddenVisually">Loading...</span>
6
+ `}}export{s as A};
package/dist/index.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import * as lit_html from 'lit-html';
2
+ import * as lit from 'lit';
3
+ import { LitElement } from 'lit';
4
+
5
+ declare class s extends LitElement {
6
+ static get properties(): {};
7
+ static get styles(): lit.CSSResult[];
8
+ static register(e?: string): void;
9
+ runtimeUtils: i;
10
+ firstUpdated(): void;
11
+ render(): lit_html.TemplateResult<1>;
12
+ }
13
+
14
+ declare class i {
15
+ registerComponent(e: any, o: any): void;
16
+ closestElement(e: any, o?: this, t?: (o: any, a?: any) => any): any;
17
+ handleComponentTagRename(e: any, o: any): void;
18
+ elementMatch(e: any, o: any): any;
19
+ }
20
+
21
+ export { s as AuroSkeleton };
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export{A as AuroSkeleton}from"./auro-skeleton-BBxn-8_4.js";import"lit";
package/dist/registered.js ADDED
@@ -0,0 +1 @@
1
+ import{A as r}from"./auro-skeleton-BBxn-8_4.js";import"lit";r.register();