{"file":"patternlib-headline.entry.js","mappings":"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","names":[],"sources":["./src/components/patternlib-headline/patternlib-headline.scss?tag=patternlib-headline&encapsulation=shadow","./src/components/patternlib-headline/patternlib-headline.tsx"],"sourcesContent":["@import '../../global/animations.scss';\n\n$cap-height-ratio: 0.72;\n$displaySizes: 1, 2;\n$headlines: 1, 2, 3, 4, 5, 6;\n\n.headline-container {\n  overflow: hidden;\n  @apply font-head;\n\n  &.white-font {\n    @apply text-white;\n  }\n\n  .card-separator {\n    @apply bg-black;\n\n    &.white {\n      @apply bg-white;\n    }\n  }\n\n  &.none .card-separator {\n    @apply bg-transparent;\n  }\n\n  @each $headline in $displaySizes {\n    .display-#{$headline} {\n      @apply break-words;\n      @apply inline;\n      font-size: var(--display#{$headline}-font-size);\n      line-height: var(--display#{$headline}-line-height);\n    }\n\n    &.display-#{$headline} .card-separator-top {\n      width: var(--headline-width);\n      height: var(--seperator-height-h#{$headline});\n      margin-bottom: calc(0.12 * calc(var(--display#{$headline}-font-size) * #{$cap-height-ratio}));\n    }\n\n    &.display-#{$headline} .card-separator-bottom {\n      width: var(--headline-width);\n      height: var(--seperator-height-h#{$headline});\n      margin-top: calc(0.3 * calc(var(--display#{$headline}-font-size) * #{$cap-height-ratio}));\n    }\n\n    &.display-#{$headline} .card-separator-bottom-only {\n      width: calc(var(--display#{$headline}-font-size) * 2 * #{$cap-height-ratio});\n      height: var(--seperator-height-h#{$headline});\n      margin-top: calc(0.3 * calc(var(--display#{$headline}-font-size) * #{$cap-height-ratio})) !important;\n    }\n  }\n\n  @each $headline in $headlines {\n    h#{$headline} {\n      @apply break-words;\n      @apply inline;\n      font-size: var(--h#{$headline}-font-size);\n      line-height: var(--h#{$headline}-line-height);\n    }\n\n    &.h#{$headline} .card-separator-top {\n      width: var(--headline-width);\n      height: var(--seperator-height-h#{$headline});\n      margin-bottom: calc(0.12 * calc(var(--h#{$headline}-font-size) * #{$cap-height-ratio}));\n    }\n\n    &.h#{$headline} .card-separator-bottom {\n      width: var(--headline-width);\n      height: var(--seperator-height-h#{$headline});\n      margin-top: calc(0.3 * calc(var(--h#{$headline}-font-size) * #{$cap-height-ratio}));\n    }\n\n    &.h#{$headline} .card-separator-bottom-only {\n      width: calc(var(--h#{$headline}-font-size) * 2 * #{$cap-height-ratio});\n      height: var(--seperator-height-h#{$headline});\n      margin-top: calc(0.3 * calc(var(--h#{$headline}-font-size) * #{$cap-height-ratio})) !important;\n    }\n  }\n\n  &.later {\n    opacity: 0;\n    .card-separator {\n      transform: scale(0, 1);\n    }\n  }\n\n  &.now {\n    animation-name: fadeIn;\n    animation-duration: 1.5s;\n    animation-delay: 0s;\n    animation-fill-mode: backwards;\n\n    &.hero {\n      animation-delay: 1s;\n      .card-separator {\n        animation-delay: 1s;\n      }\n    }\n\n    .card-separator {\n      background-color: var(--color-black);\n      transform-origin: left;\n      animation-name: scaleSeparator;\n      animation-duration: 2s;\n      animation-delay: 0s;\n      animation-fill-mode: backwards;\n      animation-timing-function: ease-out;\n\n      &.white {\n        @apply bg-white;\n      }\n    }\n  }\n}\n\n.white-font {\n  color: white !important;\n}\n","import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { ClassNames } from '../../utils/interfaces';\n\n@Component({\n  tag: 'patternlib-headline',\n  styleUrl: 'patternlib-headline.scss',\n  shadow: true,\n})\nexport class PatternlibHeadline {\n  @Element() hostElement: HTMLPatternlibHeadlineElement;\n\n  private headlineElement: HTMLElement;\n  private headingClass: string;\n\n  /**\n   * Define if headline should be animated or not.\n   */\n  @Prop() animation: 'now' | 'never' | 'later' = 'now';\n\n  /**\n   * The animation delay.\n   */\n  @Prop() animationDelay: '0s';\n\n  /**\n   * Set the headline text.\n   */\n  @Prop() headline = '';\n\n  /**\n   * Define the heading tag.\n   */\n  @Prop({ mutable: true }) headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'display-1' | 'display-2' = 'display-1';\n\n  /**\n   * Define the hyphen style for the heading.\n   */\n  @Prop() hyphens: 'auto' | 'manual' | 'none' = 'manual';\n\n  /**\n   * Define the width of the container.\n   */\n  @Prop() width = 'auto';\n\n  /**\n   * Define the separator style.\n   */\n  @Prop() separator: 'none' | 'top-and-bottom' | 'bottom' = 'top-and-bottom';\n\n  /**\n   * Define the color of the headline text and separator\n   */\n  @Prop() color: 'black' | 'white' = 'black';\n\n  /**\n   * Internal state to save the headline width.\n   */\n  @State() headlineWidth: number;\n\n  /**\n   * Internal state to save the animation type.\n   */\n  @State() animationClass: 'now' | 'never' | 'later' = 'now';\n\n  @Listen('resize', { target: 'window' })\n  updateOnResize() {\n    return this.updateHeadline();\n  }\n\n  @Watch('animation')\n  updateAnimationClass() {\n    this.animationClass = this.animation;\n  }\n\n  /**\n   * Public function to animate the headline\n   */\n  @Method()\n  async animateHeadline(animation: 'now' | 'never' | 'later') {\n    this.animationClass = animation;\n  }\n\n  /**\n   * Public function to update the headline\n   */\n  @Method()\n  async updateHeadline() {\n    if (this.headlineElement != null) {\n      const elementWidth = this.headlineElement.offsetWidth;\n      this.hostElement.style.setProperty('--headline-width', `${elementWidth}px`);\n    }\n  }\n\n  componentWillLoad() {\n    this.animationClass = this.animation;\n    this.headingClass = this.headingTag;\n    if (this.headingTag == 'display-1') {\n      this.headingTag = 'h1';\n    }\n    if (this.headingTag == 'display-2') {\n      this.headingTag = 'h2';\n    }\n  }\n\n  componentDidRender() {\n    return this.updateHeadline();\n  }\n\n  render() {\n    const HeadingTag = `${this.headingTag}`;\n\n    const separatorTop = () => {\n      if (this.separator == 'top-and-bottom') {\n        return <div class={separatorTopClass} style={seperatorStyles}></div>;\n      } else {\n        return null;\n      }\n    };\n    const separatorBottom = () => {\n      if (this.separator == 'top-and-bottom' || this.separator == 'bottom') {\n        return <div class={separatorBottomClass} style={seperatorStyles}></div>;\n      } else {\n        return null;\n      }\n    };\n\n    const seperatorStyles = { 'animation-delay': this.animationDelay };\n\n    const headlineStyles = { 'width': this.width, 'animation-delay': this.animationDelay };\n    const headingStyles = {\n      hyphens: this.hyphens,\n    };\n\n    const headlineClass: ClassNames = {\n      'headline-container': true,\n      [this.separator]: true,\n      [this.animationClass]: true,\n      [this.headingClass]: true,\n      'white-font': this.color === 'white',\n    };\n    const separatorTopClass: ClassNames = {\n      'card-separator': true,\n      'card-separator-top': true,\n      'white': this.color === 'white',\n    };\n    const separatorBottomClass: ClassNames = {\n      'card-separator': true,\n      'card-separator-bottom': this.separator == 'top-and-bottom',\n      'card-separator-bottom-only': this.separator == 'bottom',\n      'white': this.color === 'white',\n    };\n\n    return (\n      <Host>\n        <div class={headlineClass} style={headlineStyles}>\n          {separatorTop()}\n          <HeadingTag class={this.headingClass} style={headingStyles} ref={el => (this.headlineElement = el as HTMLElement)}>\n            {this.headline}\n            <slot></slot>\n          </HeadingTag>\n          {separatorBottom()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}