FileMaster

Edit File: sc-product-line-item-note2.js

import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as defineCustomElement$1}from"./sc-icon2.js";const scProductLineItemNoteCss=".line-item-note{display:flex;align-items:flex-start;gap:0.25em;min-height:1.5em}.line-item-note--clickable{cursor:pointer}.line-item-note__text{line-height:1.4;flex:1;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;transition:all 0.2s}.line-item-note--is-expanded .line-item-note__text{display:block;line-clamp:unset;-webkit-line-clamp:unset;overflow:visible;text-overflow:unset}.line-item-note__toggle{background:none;border:none;color:var(--sc-color-gray-500);cursor:pointer;padding:0;align-self:flex-start;transition:opacity 0.2s ease;border-radius:var(--sc-border-radius-small)}.line-item-note__toggle:hover{opacity:0.8}.line-item-note__toggle:focus-visible{outline:2px solid var(--sc-color-primary-500);outline-offset:2px}.line-item-note__toggle:focus{outline:2px solid var(--sc-color-primary-500);outline-offset:2px}",ScProductLineItemNoteStyle0=scProductLineItemNoteCss,ScProductLineItemNote=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.note=void 0,this.expanded=!1,this.isOverflowing=!1}componentDidLoad(){this.setupObservers(),this.checkOverflow()}disconnectedCallback(){this.cleanupObservers()}setupObservers(){this.noteEl&&("undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{this.checkOverflow()})),this.resizeObserver.observe(this.noteEl)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>{this.checkOverflow()})),this.mutationObserver.observe(this.noteEl,{characterData:!0,subtree:!0,childList:!0})))}cleanupObservers(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=void 0)}checkOverflow(){this.noteEl&&(this.isOverflowing=this.noteEl.scrollHeight>this.noteEl.clientHeight)}toggle(){this.expanded=!this.expanded}render(){return this.note?h("div",{class:"base",part:"base"},h("div",{class:{"line-item-note":!0,"line-item-note--is-expanded":this.expanded,"line-item-note--clickable":this.isOverflowing||this.expanded},tabIndex:this.isOverflowing||this.expanded?0:void 0,onClick:()=>(this.isOverflowing||this.expanded)&&this.toggle()},h("div",{ref:e=>this.noteEl=e,class:"line-item-note__text"},this.note),(this.isOverflowing||this.expanded)&&h("button",{class:"line-item-note__toggle",type:"button",onClick:e=>{e.stopPropagation(),this.toggle()},title:this.expanded?wp.i18n.__("Collapse note","surecart"):wp.i18n.__("Expand note","surecart")},h("slot",{name:"icon"},h("sc-icon",{name:this.expanded?"chevron-up":"chevron-down",style:{width:"16px",height:"16px"}}))))):null}get el(){return this}static get style(){return ScProductLineItemNoteStyle0}},[1,"sc-product-line-item-note",{note:[1],expanded:[32],isOverflowing:[32]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-product-line-item-note","sc-icon"].forEach((e=>{switch(e){case"sc-product-line-item-note":customElements.get(e)||customElements.define(e,ScProductLineItemNote);break;case"sc-icon":customElements.get(e)||defineCustomElement$1()}}))}export{ScProductLineItemNote as S,defineCustomElement as d};

Back