@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/esm/stzh-homepage-service-highlights.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-homepage-service-highlights.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.scss?tag=stzh-homepage-service-highlights&encapsulation=scoped","src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.tsx"],"sourcesContent":["/**\n * @prop --background-color-topnews: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n */\n\n:host {\n  --background-color-topnews: #{$topnewsBackgroundColor};\n  --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n}\n\n.stzh-homepage-service-highlights {\n  display: grid;\n\n  &__topnews,\n  &__mostsearched {\n    display: flex;\n    flex-direction: column;\n  }\n\n  &--has-topnews {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n\n  /**\n   * Top news.\n   */\n\n  .stzh-topnews-item {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-left: space('large');\n    padding-right: space('large');\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  .stzh-topnews-item--has-link {\n    transition: background-color 150ms ease;\n    text-decoration: none;\n\n    &:hover {\n      background-color: var(--stzh-color-secondary40);\n    }\n  }\n\n  .stzh-topnews-item--highlighted {\n    background-color: var(--stzh-color-lemonyellow50);\n  }\n\n  .stzh-topnews-item--highlighted.stzh-topnews-item--has-link {\n    &:hover {\n      background-color: var(--stzh-color-lemonyellow60);\n    }\n  }\n\n  .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-primary70);\n  }\n\n  .stzh-topnews-item--highlighted .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-secondary60);\n  }\n\n  .stzh-topnews-item.stzh-topnews-item--has-link:not(.stzh-topnews-item--highlighted):hover .stzh-topnews-item__label {\n    --color: var(--stzh-color-primary80);\n  }\n\n  .stzh-topnews-item--highlighted:hover .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__topnews {\n    background-color: var(--background-color-topnews);\n  }\n\n  /**\n   * Most searched.\n   */\n  &__mostsearched {\n    background-color: var(--background-color-mostsearched);\n    @include spaceCurve('padding-top', 'regular');\n    padding-right: space('large');\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-left: space('large');\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n  }\n\n  &:not(&--has-topnews) &__mostsearched {\n    @include mq($from: medium) {\n      display: grid;\n      gap: 0 space('large');\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n      padding-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  .stzh-mostsearched-item {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'tiny');\n  }\n\n  .stzh-mostsearched-item__link {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    --hover-color: $linkColor;\n\n    transition: transform 150ms ease;\n\n    &:hover {\n      @include mq($from: medium) {\n        transform: translateX(20px);\n      }\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhTopnewsItem } from \"../../index\";\n\n@Component({\n  tag: \"stzh-homepage-service-highlights\",\n  styleUrl: \"stzh-homepage-service-highlights.scss\",\n  scoped: true,\n})\nexport class StzhHomepageServiceHighlights {\n  @Element() element: HTMLStzhHomepageServiceHighlightsElement;\n\n  /** Top news items */\n  @Prop() topnewsItems: StzhTopnewsItem[] | string = [];\n  private _topnewsItems: StzhTopnewsItem[] = [];\n\n  /** Most searched items */\n  @Prop() mostsearchedItems: StzhMostsearchedItem[] | string = [];\n  private _mostsearchedItems: StzhMostsearchedItem[] = [];\n\n  @Watch(\"topnewsItems\")\n  topnewsItemsWatcher(newValue: StzhTopnewsItem[] | string) {\n    if (!newValue) {\n      this._topnewsItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        const parsed = JSON.parse(newValue);\n        this._topnewsItems = this.ensureSingleHighlight(parsed);\n      } catch (e) {\n        this._topnewsItems = [];\n      }\n    } else {\n      this._topnewsItems = this.ensureSingleHighlight(newValue);\n    }\n  }\n\n  @Watch(\"mostsearchedItems\")\n  mostsearchedItemsWatcher(newValue: StzhMostsearchedItem[] | string) {\n    if (!newValue) {\n      this._mostsearchedItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._mostsearchedItems = JSON.parse(newValue);\n      } catch (e) {\n        this._mostsearchedItems = [];\n      }\n    } else {\n      this._mostsearchedItems = newValue;\n    }\n  }\n\n  private ensureSingleHighlight(items: StzhTopnewsItem[]): StzhTopnewsItem[] {\n    let foundHighlighted = false;\n\n    return items.map(item => {\n      if (item.isHighlighted) {\n        if (!foundHighlighted) {\n          foundHighlighted = true;\n          return item;\n        } else {\n          // Remove highlight from subsequent items\n          return { ...item, isHighlighted: false };\n        }\n      }\n      return item;\n    });\n  }\n\n  private init = () => {\n    this.topnewsItemsWatcher(this.topnewsItems);\n    this.mostsearchedItemsWatcher(this.mostsearchedItems);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  private renderTopnewsItemInner(item: StzhTopnewsItem): HTMLElement {\n    return (\n      <Fragment>\n        {!!item.subtitle && <stzh-text class=\"stzh-topnews-item__subtitle\">{item.subtitle}</stzh-text>}\n        <stzh-heading class=\"stzh-topnews-item__label\">{item.label}</stzh-heading>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-homepage-service-highlights\": true,\n      \"stzh-homepage-service-highlights--has-topnews\": this._topnewsItems.length > 0,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._topnewsItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__topnews\">\n              {this._topnewsItems.map(item =>\n                !!item.href ? (\n                  <a\n                    href={item.href}\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                      \"stzh-topnews-item--has-link\": true,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </a>\n                ) : (\n                  <div\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </div>\n                )\n              )}\n            </div>\n          )}\n          {this._mostsearchedItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__mostsearched\">\n              {this._mostsearchedItems.map(item => (\n                <div\n                  class={{\n                    \"stzh-mostsearched-item\": true,\n                  }}\n                >\n                  <stzh-link class=\"stzh-mostsearched-item__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-homepage-service-highlights.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.scss?tag=stzh-homepage-service-highlights&encapsulation=scoped","src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.tsx"],"sourcesContent":["/**\n * @prop --background-color-topnews: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n *\n * @prop --stzh-homepage-service-highlights-topnews-subtitle-font: **Global**: Font of the topnews subtitle\n * @prop --stzh-homepage-service-highlights-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle\n * @prop --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)\n */\n\n:host {\n  --background-color-topnews: #{$topnewsBackgroundColor};\n  --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n  --topnews-item-subtitle-font: var(--stzh-homepage-service-highlights-topnews-subtitle-font, #{$topnewsSubtitleFont});\n  --topnews-item-subtitle-color: var(--stzh-homepage-service-highlights-topnews-item-subtitle-color, #{$colorPrimary70});\n  --topnews-item-subtitle-highlighted-color: var(--stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n}\n\n.stzh-homepage-service-highlights {\n  display: grid;\n\n  &__topnews,\n  &__mostsearched {\n    display: flex;\n    flex-direction: column;\n  }\n\n  &--has-topnews {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n\n  /**\n   * Top news.\n   */\n\n  .stzh-topnews-item {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-left: space('large');\n    padding-right: space('large');\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  .stzh-topnews-item--has-link {\n    transition: background-color 150ms ease;\n    text-decoration: none;\n\n    &:hover {\n      background-color: var(--stzh-color-secondary40);\n    }\n  }\n\n  .stzh-topnews-item--highlighted {\n    background-color: var(--stzh-color-lemonyellow50);\n  }\n\n  .stzh-topnews-item--highlighted.stzh-topnews-item--has-link {\n    &:hover {\n      background-color: var(--stzh-color-lemonyellow60);\n    }\n  }\n\n  .stzh-topnews-item__subtitle {\n    --color: var(--topnews-item-subtitle-color);\n    font-family: var(--topnews-item-subtitle-font);\n  }\n\n  .stzh-topnews-item--highlighted .stzh-topnews-item__subtitle {\n    --color: var(--topnews-item-subtitle-highlighted-color);\n  }\n\n  .stzh-topnews-item.stzh-topnews-item--has-link:not(.stzh-topnews-item--highlighted):hover .stzh-topnews-item__label {\n    --color: var(--stzh-color-primary80);\n  }\n\n  .stzh-topnews-item--highlighted:hover .stzh-topnews-item__subtitle {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__topnews {\n    background-color: var(--background-color-topnews);\n  }\n\n  /**\n   * Most searched.\n   */\n  &__mostsearched {\n    background-color: var(--background-color-mostsearched);\n    @include spaceCurve('padding-top', 'regular');\n    padding-right: space('large');\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-left: space('large');\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  &:not(&--has-topnews) &__mostsearched {\n    @include mq($from: medium) {\n      display: grid;\n      gap: 0 space('large');\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n      padding-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n    }\n  }\n\n  .stzh-mostsearched-item {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'tiny');\n  }\n\n  .stzh-mostsearched-item__link {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    --hover-color: $linkColor;\n\n    transition: transform 150ms ease;\n\n    &:hover, {\n      transform: translateX(10px);\n\n      @include mq($from: medium) {\n        transform: translateX(20px);\n      }\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhTopnewsItem } from \"../../index\";\n\n@Component({\n  tag: \"stzh-homepage-service-highlights\",\n  styleUrl: \"stzh-homepage-service-highlights.scss\",\n  scoped: true,\n})\nexport class StzhHomepageServiceHighlights {\n  @Element() element: HTMLStzhHomepageServiceHighlightsElement;\n\n  /** Top news items */\n  @Prop() topnewsItems: StzhTopnewsItem[] | string = [];\n  private _topnewsItems: StzhTopnewsItem[] = [];\n\n  /** Most searched items */\n  @Prop() mostsearchedItems: StzhMostsearchedItem[] | string = [];\n  private _mostsearchedItems: StzhMostsearchedItem[] = [];\n\n  @Watch(\"topnewsItems\")\n  topnewsItemsWatcher(newValue: StzhTopnewsItem[] | string) {\n    if (!newValue) {\n      this._topnewsItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        const parsed = JSON.parse(newValue);\n        this._topnewsItems = this.ensureSingleHighlight(parsed);\n      } catch (e) {\n        this._topnewsItems = [];\n      }\n    } else {\n      this._topnewsItems = this.ensureSingleHighlight(newValue);\n    }\n  }\n\n  @Watch(\"mostsearchedItems\")\n  mostsearchedItemsWatcher(newValue: StzhMostsearchedItem[] | string) {\n    if (!newValue) {\n      this._mostsearchedItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._mostsearchedItems = JSON.parse(newValue);\n      } catch (e) {\n        this._mostsearchedItems = [];\n      }\n    } else {\n      this._mostsearchedItems = newValue;\n    }\n  }\n\n  private ensureSingleHighlight(items: StzhTopnewsItem[]): StzhTopnewsItem[] {\n    let foundHighlighted = false;\n\n    return items.map(item => {\n      if (item.isHighlighted) {\n        if (!foundHighlighted) {\n          foundHighlighted = true;\n          return item;\n        } else {\n          // Remove highlight from subsequent items\n          return { ...item, isHighlighted: false };\n        }\n      }\n      return item;\n    });\n  }\n\n  private init = () => {\n    this.topnewsItemsWatcher(this.topnewsItems);\n    this.mostsearchedItemsWatcher(this.mostsearchedItems);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  private renderTopnewsItemInner(item: StzhTopnewsItem): HTMLElement {\n    return (\n      <Fragment>\n        {!!item.subtitle && <stzh-text class=\"stzh-topnews-item__subtitle\">{item.subtitle}</stzh-text>}\n        <stzh-heading class=\"stzh-topnews-item__label\">{item.label}</stzh-heading>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-homepage-service-highlights\": true,\n      \"stzh-homepage-service-highlights--has-topnews\": this._topnewsItems.length > 0,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._topnewsItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__topnews\">\n              {this._topnewsItems.map(item =>\n                !!item.href ? (\n                  <a\n                    href={item.href}\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                      \"stzh-topnews-item--has-link\": true,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </a>\n                ) : (\n                  <div\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </div>\n                )\n              )}\n            </div>\n          )}\n          {this._mostsearchedItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__mostsearched\">\n              {this._mostsearchedItems.map(item => (\n                <div\n                  class={{\n                    \"stzh-mostsearched-item\": true,\n                  }}\n                >\n                  <stzh-link class=\"stzh-mostsearched-item__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}