JezK

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

{"file":"sc-product-line-item-note2.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,i4BAAi4B,CAAC;AACn6B,oCAAe,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCCmGF,UAAE,gCAAgC,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ui/product-line-item-note/sc-product-line-item-note.scss?tag=sc-product-line-item-note&encapsulation=shadow","src/components/ui/product-line-item-note/sc-product-line-item-note.tsx"],"sourcesContent":[".line-item-note {\n display: flex;\n align-items: flex-start;\n gap: 0.25em;\n min-height: 1.5em;\n\n &--clickable {\n cursor: pointer;\n }\n\n &__text {\n line-height: 1.4;\n flex: 1;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n line-clamp: 1;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: all 0.2s;\n }\n\n &--is-expanded .line-item-note__text {\n display: block;\n line-clamp: unset;\n -webkit-line-clamp: unset;\n overflow: visible;\n text-overflow: unset;\n }\n\n &__toggle {\n background: none;\n border: none;\n color: var(--sc-color-gray-500);\n cursor: pointer;\n padding: 0;\n align-self: flex-start;\n transition: opacity 0.2s ease;\n border-radius: var(--sc-border-radius-small);\n\n &:hover {\n opacity: 0.8;\n }\n\n &:focus-visible {\n outline: 2px solid var(--sc-color-primary-500);\n outline-offset: 2px;\n }\n\n &:focus {\n outline: 2px solid var(--sc-color-primary-500);\n outline-offset: 2px;\n }\n }\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * @part base - The note container\n */\n@Component({\n tag: 'sc-product-line-item-note',\n styleUrl: 'sc-product-line-item-note.scss',\n shadow: true,\n})\nexport class ScProductLineItemNote {\n @Element() el: HTMLElement;\n @Prop() note: string;\n @State() expanded = false;\n @State() isOverflowing = false;\n\n private noteEl?: HTMLDivElement;\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n this.setupObservers();\n this.checkOverflow();\n }\n\n disconnectedCallback() {\n this.cleanupObservers();\n }\n\n setupObservers() {\n if (!this.noteEl) return;\n\n // ResizeObserver for container size changes\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOverflow();\n });\n this.resizeObserver.observe(this.noteEl);\n }\n\n // MutationObserver for content changes\n if (typeof MutationObserver !== 'undefined') {\n this.mutationObserver = new MutationObserver(() => {\n this.checkOverflow();\n });\n this.mutationObserver.observe(this.noteEl, {\n characterData: true,\n subtree: true,\n childList: true,\n });\n }\n }\n\n cleanupObservers() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = undefined;\n }\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n }\n\n checkOverflow() {\n if (!this.noteEl) return;\n this.isOverflowing = this.noteEl.scrollHeight > this.noteEl.clientHeight;\n }\n\n toggle() {\n this.expanded = !this.expanded;\n }\n\n render() {\n if (!this.note) return null;\n\n return (\n <div class=\"base\" part=\"base\">\n <div\n class={{\n 'line-item-note': true,\n 'line-item-note--is-expanded': this.expanded,\n 'line-item-note--clickable': this.isOverflowing || this.expanded,\n }}\n tabIndex={this.isOverflowing || this.expanded ? 0 : undefined}\n onClick={() => (this.isOverflowing || this.expanded) && this.toggle()}\n >\n <div ref={el => (this.noteEl = el as HTMLDivElement)} class=\"line-item-note__text\">\n {this.note}\n </div>\n\n {(this.isOverflowing || this.expanded) && (\n <button\n class=\"line-item-note__toggle\"\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n this.toggle();\n }}\n title={this.expanded ? __('Collapse note', 'surecart') : __('Expand note', 'surecart')}\n >\n <slot name=\"icon\">\n <sc-icon name={this.expanded ? 'chevron-up' : 'chevron-down'} style={{ width: '16px', height: '16px' }}></sc-icon>\n </slot>\n </button>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}