skeleton-webcomponent-loader 2.1.4 → 3.0.0

package/dist/cjs/loader.cjs.js

@@ -1,35 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-BKUCi6S8.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
-const index = require('./index-b5d2dca0.js');
-
-/*
- Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    // NOTE!! This fn cannot use async/await!
-    // @ts-ignore
-    if (!(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-b3e497ca.js'); }).then(() => {
-            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
-                return index.plt.$cssShim$.i();
-            }
-            else {
-                // for better minification
-                return 0;
-            }
-        });
-    }
-    return index.promiseResolve();
-};
-
-const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return index.bootstrapLazy([["nb-skeleton.cjs",[[1,"nb-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1],"customStyles":[1,"custom-styles"],"showWarnings":[4,"show-warnings"]}]]]], options);
-  });
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["nb-skeleton.cjs",[[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"]}]]]], options);
 };
 
+exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;

package/dist/cjs/nb-skeleton.cjs.entry.js

@@ -1,130 +1,184 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b5d2dca0.js');
+var index = require('./index-BKUCi6S8.js');
 
 const ALLOWED_ANIMATIONS = ['progress', 'progress-dark', 'pulse', 'false'];
 
-const skeletonCss = ".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}}";
+const skeletonCss = () => `.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}}`;
 
-let Skeleton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Number of rows of current skeleton type
-     *
-     * @memberof Skeleton
-     */
-    this.count = 1;
-    /**
-     * Variant of the skeleton - circle or row
-     *
-     * @type {('circle' | '')}
-     * @memberof Skeleton
-     */
-    this.variant = 'text';
-    /**
-     * Width of the skeleton ex. 100px, 100%, auto etc.
-     *
-     *
-     * @type {string}
-     * @memberof Skeleton
-     */
-    this.width = null;
-    /**
-     * Height of the skeleton ex. 100px, 100%, auto etc.
-     *
-     * @type {string}
-     * @memberof Skeleton
-     */
-    this.height = null;
-    /**
-     * MarginBottom of the skeleton ex. 10px, 0 etc.
-     *
-     * @type {string}
-     * @memberof Skeleton
-     */
-    this.marginBottom = null;
-    /**
-     * Animation type
-     *
-     * @type {('progress' | 'progress-dark' | 'pulse' | 'false')}
-     * @memberof Skeleton
-     */
-    this.animation = 'progress';
-    /**
-     * Custom css styles (background/margins/width/height etc.)
-     *
-     * @type {({[k: string]: string} | string)}
-     * @memberof Skeleton
-     */
-    this.customStyles = {};
-    /**
-     * Whether to show warnings for the wrong animation type/custom styles
-     *
-     * @memberof Skeleton
-     */
-    this.showWarnings = true;
-    this.items = [];
-  }
-  componentWillLoad() {
-    this.init();
-  }
-  componentWillUpdate() {
-    this.init();
-  }
-  init() {
-    this.items.length = this.count;
-    this.items.fill(1);
-    if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
-      if (this.showWarnings) {
-        console.warn(`\`Skeleton\` need to receive 'animation' as: ${ALLOWED_ANIMATIONS.join(', ')}. Forcing default to "progress".`);
-      }
-      this.animation = 'progress';
+const Skeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Number of rows of current skeleton type
+         *
+         * @memberof Skeleton
+         */
+        this.count = 1;
+        /**
+         * Accessible text announced by screen readers while content is loading
+         *
+         * @type {string}
+         * @memberof Skeleton
+         */
+        this.label = 'Loading...';
+        /**
+         * Wrapper element tag that carries ARIA attributes (e.g. div, span, section)
+         *
+         * @type {string}
+         * @memberof Skeleton
+         */
+        this.as = 'div';
+        /**
+         * Render rows directly in the host element and apply ARIA attributes to host
+         *
+         * @type {boolean}
+         * @memberof Skeleton
+         */
+        this.asChild = false;
+        /**
+         * Variant of the skeleton - circle or row
+         *
+         * @type {('circle' | '')}
+         * @memberof Skeleton
+         */
+        this.variant = 'text';
+        /**
+         * Width of the skeleton ex. 100px, 100%, auto etc.
+         *
+         *
+         * @type {string}
+         * @memberof Skeleton
+         */
+        this.width = null;
+        /**
+         * Height of the skeleton ex. 100px, 100%, auto etc.
+         *
+         * @type {string}
+         * @memberof Skeleton
+         */
+        this.height = null;
+        /**
+         * MarginBottom of the skeleton ex. 10px, 0 etc.
+         *
+         * @type {string}
+         * @memberof Skeleton
+         */
+        this.marginBottom = null;
+        /**
+         * Animation type
+         *
+         * @type {('progress' | 'progress-dark' | 'pulse' | 'false')}
+         * @memberof Skeleton
+         */
+        this.animation = 'progress';
+        /**
+         * Custom css styles (background/margins/width/height etc.)
+         *
+         * @type {({[k: string]: string} | string)}
+         * @memberof Skeleton
+         */
+        this.customStyles = {};
+        /**
+         * Whether to show warnings for the wrong animation type/custom styles
+         *
+         * @memberof Skeleton
+         */
+        this.showWarnings = true;
+        this.items = [];
+        this.parsedCustomStyles = {};
+    }
+    componentWillLoad() {
+        this.init();
+    }
+    componentWillUpdate() {
+        this.init();
+    }
+    init() {
+        this.items.length = this.count;
+        this.items.fill(1);
+        this.parsedCustomStyles = {};
+        if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
+            if (this.showWarnings) {
+                console.warn(`\`Skeleton\` need to receive 'animation' as: ${ALLOWED_ANIMATIONS.join(', ')}. Forcing default to "progress".`);
+            }
+            this.animation = 'progress';
+        }
+        if (this.customStyles && typeof this.customStyles === 'string') {
+            try {
+                const parsed = JSON.parse(this.customStyles);
+                if (parsed && typeof parsed === 'object') {
+                    this.parsedCustomStyles = parsed;
+                }
+            }
+            catch (error) {
+                if (this.showWarnings) {
+                    console.warn(`can't parse styles`, this.customStyles);
+                }
+            }
+        }
+        else if (this.customStyles && typeof this.customStyles === 'object') {
+            this.parsedCustomStyles = this.customStyles;
+        }
     }
