kemet-ui 1.3.1 → 2.0.0

package/dist/components/kemet-rotator/kemet-rotator.js

@@ -1,211 +1,122 @@
-import { html, css, LitElement } from 'lit';
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-
-export default class KemetRotator extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-      }
-
-      .rotator__slide {
-        pointer-events: none;
-      }
-
-      .rotator__slide--active {
-        pointer-events: auto;
-      }
-
-      /* fade effect */
-      :host([effect="fade"]) .rotator {
-        display: inline-flex;
-        flex-wrap: nowrap;
-        flex-direction: row;
-      }
-
-      :host([effect="fade"]) .rotator__slide {
-        width: 100%;
-        flex: none;
-        opacity: 0;
-        box-sizing: border-box;
-        transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
-      }
-
-      :host([effect="fade"]) .rotator__slide:not(:first-child) {
-        margin-left: -100%; /* this is the bulk of the overlay trick */
-      }
-
-      :host([effect="fade"]) .rotator__slide--active {
-        opacity: 1;
-      }
-
-      /* flip effect */
-      :host([effect="flip"]) .rotator {
-        display: flex;
-        position: relative;
-
-        perspective: 500;
-      }
-
-      :host([effect="flip"]) .rotator__slide {
-        display: block;
-        width: auto;
-        position: absolute;
-        top: -20px;
-        left: 0;
-
-        opacity: 0;
-
-        transform: rotateX(90deg);
-        transform-origin: 0% 0%;
-        transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
-      }
-
-      :host([effect="flip"]) .rotator__slide--active {
-        top: 0;
-        opacity: 1;
-
-        transform: rotateX(0deg);
-      }
-
-      :host([effect="flip"]) .rotator__slide--prev {
-        top: 40px;;
-        transform: rotateX(-90deg);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The index number for the current slide.
-       */
-      activeSlide: {
-        type: Number,
-      },
-      /**
-       * The width of the rotator block.
-       */
-      width: {
-        type: String,
-      },
-      /**
-       * The height of the rotator block.
-       */
-      height: {
-        type: String,
-      },
-      /**
-       * Text in the rotator. Supports HTML.
-       */
-      messages: {
-        type: Array,
-      },
-      /**
-       * The transition effect type.
-       */
-      effect: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * How fast, in seconds, each slide lasts. Stop the rotator with 0.
-       */
-      rotationSpeed: {
-        type: Number,
-        attribute: 'rotation-speed',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.activeSlide = 0;
-    this.messages = [];
-    this.effect = 'fade';
-    this.rotationSpeed = 3;
-    this.width = 'auto';
-    this.height = 'auto';
-  }
-
-  firstUpdated() {
-    // standard properties
-    this.prevSlide = null;
-
-    window.addEventListener('resize', this.setDimensions.bind(this));
-  }
-
-  updated(changed) {
-    const widthHasChanged = !!changed.get('width');
-    const heightHasChanged = !!changed.get('height');
-
-    this.setDimensions();
-
-    // only trigger slide updates when width and height has not changed
-    if (!widthHasChanged && !heightHasChanged) {
-      setTimeout(() => {
-        if (this.rotationSpeed > 0) {
-          this.nextSlide();
+import { stylesRotator } from './styles';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-rotator
+ * @summary A component that rotates through an array of text.
+ *
+ * @prop {number} activeSlide - The index number for the current slide.
+ * @prop {string} width - The width of the rotator block.
+ * @prop {string} height - The height of the rotator block.
+ * @prop {array} messages - Text in the rotator. Supports HTML.
+ * @prop {string} effect - The transition effect type.
+ * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
+ *
+ * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
+ *
+ */
+let KemetRotator = class KemetRotator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activeSlide = 0;
+        this.width = 'auto';
+        this.height = 'auto';
+        this.messages = [];
+        this.effect = 'fade';
+        this.rotationSpeed = 3;
+    }
+    firstUpdated() {
+        // standard properties
+        this.prevSlide = null;
+        window.addEventListener('resize', this.setDimensions.bind(this));
+    }
+    updated(changed) {
+        const widthHasChanged = !!changed.get('width');
+        const heightHasChanged = !!changed.get('height');
+        this.setDimensions();
+        // only trigger slide updates when width and height has not changed
+        if (!widthHasChanged && !heightHasChanged) {
+            setTimeout(() => {
+                if (this.rotationSpeed > 0) {
+                    this.nextSlide();
+                }
+            }, this.rotationSpeed * 1000);
         }
-      }, this.rotationSpeed * 1000);
     }
-  }
-
-  render() {
-    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';
-    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';
-
-    return html`
+    render() {
+        const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';
+        const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';
+        return html `
       <span class="rotator" style="${setWidth} ${setHeight}">
         ${this.makeMessages()}
       </span>
     `;
-  }
-
-  makeMessages() {
-    const messages = this.messages.map((message, index) => {
-      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';
-      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';
-
-      return html`
+    }
+    makeMessages() {
+        const messages = this.messages.map((message, index) => {
+            const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';
+            const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';
+            return html `
         <span class="rotator__slide ${setActiveClass} ${setPrevClass}">
           ${unsafeHTML(message)}
         </span>
       `;
-    });
-
-    return messages;
-  }
-
-  setDimensions() {
-    if (this.effect === 'flip') {
-      this.width = `${this.offsetWidth}px`;
-
-      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');
-      let tallest = 0;
-
-      slides.forEach((slide) => {
-        if (slide.offsetHeight > tallest) {
-          tallest = slide.offsetHeight;
+        });
+        return messages;
+    }
+    setDimensions() {
+        if (this.effect === 'flip') {
+            this.width = `${this.offsetWidth}px`;
+            const slides = this.shadowRoot.querySelectorAll('.rotator__slide');
+            let tallest = 0;
+            slides.forEach((slide) => {
+                if (slide.offsetHeight > tallest) {
+                    tallest = slide.offsetHeight;
+                }
+            });
+            this.height = `${tallest}px`;
         }
-      });
-
-      this.height = `${tallest}px`;
     }
-  }
-
-  nextSlide() {
-    if (this.activeSlide < this.messages.length - 1) {
-      this.activeSlide += 1;
-      this.prevSlide = this.activeSlide - 1;
-    } else {
-      this.activeSlide = 0;
-      this.prevSlide = this.messages.length - 1;
+    nextSlide() {
+        if (this.activeSlide < this.messages.length - 1) {
+            this.activeSlide += 1;
+            this.prevSlide = this.activeSlide - 1;
+        }
+        else {
+            this.activeSlide = 0;
+            this.prevSlide = this.messages.length - 1;
+        }
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-rotator') || customElements.define('kemet-rotator', KemetRotator);
+};
+KemetRotator.styles = [stylesRotator];
+__decorate([
+    property({ type: Number })
+], KemetRotator.prototype, "activeSlide", void 0);
+__decorate([
+    property({ type: String })
+], KemetRotator.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], KemetRotator.prototype, "height", void 0);
+__decorate([
+    property({ type: Array })
+], KemetRotator.prototype, "messages", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetRotator.prototype, "effect", void 0);
+__decorate([
+    property({ type: Number, attribute: 'rotation-speed' })
+], KemetRotator.prototype, "rotationSpeed", void 0);
+__decorate([
+    state()
+], KemetRotator.prototype, "prevSlide", void 0);
+KemetRotator = __decorate([
+    customElement('kemet-rotator')
+], KemetRotator);
+export default KemetRotator;
+//# sourceMappingURL=kemet-rotator.js.map

package/dist/components/kemet-rotator/kemet-rotator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-rotator.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/kemet-rotator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from './styles';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {string} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: any[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'fade';\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    const messages = this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n\n    return messages;\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n"]}

package/dist/components/kemet-rotator/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesRotator: import("lit").CSSResult;

package/dist/components/kemet-rotator/styles.js

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+export const stylesRotator = css `
+  :host {
+    display: flex;
+  }
+
+  .rotator__slide {
+    pointer-events: none;
+  }
+
+  .rotator__slide--active {
+    pointer-events: auto;
+  }
+
+  /* fade effect */
+  :host([effect="fade"]) .rotator {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+
+  :host([effect="fade"]) .rotator__slide {
+    width: 100%;
+    flex: none;
+    opacity: 0;
+    box-sizing: border-box;
+    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
+  }
+
+  :host([effect="fade"]) .rotator__slide:not(:first-child) {
+    margin-left: -100%; /* this is the bulk of the overlay trick */
+  }
+
+  :host([effect="fade"]) .rotator__slide--active {
+    opacity: 1;
+  }
+
+  /* flip effect */
+  :host([effect="flip"]) .rotator {
+    display: flex;
+    position: relative;
+
+    perspective: 500;
+  }
+
+  :host([effect="flip"]) .rotator__slide {
+    display: block;
+    width: auto;
+    position: absolute;
+    top: -20px;
+    left: 0;
+
+    opacity: 0;
+
+    transform: rotateX(90deg);
+    transform-origin: 0% 0%;
+    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
+  }
+
+  :host([effect="flip"]) .rotator__slide--active {
+    top: 0;
+    opacity: 1;
+
+    transform: rotateX(0deg);
+  }
+
+  :host([effect="flip"]) .rotator__slide--prev {
+    top: 40px;;
+    transform: rotateX(-90deg);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/kemet-rotator/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"]}

package/dist/components/kemet-rotator/types.d.ts

@@ -0,0 +1,9 @@
+export declare type TypeEffect = 'fade' | 'flip';
+export interface KemetRotator extends HTMLElement {
+    activeSlide?: number;
+    width?: string;
+    height?: string;
+    messages?: any[];
+    effect?: TypeEffect;
+    rotationSpeed?: number;
+}

package/dist/components/kemet-rotator/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/kemet-rotator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'fade' | 'flip';\n\nexport interface KemetRotator extends HTMLElement {\n  activeSlide?: number,\n  width?: string,\n  height?: string,\n  messages?: any[],\n  effect?: TypeEffect,\n  rotationSpeed?: number,\n}\n"]}

package/dist/components/kemet-scroll-link/kemet-scroll-link.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-link
+ * @summary A component that adds a smooth scrolling link to an target..
+ *
+ * @prop {object} element - A DOM element that establishes the context of scrolling.
+ * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.
+ * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.
+ * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.
+ *
+ */
+export default class KemetScrollLink extends LitElement {
+    static styles: import("lit").CSSResult[];
+    element: HTMLElement | Window;
+    target: HTMLElement;
+    xOffset: number;
+    yOffset: number;
+    isSmoothSupported: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    handleKeyup(event: any): void;
+    handleScroll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-link': KemetScrollLink;
+    }
+}

package/dist/components/kemet-scroll-link/kemet-scroll-link.js

@@ -1,97 +1,82 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
-export default class KemetScrollLink extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        cursor: pointer;
-        display: inline-block;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * A DOM element that establishes the context of scrolling.
-       */
-      element: {
-        type: Object,
-      },
-      /**
-       * A DOM element that represents the destination of the scroll link.
-       * If no target is specified it will default to the top of the page.
-       */
-      target: {
-        type: Object,
-      },
-      /**
-       * Allows the horizontal scrolling to stop short of the given value.
-       */
-      xOffset: {
-        type: Number,
-        attribute: 'x-offset',
-        reflect: true,
-      },
-      /**
-       * Allows the vertical scrolling to stop short of the given value.
-       */
-      yOffset: {
-        type: Number,
-        attribute: 'y-offset',
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.element = this.element || window;
-    this.target = this.target || document.querySelector('body');
-    this.xOffset = 0;
-    this.yOffset = 0;
-  }
-
-  firstUpdated() {
-    // standard properties
-    this.keyCodes = {
-      ENTER: 13,
-      SPACE: 32,
-    };
-    this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;
-  }
-
-  render() {
-    return html`
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyCodes } from '../../utilities/misc/constants';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-link
+ * @summary A component that adds a smooth scrolling link to an target..
+ *
+ * @prop {object} element - A DOM element that establishes the context of scrolling.
+ * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.
+ * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.
+ * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.
+ *
+ */
+let KemetScrollLink = class KemetScrollLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.element = window;
+        this.target = document.querySelector('body');
+        this.xOffset = 0;
+        this.yOffset = 0;
+    }
+    firstUpdated() {
+        // standard properties
+        this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;
+    }
+    render() {
+        return html `
       <div tabindex="0" @click=${() => this.handleScroll()} @keyup=${event => this.handleKeyup(event)}>
         <slot></slot>
       </div>
     `;
-  }
-
-  handleKeyup(event) {
-    if (event.keyCode === this.keyCodes.ENTER || event.keyCode === this.keyCodes.SPACE) {
-      this.handleScroll();
     }
-  }
-
-  handleScroll() {
-    const scrollTop = this.target.offsetTop + this.yOffset;
-    const scrollLeft = this.target.offsetLeft + this.xOffset;
-
-    if (this.isSmoothSupported) {
-      this.element.scrollTo({
-        top: scrollTop,
-        left: scrollLeft,
-        behavior: 'smooth',
-      });
-    } else {
-      this.element.scrollTo(scrollLeft, scrollTop);
+    handleKeyup(event) {
+        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
+            this.handleScroll();
+        }
+    }
+    handleScroll() {
+        const scrollTop = this.target.offsetTop + this.yOffset;
+        const scrollLeft = this.target.offsetLeft + this.xOffset;
+        if (this.isSmoothSupported) {
+            this.element.scrollTo({
+                top: scrollTop,
+                left: scrollLeft,
+                behavior: 'smooth',
+            });
+        }
+        else {
+            this.element.scrollTo(scrollLeft, scrollTop);
+        }
+    }
+};
+KemetScrollLink.styles = [css `
+    :host {
+      cursor: pointer;
+      display: inline-block;
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-scroll-link') || customElements.define('kemet-scroll-link', KemetScrollLink);
+  `];
+__decorate([
+    property({ type: Object })
+], KemetScrollLink.prototype, "element", void 0);
+__decorate([
+    property({ type: Object })
+], KemetScrollLink.prototype, "target", void 0);
+__decorate([
+    property({ type: Number, attribute: 'x-offset', reflect: true })
+], KemetScrollLink.prototype, "xOffset", void 0);
+__decorate([
+    property({ type: Number, attribute: 'y-offset', reflect: true })
+], KemetScrollLink.prototype, "yOffset", void 0);
+__decorate([
+    state()
+], KemetScrollLink.prototype, "isSmoothSupported", void 0);
+KemetScrollLink = __decorate([
+    customElement('kemet-scroll-link')
+], KemetScrollLink);
+export default KemetScrollLink;
+//# sourceMappingURL=kemet-scroll-link.js.map

package/dist/components/kemet-scroll-link/kemet-scroll-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-scroll-link.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-link/kemet-scroll-link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAAvD;;QASE,YAAO,GAAyB,MAAM,CAAC;QAGvC,WAAM,GAAgB,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAGrD,YAAO,GAAW,CAAC,CAAC;QAGpB,YAAO,GAAW,CAAC,CAAC;IAsCtB,CAAC;IAjCC,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;;KAGhG,CAAC;IACJ,CAAC;IAED,WAAW,CAAC,KAAK;QACf,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,KAAK,EAAE;YACxE,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAED,YAAY;QACV,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;gBACpB,GAAG,EAAE,SAAS;gBACd,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;SAC9C;IACH,CAAC;CACF,CAAA;AAvDQ,sBAAM,GAAI,CAAC,GAAG,CAAA;;;;;GAKpB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACY;AAGvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAC0B;AAGrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7C;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC7C;AAGpB;IADC,KAAK,EAAE;0DACmB;AArBR,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAwDnC;eAxDoB,eAAe","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { keyCodes } from '../../utilities/misc/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-link\n * @summary A component that adds a smooth scrolling link to an target..\n *\n * @prop {object} element - A DOM element that establishes the context of scrolling.\n * @prop {object} target - A DOM element that represents the destination of the scroll link. If no target is specified it will default to the top of the page.\n * @prop {number} xOffset - Allows the horizontal scrolling to stop short of the given value.\n * @prop {number} yOffset - Allows the vertical scrolling to stop short of the given value.\n *\n */\n\n@customElement('kemet-scroll-link')\nexport default class KemetScrollLink extends LitElement {\n  static styles =  [css`\n    :host {\n      cursor: pointer;\n      display: inline-block;\n    }\n  `];\n\n  @property({ type: Object })\n  element: HTMLElement | Window = window;\n\n  @property({ type: Object })\n  target: HTMLElement = document.querySelector('body');\n\n  @property({ type: Number, attribute: 'x-offset', reflect: true })\n  xOffset: number = 0;\n\n  @property({ type: Number, attribute: 'y-offset', reflect: true })\n  yOffset: number = 0;\n\n  @state()\n  isSmoothSupported: boolean;\n\n  firstUpdated() {\n    // standard properties\n    this.isSmoothSupported = 'scrollBehavior' in document.documentElement.style;\n  }\n\n  render() {\n    return html`\n      <div tabindex=\"0\" @click=${() => this.handleScroll()} @keyup=${event => this.handleKeyup(event)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleKeyup(event) {\n    if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {\n      this.handleScroll();\n    }\n  }\n\n  handleScroll() {\n    const scrollTop = this.target.offsetTop + this.yOffset;\n    const scrollLeft = this.target.offsetLeft + this.xOffset;\n\n    if (this.isSmoothSupported) {\n      this.element.scrollTo({\n        top: scrollTop,\n        left: scrollLeft,\n        behavior: 'smooth',\n      });\n    } else {\n      this.element.scrollTo(scrollLeft, scrollTop);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-link': KemetScrollLink\n  }\n}\n\n"]}

package/dist/components/kemet-scroll-link/types.d.ts

@@ -0,0 +1,6 @@
+export interface KemetScrollLinkInterface extends HTMLElement {
+    element?: HTMLElement | Window;
+    target?: HTMLElement;
+    xOffset?: number;
+    yOffset?: number;
+}

package/dist/components/kemet-scroll-link/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map