{"version":3,"sources":["../src/elements/scroll-nav.ts","../src/styles/elements/scroll-nav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesScrollNav } from '../styles/elements/scroll-nav';\n\nexport const effects = ['sticky', 'resize'] as const;\nexport enum EnumEffects {\n  Sticky = 'sticky',\n  Resize = 'resize'\n}\nexport type TypeEffects = typeof effects[number];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-nav\n * @summary An element that transforms at a scroll point.\n *\n * @prop {TypeEffect} effect - Determines where the transform point is activated. Values include: (sticky | resize)\n * @prop {boolean} transform - Whether the nav has shifted into a new state.\n * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.\n *\n * @cssproperty --kemet-scroll-nav-padding - The padding of the nav.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.\n *\n */\n\n@customElement('kemet-scroll-nav')\nexport default class KemetScrollNav extends LitElement {\n  static styles = [stylesScrollNav];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffects = EnumEffects.Sticky;\n\n  @property({ type: Boolean, reflect: true })\n  transform: boolean = false;\n\n  @property({ type: Number })\n  offset: number = 0;\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  firstUpdated() {\n    const stickPoint = this.offsetTop;\n    const elementHeight = this.offsetHeight;\n\n    window.addEventListener('scroll', () => {\n      // we pass stickPoint and elementHeight as recorded constants\n      // so that it does not update for each call to handleScroll\n      this.handleScroll(stickPoint, elementHeight);\n    });\n  }\n\n  handleScroll(stickPoint: number, elementHeight: number) {\n    const transformPoint = (this.effect === 'sticky')\n      ? stickPoint + this.offset\n      : elementHeight + this.offset;\n\n    this.transform = window.pageYOffset >= transformPoint;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-nav': KemetScrollNav\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesScrollNav = css`\n  :host {\n    --kemet-scroll-nav-padding: 1rem 2rem;\n    --kemet-scroll-nav-background: rgb(var(--kemet-color-gray-50));\n    --kemet-scroll-nav-transition: 300ms;\n    --kemet-scroll-nav-resize-height: 400px;\n    --kemet-scroll-nav-resize-height-transformed: 100px;\n\n    display: block;\n    box-sizing: border-box;\n    padding: var(--kemet-scroll-nav-padding);\n    background-color: var(--kemet-scroll-nav-background);\n    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;\n  }\n\n  :host([transform]),\n  :host([effect=\"resize\"]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n  }\n\n  :host([effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height);\n  }\n\n  :host([transform][effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height-transformed);\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,YAAY,YAAY;AACjC,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAEb,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADExB,IAAM,UAAU,CAAC,UAAU,QAAQ;AACnC,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,YAAS;AACT,EAAAA,aAAA,YAAS;AAFC,SAAAA;AAAA,GAAA;AA2BZ,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAAvD;AAAA;AAIE,kBAAsB;AAGtB,qBAAqB;AAGrB,kBAAiB;AAAA;AAAA,EAEjB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,eAAe;AACb,UAAM,aAAa,KAAK;AACxB,UAAM,gBAAgB,KAAK;AAE3B,WAAO,iBAAiB,UAAU,MAAM;AAGtC,WAAK,aAAa,YAAY,aAAa;AAAA,IAC7C,CAAC;AAAA,EACH;AAAA,EAEA,aAAa,YAAoB,eAAuB;AACtD,UAAM,iBAAkB,KAAK,WAAW,WACpC,aAAa,KAAK,SAClB,gBAAgB,KAAK;AAEzB,SAAK,YAAY,OAAO,eAAe;AAAA,EACzC;AACF;AApCqB,eACZ,SAAS,CAAC,eAAe;AAGhC;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,eAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,eAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,eAUnB;AAVmB,iBAArB;AAAA,EADC,cAAc,kBAAkB;AAAA,GACZ;","names":["EnumEffects"]}