skeleton-webcomponent-loader 2.1.1 → 3.0.0

package/dist/{custom-elements → components}/index.d.ts

@@ -1,24 +1,8 @@
-/* SkeletonWebcomponent custom elements bundle */
-
-import type { Components, JSX } from "../types/components";
-
-interface NbSkeleton extends Components.NbSkeleton, HTMLElement {}
-export const NbSkeleton: {
-  prototype: NbSkeleton;
-  new (): NbSkeleton;
-};
-
 /**
- * Utility to define all custom elements within this package using the tag name provided in the component's source. 
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. The component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
- * method instead to define custom elements individually, or to provide a different tag name.
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
  */
-export declare const defineCustomElements: (opts?: any) => void;
+export declare const getAssetPath: (path: string) => string;
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -27,19 +11,25 @@ export declare const defineCustomElements: (opts?: any) => void;
  * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
  * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
  */
 export declare const setAssetPath: (path: string) => void;
 
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
 
-export type { Components, JSX };
-
 export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";

package/dist/components/nb-skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NbSkeleton extends Components.NbSkeleton, HTMLElement {}
+export const NbSkeleton: {
+    prototype: NbSkeleton;
+    new (): NbSkeleton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nb-skeleton.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as t,h as s,Host as i,transformTag as r}from"@stencil/core/internal/client";const o=["progress","progress-dark","pulse","false"],n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.count=1,this.label="Loading...",this.as="div",this.asChild=!1,this.variant="text",this.width=null,this.height=null,this.marginBottom=null,this.animation="progress",this.customStyles={},this.showWarnings=!0,this.items=[],this.parsedCustomStyles={}}componentWillLoad(){this.init()}componentWillUpdate(){this.init()}init(){if(this.items.length=this.count,this.items.fill(1),this.parsedCustomStyles={},o.includes(this.animation)||(this.showWarnings&&console.warn(`\`Skeleton\` need to receive 'animation' as: ${o.join(", ")}. Forcing default to "progress".`),this.animation="progress"),this.customStyles&&"string"==typeof this.customStyles)try{const e=JSON.parse(this.customStyles);e&&"object"==typeof e&&(this.parsedCustomStyles=e)}catch(e){this.showWarnings&&console.warn("can't parse styles",this.customStyles)}else this.customStyles&&"object"==typeof this.customStyles&&(this.parsedCustomStyles=this.customStyles)}get style(){let e={width:null,height:null,marginBottom:null};this.width&&(e.width=this.width),this.height&&(e.height=this.height),this.marginBottom&&(e.marginBottom=this.marginBottom);const t=this.parsedCustomStyles;return Object.assign(Object.assign({},e),t)}resolveWrapperTag(){const e=(this.as||"").trim().toLowerCase();return/^[a-z][a-z0-9-]*$/.test(e)?e:(this.showWarnings&&console.warn('`Skeleton` `as` prop must be a valid html tag name. Falling back to "div".'),"div")}get ariaProps(){return{"aria-busy":"true","aria-label":this.label,"aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":this.label,role:"progressbar"}}renderRows(){return this.items.map(((e,t)=>s("span",{key:t,class:{circle:"circle"===this.variant,rect:"rect"===this.variant,progress:"progress"===this.animation,"progress-dark":"progress-dark"===this.animation,pulse:"pulse"===this.animation,skeleton:!0},"aria-hidden":"true",style:this.style})))}render(){if(this.asChild)return s(i,Object.assign({},this.ariaProps),this.renderRows());const e=this.resolveWrapperTag();return s(i,null,s(e,Object.assign({},this.ariaProps),this.renderRows()))}static get style(){return".skeleton{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;overflow:hidden;position:relative;background:var(--skeleton-background, #eff1f6) no-repeat;border-radius:var(--skeleton-border-radius, 4px);width:var(--skeleton-width, 100%);height:var(--skeleton-height, 20px);display:inline-block;margin-bottom:var(--skeleton-margin-bottom, 10px);will-change:transform}.skeleton:after,.skeleton:before{-webkit-box-sizing:border-box;box-sizing:border-box}.skeleton.circle{width:var(--skeleton-width, 40px);height:var(--skeleton-height, 40px);margin-bottom:var(--skeleton-margin-bottom, 5px);border-radius:var(--skeleton-border-radius, 50%)}.skeleton.rect{border-radius:var(--skeleton-border-radius, 0px)}.skeleton.progress,.skeleton.progress-dark{-webkit-animation:progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;animation:progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;background-size:200px 100%}.skeleton.progress{background-image:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0))}.skeleton.progress-dark{background-image:-webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(0, 0, 0, 0.2)), to(transparent));background-image:linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent)}.skeleton.pulse{-webkit-animation:pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;animation:pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;-webkit-animation-delay:0.5s;animation-delay:0.5s}@media (prefers-reduced-motion: reduce){.skeleton.pulse,.skeleton.progress-dark,.skeleton.progress{-webkit-animation:none;animation:none}.skeleton.progress,.skeleton.progress-dark{background-image:none}}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@-webkit-keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}"}},[1,"nb-skeleton",{count:[2],label:[1],as:[1],asChild:[4,"as-child"],variant:[1],width:[1],height:[1],marginBottom:[1,"margin-bottom"],animation:[1],customStyles:[1,"custom-styles"],showWarnings:[4,"show-warnings"]}]),a=n,l=function(){"undefined"!=typeof customElements&&["nb-skeleton"].forEach((e=>{"nb-skeleton"===e&&(customElements.get(r(e))||customElements.define(r(e),n))}))};export{a as NbSkeleton,l as defineCustomElement}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };