skeleton-webcomponent-loader 2.1.4 → 3.0.0

package/dist/collection/components/skeleton/skeleton.js

@@ -1,314 +1,470 @@
-import { Component, h, Prop } from '@stencil/core';
-import { ALLOWED_ANIMATIONS } from './skeleton.constants';
+import { h, Host } from "@stencil/core";
+import { ALLOWED_ANIMATIONS } from "./skeleton.constants";
 export class Skeleton {
-  constructor() {
-    /**
-     * 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';
+    constructor() {
+        /**
+         * 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 = {};
     }
-    if (this.customStyles && typeof this.customStyles === 'string') {
-      try {
-        this.customStyles = JSON.parse(this.customStyles);
-      }
-      catch (error) {
+    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;
+        }
+    }
+    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',
+        };
+    }
+    renderRows() {
+        return this.items.map((_, index) => {
+            return (h("span", { key: index, 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 }));
+        });
+    }
+    render() {
+        if (this.asChild) {
+            return h(Host, Object.assign({}, this.ariaProps), this.renderRows());
+        }
+        const WrapperTag = this.resolveWrapperTag();
+        return (h(Host, null, h(WrapperTag, Object.assign({}, this.ariaProps), this.renderRows())));
     }
-    if (this.height) {
-      dimenssionsStyles.height = this.height;
+    static get is() { return "nb-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skeleton.scss"]
+        };
     }
-    if (this.marginBottom) {
-      dimenssionsStyles.marginBottom = this.marginBottom;
+    static get styleUrls() {
+        return {
+            "$": ["skeleton.css"]
+        };
     }
-    const styles = typeof this.customStyles === 'object' ? this.customStyles : {};
-    return Object.assign(Object.assign({}, dimenssionsStyles), styles);
-  }
-  render() {
-    return this.items.map((_, index) => {
-      return (h("span", { key: index, 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 }));
-    });
-  }
-  static get is() { return "nb-skeleton"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["skeleton.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["skeleton.css"]
-  }; }
-  static get properties() { return {
-    "count": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Number of rows of current skeleton type"
-      },
-      "attribute": "count",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'circle' | 'rect' | 'text'",
-        "resolved": "\"circle\" | \"rect\" | \"text\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "type",
-            "text": "{('circle' | '')}"
-          }, {
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Variant of the skeleton - circle or row"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'text'"
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "type",
-            "text": "{string}"
-          }, {
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Width of the skeleton ex. 100px, 100%, auto etc."
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "height": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "type",
-            "text": "{string}"
-          }, {
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Height of the skeleton ex. 100px, 100%, auto etc."
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "marginBottom": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "type",
-            "text": "{string}"
-          }, {
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "MarginBottom of the skeleton ex. 10px, 0 etc."
-      },
-      "attribute": "margin-bottom",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "animation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'progress' | 'progress-dark' | 'pulse' | 'false'",
-        "resolved": "\"false\" | \"progress\" | \"progress-dark\" | \"pulse\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "type",
-            "text": "{('progress' | 'progress-dark' | 'pulse' | 'false')}"
-          }, {
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Animation type"
-      },
-      "attribute": "animation",
-      "reflect": false,
-      "defaultValue": "'progress'"
-    },
-    "customStyles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "{ [key: string]: string } | string",
-        "resolved": "string | { [key: string]: string; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "type",
-            "text": "{({[k: string]: string} | string)}"
-          }, {
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Custom css styles (background/margins/width/height etc.)"
-      },
-      "attribute": "custom-styles",
-      "reflect": false,
-      "defaultValue": "{}"
-    },
-    "showWarnings": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "memberof",
-            "text": "Skeleton"
-          }],
-        "text": "Whether to show warnings for the wrong animation type/custom styles"
-      },
-      "attribute": "show-warnings",
-      "reflect": false,
-      "defaultValue": "true"
+    static get properties() {
+        return {
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Number of rows of current skeleton type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count",
+                "defaultValue": "1"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Accessible text announced by screen readers while content is loading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Loading...'"
+            },
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Wrapper element tag that carries ARIA attributes (e.g. div, span, section)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "as",
+                "defaultValue": "'div'"
+            },
+            "asChild": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Render rows directly in the host element and apply ARIA attributes to host"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "as-child",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'rect' | 'text'",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{('circle' | '')}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Variant of the skeleton - circle or row"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Width of the skeleton ex. 100px, 100%, auto etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "null"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Height of the skeleton ex. 100px, 100%, auto etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "null"
+            },
+            "marginBottom": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "MarginBottom of the skeleton ex. 10px, 0 etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margin-bottom",
+                "defaultValue": "null"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'progress' | 'progress-dark' | 'pulse' | 'false'",
+                    "resolved": "\"false\" | \"progress\" | \"progress-dark\" | \"pulse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{('progress' | 'progress-dark' | 'pulse' | 'false')}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Animation type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'progress'"
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string } | string",
+                    "resolved": "string | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{({[k: string]: string} | string)}"
+                        }, {
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Custom css styles (background/margins/width/height etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-styles",
+                "defaultValue": "{}"
+            },
+            "showWarnings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "memberof",
+                            "text": "Skeleton"
+                        }],
+                    "text": "Whether to show warnings for the wrong animation type/custom styles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-warnings",
+                "defaultValue": "true"
+            }
+        };
     }
-  }; }
 }