@haiilo/catalyst 0.4.0 → 0.5.3

package/dist/collection/components/cat-scrollable/cat-scrollable.js

@@ -1,309 +0,0 @@
-import { Component, Element, Event, h, Prop } from '@stencil/core';
-import { fromEvent, merge, Subject } from 'rxjs';
-import { distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';
-export class CatScrollable {
-  constructor() {
-    this.init = new Subject();
-    this.destroyed = new Subject();
-    /** Flags to enable/disable scroll shadowX. */
-    this.shadowX = true;
-    /** Flags to enable/disable scroll shadowY. */
-    this.shadowY = true;
-    /** Flags to enable/disable overflowX. */
-    this.overflowX = true;
-    /** Flags to enable/disable overflowY. */
-    this.overflowY = true;
-    /** Flag to enable/disable overscroll behavior. */
-    this.overscroll = true;
-    /**
-     * Flag to fire an initial event after content initialization.
-     */
-    this.scrolledInit = true;
-    /**
-     * Buffer to be used to calculate the scroll distance.
-     */
-    this.scrolledBuffer = 0;
-  }
-  componentDidRender() {
-    if (this.scrollElement) {
-      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));
-    }
-    this.attachEmitter('left', this.scrolledLeft, this.scrolledBuffer);
-    this.attachEmitter('right', this.scrolledRight, this.scrolledBuffer);
-    this.attachEmitter('bottom', this.scrolledBottom, this.scrolledBuffer);
-    this.attachEmitter('top', this.scrolledTop, this.scrolledBuffer);
-    merge(this.init, this.scrolled)
-      .pipe(map(() => ({
-      top: this.getScrollOffset('top') > 0,
-      left: this.getScrollOffset('left') > 0,
-      right: this.getScrollOffset('right') > 0,
-      bottom: this.getScrollOffset('bottom') > 0
-    })), distinctUntilChanged(), takeUntil(this.destroyed))
-      .subscribe(({ top, left, right, bottom }) => {
-      this.toggleClass('cat-scrollable-top', top);
-      this.toggleClass('cat-scrollable-left', left);
-      this.toggleClass('cat-scrollable-right', right);
-      this.toggleClass('cat-scrollable-bottom', bottom);
-    });
-  }
-  componentDidLoad() {
-    if (this.scrolledInit) {
-      this.init.next();
-    }
-  }
-  disconnectedCallback() {
-    this.init.complete();
-    this.destroyed.next();
-    this.destroyed.complete();
-  }
-  render() {
-    return [
-      h("div", { class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) },
-        this.shadowY && h("div", { class: "shadow-top" }),
-        this.shadowX && h("div", { class: "shadow-left" }),
-        this.shadowX && h("div", { class: "shadow-right" }),
-        this.shadowY && h("div", { class: "shadow-bottom" })),
-      h("div", { ref: el => (this.scrollElement = el), class: {
-          'scrollable-content': true,
-          'scroll-x': this.overflowX,
-          'scroll-y': this.overflowY,
-          'no-overscroll': !this.overscroll
-        } },
-        h("slot", null))
-    ];
-  }
-  attachEmitter(from, emitter, buffer) {
-    merge(this.init, this.scrolled)
-      .pipe(map(() => this.getScrollOffset(from)))
-      .pipe(map(offset => offset <= buffer))
-      .pipe(distinctUntilChanged())
-      .pipe(filter(isLower => isLower))
-      .pipe(takeUntil(this.destroyed))
-      .subscribe(() => emitter.emit());
-  }
-  getScrollOffset(from) {
-    if (this.scrollElement) {
-      switch (from) {
-        case 'top':
-          return this.scrollElement.scrollTop;
-        case 'left':
-          return this.scrollElement.scrollLeft;
-        case 'right':
-          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;
-        case 'bottom':
-          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;
-        default:
-          return 0;
-      }
-    }
-    return 0;
-  }
-  toggleClass(name, value) {
-    var _a, _b;
-    if (value) {
-      (_a = this.scrollWrapperElement) === null || _a === void 0 ? void 0 : _a.classList.add(name);
-    }
-    else {
-      (_b = this.scrollWrapperElement) === null || _b === void 0 ? void 0 : _b.classList.remove(name);
-    }
-  }
-  static get is() { return "cat-scrollable"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-scrollable.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-scrollable.css"]
-  }; }
-  static get properties() { return {
-    "shadowX": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flags to enable/disable scroll shadowX."
-      },
-      "attribute": "shadow-x",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "shadowY": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flags to enable/disable scroll shadowY."
-      },
-      "attribute": "shadow-y",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "overflowX": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flags to enable/disable overflowX."
-      },
-      "attribute": "overflow-x",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "overflowY": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flags to enable/disable overflowY."
-      },
-      "attribute": "overflow-y",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "overscroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flag to enable/disable overscroll behavior."
-      },
-      "attribute": "overscroll",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "scrolledInit": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flag to fire an initial event after content initialization."
-      },
-      "attribute": "scrolled-init",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "scrolledBuffer": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Buffer to be used to calculate the scroll distance."
-      },
-      "attribute": "scrolled-buffer",
-      "reflect": false,
-      "defaultValue": "0"
-    }
-  }; }
-  static get events() { return [{
-      "method": "scrolledTop",
-      "name": "scrolledTop",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the content is fully scrolled to the top."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "scrolledLeft",
-      "name": "scrolledLeft",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the content is fully scrolled to the left."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "scrolledRight",
-      "name": "scrolledRight",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the content is fully scrolled to the right."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "scrolledBottom",
-      "name": "scrolledBottom",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the content is fully scrolled to the bottom."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=cat-scrollable.js.map

package/dist/collection/components/cat-scrollable/cat-scrollable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private scrolled!: Observable<Event>;\n\n  @Element() el!: HTMLElement;\n\n  /** Flags to enable/disable scroll shadowX. */\n  @Prop()\n  shadowX = true;\n\n  /** Flags to enable/disable scroll shadowY. */\n  @Prop()\n  shadowY = true;\n\n  /** Flags to enable/disable overflowX. */\n  @Prop()\n  overflowX = true;\n\n  /** Flags to enable/disable overflowY. */\n  @Prop()\n  overflowY = true;\n\n  /** Flag to enable/disable overscroll behavior. */\n  @Prop()\n  overscroll = true;\n\n  /**\n   * Flag to fire an initial event after content initialization.\n   */\n  @Prop() scrolledInit = true;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop()\n  scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n    }\n    this.attachEmitter('left', this.scrolledLeft, this.scrolledBuffer);\n    this.attachEmitter('right', this.scrolledRight, this.scrolledBuffer);\n    this.attachEmitter('bottom', this.scrolledBottom, this.scrolledBuffer);\n    this.attachEmitter('top', this.scrolledTop, this.scrolledBuffer);\n    merge(this.init, this.scrolled)\n      .pipe(\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (this.scrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {this.shadowY && <div class=\"shadow-top\"></div>}\n        {this.shadowX && <div class=\"shadow-left\"></div>}\n        {this.shadowX && <div class=\"shadow-right\"></div>}\n        {this.shadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': this.overflowX,\n          'scroll-y': this.overflowY,\n          'no-overscroll': !this.overscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>, buffer: number) {\n    merge(this.init, this.scrolled)\n      .pipe(map(() => this.getScrollOffset(from)))\n      .pipe(map(offset => offset <= buffer))\n      .pipe(distinctUntilChanged())\n      .pipe(filter(isLower => isLower))\n      .pipe(takeUntil(this.destroyed))\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}

package/dist/collection/components/cat-skeleton/cat-skeleton.css

@@ -1,177 +0,0 @@
-/**
- * Auto-generated file. Do not edit directly.
- */
-/* stylelint-disable value-keyword-case */
-/* stylelint-enable value-keyword-case */
-:host {
-  /**
-   * @prop --background: The background color of the skeleton.
-   * @prop --highlight: The highlight color of the skeleton.
-   * @prop --speed: The animation speed.
-   */
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  --background: #ebecf0;
-  --highlight: #d7dbe0;
-  --speed: 2s;
-}
-
-:host([variant=square]),
-:host([variant=circle]) {
-  display: inline-flex;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-:host([variant=head]) {
-  margin-bottom: 0.5rem;
-}
-
-:host([variant=body]) {
-  margin-bottom: 1rem;
-}
-
-.cat-skeleton {
-  display: block;
-  border-radius: 0.25rem;
-  background: var(--background);
-}
-
-.cat-skeleton-circle {
-  border-radius: 10rem;
-}
-
-.cat-skeleton-xs.cat-skeleton-rectangle {
-  width: var(--width, 100%);
-  height: var(--height, 1.5rem);
-}
-.cat-skeleton-xs.cat-skeleton-square, .cat-skeleton-xs.cat-skeleton-circle {
-  width: var(--width, 1.5rem);
-  height: var(--height, 1.5rem);
-}
-.cat-skeleton-xs.cat-skeleton-head, .cat-skeleton-xs.cat-skeleton-body {
-  width: var(--width, var(--line-width, 100%));
-}
-.cat-skeleton-xs.cat-skeleton-head {
-  height: calc(0.9375rem - 4px);
-  margin: calc((1.25rem - 0.9375rem + 4px) * 0.5) 0;
-}
-.cat-skeleton-xs.cat-skeleton-body {
-  height: calc(0.75rem - 4px);
-  margin: calc((1rem - 0.75rem + 4px) * 0.5) 0;
-}
-
-.cat-skeleton-s.cat-skeleton-rectangle {
-  width: var(--width, 100%);
-  height: var(--height, 2rem);
-}
-.cat-skeleton-s.cat-skeleton-square, .cat-skeleton-s.cat-skeleton-circle {
-  width: var(--width, 2rem);
-  height: var(--height, 2rem);
-}
-.cat-skeleton-s.cat-skeleton-head, .cat-skeleton-s.cat-skeleton-body {
-  width: var(--width, var(--line-width, 100%));
-}
-.cat-skeleton-s.cat-skeleton-head {
-  height: calc(1.125rem - 4px);
-  margin: calc((1.5rem - 1.125rem + 4px) * 0.5) 0;
-}
-.cat-skeleton-s.cat-skeleton-body {
-  height: calc(0.875rem - 4px);
-  margin: calc((1rem - 0.875rem + 4px) * 0.5) 0;
-}
-
-.cat-skeleton-m.cat-skeleton-rectangle {
-  width: var(--width, 100%);
-  height: var(--height, 2.5rem);
-}
-.cat-skeleton-m.cat-skeleton-square, .cat-skeleton-m.cat-skeleton-circle {
-  width: var(--width, 2.5rem);
-  height: var(--height, 2.5rem);
-}
-.cat-skeleton-m.cat-skeleton-head, .cat-skeleton-m.cat-skeleton-body {
-  width: var(--width, var(--line-width, 100%));
-}
-.cat-skeleton-m.cat-skeleton-head {
-  height: calc(1.25rem - 4px);
-  margin: calc((1.5rem - 1.25rem + 4px) * 0.5) 0;
-}
-.cat-skeleton-m.cat-skeleton-body {
-  height: calc(0.9375rem - 4px);
-  margin: calc((1.25rem - 0.9375rem + 4px) * 0.5) 0;
-}
-
-.cat-skeleton-l.cat-skeleton-rectangle {
-  width: var(--width, 100%);
-  height: var(--height, 3rem);
-}
-.cat-skeleton-l.cat-skeleton-square, .cat-skeleton-l.cat-skeleton-circle {
-  width: var(--width, 3rem);
-  height: var(--height, 3rem);
-}
-.cat-skeleton-l.cat-skeleton-head, .cat-skeleton-l.cat-skeleton-body {
-  width: var(--width, var(--line-width, 100%));
-}
-.cat-skeleton-l.cat-skeleton-head {
-  height: calc(1.5rem - 4px);
-  margin: calc((1.75rem - 1.5rem + 4px) * 0.5) 0;
-}
-.cat-skeleton-l.cat-skeleton-body {
-  height: calc(1.125rem - 4px);
-  margin: calc((1.5rem - 1.125rem + 4px) * 0.5) 0;
-}
-
-.cat-skeleton-xl.cat-skeleton-rectangle {
-  width: var(--width, 100%);
-  height: var(--height, 3.5rem);
-}
-.cat-skeleton-xl.cat-skeleton-square, .cat-skeleton-xl.cat-skeleton-circle {
-  width: var(--width, 3.5rem);
-  height: var(--height, 3.5rem);
-}
-.cat-skeleton-xl.cat-skeleton-head, .cat-skeleton-xl.cat-skeleton-body {
-  width: var(--width, var(--line-width, 100%));
-}
-.cat-skeleton-xl.cat-skeleton-head {
-  height: calc(1.75rem - 4px);
-  margin: calc((2rem - 1.75rem + 4px) * 0.5) 0;
-}
-.cat-skeleton-xl.cat-skeleton-body {
-  height: calc(1.25rem - 4px);
-  margin: calc((1.5rem - 1.25rem + 4px) * 0.5) 0;
-}
-
-.cat-skeleton-sheen {
-  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);
-  background-size: 300% 100%;
-  animation: sheen var(--speed) ease-in-out infinite;
-}
-
-.cat-skeleton-pulse {
-  position: relative;
-  overflow: hidden;
-}
-.cat-skeleton-pulse::before {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--highlight);
-  animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;
-  opacity: 0;
-}
-
-@keyframes sheen {
-  0% {
-    background-position: right;
-  }
-}
-@keyframes pulse {
-  50% {
-    opacity: 1;
-  }
-}

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

@@ -1,131 +0,0 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-/**
- * Skeletons are used to show where content will eventually be drawn.
- */
-export class CatSkeleton {
-  constructor() {
-    /**
-     * The animation style of the skeleton.
-     */
-    this.effect = 'sheen';
-    /**
-     * The rendering style of the skeleton.
-     */
-    this.variant = 'rectangle';
-    /**
-     * The size of the skeleton. If the variant is set to "head", the size values
-     * "xs" to "xl" translate to the head levels `h1` to `h5`.
-     */
-    this.size = 'm';
-  }
-  render() {
-    return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
-        'cat-skeleton': true,
-        [`cat-skeleton-${this.effect}`]: Boolean(this.effect),
-        [`cat-skeleton-${this.variant}`]: Boolean(this.variant),
-        [`cat-skeleton-${this.size}`]: Boolean(this.size)
-      } })))));
-  }
-  get count() {
-    switch (this.variant) {
-      case 'head':
-        return Math.max(1, this.lines || 1);
-      case 'body':
-        return Math.max(1, this.lines || 3);
-      default:
-        return 1;
-    }
-  }
-  get style() {
-    return this.variant === 'head' || this.variant === 'body'
-      ? {
-        '--line-width': `${this.random(50, 100)}%`
-      }
-      : undefined;
-  }
-  random(min, max) {
-    return Math.floor(Math.random() * (max - min + 1) + min);
-  }
-  static get is() { return "cat-skeleton"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-skeleton.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-skeleton.css"]
-  }; }
-  static get properties() { return {
-    "effect": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'plain' | 'sheen' | 'pulse'",
-        "resolved": "\"plain\" | \"pulse\" | \"sheen\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The animation style of the skeleton."
-      },
-      "attribute": "effect",
-      "reflect": false,
-      "defaultValue": "'sheen'"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'rectangle' | 'square' | 'circle' | 'head' | 'body'",
-        "resolved": "\"body\" | \"circle\" | \"head\" | \"rectangle\" | \"square\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The rendering style of the skeleton."
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'rectangle'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
-        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the skeleton. If the variant is set to \"head\", the size values\n\"xs\" to \"xl\" translate to the head levels `h1` to `h5`."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "lines": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The number of text lines to be rendered for \"head\" and \"body\" variants.\nDefaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\nvariants."
-      },
-      "attribute": "lines",
-      "reflect": false
-    }
-  }; }
-}
-//# sourceMappingURL=cat-skeleton.js.map

package/dist/collection/components/cat-skeleton/cat-skeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cat-skeleton.js","sourceRoot":"","sources":["../../../src/components/cat-skeleton/cat-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,WAAW;EALxB;IAME;;OAEG;IACK,WAAM,GAAgC,OAAO,CAAC;IAEtD;;OAEG;IACK,YAAO,GAAwD,WAAW,CAAC;IAEnF;;;OAGG;IACK,SAAI,GAAkC,GAAG,CAAC;GAiDnD;EAxCC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CACvC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACrD,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACvD,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAClD,GACI,CACR,CAAC,CACG,CACR,CAAC;EACJ,CAAC;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO,EAAE;MACpB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;EACH,CAAC;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;MACvD,CAAC,CAAC;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;MACH,CAAC,CAAC,SAAS,CAAC;EAChB,CAAC;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;EAC3D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * The size of the skeleton. If the variant is set to \"head\", the size values\n   * \"xs\" to \"xl\" translate to the head levels `h1` to `h5`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              'cat-skeleton': true,\n              [`cat-skeleton-${this.effect}`]: Boolean(this.effect),\n              [`cat-skeleton-${this.variant}`]: Boolean(this.variant),\n              [`cat-skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"]}