@spw-ds/spw-stencil-library 1.3.0 → 1.3.2

package/dist/spw-stencil-library/spw-hero.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-hero.entry.esm.js","sources":["src/components/spw-hero/spw-hero.scss?tag=spw-hero&encapsulation=shadow","src/components/spw-hero/spw-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n  --spw-hero-content-max-width: 578px;\n  --spw-hero-ratio-picture: initial;\n  --spw-hero-shadow: var(--spw-effect-elevation-5);\n}\n\n.spw-hero {\n  position: relative;\n  overflow: hidden;\n  &:not(.spw-hero--maxi) {\n    border-radius: 12px;\n  }\n  &--has-shadow {\n    box-shadow: var(--spw-hero-shadow);\n  }\n  &--surface-dark {\n    color: white;\n  }\n  &--surface-light {\n    color: var(--spw-color-themes-grey-grey-900);\n  }\n  &--grey {\n    background: var(--spw-color-themes-grey-grey-100);\n  }\n  &--white {\n    background: white;\n  }\n  &--grey,\n  &--white {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    gap: 24px;\n    @include breakpoint(lg) {\n      padding: 64px;\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n  &--has-picture-full {\n    padding: 0;\n    gap: 0;\n  }\n  &.spw-hero--grey.spw-hero--left,\n  &.spw-hero--white.spw-hero--left {\n    flex-direction: column;\n    @include breakpoint(lg) {\n      flex-direction: row-reverse;\n    }\n  }\n  &__container {\n    display: flex;\n    position: relative;\n    margin: 0 auto;\n    z-index: 3;\n    .spw-hero--photo & {\n      padding: 48px 24px;\n      @include breakpoint(lg) {\n        padding: 64px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      padding: 24px;\n      @include breakpoint(lg) {\n        padding: 80px 60px;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      @include breakpoint(lg) {\n        padding-left: calc(48% + 60px);\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      @include breakpoint(lg) {\n        padding-right: calc(48% + 60px);\n      }\n    }\n    .spw-hero--maxi & {\n      padding: 80px 24px;\n      @include breakpoint(lg) {\n        padding: 148px 24px;\n      }\n    }\n    .spw-hero--left & {\n      justify-content: flex-start;\n    }\n    .spw-hero--center & {\n      justify-content: center;\n    }\n    .spw-hero--right & {\n      justify-content: flex-end;\n    }\n  }\n  &__overlay,\n  &__image {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n  &__overlay {\n    z-index: 2;\n    pointer-events: none;\n    .spw-hero--surface-dark & {\n      background: var(--spw-color-themes-grey-grey-900);\n    }\n    .spw-hero--surface-light & {\n      background: white;\n    }\n  }\n  &__image-play {\n    z-index: 2;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: var(--spw-ds-primary);\n    color: white;\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 24px;\n    transition: all 0.3s ease;\n    cursor: pointer;\n    &:hover {\n      transform: translate(-50%, -50%) scale(1.1);\n    }\n  }\n  &__image {\n    z-index: 1;\n    overflow: hidden;\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .spw-hero--has-video & {\n      z-index: 4;\n    }\n    .spw-hero--white &,\n    .spw-hero--grey & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        max-width: 435px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        position: absolute;\n        max-width: 48%;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        right: 0;\n        left: auto;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n  &__content {\n    width: 100%;\n    @include breakpoint(lg) {\n      max-width: var(--spw-hero-content-max-width);\n    }\n    .spw-hero--maxi & {\n      --spw-hero-content-max-width: 784px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .spw-hero--photo & {\n      padding: 32px;\n      background-color: var(--spw-ds-white);\n      border-radius: 8px;\n      box-shadow: var(--spw-effect-elevation-8);\n    }\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'spw-hero',\n  styleUrl: 'spw-hero.scss',\n  shadow: true,\n})\nexport class SpwHero {\n  /** Image du hero banner */\n  @Prop() imageSrc?: string;\n  /** Texte alternatif de l'image du hero banner */\n  @Prop() imageAlt?: string = '';\n  /** Permet de choisir la surface d'arrière-plan du hero */\n  @Prop() surface?: 'dark' | 'light' = 'light';\n  /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */\n  @Prop() hasPictureFull?: boolean = false;\n  /** Permet d'appliquer un box-shadow sur le hero */\n  @Prop() hasShadow?: boolean = false;\n  /** Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) */\n  @Prop() hasVideo?: boolean = false;\n  /** Permet de définir un id de modal à ouvrir au clic sur le bouton play */\n  @Prop() modalVideoId?: string;\n  /** Permet de choisir le variant du hero */\n  @Prop() variant?: 'grey' | 'white' | 'maxi' | 'photo' = 'grey';\n  /** Permet de choisir l'alignement du contenu */\n  @Prop() alignment?: 'left' | 'center' | 'right' = 'left';\n  /** Permet de spécifier l'opacité de l'overlay (0 à 100) */\n  @Prop() overlayOpacity?: number = 0;\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-hero': true,\n      [`spw-hero--surface-${this.surface}`]: true,\n      [`spw-hero--has-picture-full`]: this.hasPictureFull,\n      [`spw-hero--has-video`]: this.hasVideo,\n      [`spw-hero--has-shadow`]: this.hasShadow,\n      [`spw-hero--${this.variant}`]: true,\n      [`spw-hero--${this.alignment}`]: true,\n    };\n  }\n\n  private get overlayStyle(): { [key: string]: string } {\n    return {\n      opacity: `${this.overlayOpacity! / 100}`,\n    };\n  }\n\n  private triggerModal = () => {\n    const modal = document.getElementById(this.modalVideoId) as HTMLElement & { openModal: () => Promise<void> };\n    if (modal && modal.openModal) {\n      modal.openModal();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      this.triggerModal();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.imageSrc && (\n            <div class=\"spw-hero__image\">\n              {this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (\n                <div class=\"spw-hero__image-play\" onClick={this.triggerModal} onKeyDown={this.handleKeyDown} tabIndex={0} role=\"button\" aria-label=\"Lire la vidéo\">\n                  <spw-icon icon=\"fa-play\"></spw-icon>\n                </div>\n              )}\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </div>\n          )}\n          <div class=\"spw-hero__overlay\" style={this.overlayStyle}></div>\n          <div class=\"spw-ds-container spw-hero__container\">\n            <div class=\"spw-hero__content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spw-hero.entry.esm.js","sources":["src/components/spw-hero/spw-hero.scss?tag=spw-hero&encapsulation=shadow","src/components/spw-hero/spw-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n  --spw-hero-content-max-width: 578px;\n  --spw-hero-ratio-picture: initial;\n  --spw-hero-shadow: var(--spw-effect-elevation-5);\n  --spw-hero-radius: 12px;\n}\n\n.spw-hero {\n  position: relative;\n  overflow: hidden;\n  &:not(.spw-hero--maxi) {\n    border-radius: 12px;\n  }\n  &--has-shadow {\n    box-shadow: var(--spw-hero-shadow);\n  }\n  &--has-radius {\n    border-radius: var(--spw-hero-radius);\n  }\n  &--surface-dark {\n    color: white;\n  }\n  &--surface-light {\n    color: var(--spw-color-themes-grey-grey-900);\n  }\n  &--grey {\n    background: var(--spw-color-themes-grey-grey-100);\n  }\n  &--white {\n    background: white;\n  }\n  &--grey,\n  &--white {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    gap: 24px;\n    @include breakpoint(lg) {\n      padding: 64px;\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n  &--has-picture-full {\n    padding: 0;\n    gap: 0;\n  }\n  &.spw-hero--grey.spw-hero--left,\n  &.spw-hero--white.spw-hero--left {\n    flex-direction: column;\n    @include breakpoint(lg) {\n      flex-direction: row-reverse;\n    }\n  }\n  &__container {\n    display: flex;\n    position: relative;\n    margin: 0 auto;\n    z-index: 3;\n    .spw-hero--photo & {\n      padding: 48px 24px;\n      @include breakpoint(lg) {\n        padding: 64px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      padding: 24px;\n      @include breakpoint(lg) {\n        padding: 80px 60px;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      @include breakpoint(lg) {\n        padding-left: calc(48% + 60px);\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      @include breakpoint(lg) {\n        padding-right: calc(48% + 60px);\n      }\n    }\n    .spw-hero--maxi & {\n      padding: 80px 24px;\n      @include breakpoint(lg) {\n        padding: 148px 24px;\n      }\n    }\n    .spw-hero--left & {\n      justify-content: flex-start;\n    }\n    .spw-hero--center & {\n      justify-content: center;\n    }\n    .spw-hero--right & {\n      justify-content: flex-end;\n    }\n  }\n  &__overlay,\n  &__image {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n  &__overlay {\n    z-index: 2;\n    pointer-events: none;\n    .spw-hero--surface-dark & {\n      background: var(--spw-color-themes-grey-grey-900);\n    }\n    .spw-hero--surface-light & {\n      background: white;\n    }\n  }\n  &__image-play {\n    z-index: 2;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: white;\n    color: var(--spw-ds-primary);\n    box-shadow: var(--spw-effect-elevation-5);\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 24px;\n    transition: all 0.3s ease;\n    cursor: pointer;\n    &:hover {\n      transform: translate(-50%, -50%) scale(1.1);\n    }\n  }\n  &__image {\n    z-index: 1;\n    overflow: hidden;\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .spw-hero--has-video & {\n      z-index: 4;\n    }\n    .spw-hero--white &,\n    .spw-hero--grey & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        max-width: 435px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        position: absolute;\n        max-width: 48%;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        right: 0;\n        left: auto;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n  &__content {\n    width: 100%;\n    @include breakpoint(lg) {\n      max-width: var(--spw-hero-content-max-width);\n    }\n    .spw-hero--maxi & {\n      --spw-hero-content-max-width: 784px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .spw-hero--photo & {\n      padding: 32px;\n      background-color: var(--spw-ds-white);\n      border-radius: 8px;\n      box-shadow: var(--spw-effect-elevation-8);\n    }\n  }\n}\n\n.spw-hero--mini {\n  &.spw-hero--surface-light {\n    .spw-hero__content,\n    .spw-hero__image {\n      background-color: var(--spw-color-themes-grey-grey-100);\n    }\n  }\n  &.spw-hero--surface-dark {\n    .spw-hero__content,\n    .spw-hero__image {\n      background-color: var(--spw-ds-primary);\n    }\n  }\n  .spw-hero__image {\n    width: calc(100% - 280px);\n    left: 280px;\n    height: 100%;\n    @include breakpoint(md) {\n      width: calc(100% - 400px);\n      left: 400px;\n    }\n    img {\n      border-top-left-radius: 900px;\n    }\n  }\n  .spw-hero__content {\n    position: relative;\n    z-index: 3;\n    width: 280px;\n    padding: 24px;\n    padding-top: 48px;\n    border-radius: 0;\n    @include breakpoint(md) {\n      padding: 32px;\n      padding-top: 64px;\n      width: 400px;\n    }\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'spw-hero',\n  styleUrl: 'spw-hero.scss',\n  shadow: true,\n})\nexport class SpwHero {\n  /** Image du hero banner */\n  @Prop() imageSrc?: string;\n  /** Texte alternatif de l'image du hero banner */\n  @Prop() imageAlt?: string = '';\n  /** Permet de choisir la surface d'arrière-plan du hero */\n  @Prop() surface?: 'dark' | 'light' = 'light';\n  /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */\n  @Prop() hasPictureFull?: boolean = false;\n  /** Permet d'appliquer un border-radius sur le hero */\n  @Prop() hasRadius?: boolean = false;\n  /** Permet d'appliquer un box-shadow sur le hero */\n  @Prop() hasShadow?: boolean = false;\n  /** Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) */\n  @Prop() hasVideo?: boolean = false;\n  /** Permet de définir un id de modal à ouvrir au clic sur le bouton play */\n  @Prop() modalVideoId?: string;\n  /** Permet de choisir le variant du hero */\n  @Prop() variant?: 'grey' | 'white' | 'maxi' | 'photo' | 'mini' = 'grey';\n  /** Permet de choisir l'alignement du contenu */\n  @Prop() alignment?: 'left' | 'center' | 'right' = 'left';\n  /** Permet de spécifier l'opacité de l'overlay (0 à 100) */\n  @Prop() overlayOpacity?: number = 0;\n  /** Permet de spécifier la couleur de l'overlay */\n  @Prop() overlayColor?: string = '';\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-hero': true,\n      [`spw-hero--surface-${this.surface}`]: true,\n      [`spw-hero--has-picture-full`]: this.hasPictureFull,\n      [`spw-hero--has-video`]: this.hasVideo,\n      [`spw-hero--has-shadow`]: this.hasShadow,\n      [`spw-hero--has-radius`]: this.hasRadius,\n      [`spw-hero--${this.variant}`]: true,\n      [`spw-hero--${this.alignment}`]: this.variant !== 'mini' ? true : this.alignment === 'left',\n    };\n  }\n\n  private get overlayStyle(): { [key: string]: string } {\n    return {\n      opacity: `${this.overlayOpacity! / 100}`,\n      backgroundColor: `${this.overlayColor}`,\n    };\n  }\n\n  private triggerModal = () => {\n    const modal = document.getElementById(this.modalVideoId) as HTMLElement & { openModal: () => Promise<void> };\n    if (modal && modal.openModal) {\n      modal.openModal();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      this.triggerModal();\n    }\n  };\n\n  render() {\n    const contentSlot = (\n      <div class=\"spw-hero__content\">\n        <slot></slot>\n      </div>\n    );\n\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.imageSrc && (\n            <div class=\"spw-hero__image\">\n              {this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (\n                <div class=\"spw-hero__image-play\" onClick={this.triggerModal} onKeyDown={this.handleKeyDown} tabIndex={0} role=\"button\" aria-label=\"Lire la vidéo\">\n                  <spw-icon icon=\"fa-play\"></spw-icon>\n                </div>\n              )}\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </div>\n          )}\n          <div class=\"spw-hero__overlay\" style={this.overlayStyle}></div>\n          {this.variant === 'mini' ? (\n            contentSlot\n          ) : (\n            <div class=\"spw-ds-container spw-hero__container\">\n              {contentSlot}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}