-    if (this.customStyles && typeof this.customStyles === 'string') {
-      try {
-        this.customStyles = JSON.parse(this.customStyles);
-      }
-      catch (error) {
+    get style() {
+        let dimenssionsStyles = {
+            width: null,
+            height: null,
+            marginBottom: null
+        };
+        if (this.width) {
+            dimenssionsStyles.width = this.width;
+        }
+        if (this.height) {
+            dimenssionsStyles.height = this.height;
+        }
+        if (this.marginBottom) {
+            dimenssionsStyles.marginBottom = this.marginBottom;
+        }
+        const styles = this.parsedCustomStyles;
+        return Object.assign(Object.assign({}, dimenssionsStyles), styles);
+    }
+    resolveWrapperTag() {
+        const tag = (this.as || '').trim().toLowerCase();
+        if (/^[a-z][a-z0-9-]*$/.test(tag)) {
+            return tag;
+        }
         if (this.showWarnings) {
-          console.warn(`can't parse styles`, this.customStyles);
+            console.warn('`Skeleton` `as` prop must be a valid html tag name. Falling back to "div".');
         }
-      }
+        return 'div';
     }
-  }
-  get style() {
-    let dimenssionsStyles = {
-      width: null,
-      height: null,
-      marginBottom: null
-    };
-    if (this.width) {
-      dimenssionsStyles.width = this.width;
+    get ariaProps() {
+        return {
+            'aria-busy': 'true',
+            'aria-label': this.label,
+            'aria-valuemin': '0',
+            'aria-valuemax': '100',
+            'aria-valuetext': this.label,
+            role: 'progressbar',
+        };
     }
-    if (this.height) {
-      dimenssionsStyles.height = this.height;
+    renderRows() {
+        return this.items.map((_, index$1) => {
+            return (index.h("span", { key: index$1, class: {
+                    circle: this.variant === 'circle',
+                    rect: this.variant === 'rect',
+                    progress: this.animation === 'progress',
+                    'progress-dark': this.animation === 'progress-dark',
+                    pulse: this.animation === 'pulse',
+                    skeleton: true
+                }, "aria-hidden": "true", style: this.style }));
+        });
     }
-    if (this.marginBottom) {
-      dimenssionsStyles.marginBottom = this.marginBottom;
+    render() {
+        if (this.asChild) {
+            return index.h(index.Host, Object.assign({}, this.ariaProps), this.renderRows());
+        }
+        const WrapperTag = this.resolveWrapperTag();
+        return (index.h(index.Host, null, index.h(WrapperTag, Object.assign({}, this.ariaProps), this.renderRows())));
     }
-    const styles = typeof this.customStyles === 'object' ? this.customStyles : {};
-    return Object.assign(Object.assign({}, dimenssionsStyles), styles);
-  }
-  render() {
-    return this.items.map((_, index$1) => {
-      return (index.h("span", { key: index$1, class: {
-          circle: this.variant === 'circle',
-          rect: this.variant === 'rect',
-          progress: this.animation === 'progress',
-          'progress-dark': this.animation === 'progress-dark',
-          pulse: this.animation === 'pulse',
-          skeleton: true
-        }, "aria-busy": "true", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
-    });
-  }
 };
-Skeleton.style = skeletonCss;
+Skeleton.style = skeletonCss();
 
 exports.nb_skeleton = Skeleton;

package/dist/cjs/skeleton-webcomponent.cjs.js

@@ -1,23 +1,25 @@
 'use strict';
 
-const index = require('./index-b5d2dca0.js');
+var index = require('./index-BKUCi6S8.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
  */
-const patchBrowser = () => {
-    {
-        // shim css vars
-        index.plt.$cssShim$ = index.win.__cssshim;
-    }
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('skeleton-webcomponent.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('skeleton-webcomponent.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
 };
 
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["nb-skeleton.cjs",[[1,"nb-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1],"customStyles":[1,"custom-styles"],"showWarnings":[4,"show-warnings"]}]]]], options);
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["nb-skeleton.cjs",[[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"]}]]]], options);
 });
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,11 +1,12 @@
 {
   "entries": [
-    "./components/skeleton/skeleton.js"
+    "components/skeleton/skeleton.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.13.0",
-    "typescriptVersion": "4.3.5"
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []