@haiilo/catalyst 0.2.3 → 0.4.0

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

@@ -0,0 +1,309 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,177 @@
+/**
+ * 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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1 @@
+{"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"]}