FileMaster

Edit File: sc-product-line-item2.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{i as isRtl}from"./page-align.js";import{d as defineCustomElement$5}from"./sc-button2.js";import{d as defineCustomElement$4}from"./sc-icon2.js";import{d as defineCustomElement$3}from"./sc-product-line-item-note2.js";import{d as defineCustomElement$2}from"./sc-quantity-select2.js";import{d as defineCustomElement$1}from"./sc-spinner2.js";const scProductLineItemCss=":host {\n  display: block;\n  font-family: var(--sc-font-sans);\n  --sc-product-line-item-line-gap: 6px;\n}\n\n.item {\n  box-sizing: border-box;\n  margin: 0px;\n  min-width: 0px;\n  display: flex;\n  gap: var(--sc-spacing-large);\n  justify-content: space-between;\n  align-items: stretch;\n  width: 100%;\n  border-bottom: none;\n  container-type: inline-size;\n}\n.item__text-container {\n  box-sizing: border-box;\n  margin: 0px;\n  min-width: 0px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sc-product-line-item-line-gap);\n  justify-content: space-between;\n  align-items: stretch;\n  width: 100%;\n  border-bottom: none;\n}\n.item__row {\n  display: flex;\n  gap: 18px;\n  justify-content: space-between;\n  align-items: stretch;\n  width: 100%;\n}\n.item__row.stick-bottom {\n  margin-top: auto;\n}\n.item__scratch-price {\n  text-decoration: line-through;\n  font-size: var(--sc-font-size-small);\n  line-height: 1;\n  color: var(--sc-input-help-text-color);\n  white-space: nowrap;\n}\n.item__remove-container {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  line-height: 1;\n  cursor: pointer;\n  color: var(--sc-input-help-text-color);\n  font-size: var(--sc-input-help-text-font-size-medium);\n}\n.item__add-review sc-button {\n  --sc-input-border-radius-small: var(--sc-input-border-radius-medium);\n}\n.item--has-review {\n  border-bottom: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n  padding-top: var(--sc-spacing-small);\n  padding-bottom: var(--sc-spacing-large);\n}\n:host(:first-of-type) .item--has-review {\n  padding-top: 0;\n}\n\n.item__text {\n  box-sizing: border-box;\n  margin: 0px;\n  min-width: 0px;\n  display: flex;\n  gap: 6px;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex: 1 1 0%;\n}\n\n.item__text-details {\n  display: grid;\n  gap: var(--sc-product-line-item-line-gap);\n}\n\n.item__title {\n  box-sizing: border-box;\n  min-width: 0px;\n  margin: 0;\n  color: var(--sc-line-item-title-color, var(--sc-input-label-color));\n  font-size: var(--sc-font-size-medium);\n  font-weight: var(--sc-font-weight-semibold);\n  line-height: 1;\n  cursor: pointer;\n  display: -webkit-box;\n  display: -moz-box;\n  -webkit-box-orient: vertical;\n  -moz-box-orient: vertical;\n  -webkit-line-clamp: 3;\n  -moz-box-lines: 3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item__suffix {\n  flex: 1;\n  box-sizing: border-box;\n  margin: 0px;\n  min-width: 0px;\n  display: flex;\n  flex-direction: column;\n  -webkit-box-pack: start;\n  justify-content: space-between;\n  align-items: flex-end;\n  min-width: 100px;\n  margin-left: auto;\n  align-self: center;\n}\n\n.product-line-item__removable .item__suffix {\n  align-self: flex-start;\n}\n\n.product-line-item__editable .item__suffix {\n  align-self: flex-start;\n}\n\n.product-line-item__purchasable-status {\n  font-size: var(--sc-font-size-x-small);\n  color: var(--sc-input-error-text-color);\n}\n\n.item__price {\n  text-align: right;\n  max-width: 100%;\n  display: grid;\n  gap: var(--sc-product-line-item-line-gap);\n}\n\n.item__description {\n  color: var(--sc-price-label-color, var(--sc-input-help-text-color));\n  font-size: var(--sc-price-label-font-size, var(--sc-input-help-text-font-size-medium));\n  line-height: 1;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  gap: var(--sc-product-line-item-line-gap);\n  text-wrap: pretty;\n}\n.item__description:last-child {\n  align-items: flex-end;\n  text-align: right;\n}\n\n.item__image-placeholder {\n  width: var(--sc-product-line-item-image-size, 65px);\n  height: var(--sc-product-line-item-image-size, 65px);\n  background-color: var(--sc-input-border-color, var(--sc-input-border));\n  border-radius: 4px;\n  flex: 0 0 var(--sc-product-line-item-image-size, 65px);\n}\n\n.item__image,\n.attachment-thumbnail {\n  width: var(--sc-product-line-item-image-size, 65px);\n  height: var(--sc-product-line-item-image-size, 65px);\n  object-fit: cover;\n  border-radius: 4px;\n  border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n  display: block;\n  box-shadow: var(--sc-input-box-shadow);\n  align-self: flex-start;\n}\n\n@container (max-width: 380px) {\n  .item__image,\n  .item__image-placeholder {\n    display: var(--sc-product-line-item-mobile-image-display, none);\n  }\n}\n.product__description {\n  display: flex;\n  gap: 0.5em;\n  align-items: center;\n}\n\n.price {\n  font-size: var(--sc-font-size-medium);\n  font-weight: var(--sc-font-weight-semibold);\n  color: var(--sc-input-label-color);\n  line-height: 1;\n  white-space: nowrap;\n  display: flex;\n  gap: 4px;\n  align-items: baseline;\n}\n\n.price__description {\n  font-size: var(--sc-font-size-small);\n  line-height: 1;\n  color: var(--sc-input-help-text-color);\n  text-align: right;\n  white-space: nowrap;\n}\n\n.item--is-rtl.price {\n  text-align: right;\n}\n.item--is-rtl .item__price {\n  text-align: left;\n}\n\n.base {\n  display: grid;\n  gap: var(--sc-spacing-x-small);\n}\n\n.fee__description {\n  color: var(--sc-input-help-text-color);\n}\n\nsc-quantity-select::part(base) {\n  box-shadow: none;\n  background-color: transparent;\n}\n\nsc-quantity-select::part(base):not(:focus-within) {\n  border-color: transparent;\n}\n\nsc-quantity-select::part(input),\nsc-quantity-select::part(plus),\nsc-quantity-select::part(minus) {\n  background-color: transparent;\n}",ScProductLineItemStyle0=scProductLineItemCss,ScProductLineItem=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scUpdateQuantity=createEvent(this,"scUpdateQuantity",3),this.scRemove=createEvent(this,"scRemove",3),this.image=void 0,this.name=void 0,this.amount=void 0,this.scratch=void 0,this.displayAmount=void 0,this.scratchDisplayAmount=void 0,this.fees=void 0,this.price=void 0,this.variant="",this.quantity=void 0,this.interval=void 0,this.trial=void 0,this.removable=void 0,this.editable=!0,this.max=void 0,this.sku="",this.purchasableStatus=void 0,this.note=void 0,this.reviewButtonLink=""}render(){var e,t,i;const n="fallback"===(null===(e=this.image)||void 0===e?void 0:e.type);return h("div",{key:"b553bdad8ea2fa2ffcf30e66f8d8b2961057b748",class:"base",part:"base"},h("div",{key:"4db7b4d52efa257554c6a7084bb9e6b0f7afbedf",part:"product-line-item",class:{item:!0,"item--has-image":!!(null===(t=this.image)||void 0===t?void 0:t.src),"item--has-review":!!this.reviewButtonLink,"item--is-rtl":isRtl(),"product-line-item__editable":this.editable,"product-line-item__removable":this.removable}},(null===(i=this.image)||void 0===i?void 0:i.src)?h("img",{...this.image,part:n?"placeholder__image":"image",class:n?"item__image-placeholder":"item__image"}):h("div",{class:"item__image-placeholder",part:"placeholder__image"}),h("div",{key:"1e80f070fbd4b4a790b5e5bbe7e10970df98a37a",class:"item__text-container"},h("div",{key:"058ce0255d082dce2b5745105aaa9aeb80d67163",class:"item__row"},h("div",{key:"5f5ed2d71bf2ab9cf550e4858f969e4ff5bf34d4",class:"item__title",part:"title"},h("slot",{key:"0966d5db9de5899fb532123113dea8b485c9b7d4",name:"title"},this.name)),h("div",{key:"1fb17ec773cfb542ceb20edd3940124127e78166",class:"price",part:"price__amount"},!!this.scratch&&this.scratch!==this.amount&&h("span",{key:"e78a07196374f382a907e5ae441ccd77034bec4a",class:"item__scratch-price"},this.scratch),this.amount,h("div",{key:"cfedec68e693098dedf06e932d2e0b49be4337a0",class:"price__description",part:"price__description"},this.interval))),h("div",{key:"79e895fb3c1961c95993300661e9039ee3565de8",class:"item__row"},h("div",{key:"767ec97d9c70d3818d948e3482817996b4bf85e6",class:"item__description",part:"description"},this.variant&&h("div",{key:"a02b7732daef7ba8945218526ee719c8271473b3"},this.variant),this.price&&h("div",{key:"4fc7cca615f5e29d7289fe84ba078a16ec3b3457"},this.price),this.sku&&h("div",{key:"721b27dd68368252e569da7b06ec530cf6b11e8e"},wp.i18n.__("SKU:","surecart")," ",this.sku),!!this.purchasableStatus&&h("div",{key:"af1ce39138e90283884d29ea34b8c78c5cf059db"},this.purchasableStatus),!!this.note&&h("sc-product-line-item-note",{key:"9083d146210e97b476e45bd5ce193218db5afdcc",note:this.note})),h("div",{key:"6d2aa2308d93412c7829b3349009570bf85b2ef6",class:"item__description",part:"trial-fees"},!!this.trial&&h("div",{key:"c305ec881ca6aea1cda272670b2b58dd68ef1252"},this.trial),(this.fees||[]).map((e=>h("div",null,null==e?void 0:e.display_amount," ",null==e?void 0:e.description))))),h("div",{key:"053fea0393d722833008539aa6fce9a69000cd69",class:"item__row stick-bottom"},this.editable?h("sc-quantity-select",{max:this.max||1/0,exportparts:"base:quantity, minus:quantity__minus, minus-icon:quantity__minus-icon, plus:quantity__plus, plus-icon:quantity__plus-icon, input:quantity__input",clickEl:this.el,quantity:this.quantity,size:"small",onScChange:e=>e.detail&&this.scUpdateQuantity.emit(e.detail),"aria-label":
/** translators: %1$s: product name, %2$s: product price name */
wp.i18n.sprintf(wp.i18n.__("Change Quantity - %1$s %2$s","surecart"),this.name,this.price),productName:this.name}):h("span",{class:"item__description",part:"static-quantity"},wp.i18n.__("Qty:","surecart")," ",this.quantity),!!this.reviewButtonLink&&h("div",{key:"8f975b73d27cec4726fc1bbf5c7801c2b740701a",class:"item__add-review"},h("sc-button",{key:"901682bbd48896cc06ef1b02e85bcfb2bb932b71",size:"small",href:this.reviewButtonLink,target:"_blank"},wp.i18n.__("Review Product","surecart"))),!!this.removable&&h("div",{key:"0cee91503109d0dc4a461703106030249c867f75",class:"item__remove-container",onClick:()=>this.scRemove.emit(),onKeyDown:e=>{"Enter"===e.key&&this.scRemove.emit()},"aria-label":wp.i18n.sprintf(wp.i18n.__("Remove Item - %1$s %2$s","surecart"),this.name,this.amount),tabIndex:0},h("sc-icon",{key:"adb433dbad2c5b0b23a876527aeb745e8060bab4",exportparts:"base:remove-icon__base",class:"item__remove",name:"x"}),h("span",{key:"48410c607f3e561a8192af2f62010121bc0ea0dd",class:"item__remove-text"},wp.i18n.__("Remove","surecart")))))))}get el(){return this}static get style(){return ScProductLineItemStyle0}},[1,"sc-product-line-item",{image:[16],name:[1],amount:[1],scratch:[1],displayAmount:[1,"display-amount"],scratchDisplayAmount:[1,"scratch-display-amount"],fees:[16],price:[1],variant:[1],quantity:[2],interval:[1],trial:[1],removable:[4],editable:[4],max:[2],sku:[1],purchasableStatus:[1,"purchasable-status"],note:[1],reviewButtonLink:[1,"review-button-link"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-product-line-item","sc-button","sc-icon","sc-product-line-item-note","sc-quantity-select","sc-spinner"].forEach((e=>{switch(e){case"sc-product-line-item":customElements.get(e)||customElements.define(e,ScProductLineItem);break;case"sc-button":customElements.get(e)||defineCustomElement$5();break;case"sc-icon":customElements.get(e)||defineCustomElement$4();break;case"sc-product-line-item-note":customElements.get(e)||defineCustomElement$3();break;case"sc-quantity-select":customElements.get(e)||defineCustomElement$2();break;case"sc-spinner":customElements.get(e)||defineCustomElement$1()}}))}export{ScProductLineItem as S,defineCustomElement as d};

Back