@florid-kit/components 0.10.7 → 0.10.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +186 -177
- package/index.mjs +192 -183
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -991,7 +991,7 @@
|
|
|
991
991
|
width: 0.1rem !important;
|
|
992
992
|
white-space: nowrap !important;
|
|
993
993
|
}
|
|
994
|
-
`;It([a({type:String,reflect:!0})],dt.prototype,"status",2);It([a({type:String,reflect:!0})],dt.prototype,"ariaDescribedBy",2);It([a({type:String,reflect:!0})],dt.prototype,"label",2);dt=It([g("o-wishlist-button")],dt);var Wo=Object.defineProperty,Go=Object.getOwnPropertyDescriptor,lt=(o,t,e,n)=>{for(var i=n>1?void 0:n?Go(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Wo(t,e,i),i};let K=class extends p{constructor(){super(...arguments),this.href="",this.target="",this.template="standard",this.inverse=!1,this.endIcon=!1,this.reverseEndIcon=!1}_handleClick(o){(!this.href||this.href==="#")&&o.preventDefault()
|
|
994
|
+
`;It([a({type:String,reflect:!0})],dt.prototype,"status",2);It([a({type:String,reflect:!0})],dt.prototype,"ariaDescribedBy",2);It([a({type:String,reflect:!0})],dt.prototype,"label",2);dt=It([g("o-wishlist-button")],dt);var Wo=Object.defineProperty,Go=Object.getOwnPropertyDescriptor,lt=(o,t,e,n)=>{for(var i=n>1?void 0:n?Go(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Wo(t,e,i),i};let K=class extends p{constructor(){super(...arguments),this.href="",this.target="",this.template="standard",this.inverse=!1,this.endIcon=!1,this.reverseEndIcon=!1}_handleClick(o){(!this.href||this.href==="#")&&o.preventDefault()}render(){const o=this.href||"#";return l`
|
|
995
995
|
<a
|
|
996
996
|
href="${o}"
|
|
997
997
|
target="${P(this.target||void 0)}"
|
|
@@ -3137,202 +3137,211 @@
|
|
|
3137
3137
|
to { transform: translateY(0) scale(1); opacity: 1; }
|
|
3138
3138
|
}
|
|
3139
3139
|
`;let x=ae;C([a({type:Boolean,reflect:!0})],x.prototype,"ispagedesigner",2);C([a({type:String,reflect:!0})],x.prototype,"classPopin",1);C([a({type:Boolean,reflect:!0})],x.prototype,"open",2);C([a({type:String,reflect:!0})],x.prototype,"background",2);C([a({type:String,attribute:"background-url",reflect:!0})],x.prototype,"backgroundUrl",2);C([a({type:Boolean,attribute:"close-on-esc"})],x.prototype,"closeOnEsc",2);C([a({type:Boolean,attribute:"close-on-backdrop"})],x.prototype,"closeOnBackdrop",2);C([a({type:Boolean,attribute:"lock-scroll"})],x.prototype,"lockScroll",2);C([a({type:String,reflect:!0})],x.prototype,"variant",2);C([a({type:String,attribute:"max-width"})],x.prototype,"maxWidth",2);C([a({type:Boolean,reflect:!0})],x.prototype,"showBackButton",2);C([a({type:Boolean,reflect:!0})],x.prototype,"contrast",2);C([a({type:String,reflect:!0})],x.prototype,"iconSize",2);C([a({type:Boolean,attribute:"hide-header-on-scroll"})],x.prototype,"hideHeaderOnScroll",2);C([W()],x.prototype,"_labelId",2);C([W()],x.prototype,"_headerHidden",2);customElements.define("o-popin",x);var Ui=Object.defineProperty,Ni=Object.getOwnPropertyDescriptor,$=(o,t,e,n)=>{for(var i=n>1?void 0:n?Ni(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&Ui(t,e,i),i};let m=class extends p{constructor(){super(...arguments),this.type="cart | notifyme",this.titleProduct="",this.descriptionProduct="",this.volume="",this.perLiter="",this.mainPrice="",this.salesPercentage="",this.oldPrice="",this.imageUrl="https://placehold.co/112x140",this.outOfStock=!1,this.altImage="",this.fullwidth=!1,this.current=!1,this.hideIcon=!1,this.tagText=""}onClick(o){var e,n,i;const t=o.target;(e=t==null?void 0:t.classList)!=null&&e.contains("add-to-bag")||(n=t==null?void 0:t.classList)!=null&&n.contains("js-availability-notify-details-routine")||((i=this.onClickTile)==null||i.call(this),this.dispatchEvent(new CustomEvent("tile-click",{bubbles:!0,composed:!0})))}onClickIcons(){var o;(o=this.onClickIcon)==null||o.call(this),this.dispatchEvent(new CustomEvent("tile-icon-click",{bubbles:!0,composed:!0}))}get icons(){return this.hideIcon?"":l`
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3140
|
+
<o-icon-button
|
|
3141
|
+
@click=${this.onClickIcons}
|
|
3142
|
+
icon=${this.type==="notifyme"?"notifyme":"cart"}
|
|
3143
|
+
size="small"
|
|
3144
|
+
bgstyle="background-contrast"
|
|
3145
|
+
type="span"
|
|
3146
|
+
status="empty"
|
|
3147
|
+
strokewidth="0"
|
|
3148
|
+
class=${this.type==="notifyme"?"js-availability-notify-details-routine":"add-to-bag"}
|
|
3149
|
+
></o-icon-button>
|
|
3150
|
+
`}render(){return l`
|
|
3151
|
+
<button
|
|
3152
|
+
type="button"
|
|
3153
|
+
class="tile fullpointer ${this.fullwidth?"fullwidth":""} ${this.current?"current":""}"
|
|
3154
|
+
@click=${this.onClick}
|
|
3155
|
+
>
|
|
3156
|
+
${this.imageUrl?l`<img src="${this.imageUrl}" alt="${this.altImage||""}" />`:""}
|
|
3157
|
+
<div class="info">
|
|
3158
|
+
${this.tagText?l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>`:""}
|
|
3159
|
+
${this.outOfStock?l`<o-tag type="nostock" role="status" aria-live="polite"
|
|
3160
|
+
>Out of stock</o-tag
|
|
3161
|
+
>`:""}
|
|
3162
|
+
<div class="title-volume">
|
|
3163
|
+
${this.titleProduct?l`<div class="title">${this.titleProduct}</div>`:""}
|
|
3164
|
+
${this.volume?l`<span class="volume-info">${this.volume}</span>`:""}
|
|
3165
|
+
</div>
|
|
3166
|
+
${this.descriptionProduct?l`<div class="description">${this.descriptionProduct}</div>`:""}
|
|
3167
|
+
${this.salesPercentage&&this.oldPrice?l`<div class="discount-info">
|
|
3168
|
+
<o-tag bgstyle="background-emphasis"
|
|
3169
|
+
>${this.salesPercentage}</o-tag
|
|
3170
|
+
>
|
|
3171
|
+
<span class="old-price">${this.oldPrice}</span>
|
|
3172
|
+
</div>`:""}
|
|
3173
|
+
<div class="details">
|
|
3174
|
+
<div class="price-info">
|
|
3175
|
+
${this.mainPrice?l`<span class="main-price">${this.mainPrice}</span>`:""}
|
|
3176
|
+
${this.perLiter?l`<span class="per-liter">${this.perLiter}</span>`:""}
|
|
3177
|
+
</div>
|
|
3178
|
+
${this.icons}
|
|
3179
|
+
</div>
|
|
3180
|
+
</div>
|
|
3181
|
+
</button>
|
|
3173
3182
|
`}};m.styles=f`
|
|
3174
3183
|
:host {
|
|
3175
|
-
|
|
3176
|
-
|
|
3184
|
+
display: block;
|
|
3185
|
+
max-width: 100%;
|
|
3177
3186
|
}
|
|
3178
|
-
|
|
3179
|
-
.tile {
|
|
3180
|
-
display: flex;
|
|
3181
|
-
column-gap: var(--spacing-l);
|
|
3182
|
-
align-items: flex-start;
|
|
3183
|
-
justify-content: space-between;
|
|
3184
|
-
border-radius: var(--radius-m);
|
|
3185
|
-
background: var(--color-container-bg-white);
|
|
3186
|
-
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
|
|
3187
|
-
font-family: var(--font-family-loccitane-sans);
|
|
3188
|
-
width: 343px;
|
|
3189
|
-
max-width: 343px;
|
|
3190
|
-
padding: var(--spacing-l);
|
|
3191
|
-
margin: 0;
|
|
3192
|
-
border: 0 none;
|
|
3193
|
-
box-sizing: content-box;
|
|
3194
3187
|
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3188
|
+
.tile {
|
|
3189
|
+
display: flex;
|
|
3190
|
+
column-gap: var(--spacing-l);
|
|
3191
|
+
align-items: flex-start;
|
|
3192
|
+
justify-content: space-between;
|
|
3193
|
+
border-radius: var(--radius-m);
|
|
3194
|
+
background: var(--color-container-bg-white);
|
|
3195
|
+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
|
|
3196
|
+
font-family: var(--font-family-loccitane-sans);
|
|
3197
|
+
width: 343px;
|
|
3198
|
+
max-width: 343px;
|
|
3199
|
+
padding: var(--spacing-l);
|
|
3200
|
+
margin: 0;
|
|
3201
|
+
border: 0 none;
|
|
3202
|
+
box-sizing: border-box;
|
|
3198
3203
|
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
|
|
3204
|
+
&.current {
|
|
3205
|
+
border: var(--border-m, 1px) solid
|
|
3206
|
+
var(--color-border-secondary, #7e7173);
|
|
3207
|
+
}
|
|
3202
3208
|
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
}
|
|
3209
|
+
&:hover {
|
|
3210
|
+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
3211
|
+
}
|
|
3207
3212
|
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3213
|
+
&:active {
|
|
3214
|
+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.32);
|
|
3215
|
+
}
|
|
3216
|
+
}
|
|
3212
3217
|
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
background: linear-gradient(to bottom, #F9F5F0, #F7F2EA);
|
|
3218
|
-
}
|
|
3218
|
+
.tile.fullwidth {
|
|
3219
|
+
width: 100%;
|
|
3220
|
+
max-width: 100%;
|
|
3221
|
+
}
|
|
3219
3222
|
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
min-height: 140px;
|
|
3227
|
-
}
|
|
3223
|
+
.tile img {
|
|
3224
|
+
object-fit: cover;
|
|
3225
|
+
width: 112px;
|
|
3226
|
+
height: 140px;
|
|
3227
|
+
background: linear-gradient(to bottom, #f9f5f0, #f7f2ea);
|
|
3228
|
+
}
|
|
3228
3229
|
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3230
|
+
.info {
|
|
3231
|
+
flex-grow: 1;
|
|
3232
|
+
display: flex;
|
|
3233
|
+
flex-direction: column;
|
|
3234
|
+
justify-content: space-between;
|
|
3235
|
+
row-gap: var(--spacing-s);
|
|
3236
|
+
min-height: 140px;
|
|
3237
|
+
}
|
|
3232
3238
|
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
font-size: var(--font-size-200, 16px);
|
|
3238
|
-
font-weight: var(--font-weight-400, 400);
|
|
3239
|
-
line-height: var(--line-height-200, 20px);
|
|
3240
|
-
letter-spacing: var(--letter-spacing-000, 0);
|
|
3241
|
-
text-align: left;
|
|
3242
|
-
display: -webkit-box;
|
|
3243
|
-
-webkit-line-clamp: 2;
|
|
3244
|
-
-webkit-box-orient: vertical;
|
|
3245
|
-
overflow: hidden;
|
|
3246
|
-
}
|
|
3239
|
+
.info:has(o-tag),
|
|
3240
|
+
.info:has(.discount-info) {
|
|
3241
|
+
justify-content: flex-start;
|
|
3242
|
+
}
|
|
3247
3243
|
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3244
|
+
.info .title {
|
|
3245
|
+
color: var(--color-content-body, #3f2b2e);
|
|
3246
|
+
font-family: var(--font-family-loccitane-serif);
|
|
3247
|
+
font-size: var(--font-size-200, 16px);
|
|
3248
|
+
font-weight: var(--font-weight-400, 400);
|
|
3249
|
+
line-height: var(--line-height-200, 20px);
|
|
3250
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
3251
|
+
text-align: left;
|
|
3252
|
+
display: -webkit-box;
|
|
3253
|
+
-webkit-line-clamp: 2;
|
|
3254
|
+
-webkit-box-orient: vertical;
|
|
3255
|
+
overflow: hidden;
|
|
3256
|
+
}
|
|
3261
3257
|
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3258
|
+
.info .description {
|
|
3259
|
+
color: var(--color-content-description, #7e7173);
|
|
3260
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
3261
|
+
font-size: var(--font-size-150, 14px);
|
|
3262
|
+
font-weight: var(--font-weight-400, 400);
|
|
3263
|
+
line-height: var(--line-height-200, 20px);
|
|
3264
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
3265
|
+
text-align: left;
|
|
3266
|
+
display: -webkit-box;
|
|
3267
|
+
-webkit-line-clamp: 2;
|
|
3268
|
+
-webkit-box-orient: vertical;
|
|
3269
|
+
overflow: hidden;
|
|
3270
|
+
}
|
|
3267
3271
|
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
.old-price {
|
|
3274
|
-
color: var(--color-content-description, #7E7173);
|
|
3275
|
-
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
3276
|
-
font-size: var(--font-size-100, 12px);
|
|
3277
|
-
font-style: normal;
|
|
3278
|
-
font-weight: var(--font-weight-400, 400);
|
|
3279
|
-
line-height: var(--line-height-160, 16px); /* 133.333% */
|
|
3280
|
-
letter-spacing: var(--letter-spacing-000, 0);
|
|
3281
|
-
text-decoration-line: line-through;
|
|
3282
|
-
}
|
|
3272
|
+
.info .details {
|
|
3273
|
+
display: flex;
|
|
3274
|
+
align-items: center;
|
|
3275
|
+
justify-content: space-between;
|
|
3276
|
+
}
|
|
3283
3277
|
|
|
3284
|
-
|
|
3278
|
+
.info .discount-info {
|
|
3279
|
+
display: flex;
|
|
3280
|
+
align-items: center;
|
|
3281
|
+
column-gap: var(--spacing-xs);
|
|
3282
|
+
|
|
3283
|
+
.old-price {
|
|
3284
|
+
color: var(--color-content-description, #7e7173);
|
|
3285
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
3286
|
+
font-size: var(--font-size-100, 12px);
|
|
3287
|
+
font-style: normal;
|
|
3288
|
+
font-weight: var(--font-weight-400, 400);
|
|
3289
|
+
line-height: var(--line-height-160, 16px); /* 133.333% */
|
|
3290
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
3291
|
+
text-decoration-line: line-through;
|
|
3292
|
+
}
|
|
3293
|
+
}
|
|
3285
3294
|
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3295
|
+
.info .volume-info {
|
|
3296
|
+
color: var(--color-content-description, #7e7173);
|
|
3297
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
3298
|
+
font-size: var(--font-size-100, 12px);
|
|
3299
|
+
font-style: normal;
|
|
3300
|
+
font-weight: var(--font-weight-400, 400);
|
|
3301
|
+
line-height: var(--line-height-160, 16px);
|
|
3302
|
+
text-align: left;
|
|
3303
|
+
letter-spacing: var(--letter-spacing-400, 0.64px);
|
|
3304
|
+
}
|
|
3296
3305
|
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3306
|
+
.info o-tag {
|
|
3307
|
+
display: flex;
|
|
3308
|
+
}
|
|
3300
3309
|
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3310
|
+
.title-volume {
|
|
3311
|
+
display: flex;
|
|
3312
|
+
align-items: flex-start;
|
|
3313
|
+
flex-direction: column;
|
|
3314
|
+
row-gap: var(--spacing-2-xs);
|
|
3315
|
+
}
|
|
3307
3316
|
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
+
.main-price {
|
|
3318
|
+
color: var(--color-content-body, #3f2b2e);
|
|
3319
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
3320
|
+
font-size: var(--font-size-150, 14px);
|
|
3321
|
+
font-style: normal;
|
|
3322
|
+
font-weight: var(--font-weight-400, 400);
|
|
3323
|
+
line-height: var(--line-height-200, 20px); /* 142.857% */
|
|
3324
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
3325
|
+
}
|
|
3317
3326
|
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
+
.per-liter {
|
|
3328
|
+
color: var(--color-content-description, #7e7173);
|
|
3329
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
3330
|
+
font-size: var(--font-size-100, 12px);
|
|
3331
|
+
font-style: normal;
|
|
3332
|
+
font-weight: var(--font-weight-400, 400);
|
|
3333
|
+
line-height: var(--line-height-160, 16px);
|
|
3334
|
+
letter-spacing: var(--letter-spacing-400, 0.64px);
|
|
3335
|
+
}
|
|
3327
3336
|
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3337
|
+
.price-info {
|
|
3338
|
+
display: flex;
|
|
3339
|
+
column-gap: var(--spacing-xs);
|
|
3340
|
+
align-items: center;
|
|
3341
|
+
height: 32px;
|
|
3342
|
+
}
|
|
3334
3343
|
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3344
|
+
.fullpointer {
|
|
3345
|
+
cursor: pointer;
|
|
3346
|
+
}
|
|
3338
3347
|
`;$([a({type:String})],m.prototype,"type",2);$([a({type:String})],m.prototype,"titleProduct",2);$([a({type:String})],m.prototype,"descriptionProduct",2);$([a({type:String})],m.prototype,"volume",2);$([a({type:String})],m.prototype,"perLiter",2);$([a({type:String})],m.prototype,"mainPrice",2);$([a({type:String})],m.prototype,"salesPercentage",2);$([a({type:String})],m.prototype,"oldPrice",2);$([a({type:String})],m.prototype,"imageUrl",2);$([a({type:Boolean})],m.prototype,"outOfStock",2);$([a({type:String})],m.prototype,"altImage",2);$([a({type:Boolean})],m.prototype,"fullwidth",2);$([a({type:Boolean})],m.prototype,"current",2);$([a({type:Boolean})],m.prototype,"hideIcon",2);$([a({type:String})],m.prototype,"tagText",2);$([a({attribute:!1})],m.prototype,"onClickTile",2);$([a({attribute:!1})],m.prototype,"onClickIcon",2);m=$([g("o-medium-tile")],m);
|
package/index.mjs
CHANGED
|
@@ -2340,11 +2340,7 @@ let K = class extends p {
|
|
|
2340
2340
|
super(...arguments), this.href = "", this.target = "", this.template = "standard", this.inverse = !1, this.endIcon = !1, this.reverseEndIcon = !1;
|
|
2341
2341
|
}
|
|
2342
2342
|
_handleClick(o) {
|
|
2343
|
-
(!this.href || this.href === "#") && o.preventDefault()
|
|
2344
|
-
detail: { href: this.href },
|
|
2345
|
-
bubbles: !0,
|
|
2346
|
-
composed: !0
|
|
2347
|
-
}));
|
|
2343
|
+
(!this.href || this.href === "#") && o.preventDefault();
|
|
2348
2344
|
}
|
|
2349
2345
|
render() {
|
|
2350
2346
|
const o = this.href || "#";
|
|
@@ -5636,218 +5632,231 @@ let m = class extends p {
|
|
|
5636
5632
|
onClick(o) {
|
|
5637
5633
|
var e, n, i;
|
|
5638
5634
|
const t = o.target;
|
|
5639
|
-
(e = t == null ? void 0 : t.classList) != null && e.contains("add-to-bag") || (n = t == null ? void 0 : t.classList) != null && n.contains("js-availability-notify-details-routine") || ((i = this.onClickTile) == null || i.call(this), this.dispatchEvent(
|
|
5635
|
+
(e = t == null ? void 0 : t.classList) != null && e.contains("add-to-bag") || (n = t == null ? void 0 : t.classList) != null && n.contains("js-availability-notify-details-routine") || ((i = this.onClickTile) == null || i.call(this), this.dispatchEvent(
|
|
5636
|
+
new CustomEvent("tile-click", { bubbles: !0, composed: !0 })
|
|
5637
|
+
));
|
|
5640
5638
|
}
|
|
5641
5639
|
onClickIcons() {
|
|
5642
5640
|
var o;
|
|
5643
|
-
(o = this.onClickIcon) == null || o.call(this), this.dispatchEvent(
|
|
5641
|
+
(o = this.onClickIcon) == null || o.call(this), this.dispatchEvent(
|
|
5642
|
+
new CustomEvent("tile-icon-click", { bubbles: !0, composed: !0 })
|
|
5643
|
+
);
|
|
5644
5644
|
}
|
|
5645
5645
|
get icons() {
|
|
5646
5646
|
return this.hideIcon ? "" : l`
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5650
|
-
|
|
5651
|
-
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5647
|
+
<o-icon-button
|
|
5648
|
+
@click=${this.onClickIcons}
|
|
5649
|
+
icon=${this.type === "notifyme" ? "notifyme" : "cart"}
|
|
5650
|
+
size="small"
|
|
5651
|
+
bgstyle="background-contrast"
|
|
5652
|
+
type="span"
|
|
5653
|
+
status="empty"
|
|
5654
|
+
strokewidth="0"
|
|
5655
|
+
class=${this.type === "notifyme" ? "js-availability-notify-details-routine" : "add-to-bag"}
|
|
5656
|
+
></o-icon-button>
|
|
5657
|
+
`;
|
|
5658
5658
|
}
|
|
5659
5659
|
render() {
|
|
5660
5660
|
return l`
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
|
|
5664
|
-
|
|
5665
|
-
|
|
5666
|
-
|
|
5667
|
-
|
|
5668
|
-
|
|
5669
|
-
|
|
5670
|
-
|
|
5671
|
-
|
|
5672
|
-
|
|
5673
|
-
|
|
5674
|
-
|
|
5675
|
-
|
|
5676
|
-
|
|
5677
|
-
|
|
5678
|
-
|
|
5679
|
-
|
|
5680
|
-
|
|
5681
|
-
|
|
5682
|
-
|
|
5661
|
+
<button
|
|
5662
|
+
type="button"
|
|
5663
|
+
class="tile fullpointer ${this.fullwidth ? "fullwidth" : ""} ${this.current ? "current" : ""}"
|
|
5664
|
+
@click=${this.onClick}
|
|
5665
|
+
>
|
|
5666
|
+
${this.imageUrl ? l`<img src="${this.imageUrl}" alt="${this.altImage || ""}" />` : ""}
|
|
5667
|
+
<div class="info">
|
|
5668
|
+
${this.tagText ? l`<o-tag bgstyle="background-emphasis">${this.tagText}</o-tag>` : ""}
|
|
5669
|
+
${this.outOfStock ? l`<o-tag type="nostock" role="status" aria-live="polite"
|
|
5670
|
+
>Out of stock</o-tag
|
|
5671
|
+
>` : ""}
|
|
5672
|
+
<div class="title-volume">
|
|
5673
|
+
${this.titleProduct ? l`<div class="title">${this.titleProduct}</div>` : ""}
|
|
5674
|
+
${this.volume ? l`<span class="volume-info">${this.volume}</span>` : ""}
|
|
5675
|
+
</div>
|
|
5676
|
+
${this.descriptionProduct ? l`<div class="description">${this.descriptionProduct}</div>` : ""}
|
|
5677
|
+
${this.salesPercentage && this.oldPrice ? l`<div class="discount-info">
|
|
5678
|
+
<o-tag bgstyle="background-emphasis"
|
|
5679
|
+
>${this.salesPercentage}</o-tag
|
|
5680
|
+
>
|
|
5681
|
+
<span class="old-price">${this.oldPrice}</span>
|
|
5682
|
+
</div>` : ""}
|
|
5683
|
+
<div class="details">
|
|
5684
|
+
<div class="price-info">
|
|
5685
|
+
${this.mainPrice ? l`<span class="main-price">${this.mainPrice}</span>` : ""}
|
|
5686
|
+
${this.perLiter ? l`<span class="per-liter">${this.perLiter}</span>` : ""}
|
|
5687
|
+
</div>
|
|
5688
|
+
${this.icons}
|
|
5689
|
+
</div>
|
|
5690
|
+
</div>
|
|
5691
|
+
</button>
|
|
5683
5692
|
`;
|
|
5684
5693
|
}
|
|
5685
5694
|
};
|
|
5686
5695
|
m.styles = f`
|
|
5687
5696
|
:host {
|
|
5688
|
-
|
|
5689
|
-
|
|
5697
|
+
display: block;
|
|
5698
|
+
max-width: 100%;
|
|
5690
5699
|
}
|
|
5691
|
-
|
|
5692
|
-
.tile {
|
|
5693
|
-
display: flex;
|
|
5694
|
-
column-gap: var(--spacing-l);
|
|
5695
|
-
align-items: flex-start;
|
|
5696
|
-
justify-content: space-between;
|
|
5697
|
-
border-radius: var(--radius-m);
|
|
5698
|
-
background: var(--color-container-bg-white);
|
|
5699
|
-
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
|
|
5700
|
-
font-family: var(--font-family-loccitane-sans);
|
|
5701
|
-
width: 343px;
|
|
5702
|
-
max-width: 343px;
|
|
5703
|
-
padding: var(--spacing-l);
|
|
5704
|
-
margin: 0;
|
|
5705
|
-
border: 0 none;
|
|
5706
|
-
box-sizing: content-box;
|
|
5707
5700
|
|
|
5708
|
-
|
|
5709
|
-
|
|
5710
|
-
|
|
5701
|
+
.tile {
|
|
5702
|
+
display: flex;
|
|
5703
|
+
column-gap: var(--spacing-l);
|
|
5704
|
+
align-items: flex-start;
|
|
5705
|
+
justify-content: space-between;
|
|
5706
|
+
border-radius: var(--radius-m);
|
|
5707
|
+
background: var(--color-container-bg-white);
|
|
5708
|
+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
|
|
5709
|
+
font-family: var(--font-family-loccitane-sans);
|
|
5710
|
+
width: 343px;
|
|
5711
|
+
max-width: 343px;
|
|
5712
|
+
padding: var(--spacing-l);
|
|
5713
|
+
margin: 0;
|
|
5714
|
+
border: 0 none;
|
|
5715
|
+
box-sizing: border-box;
|
|
5711
5716
|
|
|
5712
|
-
|
|
5713
|
-
|
|
5714
|
-
|
|
5717
|
+
&.current {
|
|
5718
|
+
border: var(--border-m, 1px) solid
|
|
5719
|
+
var(--color-border-secondary, #7e7173);
|
|
5720
|
+
}
|
|
5715
5721
|
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
}
|
|
5722
|
+
&:hover {
|
|
5723
|
+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
5724
|
+
}
|
|
5720
5725
|
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
|
|
5724
|
-
|
|
5726
|
+
&:active {
|
|
5727
|
+
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.32);
|
|
5728
|
+
}
|
|
5729
|
+
}
|
|
5725
5730
|
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
|
|
5729
|
-
|
|
5730
|
-
background: linear-gradient(to bottom, #F9F5F0, #F7F2EA);
|
|
5731
|
-
}
|
|
5731
|
+
.tile.fullwidth {
|
|
5732
|
+
width: 100%;
|
|
5733
|
+
max-width: 100%;
|
|
5734
|
+
}
|
|
5732
5735
|
|
|
5733
|
-
|
|
5734
|
-
|
|
5735
|
-
|
|
5736
|
-
|
|
5737
|
-
|
|
5738
|
-
|
|
5739
|
-
min-height: 140px;
|
|
5740
|
-
}
|
|
5736
|
+
.tile img {
|
|
5737
|
+
object-fit: cover;
|
|
5738
|
+
width: 112px;
|
|
5739
|
+
height: 140px;
|
|
5740
|
+
background: linear-gradient(to bottom, #f9f5f0, #f7f2ea);
|
|
5741
|
+
}
|
|
5741
5742
|
|
|
5742
|
-
|
|
5743
|
-
|
|
5744
|
-
|
|
5743
|
+
.info {
|
|
5744
|
+
flex-grow: 1;
|
|
5745
|
+
display: flex;
|
|
5746
|
+
flex-direction: column;
|
|
5747
|
+
justify-content: space-between;
|
|
5748
|
+
row-gap: var(--spacing-s);
|
|
5749
|
+
min-height: 140px;
|
|
5750
|
+
}
|
|
5745
5751
|
|
|
5746
|
-
|
|
5747
|
-
|
|
5748
|
-
|
|
5749
|
-
|
|
5750
|
-
font-size: var(--font-size-200, 16px);
|
|
5751
|
-
font-weight: var(--font-weight-400, 400);
|
|
5752
|
-
line-height: var(--line-height-200, 20px);
|
|
5753
|
-
letter-spacing: var(--letter-spacing-000, 0);
|
|
5754
|
-
text-align: left;
|
|
5755
|
-
display: -webkit-box;
|
|
5756
|
-
-webkit-line-clamp: 2;
|
|
5757
|
-
-webkit-box-orient: vertical;
|
|
5758
|
-
overflow: hidden;
|
|
5759
|
-
}
|
|
5752
|
+
.info:has(o-tag),
|
|
5753
|
+
.info:has(.discount-info) {
|
|
5754
|
+
justify-content: flex-start;
|
|
5755
|
+
}
|
|
5760
5756
|
|
|
5761
|
-
|
|
5762
|
-
|
|
5763
|
-
|
|
5764
|
-
|
|
5765
|
-
|
|
5766
|
-
|
|
5767
|
-
|
|
5768
|
-
|
|
5769
|
-
|
|
5770
|
-
|
|
5771
|
-
|
|
5772
|
-
|
|
5773
|
-
|
|
5757
|
+
.info .title {
|
|
5758
|
+
color: var(--color-content-body, #3f2b2e);
|
|
5759
|
+
font-family: var(--font-family-loccitane-serif);
|
|
5760
|
+
font-size: var(--font-size-200, 16px);
|
|
5761
|
+
font-weight: var(--font-weight-400, 400);
|
|
5762
|
+
line-height: var(--line-height-200, 20px);
|
|
5763
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
5764
|
+
text-align: left;
|
|
5765
|
+
display: -webkit-box;
|
|
5766
|
+
-webkit-line-clamp: 2;
|
|
5767
|
+
-webkit-box-orient: vertical;
|
|
5768
|
+
overflow: hidden;
|
|
5769
|
+
}
|
|
5774
5770
|
|
|
5775
|
-
|
|
5776
|
-
|
|
5777
|
-
|
|
5778
|
-
|
|
5779
|
-
|
|
5771
|
+
.info .description {
|
|
5772
|
+
color: var(--color-content-description, #7e7173);
|
|
5773
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
5774
|
+
font-size: var(--font-size-150, 14px);
|
|
5775
|
+
font-weight: var(--font-weight-400, 400);
|
|
5776
|
+
line-height: var(--line-height-200, 20px);
|
|
5777
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
5778
|
+
text-align: left;
|
|
5779
|
+
display: -webkit-box;
|
|
5780
|
+
-webkit-line-clamp: 2;
|
|
5781
|
+
-webkit-box-orient: vertical;
|
|
5782
|
+
overflow: hidden;
|
|
5783
|
+
}
|
|
5780
5784
|
|
|
5781
|
-
|
|
5782
|
-
|
|
5783
|
-
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
.old-price {
|
|
5787
|
-
color: var(--color-content-description, #7E7173);
|
|
5788
|
-
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
5789
|
-
font-size: var(--font-size-100, 12px);
|
|
5790
|
-
font-style: normal;
|
|
5791
|
-
font-weight: var(--font-weight-400, 400);
|
|
5792
|
-
line-height: var(--line-height-160, 16px); /* 133.333% */
|
|
5793
|
-
letter-spacing: var(--letter-spacing-000, 0);
|
|
5794
|
-
text-decoration-line: line-through;
|
|
5795
|
-
}
|
|
5785
|
+
.info .details {
|
|
5786
|
+
display: flex;
|
|
5787
|
+
align-items: center;
|
|
5788
|
+
justify-content: space-between;
|
|
5789
|
+
}
|
|
5796
5790
|
|
|
5797
|
-
|
|
5791
|
+
.info .discount-info {
|
|
5792
|
+
display: flex;
|
|
5793
|
+
align-items: center;
|
|
5794
|
+
column-gap: var(--spacing-xs);
|
|
5795
|
+
|
|
5796
|
+
.old-price {
|
|
5797
|
+
color: var(--color-content-description, #7e7173);
|
|
5798
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
5799
|
+
font-size: var(--font-size-100, 12px);
|
|
5800
|
+
font-style: normal;
|
|
5801
|
+
font-weight: var(--font-weight-400, 400);
|
|
5802
|
+
line-height: var(--line-height-160, 16px); /* 133.333% */
|
|
5803
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
5804
|
+
text-decoration-line: line-through;
|
|
5805
|
+
}
|
|
5806
|
+
}
|
|
5798
5807
|
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5805
|
-
|
|
5806
|
-
|
|
5807
|
-
|
|
5808
|
-
|
|
5808
|
+
.info .volume-info {
|
|
5809
|
+
color: var(--color-content-description, #7e7173);
|
|
5810
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
5811
|
+
font-size: var(--font-size-100, 12px);
|
|
5812
|
+
font-style: normal;
|
|
5813
|
+
font-weight: var(--font-weight-400, 400);
|
|
5814
|
+
line-height: var(--line-height-160, 16px);
|
|
5815
|
+
text-align: left;
|
|
5816
|
+
letter-spacing: var(--letter-spacing-400, 0.64px);
|
|
5817
|
+
}
|
|
5809
5818
|
|
|
5810
|
-
|
|
5811
|
-
|
|
5812
|
-
|
|
5819
|
+
.info o-tag {
|
|
5820
|
+
display: flex;
|
|
5821
|
+
}
|
|
5813
5822
|
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5823
|
+
.title-volume {
|
|
5824
|
+
display: flex;
|
|
5825
|
+
align-items: flex-start;
|
|
5826
|
+
flex-direction: column;
|
|
5827
|
+
row-gap: var(--spacing-2-xs);
|
|
5828
|
+
}
|
|
5820
5829
|
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
|
|
5826
|
-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
+
.main-price {
|
|
5831
|
+
color: var(--color-content-body, #3f2b2e);
|
|
5832
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
5833
|
+
font-size: var(--font-size-150, 14px);
|
|
5834
|
+
font-style: normal;
|
|
5835
|
+
font-weight: var(--font-weight-400, 400);
|
|
5836
|
+
line-height: var(--line-height-200, 20px); /* 142.857% */
|
|
5837
|
+
letter-spacing: var(--letter-spacing-000, 0);
|
|
5838
|
+
}
|
|
5830
5839
|
|
|
5831
|
-
|
|
5832
|
-
|
|
5833
|
-
|
|
5834
|
-
|
|
5835
|
-
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
+
.per-liter {
|
|
5841
|
+
color: var(--color-content-description, #7e7173);
|
|
5842
|
+
font-family: var(--font-family-loccitane-sans, LOccitaneSans);
|
|
5843
|
+
font-size: var(--font-size-100, 12px);
|
|
5844
|
+
font-style: normal;
|
|
5845
|
+
font-weight: var(--font-weight-400, 400);
|
|
5846
|
+
line-height: var(--line-height-160, 16px);
|
|
5847
|
+
letter-spacing: var(--letter-spacing-400, 0.64px);
|
|
5848
|
+
}
|
|
5840
5849
|
|
|
5841
|
-
|
|
5842
|
-
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
5846
|
-
|
|
5850
|
+
.price-info {
|
|
5851
|
+
display: flex;
|
|
5852
|
+
column-gap: var(--spacing-xs);
|
|
5853
|
+
align-items: center;
|
|
5854
|
+
height: 32px;
|
|
5855
|
+
}
|
|
5847
5856
|
|
|
5848
|
-
|
|
5849
|
-
|
|
5850
|
-
|
|
5857
|
+
.fullpointer {
|
|
5858
|
+
cursor: pointer;
|
|
5859
|
+
}
|
|
5851
5860
|
`;
|
|
5852
5861
|
$([
|
|
5853
5862
|
a({ type: String })
|