https://www.loccitane.com/on/demandware.static/Sites-OCC-Site/-/de…/js/florid/components/arch-image.mjs

1import { i as n, m as p, a as v, x as l, t as g } from "../performance-mixin-D7YmSeqN.mjs";
2import { n as i } from "../property-S_Y9cb04.mjs";
3var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (d, a, h, o) => {
4  for (var r = o > 1 ? void 0 : o ? y(a, h) : a, s = d.length - 1, c; s >= 0; s--)
5    (c = d[s]) && (r = (o ? c(a, h, r) : c(r)) || r);
6  return o && r && m(a, h, r), r;
7};
8let e = class extends p(v) {
9  constructor() {
10    super(...arguments), this.imageUrl = "", this.imageAlt = "", this.hoverUrl = "", this.hoverAlt = "", this.dimmed = !1, this.showHover = !1;
11  }
12  render() {
13    return l`<div class="card">
14      <svg aria-hidden="true">
15        <defs>
16          <clipPath id="arch-gift-finder" clipPathUnits="objectBoundingBox">
17            <path d="M 0.0022883 0.1515313 A 0.6791312 0.4712110 0 0 1 0.9931350 0.1531985 L 0.9931350 0.9969136 L 0.0022883 0.9969136 Z" />
18          </clipPath>
19        </defs>
20      </svg>
21      <img src="${this.imageUrl}" alt="${this.imageAlt}" class="card-img base" loading="lazy" />
22      ${this.hoverUrl ? l`<img src="${this.hoverUrl}" alt="${this.hoverAlt || this.imageAlt}" class="card-img hover" loading="lazy" />` : ""}
23      <div class="overlay" part="overlay"></div> 
24    </div>`;
25  }
26};
27e.styles = n`
28    :host {
29      --card-width : 175px;
30      --card-height : 260px;
31      --card-width-mobile: 100px;
32      --card-height-mobile: 153px;
33      --overlay-bg: rgba(0,0,0,0.56);
34      --overlay-opacity: 1;    
35      --card-filter: none;
36      display: block;
37    }
38
39    .card {
40      position: relative;
41      width: var(--card-width);
42      height: var(--card-height);
43      overflow: hidden;
44      background-color: var(--colors-noir-des-terres-500);
45      clip-path: url(#arch-gift-finder);
46      -webkit-clip-path: url(#arch-gift-finder);
47      filter: var(--card-filter, none);
48      -webkit-tap-highlight-color: transparent;
49    }
50
51    @media (max-width: 1024px) {
52      .card {
53        width: var(--card-width-mobile);
54        height: var(--card-height-mobile);
55      }
56    }
57
58    .card-img {
59      position: absolute;
60      top: 0;
61      left: 0;
62      width: 100%;
63      height: 100%;
64      object-fit: cover;
65      transition: opacity 0.3s ease-in-out;
66      background: linear-gradient(180deg, #f9f4ed 0%, #f3f0eb 81.41%, #edeae5 100%);
67    }
68
69    .card-img.hover {
70      opacity: 0;
71      z-index: 2;
72    }
73
74    .card-img.base {
75      z-index: 1;
76    }
77
78    :host([showhover]) .card-img.hover {
79      opacity: 1;
80    }
81
82    :host([showhover]) .card-img.base {
83      opacity: 0;
84    }
85
86    @media (hover: hover) and (pointer: fine) {
87      .card:hover .card-img.hover {
88        opacity: 1;
89      }
90    }
91
92    @media (hover: none) and (pointer: coarse) {
93      .card:active .card-img.hover {
94        opacity: 1;
95      }
96    }
97
98    .overlay {
99      position: absolute; inset: 0;
100      background: var(--overlay-bg);
101      opacity: 0;
102      transition: opacity .2s ease;
103      pointer-events: none;
104      z-index: 3;
105    }
106    
107
108    :host([dimmed]) .overlay {
109      opacity: var(--overlay-opacity, 1);
110    }
111  `;
112t([
113  i({ type: String })
114], e.prototype, "imageUrl", 2);
115t([
116  i({ type: String })
117], e.prototype, "imageAlt", 2);
118t([
119  i({ type: String })
120], e.prototype, "hoverUrl", 2);
121t([
122  i({ type: String })
123], e.prototype, "hoverAlt", 2);
124t([
125  i({ type: Boolean, reflect: !0 })
126], e.prototype, "dimmed", 2);
127t([
128  i({ type: Boolean, reflect: !0, attribute: "showhover" })
129], e.prototype, "showHover", 2);
130e = t([
131  g("o-arch-image")
132], e);
133export {
134  e as OccitaneArchImage
135};