npm - zignal-stencil-library - Versions diffs - 1.1.121 → 1.1.123 - Mend

zignal-stencil-library 1.1.121 → 1.1.123

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.

Files changed (391) hide show

package/dist/collection/components/quick-message-add-template/quick-message-image-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-image-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-image-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAKlD,MAAM,OAAO,iCAAiC;IACpC,OAAO,CAA8B;IACrC,WAAW,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,OAAO;IAEL,aAAa,CAA6C;IAEnF,YAAY,CAAU;IAE/B,SAAS,CAAoB;IAE7B,WAAW,CAAC,MAA4C;QAC9D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,EAAE,CAAC;QACnD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACvC,CAAC;IAEgB,iBAAiB,GAAG,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEe,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;QACnD,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACjC,IAAI,CAAC,YAAY,GAAG,cAAc,EAAE,CAAC,+BAA+B,CAAC,CAAC;YACtE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAChC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,MAAM,GAAG,GAAG,MAAM,CAAC,MAAgB,CAAC;YACpC,IAAI,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACnB,CAAC,CAAC;QACF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEe,iBAAiB,GAAG,GAAG,EAAE;QACxC,IAAI,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvC,MAAM,CAAC,GAAG,cAAc,EAAE,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;QAEtC,MAAM,WAAW,GAAG,~~oBAAoB~~,~~KAAK,EAAE,~~CAAC;~~QAChD~~,MAAM,gBAAgB,GAAG,~~kBAAkB~~,~~KAAK,EAAE,~~CAAC;~~QACnD~~,MAAM,aAAa,GAAG,~~eAAe~~,~~KAAK,EAAE,~~CAAC;~~QAE7C~~,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;~~YAC3B~~,WAAK,KAAK,EAAC,kCAAkC;gBAC3C,aAAO,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,GAAI;gBAE3I,OAAO,CAAC,CAAC,CAAC,CACT,WAAK,KAAK,EAAE,~~8FAA8F~~,~~KAAK,cAAc,~~WAAW,EAAE;~~oBACxI~~,WAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAC,MAAM,GAAG;oBACtG,WAAK,KAAK,EAAC,uIAAuI;wBAChJ,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,~~4DAA4D~~,~~KAAK~~,~~uEAAuE,EAC/I,~~OAAO,EAAE,IAAI,CAAC,iBAAiB;4BAE/B,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,~~iBAAiB~~,~~KAAK,EAAE,~~GAAI;~~4BACzD~~,YAAM,KAAK,EAAE,~~UAAU~~,~~KAAK,EAAE,~~IAAG,CAAC,CAAC,4BAA4B,CAAC,CAAQ,~~CACjE~~;wBACT,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,~~4DAA4D~~,~~KAAK~~,~~qEAAqE,EAC7I,~~OAAO,EAAE,IAAI,CAAC,iBAAiB;4BAE/B,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,GAAG;4BACxC,YAAM,KAAK,EAAC,cAAc,IAAE,CAAC,CAAC,QAAQ,CAAC,CAAQ,CACxC,CACL,CACF,CACP,CAAC,CAAC,CAAC,CACF,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,~~oHAAoH~~,~~KAAK,0EAA0E,KAAK,IAAI,~~WAAW,iBAAiB,EAC/O,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBAE/B,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,WAAW,gBAAgB,EAAE,GAAI;oBAC9D,YAAM,KAAK,EAAE,yCAAyC,gBAAgB,EAAE;;wBAAK,CAAC,CAAC,yBAAyB,CAAC,CAAQ;oBACjH,YAAM,KAAK,EAAE,2BAA2B,aAAa,EAAE,IAAG,CAAC,CAAC,+BAA+B,CAAC,CAAQ,CAC7F,CACV;gBAEA,IAAI,CAAC,YAAY,IAAI,SAAG,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,YAAY,CAAK,CAC9E,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\nimport { QuickMessageTemplateContent } from '../../store/type';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\n\n@Component({\n tag: 'quick-message-image-content',\n})\nexport class QuickMessageImageContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxFileSize = 10 * 1024 * 1024; // 10MB\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() private errorMessage?: string;\n\n private fileInput?: HTMLInputElement;\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n const nextContent = { ...this.content, ...update };\n this.contentChange.emit(nextContent);\n }\n\n private readonly handleSelectClick = () => {\n this.fileInput?.click();\n };\n\n private readonly handleFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n const file = input.files?.[0];\n if (!file) {\n return;\n }\n\n if (file.size > this.maxFileSize) {\n this.errorMessage = useTranslation()('quick_message.image_too_large');\n input.value = '';\n return;\n }\n\n const reader = new FileReader();\n reader.onload = () => {\n const url = reader.result as string;\n this.emitContent({ file_url: url });\n this.errorMessage = undefined;\n input.value = '';\n };\n reader.readAsDataURL(file);\n };\n\n private readonly handleRemoveImage = () => {\n this.emitContent({ file_url: '' });\n this.errorMessage = undefined;\n };\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const t = useTranslation();\n const preview = this.content.file_url;\n\n const borderClass = `z-border-primary~~-${theme}~~`;\n const primaryTextClass = `z-text-primary~~-${theme}~~`;\n const grayTextClass = `z-text-gray~~-${theme}~~`;\n\n return (\n <div class=\"flex justify-end\">\n <div class=\"max-w-xs h-[220px] aspect-square\">\n <input type=\"file\" accept=\"image/*\" class=\"hidden\" ref={el => (this.fileInput = el as HTMLInputElement)} onChange={this.handleFileChange} />\n\n {preview ? (\n <div class={`group h-[220px] relative w-full overflow-hidden rounded-[18px] border-[1.5px] z-background~~-${theme}~~ shadow-sm ${borderClass}`}>\n <img src={preview} alt=\"preview-message-image\" class=\"h-[220px] w-full object-cover\" loading=\"lazy\" />\n <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100\">\n <button\n type=\"button\"\n class={`inline-flex items-center gap-2 rounded-full z-background~~-${theme}~~ px-4 py-2 text-xs font-semibold text-slate-700 shadow cursor-pointer`}\n onClick={this.handleSelectClick}\n >\n <Icon name=\"Image\" addClass={`size-4 z-~~text-${theme}~~`} />\n <span class={`z-~~text-${theme}~~`}>{t('quick_message.change_image')}</span>\n </button>\n <button\n type=\"button\"\n class={`inline-flex items-center gap-2 rounded-full z-background~~-${theme}~~ px-4 py-2 text-xs font-semibold text-red-500 shadow cursor-pointer`}\n onClick={this.handleRemoveImage}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n <span class=\"text-red-500\">{t('remove')}</span>\n </button>\n </div>\n </div>\n ) : (\n <button\n type=\"button\"\n class={`flex w-full flex-col items-center justify-center gap-2 rounded-[18px] border-[1.5px] border-current z-background~~-${theme}~~ px-8 py-12 text-center shadow-sm transition-colors hover:z-background~~-${theme}~~ ${borderClass} cursor-pointer`}\n onClick={this.handleSelectClick}\n >\n <Icon name=\"Image\" addClass={`size-12 ${primaryTextClass}`} />\n <span class={`text-base font-semibold leading-tight ${primaryTextClass}`}>+ {t('quick_message.add_image')}</span>\n <span class={`text-[13px] font-medium ${grayTextClass}`}>{t('quick_message.image_size_hint')}</span>\n </button>\n )}\n\n {this.errorMessage && <p class=\"mt-2 text-xs text-red-500\">{this.errorMessage}</p>}\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"quick-message-image-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-image-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\nimport { QuickMessageTemplateContent } from '../../store/type';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\n\n@Component({\n tag: 'quick-message-image-content',\n})\nexport class QuickMessageImageContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxFileSize = 10 * 1024 * 1024; // 10MB\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() private errorMessage?: string;\n\n private fileInput?: HTMLInputElement;\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n const nextContent = { ...this.content, ...update };\n this.contentChange.emit(nextContent);\n }\n\n private readonly handleSelectClick = () => {\n this.fileInput?.click();\n };\n\n private readonly handleFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n const file = input.files?.[0];\n if (!file) {\n return;\n }\n\n if (file.size > this.maxFileSize) {\n this.errorMessage = useTranslation()('quick_message.image_too_large');\n input.value = '';\n return;\n }\n\n const reader = new FileReader();\n reader.onload = () => {\n const url = reader.result as string;\n this.emitContent({ file_url: url });\n this.errorMessage = undefined;\n input.value = '';\n };\n reader.readAsDataURL(file);\n };\n\n private readonly handleRemoveImage = () => {\n this.emitContent({ file_url: '' });\n this.errorMessage = undefined;\n };\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const t = useTranslation();\n const preview = this.content.file_url;\n\n const borderClass = `border-primary`;\n const primaryTextClass = `text-primary`;\n const grayTextClass = `text-theme-gray`;\n\n return (\n <div class=\"flex justify-end\" data-theme={theme}>\n <div class=\"max-w-xs h-[220px] aspect-square\">\n <input type=\"file\" accept=\"image/*\" class=\"hidden\" ref={el => (this.fileInput = el as HTMLInputElement)} onChange={this.handleFileChange} />\n\n {preview ? (\n <div class={`group h-[220px] relative w-full overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm ${borderClass}`}>\n <img src={preview} alt=\"preview-message-image\" class=\"h-[220px] w-full object-cover\" loading=\"lazy\" />\n <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100\">\n <button\n type=\"button\"\n class={`inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-slate-700 shadow cursor-pointer`}\n onClick={this.handleSelectClick}\n >\n <Icon name=\"Image\" addClass={`size-4 text-surface`} />\n <span class={`text-surface`}>{t('quick_message.change_image')}</span>\n </button>\n <button\n type=\"button\"\n class={`inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-red-500 shadow cursor-pointer`}\n onClick={this.handleRemoveImage}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n <span class=\"text-red-500\">{t('remove')}</span>\n </button>\n </div>\n </div>\n ) : (\n <button\n type=\"button\"\n class={`flex w-full flex-col items-center justify-center gap-2 rounded-[18px] border-[1.5px] border-current bg-background px-8 py-12 text-center shadow-sm transition-colors hover:bg-background ${borderClass} cursor-pointer`}\n onClick={this.handleSelectClick}\n >\n <Icon name=\"Image\" addClass={`size-12 ${primaryTextClass}`} />\n <span class={`text-base font-semibold leading-tight ${primaryTextClass}`}>+ {t('quick_message.add_image')}</span>\n <span class={`text-[13px] font-medium ${grayTextClass}`}>{t('quick_message.image_size_hint')}</span>\n </button>\n )}\n\n {this.errorMessage && <p class=\"mt-2 text-xs text-red-500\">{this.errorMessage}</p>}\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-menu-list-content.js CHANGED Viewed

@@ -199,11 +199,7 @@ export class QuickMessageMenuListContentComponent {
         const error = this.menuErrors[menu.id];
         const isFirst = index === 0;
         const isLast = index === total - 1;
-        const borderClass = `z-border-primary-${theme}`;
-        const primaryTextClass = `z-text-primary-${theme}`;
-        const grayTextClass = `z-text-gray-${theme}`;
-        const backgroundClass = `z-background-${theme}`;
-        return (h("div", { class: "relative flex shrink-0 flex-col", key: menu.id }, h("div", { class: `relative flex w-[250px] flex-col overflow-hidden rounded-[18px] border-[1.5px] shadow-sm ${borderClass} ${backgroundClass}` }, h("div", { class: "pointer-events-none absolute left-3 right-3 top-3 z-10 flex items-center justify-between" }, h("div", { class: "flex items-center gap-2 pointer-events-auto" }, !isFirst && (h("button", { type: "button", class: `inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} ${backgroundClass} transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`, "aria-label": t('quick_message.move_left'), onClick: () => this.reorderMenu(menu.id, 'prev') }, h(Icon, { name: "ChevronLeft", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: `inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} ${backgroundClass} transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`, "aria-label": t('quick_message.move_right'), onClick: () => this.reorderMenu(menu.id, 'next') }, h(Icon, { name: "ChevronRight", addClass: "size-4" })))), h("button", { type: "button", class: `pointer-events-auto inline-flex h-8 w-8 items-center justify-center rounded-full z-background-${theme} text-red-500 shadow focus:outline-none focus:ring-2 focus:ring-red-200 cursor-pointer hover:bg-white`, onClick: () => this.handleDeleteMenu(menu.id), "aria-label": t('remove') }, h(Icon, { name: "Trash2", addClass: "size-4" }))), h("div", { class: `group relative h-[180px] overflow-hidden border-b-[1.5px] ${borderClass}` }, h("input", { type: "file", accept: "image/*", class: "hidden", ref: el => (this.fileInputs[menu.id] = el), onChange: event => this.handleImageChange(menu.id, event) }), menu.file_url ? (h(Fragment, null, h("img", { src: menu.file_url, alt: menu.title || t('quick_message.add_image'), class: "h-full w-full object-cover", loading: "lazy" }), h("div", { class: "absolute inset-0 flex items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h("button", { type: "button", class: "inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow", onClick: () => this.handleSelectImage(menu.id) }, h(Icon, { name: "Image", addClass: "size-4" }), h("span", null, t('quick_message.change_image'))), h("button", { type: "button", class: "inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-red-500 shadow", onClick: () => this.handleRemoveImage(menu.id) }, h(Icon, { name: "Trash2", addClass: "size-4" }), h("span", null, t('remove')))))) : (h("button", { type: "button", class: `flex h-full w-full flex-col items-center justify-center gap-2 border-0 px-4 text-center ${primaryTextClass} ${backgroundClass} cursor-pointer`, onClick: () => this.handleSelectImage(menu.id) }, h(Icon, { name: "Image", addClass: "size-12" }), h("span", { class: "text-sm font-semibold leading-tight" }, "+ ", t('quick_message.add_image')), h("span", { class: `text-xs font-medium ${grayTextClass}` }, t('quick_message.image_size_hint'))))), h("div", { class: "flex flex-col gap-2 px-2 py-2" }, h("div", null, h("textarea", { value: title, maxLength: this.maxTitleLength, rows: 2, placeholder: t('quick_message.type_title_here'), class: "w-full resize-none border-0 bg-transparent text-sm font-semibold leading-snug focus:outline-none focus:ring-0", onInput: event => this.setMenuTitle(menu.id, event.target.value) }), h("div", { class: `text-right text-xs ${grayTextClass}` }, title.length, "/", this.maxTitleLength)), h("div", null, h("textarea", { value: description, maxLength: this.maxDescriptionLength, rows: 2, placeholder: t('quick_message.type_description_here'), class: "w-full resize-none border-0 bg-transparent text-xs leading-snug focus:outline-none focus:ring-0", onInput: event => this.setMenuDescription(menu.id, event.target.value) }), h("div", { class: `text-right text-xs ${grayTextClass}` }, description.length, "/", this.maxDescriptionLength)), h(QuickMessageTemplateButtonList, { theme: theme, buttons: buttons, maxButtonCount: this.maxButtonCount, addButtonLabel: t('quick_message.add_button'), onButtonClick: button => this.openButtonDialog(menu.id, button), onAddButton: () => this.openButtonDialog(menu.id), onReorderButton: (buttonId, direction) => this.reorderMenuButton(menu.id, buttonId, direction), listClass: "flex flex-col gap-2", buttonClass: "px-3" }))), error && h("p", { class: "mt-2 text-xs font-medium text-red-500" }, error)));
+        return (h("div", { class: "relative flex shrink-0 flex-col", key: menu.id, "data-theme": theme }, h("div", { class: "relative flex w-[250px] flex-col overflow-hidden rounded-[18px] border-[1.5px] shadow-sm border-primary bg-background" }, h("div", { class: "pointer-events-none absolute left-3 right-3 top-3 z-10 flex items-center justify-between" }, h("div", { class: "flex items-center gap-2 pointer-events-auto" }, !isFirst && (h("button", { type: "button", class: "inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] border-primary text-primary bg-background transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer", "aria-label": t('quick_message.move_left'), onClick: () => this.reorderMenu(menu.id, 'prev') }, h(Icon, { name: "ChevronLeft", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: "inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] border-primary text-primary bg-background transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer", "aria-label": t('quick_message.move_right'), onClick: () => this.reorderMenu(menu.id, 'next') }, h(Icon, { name: "ChevronRight", addClass: "size-4" })))), h("button", { type: "button", class: "pointer-events-auto inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-red-500 shadow focus:outline-none focus:ring-2 focus:ring-red-200 cursor-pointer hover:bg-white", onClick: () => this.handleDeleteMenu(menu.id), "aria-label": t('remove') }, h(Icon, { name: "Trash2", addClass: "size-4" }))), h("div", { class: "group relative h-[180px] overflow-hidden border-b-[1.5px] border-primary" }, h("input", { type: "file", accept: "image/*", class: "hidden", ref: el => (this.fileInputs[menu.id] = el), onChange: event => this.handleImageChange(menu.id, event) }), menu.file_url ? (h(Fragment, null, h("img", { src: menu.file_url, alt: menu.title || t('quick_message.add_image'), class: "h-full w-full object-cover", loading: "lazy" }), h("div", { class: "absolute inset-0 flex items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h("button", { type: "button", class: "inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow", onClick: () => this.handleSelectImage(menu.id) }, h(Icon, { name: "Image", addClass: "size-4" }), h("span", null, t('quick_message.change_image'))), h("button", { type: "button", class: "inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-red-500 shadow", onClick: () => this.handleRemoveImage(menu.id) }, h(Icon, { name: "Trash2", addClass: "size-4" }), h("span", null, t('remove')))))) : (h("button", { type: "button", class: "flex h-full w-full flex-col items-center justify-center gap-2 border-0 px-4 text-center text-primary bg-background cursor-pointer", onClick: () => this.handleSelectImage(menu.id) }, h(Icon, { name: "Image", addClass: "size-12" }), h("span", { class: "text-sm font-semibold leading-tight" }, "+ ", t('quick_message.add_image')), h("span", { class: "text-xs font-medium text-theme-gray" }, t('quick_message.image_size_hint'))))), h("div", { class: "flex flex-col gap-2 px-2 py-2" }, h("div", null, h("textarea", { value: title, maxLength: this.maxTitleLength, rows: 2, placeholder: t('quick_message.type_title_here'), class: "w-full resize-none border-0 bg-transparent text-sm font-semibold leading-snug focus:outline-none focus:ring-0", onInput: event => this.setMenuTitle(menu.id, event.target.value) }), h("div", { class: "text-right text-xs text-theme-gray" }, title.length, "/", this.maxTitleLength)), h("div", null, h("textarea", { value: description, maxLength: this.maxDescriptionLength, rows: 2, placeholder: t('quick_message.type_description_here'), class: "w-full resize-none border-0 bg-transparent text-xs leading-snug focus:outline-none focus:ring-0", onInput: event => this.setMenuDescription(menu.id, event.target.value) }), h("div", { class: "text-right text-xs text-theme-gray" }, description.length, "/", this.maxDescriptionLength)), h(QuickMessageTemplateButtonList, { buttons: buttons, maxButtonCount: this.maxButtonCount, addButtonLabel: t('quick_message.add_button'), onButtonClick: button => this.openButtonDialog(menu.id, button), onAddButton: () => this.openButtonDialog(menu.id), onReorderButton: (buttonId, direction) => this.reorderMenuButton(menu.id, buttonId, direction), listClass: "flex flex-col gap-2", buttonClass: "px-3" }))), error && h("p", { class: "mt-2 text-xs font-medium text-red-500" }, error)));
     }
     render() {
         if (!this.content) {
@@ -212,7 +208,7 @@ export class QuickMessageMenuListContentComponent {
         const theme = configStore.get('theme');
         const t = useTranslation();
         const menus = this.content.menu_list || [];
-        return (h("div", { class: "flex flex-col gap-3 items-end overflow-x-auto" }, h("div", { class: "flex max-w-full gap-3 pb-2" }, menus.map((menu, index) => this.renderMenuCard(menu, index, menus.length, theme, t)), menus.length < this.maxMenuList && (h("button", { type: "button", class: `flex h-[280px] w-[200px] shrink-0 items-center justify-center rounded-[18px] border-[1.5px] border-dashed text-2xl font-semibold ${`z-border-primary-${theme}`} ${`z-text-primary-${theme}`} ${`z-background-${theme}`} cursor-pointer`, onClick: () => this.handleAddMenu() }, h(Icon, { name: "Plus", addClass: "size-8" })))), h(QuickMessageTemplateButtonDialog, { theme: theme, isOpen: this.isButtonDialogOpen, isEditing: !!this.editingButtonId, label: this.buttonDialogLabel, actionValue: this.buttonDialogAction, actionType: this.buttonDialogType, maxButtonNameLength: this.maxButtonNameLength, onLabelInput: value => (this.buttonDialogLabel = value), onActionInput: value => (this.buttonDialogAction = value), onActionTypeChange: type => this.setButtonDialogType(type), onClose: () => this.closeButtonDialog(), onSave: () => this.handleButtonSave(), onDelete: this.editingButtonId ? () => this.handleDeleteButton() : undefined })));
+        return (h("div", { class: "flex flex-col gap-3 items-end overflow-x-auto" }, h("div", { class: "flex max-w-full gap-3 pb-2" }, menus.map((menu, index) => this.renderMenuCard(menu, index, menus.length, theme, t)), menus.length < this.maxMenuList && (h("button", { type: "button", class: "flex h-[280px] w-[200px] shrink-0 items-center justify-center rounded-[18px] border-[1.5px] border-dashed text-2xl font-semibold border-primary text-primary bg-background cursor-pointer", onClick: () => this.handleAddMenu() }, h(Icon, { name: "Plus", addClass: "size-8" })))), h(QuickMessageTemplateButtonDialog, { isOpen: this.isButtonDialogOpen, isEditing: !!this.editingButtonId, label: this.buttonDialogLabel, actionValue: this.buttonDialogAction, actionType: this.buttonDialogType, maxButtonNameLength: this.maxButtonNameLength, onLabelInput: value => (this.buttonDialogLabel = value), onActionInput: value => (this.buttonDialogAction = value), onActionTypeChange: type => this.setButtonDialogType(type), onClose: () => this.closeButtonDialog(), onSave: () => this.handleButtonSave(), onDelete: this.editingButtonId ? () => this.handleDeleteButton() : undefined })));
     }
     static get is() { return "quick-message-menu-list-content"; }
     static get properties() {

package/dist/collection/components/quick-message-add-template/quick-message-menu-list-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-menu-list-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-menu-list-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Fragment, Prop, State, h } from '@stencil/core';\nimport { QuickMessageTemplateButton, QuickMessageTemplateButtonAction, QuickMessageTemplateContent, QuickMessageTemplateMenuListItem } from '../../store/type';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { QuickMessageTemplateButtonList } from './quick-message-template-button-list';\nimport { QuickMessageTemplateButtonDialog } from './quick-message-template-button-dialog';\n\n@Component({\n tag: 'quick-message-menu-list-content',\n})\nexport class QuickMessageMenuListContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxMenuList: number = 10;\n @Prop() maxFileSize = 10 * 1024 * 1024; // 10MB\n @Prop() maxTitleLength: number = 80;\n @Prop() maxDescriptionLength: number = 80;\n @Prop() maxButtonCount: number = 3;\n @Prop() maxButtonNameLength: number = 20;\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() private isButtonDialogOpen = false;\n @State() private buttonDialogMenuId?: string;\n @State() private buttonDialogLabel: string = '';\n @State() private buttonDialogAction: string = '';\n @State() private buttonDialogType: QuickMessageTemplateButtonAction = 'text';\n @State() private editingButtonId?: string;\n @State() private menuErrors: Record<string, string \| undefined> = {};\n\n private fileInputs: Record<string, HTMLInputElement \| undefined> = {};\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n const nextContent = { ...this.content, ...update };\n this.contentChange.emit(nextContent);\n }\n\n private updateMenuList(updater: (menus: QuickMessageTemplateMenuListItem[]) => QuickMessageTemplateMenuListItem[]) {\n if (!this.content) {\n return;\n }\n\n const currentMenus = this.content.menu_list \|\| [];\n const nextMenus = updater(currentMenus);\n this.emitContent({ menu_list: nextMenus });\n }\n\n private updateMenu(menuId: string, updater: (menu: QuickMessageTemplateMenuListItem) => QuickMessageTemplateMenuListItem) {\n this.updateMenuList(menus =>\n menus.map(menu => {\n if (menu.id !== menuId) {\n return menu;\n }\n\n const draft: QuickMessageTemplateMenuListItem = {\n ...menu,\n buttons: [...(menu.buttons \|\| [])],\n };\n\n return updater(draft);\n }),\n );\n }\n\n private readonly handleAddMenu = () => {\n const totalMenus = this.content?.menu_list?.length \|\| 0;\n if (totalMenus >= this.maxMenuList) {\n return;\n }\n\n const newMenu: QuickMessageTemplateMenuListItem = {\n id: `menu-${Date.now()}-${Math.floor(Math.random() * 1000)}`,\n buttons: [],\n };\n\n this.updateMenuList(menus => [...menus, newMenu]);\n };\n\n private handleDeleteMenu(menuId: string) {\n this.updateMenuList(menus => menus.filter(menu => menu.id !== menuId));\n const { [menuId]: _, ...rest } = this.menuErrors;\n this.menuErrors = rest;\n }\n\n private reorderMenu(menuId: string, direction: 'prev' \| 'next') {\n this.updateMenuList(menus => {\n const currentIndex = menus.findIndex(menu => menu.id === menuId);\n if (currentIndex === -1) {\n return menus;\n }\n\n const targetIndex = direction === 'prev' ? currentIndex - 1 : currentIndex + 1;\n if (targetIndex < 0 \|\| targetIndex >= menus.length) {\n return menus;\n }\n\n const nextMenus = [...menus];\n [nextMenus[currentIndex], nextMenus[targetIndex]] = [nextMenus[targetIndex], nextMenus[currentIndex]];\n return nextMenus;\n });\n }\n\n private setMenuTitle(menuId: string, title: string) {\n this.updateMenu(menuId, menu => ({ ...menu, title }));\n }\n\n private setMenuDescription(menuId: string, description: string) {\n this.updateMenu(menuId, menu => ({ ...menu, description }));\n }\n\n private handleSelectImage(menuId: string) {\n this.fileInputs[menuId]?.click();\n }\n\n private handleImageChange(menuId: string, event: Event) {\n const input = event.target as HTMLInputElement;\n const file = input.files?.[0];\n const t = useTranslation();\n\n if (!file) {\n return;\n }\n\n if (file.size > this.maxFileSize) {\n this.menuErrors = { ...this.menuErrors, [menuId]: t('quick_message.image_too_large') };\n input.value = '';\n return;\n }\n\n const reader = new FileReader();\n reader.onload = () => {\n const url = reader.result as string;\n this.updateMenu(menuId, menu => ({ ...menu, file_url: url }));\n this.menuErrors = { ...this.menuErrors, [menuId]: undefined };\n input.value = '';\n };\n reader.readAsDataURL(file);\n }\n\n private handleRemoveImage(menuId: string) {\n this.updateMenu(menuId, menu => ({ ...menu, file_url: undefined }));\n this.menuErrors = { ...this.menuErrors, [menuId]: undefined };\n }\n\n private openButtonDialog(menuId: string, button?: QuickMessageTemplateButton) {\n this.buttonDialogMenuId = menuId;\n this.editingButtonId = button?.id;\n this.buttonDialogLabel = button?.text \|\| '';\n this.buttonDialogType = button?.action_type \|\| 'text';\n this.buttonDialogAction = button && button.action ? button.action : '';\n this.isButtonDialogOpen = true;\n }\n\n private closeButtonDialog() {\n this.isButtonDialogOpen = false;\n this.buttonDialogMenuId = undefined;\n this.editingButtonId = undefined;\n this.buttonDialogLabel = '';\n this.buttonDialogAction = '';\n this.buttonDialogType = 'text';\n }\n\n private setButtonDialogType(type: QuickMessageTemplateButtonAction) {\n this.buttonDialogType = type;\n if (type === 'text') {\n this.buttonDialogAction = '';\n }\n }\n\n private handleButtonSave() {\n if (!this.buttonDialogMenuId) {\n return;\n }\n\n const label = this.buttonDialogLabel.trim();\n const actionType = this.buttonDialogType;\n const actionValue = actionType === 'text' ? undefined : this.buttonDialogAction.trim();\n\n if (!label \|\| (actionType !== 'text' && !actionValue)) {\n return;\n }\n\n const button: QuickMessageTemplateButton = {\n id: this.editingButtonId \|\| `menu-button-${Date.now()}-${Math.floor(Math.random() * 1000)}`,\n action_type: actionType,\n text: label,\n action: actionValue,\n };\n\n this.updateMenu(this.buttonDialogMenuId, menu => {\n const buttons = menu.buttons \|\| [];\n\n if (this.editingButtonId) {\n return {\n ...menu,\n buttons: buttons.map(current => (current.id === this.editingButtonId ? button : current)),\n };\n }\n\n if (buttons.length >= this.maxButtonCount) {\n return menu;\n }\n\n return { ...menu, buttons: [...buttons, button] };\n });\n\n this.closeButtonDialog();\n }\n\n private handleDeleteButton() {\n if (!this.buttonDialogMenuId \|\| !this.editingButtonId) {\n return;\n }\n\n this.updateMenu(this.buttonDialogMenuId, menu => ({\n ...menu,\n buttons: (menu.buttons \|\| []).filter(button => button.id !== this.editingButtonId),\n }));\n\n this.closeButtonDialog();\n }\n\n private reorderMenuButton(menuId: string, buttonId: string, direction: 'up' \| 'down') {\n this.updateMenu(menuId, menu => {\n const buttons = menu.buttons \|\| [];\n const currentIndex = buttons.findIndex(button => button.id === buttonId);\n if (currentIndex === -1) {\n return menu;\n }\n\n const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;\n if (targetIndex < 0 \|\| targetIndex >= buttons.length) {\n return menu;\n }\n\n const nextButtons = [...buttons];\n [nextButtons[currentIndex], nextButtons[targetIndex]] = [nextButtons[targetIndex], nextButtons[currentIndex]];\n\n return { ...menu, buttons: nextButtons };\n });\n }\n\n private renderMenuCard(menu: QuickMessageTemplateMenuListItem, index: number, total: number, theme: string, t: ReturnType<typeof useTranslation>) {\n const title = menu.title \|\| '';\n const description = menu.description \|\| '';\n const buttons = menu.buttons \|\| [];\n const error = this.menuErrors[menu.id];\n const isFirst = index === 0;\n const isLast = index === total - 1;\n\n const borderClass = `z-border-primary-${theme}`;\n const primaryTextClass = `z-text-primary-${theme}`;\n const grayTextClass = `z-text-gray-${theme}`;\n const backgroundClass = `z-background-${theme}`;\n\n return (\n <div class=\"relative flex shrink-0 flex-col\" key={menu.id}>\n <div class={`relative flex w-[250px] flex-col overflow-hidden rounded-[18px] border-[1.5px] shadow-sm ${borderClass} ${backgroundClass}`}>\n <div class=\"pointer-events-none absolute left-3 right-3 top-3 z-10 flex items-center justify-between\">\n <div class=\"flex items-center gap-2 pointer-events-auto\">\n {!isFirst && (\n <button\n type=\"button\"\n class={`inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} ${backgroundClass} transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`}\n aria-label={t('quick_message.move_left')}\n onClick={() => this.reorderMenu(menu.id, 'prev')}\n >\n <Icon name=\"ChevronLeft\" addClass=\"size-4\" />\n </button>\n )}\n {!isLast && (\n <button\n type=\"button\"\n class={`inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} ${backgroundClass} transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`}\n aria-label={t('quick_message.move_right')}\n onClick={() => this.reorderMenu(menu.id, 'next')}\n >\n <Icon name=\"ChevronRight\" addClass=\"size-4\" />\n </button>\n )}\n </div>\n <button\n type=\"button\"\n class={`pointer-events-auto inline-flex h-8 w-8 items-center justify-center rounded-full z-background-${theme} text-red-500 shadow focus:outline-none focus:ring-2 focus:ring-red-200 cursor-pointer hover:bg-white`}\n onClick={() => this.handleDeleteMenu(menu.id)}\n aria-label={t('remove')}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n </button>\n </div>\n <div class={`group relative h-[180px] overflow-hidden border-b-[1.5px] ${borderClass}`}>\n <input\n type=\"file\"\n accept=\"image/*\"\n class=\"hidden\"\n ref={el => (this.fileInputs[menu.id] = el as HTMLInputElement)}\n onChange={event => this.handleImageChange(menu.id, event)}\n />\n {menu.file_url ? (\n <Fragment>\n <img src={menu.file_url} alt={menu.title \|\| t('quick_message.add_image')} class=\"h-full w-full object-cover\" loading=\"lazy\" />\n <div class=\"absolute inset-0 flex items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100\">\n <button\n type=\"button\"\n class=\"inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow\"\n onClick={() => this.handleSelectImage(menu.id)}\n >\n <Icon name=\"Image\" addClass=\"size-4\" />\n <span>{t('quick_message.change_image')}</span>\n </button>\n <button\n type=\"button\"\n class=\"inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-red-500 shadow\"\n onClick={() => this.handleRemoveImage(menu.id)}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n <span>{t('remove')}</span>\n </button>\n </div>\n </Fragment>\n ) : (\n <button\n type=\"button\"\n class={`flex h-full w-full flex-col items-center justify-center gap-2 border-0 px-4 text-center ${primaryTextClass} ${backgroundClass} cursor-pointer`}\n onClick={() => this.handleSelectImage(menu.id)}\n >\n <Icon name=\"Image\" addClass=\"size-12\" />\n <span class=\"text-sm font-semibold leading-tight\">+ {t('quick_message.add_image')}</span>\n <span class={`text-xs font-medium ${grayTextClass}`}>{t('quick_message.image_size_hint')}</span>\n </button>\n )}\n </div>\n\n <div class=\"flex flex-col gap-2 px-2 py-2\">\n <div>\n <textarea\n value={title}\n maxLength={this.maxTitleLength}\n rows={2}\n placeholder={t('quick_message.type_title_here')}\n class=\"w-full resize-none border-0 bg-transparent text-sm font-semibold leading-snug focus:outline-none focus:ring-0\"\n onInput={event => this.setMenuTitle(menu.id, (event.target as HTMLTextAreaElement).value)}\n />\n <div class={`text-right text-xs ${grayTextClass}`}>\n {title.length}/{this.maxTitleLength}\n </div>\n </div>\n\n <div>\n <textarea\n value={description}\n maxLength={this.maxDescriptionLength}\n rows={2}\n placeholder={t('quick_message.type_description_here')}\n class=\"w-full resize-none border-0 bg-transparent text-xs leading-snug focus:outline-none focus:ring-0\"\n onInput={event => this.setMenuDescription(menu.id, (event.target as HTMLTextAreaElement).value)}\n />\n <div class={`text-right text-xs ${grayTextClass}`}>\n {description.length}/{this.maxDescriptionLength}\n </div>\n </div>\n\n <QuickMessageTemplateButtonList\n theme={theme}\n buttons={buttons}\n maxButtonCount={this.maxButtonCount}\n addButtonLabel={t('quick_message.add_button')}\n onButtonClick={button => this.openButtonDialog(menu.id, button)}\n onAddButton={() => this.openButtonDialog(menu.id)}\n onReorderButton={(buttonId, direction) => this.reorderMenuButton(menu.id, buttonId, direction)}\n listClass=\"flex flex-col gap-2\"\n buttonClass=\"px-3\"\n />\n </div>\n </div>\n\n {error && <p class=\"mt-2 text-xs font-medium text-red-500\">{error}</p>}\n </div>\n );\n }\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const t = useTranslation();\n const menus = this.content.menu_list \|\| [];\n\n return (\n <div class=\"flex flex-col gap-3 items-end overflow-x-auto\">\n <div class=\"flex max-w-full gap-3 pb-2\">\n {menus.map((menu, index) => this.renderMenuCard(menu, index, menus.length, theme, t))}\n {menus.length < this.maxMenuList && (\n <button\n type=\"button\"\n class={`flex h-[280px] w-[200px] shrink-0 items-center justify-center rounded-[18px] border-[1.5px] border-dashed text-2xl font-semibold ${`z-border-primary-${theme}`} ${`z-text-primary-${theme}`} ${`z-background-${theme}`} cursor-pointer`}\n onClick={() => this.handleAddMenu()}\n >\n <Icon name=\"Plus\" addClass=\"size-8\" />\n </button>\n )}\n </div>\n\n <QuickMessageTemplateButtonDialog\n theme={theme}\n isOpen={this.isButtonDialogOpen}\n isEditing={!!this.editingButtonId}\n label={this.buttonDialogLabel}\n actionValue={this.buttonDialogAction}\n actionType={this.buttonDialogType}\n maxButtonNameLength={this.maxButtonNameLength}\n onLabelInput={value => (this.buttonDialogLabel = value)}\n onActionInput={value => (this.buttonDialogAction = value)}\n onActionTypeChange={type => this.setButtonDialogType(type)}\n onClose={() => this.closeButtonDialog()}\n onSave={() => this.handleButtonSave()}\n onDelete={this.editingButtonId ? () => this.handleDeleteButton() : undefined}\n />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"quick-message-menu-list-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-menu-list-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Fragment, Prop, State, h } from '@stencil/core';\nimport { QuickMessageTemplateButton, QuickMessageTemplateButtonAction, QuickMessageTemplateContent, QuickMessageTemplateMenuListItem } from '../../store/type';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { QuickMessageTemplateButtonList } from './quick-message-template-button-list';\nimport { QuickMessageTemplateButtonDialog } from './quick-message-template-button-dialog';\n\n@Component({\n tag: 'quick-message-menu-list-content',\n})\nexport class QuickMessageMenuListContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxMenuList: number = 10;\n @Prop() maxFileSize = 10 * 1024 * 1024; // 10MB\n @Prop() maxTitleLength: number = 80;\n @Prop() maxDescriptionLength: number = 80;\n @Prop() maxButtonCount: number = 3;\n @Prop() maxButtonNameLength: number = 20;\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() private isButtonDialogOpen = false;\n @State() private buttonDialogMenuId?: string;\n @State() private buttonDialogLabel: string = '';\n @State() private buttonDialogAction: string = '';\n @State() private buttonDialogType: QuickMessageTemplateButtonAction = 'text';\n @State() private editingButtonId?: string;\n @State() private menuErrors: Record<string, string \| undefined> = {};\n\n private fileInputs: Record<string, HTMLInputElement \| undefined> = {};\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n const nextContent = { ...this.content, ...update };\n this.contentChange.emit(nextContent);\n }\n\n private updateMenuList(updater: (menus: QuickMessageTemplateMenuListItem[]) => QuickMessageTemplateMenuListItem[]) {\n if (!this.content) {\n return;\n }\n\n const currentMenus = this.content.menu_list \|\| [];\n const nextMenus = updater(currentMenus);\n this.emitContent({ menu_list: nextMenus });\n }\n\n private updateMenu(menuId: string, updater: (menu: QuickMessageTemplateMenuListItem) => QuickMessageTemplateMenuListItem) {\n this.updateMenuList(menus =>\n menus.map(menu => {\n if (menu.id !== menuId) {\n return menu;\n }\n\n const draft: QuickMessageTemplateMenuListItem = {\n ...menu,\n buttons: [...(menu.buttons \|\| [])],\n };\n\n return updater(draft);\n }),\n );\n }\n\n private readonly handleAddMenu = () => {\n const totalMenus = this.content?.menu_list?.length \|\| 0;\n if (totalMenus >= this.maxMenuList) {\n return;\n }\n\n const newMenu: QuickMessageTemplateMenuListItem = {\n id: `menu-${Date.now()}-${Math.floor(Math.random() * 1000)}`,\n buttons: [],\n };\n\n this.updateMenuList(menus => [...menus, newMenu]);\n };\n\n private handleDeleteMenu(menuId: string) {\n this.updateMenuList(menus => menus.filter(menu => menu.id !== menuId));\n const { [menuId]: _, ...rest } = this.menuErrors;\n this.menuErrors = rest;\n }\n\n private reorderMenu(menuId: string, direction: 'prev' \| 'next') {\n this.updateMenuList(menus => {\n const currentIndex = menus.findIndex(menu => menu.id === menuId);\n if (currentIndex === -1) {\n return menus;\n }\n\n const targetIndex = direction === 'prev' ? currentIndex - 1 : currentIndex + 1;\n if (targetIndex < 0 \|\| targetIndex >= menus.length) {\n return menus;\n }\n\n const nextMenus = [...menus];\n [nextMenus[currentIndex], nextMenus[targetIndex]] = [nextMenus[targetIndex], nextMenus[currentIndex]];\n return nextMenus;\n });\n }\n\n private setMenuTitle(menuId: string, title: string) {\n this.updateMenu(menuId, menu => ({ ...menu, title }));\n }\n\n private setMenuDescription(menuId: string, description: string) {\n this.updateMenu(menuId, menu => ({ ...menu, description }));\n }\n\n private handleSelectImage(menuId: string) {\n this.fileInputs[menuId]?.click();\n }\n\n private handleImageChange(menuId: string, event: Event) {\n const input = event.target as HTMLInputElement;\n const file = input.files?.[0];\n const t = useTranslation();\n\n if (!file) {\n return;\n }\n\n if (file.size > this.maxFileSize) {\n this.menuErrors = { ...this.menuErrors, [menuId]: t('quick_message.image_too_large') };\n input.value = '';\n return;\n }\n\n const reader = new FileReader();\n reader.onload = () => {\n const url = reader.result as string;\n this.updateMenu(menuId, menu => ({ ...menu, file_url: url }));\n this.menuErrors = { ...this.menuErrors, [menuId]: undefined };\n input.value = '';\n };\n reader.readAsDataURL(file);\n }\n\n private handleRemoveImage(menuId: string) {\n this.updateMenu(menuId, menu => ({ ...menu, file_url: undefined }));\n this.menuErrors = { ...this.menuErrors, [menuId]: undefined };\n }\n\n private openButtonDialog(menuId: string, button?: QuickMessageTemplateButton) {\n this.buttonDialogMenuId = menuId;\n this.editingButtonId = button?.id;\n this.buttonDialogLabel = button?.text \|\| '';\n this.buttonDialogType = button?.action_type \|\| 'text';\n this.buttonDialogAction = button && button.action ? button.action : '';\n this.isButtonDialogOpen = true;\n }\n\n private closeButtonDialog() {\n this.isButtonDialogOpen = false;\n this.buttonDialogMenuId = undefined;\n this.editingButtonId = undefined;\n this.buttonDialogLabel = '';\n this.buttonDialogAction = '';\n this.buttonDialogType = 'text';\n }\n\n private setButtonDialogType(type: QuickMessageTemplateButtonAction) {\n this.buttonDialogType = type;\n if (type === 'text') {\n this.buttonDialogAction = '';\n }\n }\n\n private handleButtonSave() {\n if (!this.buttonDialogMenuId) {\n return;\n }\n\n const label = this.buttonDialogLabel.trim();\n const actionType = this.buttonDialogType;\n const actionValue = actionType === 'text' ? undefined : this.buttonDialogAction.trim();\n\n if (!label \|\| (actionType !== 'text' && !actionValue)) {\n return;\n }\n\n const button: QuickMessageTemplateButton = {\n id: this.editingButtonId \|\| `menu-button-${Date.now()}-${Math.floor(Math.random() * 1000)}`,\n action_type: actionType,\n text: label,\n action: actionValue,\n };\n\n this.updateMenu(this.buttonDialogMenuId, menu => {\n const buttons = menu.buttons \|\| [];\n\n if (this.editingButtonId) {\n return {\n ...menu,\n buttons: buttons.map(current => (current.id === this.editingButtonId ? button : current)),\n };\n }\n\n if (buttons.length >= this.maxButtonCount) {\n return menu;\n }\n\n return { ...menu, buttons: [...buttons, button] };\n });\n\n this.closeButtonDialog();\n }\n\n private handleDeleteButton() {\n if (!this.buttonDialogMenuId \|\| !this.editingButtonId) {\n return;\n }\n\n this.updateMenu(this.buttonDialogMenuId, menu => ({\n ...menu,\n buttons: (menu.buttons \|\| []).filter(button => button.id !== this.editingButtonId),\n }));\n\n this.closeButtonDialog();\n }\n\n private reorderMenuButton(menuId: string, buttonId: string, direction: 'up' \| 'down') {\n this.updateMenu(menuId, menu => {\n const buttons = menu.buttons \|\| [];\n const currentIndex = buttons.findIndex(button => button.id === buttonId);\n if (currentIndex === -1) {\n return menu;\n }\n\n const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;\n if (targetIndex < 0 \|\| targetIndex >= buttons.length) {\n return menu;\n }\n\n const nextButtons = [...buttons];\n [nextButtons[currentIndex], nextButtons[targetIndex]] = [nextButtons[targetIndex], nextButtons[currentIndex]];\n\n return { ...menu, buttons: nextButtons };\n });\n }\n\n private renderMenuCard(menu: QuickMessageTemplateMenuListItem, index: number, total: number, theme: string, t: ReturnType<typeof useTranslation>) {\n const title = menu.title \|\| '';\n const description = menu.description \|\| '';\n const buttons = menu.buttons \|\| [];\n const error = this.menuErrors[menu.id];\n const isFirst = index === 0;\n const isLast = index === total - 1;\n\n\n return (\n <div class=\"relative flex shrink-0 flex-col\" key={menu.id} data-theme={theme}>\n <div class=\"relative flex w-[250px] flex-col overflow-hidden rounded-[18px] border-[1.5px] shadow-sm border-primary bg-background\">\n <div class=\"pointer-events-none absolute left-3 right-3 top-3 z-10 flex items-center justify-between\">\n <div class=\"flex items-center gap-2 pointer-events-auto\">\n {!isFirst && (\n <button\n type=\"button\"\n class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] border-primary text-primary bg-background transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer\"\n aria-label={t('quick_message.move_left')}\n onClick={() => this.reorderMenu(menu.id, 'prev')}\n >\n <Icon name=\"ChevronLeft\" addClass=\"size-4\" />\n </button>\n )}\n {!isLast && (\n <button\n type=\"button\"\n class=\"inline-flex h-8 w-8 items-center justify-center rounded-full border-[1.5px] border-primary text-primary bg-background transition-colors hover:bg-white focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer\"\n aria-label={t('quick_message.move_right')}\n onClick={() => this.reorderMenu(menu.id, 'next')}\n >\n <Icon name=\"ChevronRight\" addClass=\"size-4\" />\n </button>\n )}\n </div>\n <button\n type=\"button\"\n class=\"pointer-events-auto inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-red-500 shadow focus:outline-none focus:ring-2 focus:ring-red-200 cursor-pointer hover:bg-white\"\n onClick={() => this.handleDeleteMenu(menu.id)}\n aria-label={t('remove')}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n </button>\n </div>\n <div class=\"group relative h-[180px] overflow-hidden border-b-[1.5px] border-primary\">\n <input\n type=\"file\"\n accept=\"image/*\"\n class=\"hidden\"\n ref={el => (this.fileInputs[menu.id] = el as HTMLInputElement)}\n onChange={event => this.handleImageChange(menu.id, event)}\n />\n {menu.file_url ? (\n <Fragment>\n <img src={menu.file_url} alt={menu.title \|\| t('quick_message.add_image')} class=\"h-full w-full object-cover\" loading=\"lazy\" />\n <div class=\"absolute inset-0 flex items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100\">\n <button\n type=\"button\"\n class=\"inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow\"\n onClick={() => this.handleSelectImage(menu.id)}\n >\n <Icon name=\"Image\" addClass=\"size-4\" />\n <span>{t('quick_message.change_image')}</span>\n </button>\n <button\n type=\"button\"\n class=\"inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs font-semibold text-red-500 shadow\"\n onClick={() => this.handleRemoveImage(menu.id)}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n <span>{t('remove')}</span>\n </button>\n </div>\n </Fragment>\n ) : (\n <button\n type=\"button\"\n class=\"flex h-full w-full flex-col items-center justify-center gap-2 border-0 px-4 text-center text-primary bg-background cursor-pointer\"\n onClick={() => this.handleSelectImage(menu.id)}\n >\n <Icon name=\"Image\" addClass=\"size-12\" />\n <span class=\"text-sm font-semibold leading-tight\">+ {t('quick_message.add_image')}</span>\n <span class=\"text-xs font-medium text-theme-gray\">{t('quick_message.image_size_hint')}</span>\n </button>\n )}\n </div>\n\n <div class=\"flex flex-col gap-2 px-2 py-2\">\n <div>\n <textarea\n value={title}\n maxLength={this.maxTitleLength}\n rows={2}\n placeholder={t('quick_message.type_title_here')}\n class=\"w-full resize-none border-0 bg-transparent text-sm font-semibold leading-snug focus:outline-none focus:ring-0\"\n onInput={event => this.setMenuTitle(menu.id, (event.target as HTMLTextAreaElement).value)}\n />\n <div class=\"text-right text-xs text-theme-gray\">\n {title.length}/{this.maxTitleLength}\n </div>\n </div>\n\n <div>\n <textarea\n value={description}\n maxLength={this.maxDescriptionLength}\n rows={2}\n placeholder={t('quick_message.type_description_here')}\n class=\"w-full resize-none border-0 bg-transparent text-xs leading-snug focus:outline-none focus:ring-0\"\n onInput={event => this.setMenuDescription(menu.id, (event.target as HTMLTextAreaElement).value)}\n />\n <div class=\"text-right text-xs text-theme-gray\">\n {description.length}/{this.maxDescriptionLength}\n </div>\n </div>\n\n <QuickMessageTemplateButtonList\n buttons={buttons}\n maxButtonCount={this.maxButtonCount}\n addButtonLabel={t('quick_message.add_button')}\n onButtonClick={button => this.openButtonDialog(menu.id, button)}\n onAddButton={() => this.openButtonDialog(menu.id)}\n onReorderButton={(buttonId, direction) => this.reorderMenuButton(menu.id, buttonId, direction)}\n listClass=\"flex flex-col gap-2\"\n buttonClass=\"px-3\"\n />\n </div>\n </div>\n\n {error && <p class=\"mt-2 text-xs font-medium text-red-500\">{error}</p>}\n </div>\n );\n }\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const t = useTranslation();\n const menus = this.content.menu_list \|\| [];\n\n return (\n <div class=\"flex flex-col gap-3 items-end overflow-x-auto\">\n <div class=\"flex max-w-full gap-3 pb-2\">\n {menus.map((menu, index) => this.renderMenuCard(menu, index, menus.length, theme, t))}\n {menus.length < this.maxMenuList && (\n <button\n type=\"button\"\n class=\"flex h-[280px] w-[200px] shrink-0 items-center justify-center rounded-[18px] border-[1.5px] border-dashed text-2xl font-semibold border-primary text-primary bg-background cursor-pointer\"\n onClick={() => this.handleAddMenu()}\n >\n <Icon name=\"Plus\" addClass=\"size-8\" />\n </button>\n )}\n </div>\n\n <QuickMessageTemplateButtonDialog\n isOpen={this.isButtonDialogOpen}\n isEditing={!!this.editingButtonId}\n label={this.buttonDialogLabel}\n actionValue={this.buttonDialogAction}\n actionType={this.buttonDialogType}\n maxButtonNameLength={this.maxButtonNameLength}\n onLabelInput={value => (this.buttonDialogLabel = value)}\n onActionInput={value => (this.buttonDialogAction = value)}\n onActionTypeChange={type => this.setButtonDialogType(type)}\n onClose={() => this.closeButtonDialog()}\n onSave={() => this.handleButtonSave()}\n onDelete={this.editingButtonId ? () => this.handleDeleteButton() : undefined}\n />\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-template-button-dialog.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { useTranslation } from "../../utils/utils";
 import { isValidTelephoneNumber, isValidUrl } from "../../utils/validators";
 import { Icon } from "../internal-component/icon";
 import { ZButton } from "../internal-component/z-button";
-export const QuickMessageTemplateButtonDialog = ({ theme, isOpen, isEditing, label, actionValue, actionType, maxButtonNameLength, onLabelInput, onActionInput, onActionTypeChange, onClose, onSave, onDelete, }) => {
+export const QuickMessageTemplateButtonDialog = ({ isOpen, isEditing, label, actionValue, actionType, maxButtonNameLength, onLabelInput, onActionInput, onActionTypeChange, onClose, onSave, onDelete, }) => {
     if (!isOpen) {
         return null;
     }
@@ -30,6 +30,6 @@ export const QuickMessageTemplateButtonDialog = ({ theme, isOpen, isEditing, lab
         { value: 'url', label: t('quick_message.button_action_url') },
         { value: 'tel', label: t('quick_message.button_action_tel') },
     ];
-    return (h("div", { class: "quick-message-button-content__dialog-backdrop", onClick: () => onClose() }, h("div", { class: `quick-message-button-content__dialog z-background-${theme} z-text-${theme} rounded-2xl p-5 shadow-xl`, role: "dialog", "aria-modal": "true", onClick: event => event.stopPropagation() }, h("div", { class: "flex items-start justify-between" }, h("h3", { class: "text-base font-semibold" }, isEditing ? t('quick_message.edit_button') : t('quick_message.add_button')), h("button", { type: "button", class: "inline-flex cursor-pointer items-center justify-center rounded-full p-1", onClick: () => onClose() }, h(Icon, { name: "X" }))), h("div", { class: "quick-message-button-content__dialog-body mt-4 flex flex-col gap-4" }, h("div", null, h("label", { class: `text-sm font-medium z-text-gray-${theme}` }, t('quick_message.button_label')), h("div", { class: "mt-2" }, h("input", { type: "text", value: label, maxLength: maxButtonNameLength, placeholder: t('quick_message.button_label_placeholder'), class: `w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary z-border-primary-${theme} z-background-${theme}`, onInput: event => onLabelInput(event.target.value) }), h("div", { class: `mt-1 text-right text-xs z-text-gray-${theme}` }, label.length, "/", maxButtonNameLength))), h("div", { class: `flex items-center justify-between border-b z-border-primary-${theme}` }, actionTabs.map(tab => (h("button", { type: "button", class: `quick-message-button-content__tab flex-1 cursor-pointer border-b-2 px-2 pb-2 text-center text-sm font-medium transition-colors ${actionType === tab.value ? `z-text-primary-${theme}` : `z-text-gray-${theme}`}`, style: { borderColor: actionType === tab.value ? 'currentColor' : 'transparent' }, onClick: () => onActionTypeChange(tab.value) }, tab.label)))), h("div", { class: `quick-message-button-content__action ${requiresActionField ? '' : 'quick-message-button-content__action--empty'}` }, requiresActionField && (h(Fragment, null, h("label", { class: `text-sm font-medium z-text-gray-${theme}` }, actionType === 'url' ? t('quick_message.button_action_url') : t('quick_message.button_action_tel')), h("input", { type: actionType === 'tel' ? 'tel' : 'url', value: actionValue, placeholder: actionPlaceholder, class: `mt-2 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary z-background-${theme} ${actionError ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : `z-border-primary-${theme}`}`, onInput: event => onActionInput(event.target.value) }), actionError && h("p", { class: "mt-1 text-xs text-red-500" }, actionError))))), h("div", { class: "mt-6 flex gap-3" }, !isEditing && h(ZButton, { variant: "outlined", label: t('cancel'), fullWidth: true, onClick: () => onClose() }), isEditing && onDelete && h(ZButton, { variant: "outlined", label: t('remove'), fullWidth: true, onClick: () => onDelete() }), h(ZButton, { variant: "primary", label: t('save'), fullWidth: true, disabled: disableSave, onClick: () => onSave() })))));
+    return (h("div", { class: "quick-message-button-content__dialog-backdrop", onClick: () => onClose() }, h("div", { class: "quick-message-button-content__dialog bg-background text-surface rounded-2xl p-5 shadow-xl", role: "dialog", "aria-modal": "true", onClick: event => event.stopPropagation() }, h("div", { class: "flex items-start justify-between" }, h("h3", { class: "text-base font-semibold" }, isEditing ? t('quick_message.edit_button') : t('quick_message.add_button')), h("button", { type: "button", class: "inline-flex cursor-pointer items-center justify-center rounded-full p-1", onClick: () => onClose() }, h(Icon, { name: "X" }))), h("div", { class: "quick-message-button-content__dialog-body mt-4 flex flex-col gap-4" }, h("div", null, h("label", { class: "text-sm font-medium text-theme-gray" }, t('quick_message.button_label')), h("div", { class: "mt-2" }, h("input", { type: "text", value: label, maxLength: maxButtonNameLength, placeholder: t('quick_message.button_label_placeholder'), class: "w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary border-primary bg-background", onInput: event => onLabelInput(event.target.value) }), h("div", { class: "mt-1 text-right text-xs text-theme-gray" }, label.length, "/", maxButtonNameLength))), h("div", { class: "flex items-center justify-between border-b border-primary" }, actionTabs.map(tab => (h("button", { type: "button", class: `quick-message-button-content__tab flex-1 cursor-pointer border-b-2 px-2 pb-2 text-center text-sm font-medium transition-colors ${actionType === tab.value ? 'text-primary' : 'text-theme-gray'}`, style: { borderColor: actionType === tab.value ? 'currentColor' : 'transparent' }, onClick: () => onActionTypeChange(tab.value) }, tab.label)))), h("div", { class: `quick-message-button-content__action ${requiresActionField ? '' : 'quick-message-button-content__action--empty'}` }, requiresActionField && (h(Fragment, null, h("label", { class: "text-sm font-medium text-theme-gray" }, actionType === 'url' ? t('quick_message.button_action_url') : t('quick_message.button_action_tel')), h("input", { type: actionType === 'tel' ? 'tel' : 'url', value: actionValue, placeholder: actionPlaceholder, class: `mt-2 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary bg-background ${actionError ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : `border-primary`}`, onInput: event => onActionInput(event.target.value) }), actionError && h("p", { class: "mt-1 text-xs text-red-500" }, actionError))))), h("div", { class: "mt-6 flex gap-3" }, !isEditing && h(ZButton, { variant: "outlined", label: t('cancel'), fullWidth: true, onClick: () => onClose() }), isEditing && onDelete && h(ZButton, { variant: "outlined", label: t('remove'), fullWidth: true, onClick: () => onDelete() }), h(ZButton, { variant: "primary", label: t('save'), fullWidth: true, disabled: disableSave, onClick: () => onSave() })))));
 };
 //# sourceMappingURL=quick-message-template-button-dialog.js.map

package/dist/collection/components/quick-message-add-template/quick-message-template-button-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-template-button-dialog.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-template-button-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { QuickMessageTemplateButtonAction } from '../../store/type';\nimport { useTranslation } from '../../utils/utils';\nimport { isValidTelephoneNumber, isValidUrl } from '../../utils/validators';\nimport { Icon } from '../internal-component/icon';\nimport { ZButton } from '../internal-component/z-button';\n\ninterface QuickMessageTemplateButtonDialogProps {\n theme: string;\n isOpen: boolean;\n isEditing: boolean;\n label: string;\n actionValue: string;\n actionType: QuickMessageTemplateButtonAction;\n maxButtonNameLength: number;\n onLabelInput: (value: string) => void;\n onActionInput: (value: string) => void;\n onActionTypeChange: (value: QuickMessageTemplateButtonAction) => void;\n onClose: () => void;\n onSave: () => void;\n onDelete?: () => void;\n}\n\nexport const QuickMessageTemplateButtonDialog: FunctionalComponent<QuickMessageTemplateButtonDialogProps> = ({\n theme,\n isOpen,\n isEditing,\n label,\n actionValue,\n actionType,\n maxButtonNameLength,\n onLabelInput,\n onActionInput,\n onActionTypeChange,\n onClose,\n onSave,\n onDelete,\n}) => {\n if (!isOpen) {\n return null;\n }\n\n const t = useTranslation();\n const requiresActionField = actionType !== 'text';\n const actionPlaceholder = actionType === 'url' ? t('quick_message.button_action_url_placeholder') : actionType === 'tel' ? t('quick_message.button_action_tel_placeholder') : '';\n\n const trimmedLabel = label.trim();\n const trimmedActionValue = actionValue.trim();\n\n let actionError: string \| undefined;\n if (requiresActionField) {\n if (!trimmedActionValue) {\n actionError = t('quick_message.button_action_required');\n } else if (actionType === 'url' && !isValidUrl(trimmedActionValue)) {\n actionError = t('quick_message.button_action_url_invalid');\n } else if (actionType === 'tel' && !isValidTelephoneNumber(trimmedActionValue)) {\n actionError = t('quick_message.button_action_tel_invalid');\n }\n }\n\n const disableSave = !trimmedLabel \|\| (requiresActionField && !!actionError);\n\n const actionTabs: Array<{ value: QuickMessageTemplateButtonAction; label: string }> = [\n { value: 'text', label: t('quick_message.button_action_text') },\n { value: 'url', label: t('quick_message.button_action_url') },\n { value: 'tel', label: t('quick_message.button_action_tel') },\n ];\n\n return (\n <div class=\"quick-message-button-content__dialog-backdrop\" onClick={() => onClose()}>\n <div\n class={`quick-message-button-content__dialog z-background-${theme} z-text-${theme} rounded-2xl p-5 shadow-xl`}\n role=\"dialog\"\n aria-modal=\"true\"\n onClick={event => event.stopPropagation()}\n >\n <div class=\"flex items-start justify-between\">\n <h3 class=\"text-base font-semibold\">{isEditing ? t('quick_message.edit_button') : t('quick_message.add_button')}</h3>\n <button type=\"button\" class=\"inline-flex cursor-pointer items-center justify-center rounded-full p-1\" onClick={() => onClose()}>\n <Icon name=\"X\" />\n </button>\n </div>\n\n <div class=\"quick-message-button-content__dialog-body mt-4 flex flex-col gap-4\">\n <div>\n <label class={`text-sm font-medium z-text-gray-${theme}`}>{t('quick_message.button_label')}</label>\n <div class=\"mt-2\">\n <input\n type=\"text\"\n value={label}\n maxLength={maxButtonNameLength}\n placeholder={t('quick_message.button_label_placeholder')}\n class={`w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary z-border-primary-${theme} z-background-${theme}`}\n onInput={event => onLabelInput((event.target as HTMLInputElement).value)}\n />\n <div class={`mt-1 text-right text-xs z-text-gray-${theme}`}>\n {label.length}/{maxButtonNameLength}\n </div>\n </div>\n </div>\n\n <div class={`flex items-center justify-between border-b z-border-primary-${theme}`}>\n {actionTabs.map(tab => (\n <button\n type=\"button\"\n class={`quick-message-button-content__tab flex-1 cursor-pointer border-b-2 px-2 pb-2 text-center text-sm font-medium transition-colors ${actionType === tab.value ? `z-text-primary-${theme}` : `z-text-gray-${theme}`\n }`}\n style={{ borderColor: actionType === tab.value ? 'currentColor' : 'transparent' }}\n onClick={() => onActionTypeChange(tab.value)}\n >\n {tab.label}\n </button>\n ))}\n </div>\n\n <div class={`quick-message-button-content__action ${requiresActionField ? '' : 'quick-message-button-content__action--empty'}`}>\n {requiresActionField && (\n <Fragment>\n <label class={`text-sm font-medium z-text-gray-${theme}`}>\n {actionType === 'url' ? t('quick_message.button_action_url') : t('quick_message.button_action_tel')}\n </label>\n <input\n type={actionType === 'tel' ? 'tel' : 'url'}\n value={actionValue}\n placeholder={actionPlaceholder}\n class={`mt-2 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary z-background-${theme} ${actionError ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : `z-border-primary-${theme}`\n }`}\n onInput={event => onActionInput((event.target as HTMLInputElement).value)}\n />\n {actionError && <p class=\"mt-1 text-xs text-red-500\">{actionError}</p>}\n </Fragment>\n )}\n </div>\n </div>\n\n <div class=\"mt-6 flex gap-3\">\n {!isEditing && <ZButton variant=\"outlined\" label={t('cancel')} fullWidth onClick={() => onClose()} />}\n {isEditing && onDelete && <ZButton variant=\"outlined\" label={t('remove')} fullWidth onClick={() => onDelete()} />}\n <ZButton variant=\"primary\" label={t('save')} fullWidth disabled={disableSave} onClick={() => onSave()} />\n </div>\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"quick-message-template-button-dialog.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-template-button-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { QuickMessageTemplateButtonAction } from '../../store/type';\nimport { useTranslation } from '../../utils/utils';\nimport { isValidTelephoneNumber, isValidUrl } from '../../utils/validators';\nimport { Icon } from '../internal-component/icon';\nimport { ZButton } from '../internal-component/z-button';\n\ninterface QuickMessageTemplateButtonDialogProps {\n isOpen: boolean;\n isEditing: boolean;\n label: string;\n actionValue: string;\n actionType: QuickMessageTemplateButtonAction;\n maxButtonNameLength: number;\n onLabelInput: (value: string) => void;\n onActionInput: (value: string) => void;\n onActionTypeChange: (value: QuickMessageTemplateButtonAction) => void;\n onClose: () => void;\n onSave: () => void;\n onDelete?: () => void;\n}\n\nexport const QuickMessageTemplateButtonDialog: FunctionalComponent<QuickMessageTemplateButtonDialogProps> = ({\n isOpen,\n isEditing,\n label,\n actionValue,\n actionType,\n maxButtonNameLength,\n onLabelInput,\n onActionInput,\n onActionTypeChange,\n onClose,\n onSave,\n onDelete,\n}) => {\n if (!isOpen) {\n return null;\n }\n\n const t = useTranslation();\n const requiresActionField = actionType !== 'text';\n const actionPlaceholder = actionType === 'url' ? t('quick_message.button_action_url_placeholder') : actionType === 'tel' ? t('quick_message.button_action_tel_placeholder') : '';\n\n const trimmedLabel = label.trim();\n const trimmedActionValue = actionValue.trim();\n\n let actionError: string \| undefined;\n if (requiresActionField) {\n if (!trimmedActionValue) {\n actionError = t('quick_message.button_action_required');\n } else if (actionType === 'url' && !isValidUrl(trimmedActionValue)) {\n actionError = t('quick_message.button_action_url_invalid');\n } else if (actionType === 'tel' && !isValidTelephoneNumber(trimmedActionValue)) {\n actionError = t('quick_message.button_action_tel_invalid');\n }\n }\n\n const disableSave = !trimmedLabel \|\| (requiresActionField && !!actionError);\n\n const actionTabs: Array<{ value: QuickMessageTemplateButtonAction; label: string }> = [\n { value: 'text', label: t('quick_message.button_action_text') },\n { value: 'url', label: t('quick_message.button_action_url') },\n { value: 'tel', label: t('quick_message.button_action_tel') },\n ];\n\n return (\n <div class=\"quick-message-button-content__dialog-backdrop\" onClick={() => onClose()}>\n <div\n class=\"quick-message-button-content__dialog bg-background text-surface rounded-2xl p-5 shadow-xl\"\n role=\"dialog\"\n aria-modal=\"true\"\n onClick={event => event.stopPropagation()}\n >\n <div class=\"flex items-start justify-between\">\n <h3 class=\"text-base font-semibold\">{isEditing ? t('quick_message.edit_button') : t('quick_message.add_button')}</h3>\n <button type=\"button\" class=\"inline-flex cursor-pointer items-center justify-center rounded-full p-1\" onClick={() => onClose()}>\n <Icon name=\"X\" />\n </button>\n </div>\n\n <div class=\"quick-message-button-content__dialog-body mt-4 flex flex-col gap-4\">\n <div>\n <label class=\"text-sm font-medium text-theme-gray\">{t('quick_message.button_label')}</label>\n <div class=\"mt-2\">\n <input\n type=\"text\"\n value={label}\n maxLength={maxButtonNameLength}\n placeholder={t('quick_message.button_label_placeholder')}\n class=\"w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary border-primary bg-background\"\n onInput={event => onLabelInput((event.target as HTMLInputElement).value)}\n />\n <div class=\"mt-1 text-right text-xs text-theme-gray\">\n {label.length}/{maxButtonNameLength}\n </div>\n </div>\n </div>\n\n <div class=\"flex items-center justify-between border-b border-primary\">\n {actionTabs.map(tab => (\n <button\n type=\"button\"\n class={`quick-message-button-content__tab flex-1 cursor-pointer border-b-2 px-2 pb-2 text-center text-sm font-medium transition-colors ${actionType === tab.value ? 'text-primary' : 'text-theme-gray'\n }`}\n style={{ borderColor: actionType === tab.value ? 'currentColor' : 'transparent' }}\n onClick={() => onActionTypeChange(tab.value)}\n >\n {tab.label}\n </button>\n ))}\n </div>\n\n <div class={`quick-message-button-content__action ${requiresActionField ? '' : 'quick-message-button-content__action--empty'}`}>\n {requiresActionField && (\n <Fragment>\n <label class=\"text-sm font-medium text-theme-gray\">\n {actionType === 'url' ? t('quick_message.button_action_url') : t('quick_message.button_action_tel')}\n </label>\n <input\n type={actionType === 'tel' ? 'tel' : 'url'}\n value={actionValue}\n placeholder={actionPlaceholder}\n class={`mt-2 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary bg-background ${actionError ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : `border-primary`\n }`}\n onInput={event => onActionInput((event.target as HTMLInputElement).value)}\n />\n {actionError && <p class=\"mt-1 text-xs text-red-500\">{actionError}</p>}\n </Fragment>\n )}\n </div>\n </div>\n\n <div class=\"mt-6 flex gap-3\">\n {!isEditing && <ZButton variant=\"outlined\" label={t('cancel')} fullWidth onClick={() => onClose()} />}\n {isEditing && onDelete && <ZButton variant=\"outlined\" label={t('remove')} fullWidth onClick={() => onDelete()} />}\n <ZButton variant=\"primary\" label={t('save')} fullWidth disabled={disableSave} onClick={() => onSave()} />\n </div>\n </div>\n </div>\n );\n};\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-template-button-list.js CHANGED Viewed

@@ -1,18 +1,18 @@
 import { h } from "@stencil/core";
 import { Icon } from "../internal-component/icon";
 import { useTranslation } from "../../utils/utils";
-export const QuickMessageTemplateButtonList = ({ theme, buttons = [], maxButtonCount, addButtonLabel, onButtonClick, onAddButton, onReorderButton, listClass = 'flex flex-col gap-3', buttonClass = '', }) => {
-    const buttonBaseClass = `flex w-full flex-col items-center gap-1 rounded-xl px-2 py-2 text-xs font-medium text-white shadow-sm transition-all cursor-pointer z-background-primary-${theme} truncate`;
-    const addButtonClass = `flex w-full items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed px-4 py-3 text-sm font-medium z-border-primary-${theme} z-text-primary-${theme} focus:outline-none cursor-pointer`;
+export const QuickMessageTemplateButtonList = ({ buttons = [], maxButtonCount, addButtonLabel, onButtonClick, onAddButton, onReorderButton, listClass = 'flex flex-col gap-3', buttonClass = '', }) => {
+    const buttonBaseClass = `flex w-full flex-col items-center gap-1 rounded-xl px-2 py-2 text-xs font-medium text-white shadow-sm transition-all cursor-pointer bg-surface truncate`;
+    const addButtonClass = `flex w-full items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed px-4 py-3 text-sm font-medium border-primary text-primary focus:outline-none cursor-pointer`;
     const t = useTranslation();
     const showReorder = !!onReorderButton && buttons.length > 1;
     return (h("div", { class: listClass }, buttons.map((button, index) => {
         const isFirst = index === 0;
         const isLast = index === buttons.length - 1;
-        return (h("div", { class: "flex items-center gap-2", key: button.id }, showReorder && (h("div", { class: "flex flex-col items-center gap-1" }, !isFirst && (h("button", { type: "button", class: `inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`, "aria-label": t('quick_message.move_up'), onClick: event => {
+        return (h("div", { class: "flex items-center gap-2", key: button.id }, showReorder && (h("div", { class: "flex flex-col items-center gap-1" }, !isFirst && (h("button", { type: "button", class: "inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer", "aria-label": t('quick_message.move_up'), onClick: event => {
                 event.stopPropagation();
                 onReorderButton?.(button.id, 'up');
-            } }, h(Icon, { name: "ChevronUp", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: `inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`, "aria-label": t('quick_message.move_down'), onClick: event => {
+            } }, h(Icon, { name: "ChevronUp", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: "inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer", "aria-label": t('quick_message.move_down'), onClick: event => {
                 event.stopPropagation();
                 onReorderButton?.(button.id, 'down');
             } }, h(Icon, { name: "ChevronDown", addClass: "size-4" }))))), h("button", { type: "button", class: `${buttonBaseClass} ${buttonClass}`.trim(), onClick: () => onButtonClick?.(button) }, h("span", { class: "w-full text-center text-xs leading-tight truncate" }, button.text || '-'), h("span", { class: "w-full text-center text-xs leading-tight opacity-80 truncate" }, button.action_type === 'text' ? '-' : button.action || '-'))));

package/dist/collection/components/quick-message-add-template/quick-message-template-button-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-template-button-list.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-template-button-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AAcnD~~,MAAM,CAAC,MAAM,8BAA8B,GAA6D,CAAC,EACvG,~~KAAK,EACL,~~OAAO,GAAG,EAAE,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,eAAe,EACf,SAAS,GAAG,qBAAqB,EACjC,WAAW,GAAG,EAAE,GACjB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,~~4JAA4J~~,~~KAAK,WAAW,~~CAAC;~~IACrM~~,MAAM,cAAc,GAAG,~~wIAAwI~~,~~KAAK,mBAAmB,KAAK,oCAAoC,~~CAAC;~~IACjO~~,MAAM,CAAC,GAAG,cAAc,EAAE,CAAC;IAC3B,MAAM,WAAW,GAAG,CAAC,CAAC,eAAe,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5D,OAAO,CACL,WAAK,KAAK,EAAE,SAAS;QAClB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;YAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAE5C,OAAO,CACL,WAAK,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE;gBAChD,WAAW,IAAI,CACd,WAAK,KAAK,EAAC,kCAAkC;oBAC1C,CAAC,OAAO,IAAI,CACX,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,~~EAAE~~,~~gGAAgG~~,~~KAAK~~,~~mBAAmB,KAAK,2GAA2G,gBACnO,~~CAAC,CAAC,uBAAuB,CAAC,EACtC,OAAO,EAAE,KAAK,CAAC,EAAE;4BACf,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;wBACrC,CAAC;wBAED,EAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACpC,CACV;oBACA,CAAC,MAAM,IAAI,CACV,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,~~EAAE~~,~~gGAAgG~~,~~KAAK~~,~~mBAAmB,KAAK,2GAA2G,gBACnO,~~CAAC,CAAC,yBAAyB,CAAC,EACxC,OAAO,EAAE,KAAK,CAAC,EAAE;4BACf,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;wBACvC,CAAC;wBAED,EAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACtC,CACV,CACG,CACP;gBACD,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,eAAe,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;oBAC7G,YAAM,KAAK,EAAC,mDAAmD,IAAE,MAAM,CAAC,IAAI,IAAI,GAAG,CAAQ;oBAC3F,YAAM,KAAK,EAAC,8DAA8D,IACvE,MAAM,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,GAAG,CACtD,CACA,CACL,CACP,CAAC;QACJ,CAAC,CAAC;QACD,OAAO,CAAC,MAAM,GAAG,cAAc,IAAI,CAClC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE;YACzE,EAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,GAAG;YACrC,cAAc,CACR,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { QuickMessageTemplateButton } from '../../store/type';\nimport { Icon } from '../internal-component/icon';\nimport { useTranslation } from '../../utils/utils';\n\ninterface QuickMessageTemplateButtonListProps {\n ~~theme: string;\n~~ buttons?: QuickMessageTemplateButton[];\n maxButtonCount: number;\n addButtonLabel: string;\n onButtonClick?: (button: QuickMessageTemplateButton) => void;\n onAddButton?: () => void;\n onReorderButton?: (buttonId: string, direction: 'up' \| 'down') => void;\n listClass?: string;\n buttonClass?: string;\n}\n\nexport const QuickMessageTemplateButtonList: FunctionalComponent<QuickMessageTemplateButtonListProps> = ({\n ~~theme,\n~~ buttons = [],\n maxButtonCount,\n addButtonLabel,\n onButtonClick,\n onAddButton,\n onReorderButton,\n listClass = 'flex flex-col gap-3',\n buttonClass = '',\n}) => {\n const buttonBaseClass = `flex w-full flex-col items-center gap-1 rounded-xl px-2 py-2 text-xs font-medium text-white shadow-sm transition-all cursor-pointer z-~~background-primary-${theme}~~ truncate`;\n const addButtonClass = `flex w-full items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed px-4 py-3 text-sm font-medium z-border-primary~~-${theme}~~ z-text-primary~~-${theme}~~ focus:outline-none cursor-pointer`;\n const t = useTranslation();\n const showReorder = !!onReorderButton && buttons.length > 1;\n\n return (\n <div class={listClass}>\n {buttons.map((button, index) => {\n const isFirst = index === 0;\n const isLast = index === buttons.length - 1;\n\n return (\n <div class=\"flex items-center gap-2\" key={button.id}>\n {showReorder && (\n <div class=\"flex flex-col items-center gap-1\">\n {!isFirst && (\n <button\n type=\"button\"\n class~~={`~~inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] z-border-primary~~-${theme}~~ z-text-primary~~-${theme}~~ transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`}\n aria-label={t('quick_message.move_up')}\n onClick={event => {\n event.stopPropagation();\n onReorderButton?.(button.id, 'up');\n }}\n >\n <Icon name=\"ChevronUp\" addClass=\"size-4\" />\n </button>\n )}\n {!isLast && (\n <button\n type=\"button\"\n class~~={`~~inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] z-border-primary~~-${theme}~~ z-text-primary~~-${theme}~~ transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer`}\n aria-label={t('quick_message.move_down')}\n onClick={event => {\n event.stopPropagation();\n onReorderButton?.(button.id, 'down');\n }}\n >\n <Icon name=\"ChevronDown\" addClass=\"size-4\" />\n </button>\n )}\n </div>\n )}\n <button type=\"button\" class={`${buttonBaseClass} ${buttonClass}`.trim()} onClick={() => onButtonClick?.(button)}>\n <span class=\"w-full text-center text-xs leading-tight truncate\">{button.text \|\| '-'}</span>\n <span class=\"w-full text-center text-xs leading-tight opacity-80 truncate\">\n {button.action_type === 'text' ? '-' : button.action \|\| '-'}\n </span>\n </button>\n </div>\n );\n })}\n {buttons.length < maxButtonCount && (\n <button type=\"button\" class={addButtonClass} onClick={() => onAddButton?.()}>\n <Icon name=\"Plus\" addClass=\"size-4\" />\n {addButtonLabel}\n </button>\n )}\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"quick-message-template-button-list.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-template-button-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAanD,MAAM,CAAC,MAAM,8BAA8B,GAA6D,CAAC,EACvG,OAAO,GAAG,EAAE,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,EACX,eAAe,EACf,SAAS,GAAG,qBAAqB,EACjC,WAAW,GAAG,EAAE,GACjB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,yJAAyJ,CAAC;IAClL,MAAM,cAAc,GAAG,mLAAmL,CAAC;IAC3M,MAAM,CAAC,GAAG,cAAc,EAAE,CAAC;IAC3B,MAAM,WAAW,GAAG,CAAC,CAAC,eAAe,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAE5D,OAAO,CACL,WAAK,KAAK,EAAE,SAAS;QAClB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;YAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAE5C,OAAO,CACL,WAAK,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE;gBAChD,WAAW,IAAI,CACd,WAAK,KAAK,EAAC,kCAAkC;oBAC1C,CAAC,OAAO,IAAI,CACX,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,kNAAkN,gBAC5M,CAAC,CAAC,uBAAuB,CAAC,EACtC,OAAO,EAAE,KAAK,CAAC,EAAE;4BACf,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;wBACrC,CAAC;wBAED,EAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACpC,CACV;oBACA,CAAC,MAAM,IAAI,CACV,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,kNAAkN,gBAC5M,CAAC,CAAC,yBAAyB,CAAC,EACxC,OAAO,EAAE,KAAK,CAAC,EAAE;4BACf,KAAK,CAAC,eAAe,EAAE,CAAC;4BACxB,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;wBACvC,CAAC;wBAED,EAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACtC,CACV,CACG,CACP;gBACD,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,eAAe,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;oBAC7G,YAAM,KAAK,EAAC,mDAAmD,IAAE,MAAM,CAAC,IAAI,IAAI,GAAG,CAAQ;oBAC3F,YAAM,KAAK,EAAC,8DAA8D,IACvE,MAAM,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,GAAG,CACtD,CACA,CACL,CACP,CAAC;QACJ,CAAC,CAAC;QACD,OAAO,CAAC,MAAM,GAAG,cAAc,IAAI,CAClC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE;YACzE,EAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,GAAG;YACrC,cAAc,CACR,CACV,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { QuickMessageTemplateButton } from '../../store/type';\nimport { Icon } from '../internal-component/icon';\nimport { useTranslation } from '../../utils/utils';\n\ninterface QuickMessageTemplateButtonListProps {\n buttons?: QuickMessageTemplateButton[];\n maxButtonCount: number;\n addButtonLabel: string;\n onButtonClick?: (button: QuickMessageTemplateButton) => void;\n onAddButton?: () => void;\n onReorderButton?: (buttonId: string, direction: 'up' \| 'down') => void;\n listClass?: string;\n buttonClass?: string;\n}\n\nexport const QuickMessageTemplateButtonList: FunctionalComponent<QuickMessageTemplateButtonListProps> = ({\n buttons = [],\n maxButtonCount,\n addButtonLabel,\n onButtonClick,\n onAddButton,\n onReorderButton,\n listClass = 'flex flex-col gap-3',\n buttonClass = '',\n}) => {\n const buttonBaseClass = `flex w-full flex-col items-center gap-1 rounded-xl px-2 py-2 text-xs font-medium text-white shadow-sm transition-all cursor-pointer bg-surface truncate`;\n const addButtonClass = `flex w-full items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed px-4 py-3 text-sm font-medium border-primary text-primary focus:outline-none cursor-pointer`;\n const t = useTranslation();\n const showReorder = !!onReorderButton && buttons.length > 1;\n\n return (\n <div class={listClass}>\n {buttons.map((button, index) => {\n const isFirst = index === 0;\n const isLast = index === buttons.length - 1;\n\n return (\n <div class=\"flex items-center gap-2\" key={button.id}>\n {showReorder && (\n <div class=\"flex flex-col items-center gap-1\">\n {!isFirst && (\n <button\n type=\"button\"\n class=\"inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer\"\n aria-label={t('quick_message.move_up')}\n onClick={event => {\n event.stopPropagation();\n onReorderButton?.(button.id, 'up');\n }}\n >\n <Icon name=\"ChevronUp\" addClass=\"size-4\" />\n </button>\n )}\n {!isLast && (\n <button\n type=\"button\"\n class=\"inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer\"\n aria-label={t('quick_message.move_down')}\n onClick={event => {\n event.stopPropagation();\n onReorderButton?.(button.id, 'down');\n }}\n >\n <Icon name=\"ChevronDown\" addClass=\"size-4\" />\n </button>\n )}\n </div>\n )}\n <button type=\"button\" class={`${buttonBaseClass} ${buttonClass}`.trim()} onClick={() => onButtonClick?.(button)}>\n <span class=\"w-full text-center text-xs leading-tight truncate\">{button.text \|\| '-'}</span>\n <span class=\"w-full text-center text-xs leading-tight opacity-80 truncate\">\n {button.action_type === 'text' ? '-' : button.action \|\| '-'}\n </span>\n </button>\n </div>\n );\n })}\n {buttons.length < maxButtonCount && (\n <button type=\"button\" class={addButtonClass} onClick={() => onAddButton?.()}>\n <Icon name=\"Plus\" addClass=\"size-4\" />\n {addButtonLabel}\n </button>\n )}\n </div>\n );\n};\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-text-content.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class QuickMessageTextContentComponent {
     render() {
         const text = this.content?.text ?? '';
         const theme = configStore.get('theme');
-        return (h("div", { key: 'a968993ccd0243a197102dcfb2da9e2e66c75a49', class: "flex justify-end" }, h("div", { key: '838f190e74dac75ce289a1f697564f6505d78a0d', class: "relative w-full max-w-md" }, h("textarea", { key: '976d3ecc4581c0ed9d36118360cd6c48d1071901', value: text, onInput: this.handleInput, placeholder: this.placeholder, class: `w-full p-4 pr-16 pb-8 border-[1.5px] z-border-primary-${theme} rounded-xl focus:outline-none ring-primary text-sm z-background-${theme}`, maxLength: this.maxLength, rows: 3 }), h("div", { key: '4984b762774346364482745a2a06b8bbdbd35d16', class: `absolute bottom-3 right-4 text-sm z-text-gray-${theme}` }, text.length, "/", this.maxLength))));
+        return (h("div", { key: 'ed0032f59bcfe16946ccf775304ed97970f48449', class: "flex justify-end", "data-theme": theme }, h("div", { key: '4619a022818ed6269de69b9b3fc42e02e3481919', class: "relative w-full max-w-md" }, h("textarea", { key: '47cc325e24870676d2d908fca2ead25dd38cda18', value: text, onInput: this.handleInput, placeholder: this.placeholder, class: "w-full p-4 pr-16 pb-8 border-[1.5px] border-primary rounded-xl focus:outline-none ring-primary text-sm bg-background", maxLength: this.maxLength, rows: 3 }), h("div", { key: 'cdbceb9846bd7332d7ce0bbe018b37c719c24583', class: "absolute bottom-3 right-4 text-sm text-theme-gray" }, text.length, "/", this.maxLength))));
     }
     static get is() { return "quick-message-text-content"; }
     static get properties() {

package/dist/collection/components/quick-message-add-template/quick-message-text-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-text-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-text-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,OAAO,gCAAgC;IACnC,OAAO,CAA8B;IACrC,SAAS,GAAW,IAAI,CAAC;IACzB,WAAW,GAAW,oBAAoB,CAAC;IAET,aAAa,CAA6C;IAEnF,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;QAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvC,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;~~YAC3B~~,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,iEACE,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,~~EAAE~~,~~yDAAyD~~,~~KAAK~~,~~oEAAoE,KAAK,EAAE,EAChJ,~~SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,CAAC,GACP;gBACF,4DAAK,KAAK,~~EAAE~~,~~iDAAiD,KAAK,EAAE~~;~~oBACjE~~,IAAI,CAAC,MAAM;;oBAAG,IAAI,CAAC,SAAS,CACzB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { QuickMessageTemplateContent } from '../../store/type';\nimport { configStore } from '../../store/store';\n\n@Component({\n tag: 'quick-message-text-content',\n})\nexport class QuickMessageTextContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxLength: number = 2000;\n @Prop() placeholder: string = 'พิมพ์ข้อความที่นี่';\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n private readonly handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n if (!this.content) {\n return;\n }\n\n this.contentChange.emit({ ...this.content, text: target.value });\n };\n\n render() {\n const text = this.content?.text ?? '';\n const theme = configStore.get('theme');\n\n return (\n <div class=\"flex justify-end\">\n <div class=\"relative w-full max-w-md\">\n <textarea\n value={text}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n class~~={`~~w-full p-4 pr-16 pb-8 border-[1.5px] z-border-primary~~-${theme}~~ rounded-xl focus:outline-none ring-primary text-sm z-background~~-${theme}`}~~\n maxLength={this.maxLength}\n rows={3}\n />\n <div class~~={`~~absolute bottom-3 right-4 text-sm z-text-gray~~-${theme}`}~~>\n {text.length}/{this.maxLength}\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"quick-message-text-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-text-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,OAAO,gCAAgC;IACnC,OAAO,CAA8B;IACrC,SAAS,GAAW,IAAI,CAAC;IACzB,WAAW,GAAW,oBAAoB,CAAC;IAET,aAAa,CAA6C;IAEnF,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;QAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;QACnD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvC,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB,gBAAa,KAAK;YAC7C,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,iEACE,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAC,sHAAsH,EAC5H,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,CAAC,GACP;gBACF,4DAAK,KAAK,EAAC,mDAAmD;oBAC3D,IAAI,CAAC,MAAM;;oBAAG,IAAI,CAAC,SAAS,CACzB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { QuickMessageTemplateContent } from '../../store/type';\nimport { configStore } from '../../store/store';\n\n@Component({\n tag: 'quick-message-text-content',\n})\nexport class QuickMessageTextContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxLength: number = 2000;\n @Prop() placeholder: string = 'พิมพ์ข้อความที่นี่';\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n private readonly handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n if (!this.content) {\n return;\n }\n\n this.contentChange.emit({ ...this.content, text: target.value });\n };\n\n render() {\n const text = this.content?.text ?? '';\n const theme = configStore.get('theme');\n\n return (\n <div class=\"flex justify-end\" data-theme={theme}>\n <div class=\"relative w-full max-w-md\">\n <textarea\n value={text}\n onInput={this.handleInput}\n placeholder={this.placeholder}\n class=\"w-full p-4 pr-16 pb-8 border-[1.5px] border-primary rounded-xl focus:outline-none ring-primary text-sm bg-background\"\n maxLength={this.maxLength}\n rows={3}\n />\n <div class=\"absolute bottom-3 right-4 text-sm text-theme-gray\">\n {text.length}/{this.maxLength}\n </div>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-video-content.js CHANGED Viewed

@@ -77,13 +77,11 @@ export class QuickMessageVideoContentComponent {
         const t = useTranslation();
         const existingUrl = this.content.file_url;
         const hasVideo = !!existingUrl;
-        const borderClass = `z-border-primary-${theme}`;
-        const primaryTextClass = `z-text-primary-${theme}`;
         const previewData = hasVideo && existingUrl ? this.buildVideoPreview(existingUrl) : undefined;
-        return (h("div", { class: "flex justify-end" }, h("div", { class: "max-w-xs h-[220px] aspect-square" }, h("button", { type: "button", class: `group relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-[18px] border-[1.5px] z-background-${theme} shadow-sm transition-colors cursor-pointer ${borderClass}`, onClick: () => this.openDialog() }, previewData ? (h(Fragment, null, h("video", { src: previewData.src, class: "h-[220px] object-cover", controls: true }, h("track", { kind: "captions", src: "", label: "English" })), h("div", { class: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h(Icon, { name: "Edit", addClass: "size-6 text-white" }), h("span", { class: "text-sm font-semibold text-white" }, t('quick_message.change_video_link'))))) : (h("div", { class: "flex flex-col items-center gap-2 px-6 text-center" }, h(Icon, { name: "Play", addClass: `size-14 ${primaryTextClass}` }), h("span", { class: `text-base font-semibold leading-tight ${primaryTextClass}` }, "+ ", t('quick_message.add_video'))))), this.isDialogOpen && this.renderDialog(theme, t, borderClass))));
+        return (h("div", { class: "flex justify-end", "data-theme": theme }, h("div", { class: "max-w-xs h-[220px] aspect-square" }, h("button", { type: "button", class: "group relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm transition-colors cursor-pointer border-primary", onClick: () => this.openDialog() }, previewData ? (h(Fragment, null, h("video", { src: previewData.src, class: "h-[220px] object-cover", controls: true }, h("track", { kind: "captions", src: "", label: "English" })), h("div", { class: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h(Icon, { name: "Edit", addClass: "size-6 text-white" }), h("span", { class: "text-sm font-semibold text-white" }, t('quick_message.change_video_link'))))) : (h("div", { class: "flex flex-col items-center gap-2 px-6 text-center" }, h(Icon, { name: "Play", addClass: "size-14 text-primary" }), h("span", { class: "text-base font-semibold leading-tight text-primary" }, "+ ", t('quick_message.add_video'))))), this.isDialogOpen && this.renderDialog(t))));
     }
-    renderDialog(theme, t, borderClass) {
-        return (h("div", { class: "fixed inset-0 z-[80] flex items-center justify-center bg-slate-900/40 px-4", onClick: () => this.closeDialog() }, h("div", { class: `w-full max-w-md rounded-2xl border z-background-${theme} p-6 shadow-xl z-text-${theme} border-none`, onClick: event => event.stopPropagation() }, h("div", { class: "flex items-start justify-between" }, h("h3", { class: "text-base font-semibold" }, t('quick_message.add_video')), h("button", { type: "button", class: "inline-flex cursor-pointer items-center justify-center rounded-full p-1", onClick: () => this.closeDialog() }, h(Icon, { name: "X" }))), h("div", { class: "mt-4 flex flex-col gap-4" }, h("label", { class: "flex flex-col gap-2 text-sm font-medium" }, t('quick_message.link_video'), h("input", { type: "url", value: this.videoUrl, placeholder: t('quick_message.type_video_link_here'), class: `rounded-xl border px-3 py-2 text-sm focus:outline-none ring-primary ${borderClass} z-background-${theme}`, onInput: event => this.handleUrlInput(event) })), this.errorMessage && h("p", { class: "text-xs text-red-500" }, this.errorMessage)), h("div", { class: "mt-6 flex gap-3" }, h(ZButton, { variant: "outlined", onClick: () => this.closeDialog(), fullWidth: true, label: t('cancel') }), h(ZButton, { variant: "primary", onClick: () => this.handleSaveVideo(), fullWidth: true, disabled: this.videoUrl.trim() === '', label: t('save') })))));
+    renderDialog(t) {
+        return (h("div", { class: "fixed inset-0 z-80 flex items-center justify-center bg-slate-900/40 px-4", onClick: () => this.closeDialog() }, h("div", { class: "w-full max-w-md rounded-2xl border bg-background p-6 shadow-xl text-surface border-none", onClick: event => event.stopPropagation() }, h("div", { class: "flex items-start justify-between" }, h("h3", { class: "text-base font-semibold" }, t('quick_message.add_video')), h("button", { type: "button", class: "inline-flex cursor-pointer items-center justify-center rounded-full p-1", onClick: () => this.closeDialog() }, h(Icon, { name: "X" }))), h("div", { class: "mt-4 flex flex-col gap-4" }, h("label", { class: "flex flex-col gap-2 text-sm font-medium" }, t('quick_message.link_video'), h("input", { type: "url", value: this.videoUrl, placeholder: t('quick_message.type_video_link_here'), class: "rounded-xl border px-3 py-2 text-sm focus:outline-none ring-primary border-primary bg-background", onInput: event => this.handleUrlInput(event) })), this.errorMessage && h("p", { class: "text-xs text-red-500" }, this.errorMessage)), h("div", { class: "mt-6 flex gap-3" }, h(ZButton, { variant: "outlined", onClick: () => this.closeDialog(), fullWidth: true, label: t('cancel') }), h(ZButton, { variant: "primary", onClick: () => this.handleSaveVideo(), fullWidth: true, disabled: this.videoUrl.trim() === '', label: t('save') })))));
     }
     static get is() { return "quick-message-video-content"; }
     static get properties() {

package/dist/collection/components/quick-message-add-template/quick-message-video-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-video-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-video-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Fragment, Prop, State, h } from '@stencil/core';\nimport { QuickMessageTemplateContent } from '../../store/type';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { ZButton } from '../internal-component/z-button';\nimport { isValidVideoUrl } from '../../utils/validators';\n\n@Component({\n tag: 'quick-message-video-content',\n})\nexport class QuickMessageVideoContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() private videoUrl = '';\n @State() private isDialogOpen = false;\n @State() private errorMessage?: string;\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n this.contentChange.emit({ ...this.content, ...update });\n }\n\n private openDialog() {\n this.videoUrl = this.content?.file_url \|\| '';\n this.errorMessage = undefined;\n this.isDialogOpen = true;\n }\n\n private closeDialog() {\n this.isDialogOpen = false;\n }\n\n private handleUrlInput(event: Event) {\n this.videoUrl = (event.target as HTMLInputElement).value;\n if (this.errorMessage) {\n this.errorMessage = undefined;\n }\n }\n\n private validateVideoUrl(url: string, assignError = true): boolean {\n const t = useTranslation();\n if (!url.trim()) {\n if (assignError) {\n this.errorMessage = t('quick_message.video_link_required');\n }\n return false;\n }\n\n if (!isValidVideoUrl(url)) {\n if (assignError) {\n this.errorMessage = t('quick_message.video_link_invalid');\n }\n return false;\n }\n\n if (assignError) {\n this.errorMessage = undefined;\n }\n return true;\n }\n\n private handleSaveVideo() {\n const trimmed = this.videoUrl.trim();\n if (!this.validateVideoUrl(trimmed)) {\n return;\n }\n\n this.emitContent({ file_url: trimmed });\n this.closeDialog();\n }\n\n private buildVideoPreview(url: string): { type: 'video'; src: string } {\n try {\n const parsed = new URL(url);\n if (/\\.(mp4\|webm\|ogg)$/i.test(parsed.pathname)) {\n return { type: 'video', src: url };\n }\n } catch {\n // fall back below\n }\n\n return { type: 'video', src: url };\n }\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const t = useTranslation();\n const existingUrl = this.content.file_url;\n const hasVideo = !!existingUrl;\n const borderClass = `z-border-primary-${theme}`;\n const primaryTextClass = `z-text-primary-${theme}`;\n const previewData = hasVideo && existingUrl ? this.buildVideoPreview(existingUrl) : undefined;\n\n return (\n <div class=\"flex justify-end\">\n <div class=\"max-w-xs h-[220px] aspect-square\">\n <button\n type=\"button\"\n class={`group relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-[18px] border-[1.5px] z-background-${theme} shadow-sm transition-colors cursor-pointer ${borderClass}`}\n onClick={() => this.openDialog()}\n >\n {previewData ? (\n <Fragment>\n <video src={previewData.src} class=\"h-[220px] object-cover\" controls>\n <track kind=\"captions\" src=\"\" label=\"English\" />\n </video>\n <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100\">\n <Icon name=\"Edit\" addClass=\"size-6 text-white\" />\n <span class=\"text-sm font-semibold text-white\">{t('quick_message.change_video_link')}</span>\n </div>\n </Fragment>\n ) : (\n <div class=\"flex flex-col items-center gap-2 px-6 text-center\">\n <Icon name=\"Play\" addClass={`size-14 ${primaryTextClass}`} />\n <span class={`text-base font-semibold leading-tight ${primaryTextClass}`}>+ {t('quick_message.add_video')}</span>\n </div>\n )}\n </button>\n\n {this.isDialogOpen && this.renderDialog(theme, t, borderClass)}\n </div>\n </div>\n );\n }\n\n private renderDialog(theme: string, t: (key: string) => string, borderClass: string) {\n return (\n <div class=\"fixed inset-0 z-[80] flex items-center justify-center bg-slate-900/40 px-4\" onClick={() => this.closeDialog()}>\n <div class={`w-full max-w-md rounded-2xl border z-background-${theme} p-6 shadow-xl z-text-${theme} border-none`} onClick={event => event.stopPropagation()}>\n <div class=\"flex items-start justify-between\">\n <h3 class=\"text-base font-semibold\">{t('quick_message.add_video')}</h3>\n <button type=\"button\" class=\"inline-flex cursor-pointer items-center justify-center rounded-full p-1\" onClick={() => this.closeDialog()}>\n <Icon name=\"X\" />\n </button>\n </div>\n\n <div class=\"mt-4 flex flex-col gap-4\">\n <label class=\"flex flex-col gap-2 text-sm font-medium\">\n {t('quick_message.link_video')}\n <input\n type=\"url\"\n value={this.videoUrl}\n placeholder={t('quick_message.type_video_link_here')}\n class={`rounded-xl border px-3 py-2 text-sm focus:outline-none ring-primary ${borderClass} z-background-${theme}`}\n onInput={event => this.handleUrlInput(event)}\n />\n </label>\n {this.errorMessage && <p class=\"text-xs text-red-500\">{this.errorMessage}</p>}\n </div>\n\n <div class=\"mt-6 flex gap-3\">\n <ZButton variant=\"outlined\" onClick={() => this.closeDialog()} fullWidth label={t('cancel')} />\n <ZButton variant=\"primary\" onClick={() => this.handleSaveVideo()} fullWidth disabled={this.videoUrl.trim() === ''} label={t('save')} />\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"quick-message-video-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-video-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Fragment, Prop, State, h } from '@stencil/core';\nimport { QuickMessageTemplateContent } from '../../store/type';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { ZButton } from '../internal-component/z-button';\nimport { isValidVideoUrl } from '../../utils/validators';\n\n@Component({\n tag: 'quick-message-video-content',\n})\nexport class QuickMessageVideoContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() private videoUrl = '';\n @State() private isDialogOpen = false;\n @State() private errorMessage?: string;\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n this.contentChange.emit({ ...this.content, ...update });\n }\n\n private openDialog() {\n this.videoUrl = this.content?.file_url \|\| '';\n this.errorMessage = undefined;\n this.isDialogOpen = true;\n }\n\n private closeDialog() {\n this.isDialogOpen = false;\n }\n\n private handleUrlInput(event: Event) {\n this.videoUrl = (event.target as HTMLInputElement).value;\n if (this.errorMessage) {\n this.errorMessage = undefined;\n }\n }\n\n private validateVideoUrl(url: string, assignError = true): boolean {\n const t = useTranslation();\n if (!url.trim()) {\n if (assignError) {\n this.errorMessage = t('quick_message.video_link_required');\n }\n return false;\n }\n\n if (!isValidVideoUrl(url)) {\n if (assignError) {\n this.errorMessage = t('quick_message.video_link_invalid');\n }\n return false;\n }\n\n if (assignError) {\n this.errorMessage = undefined;\n }\n return true;\n }\n\n private handleSaveVideo() {\n const trimmed = this.videoUrl.trim();\n if (!this.validateVideoUrl(trimmed)) {\n return;\n }\n\n this.emitContent({ file_url: trimmed });\n this.closeDialog();\n }\n\n private buildVideoPreview(url: string): { type: 'video'; src: string } {\n try {\n const parsed = new URL(url);\n if (/\\.(mp4\|webm\|ogg)$/i.test(parsed.pathname)) {\n return { type: 'video', src: url };\n }\n } catch {\n // fall back below\n }\n\n return { type: 'video', src: url };\n }\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const t = useTranslation();\n const existingUrl = this.content.file_url;\n const hasVideo = !!existingUrl;\n const previewData = hasVideo && existingUrl ? this.buildVideoPreview(existingUrl) : undefined;\n\n return (\n <div class=\"flex justify-end\" data-theme={theme}>\n <div class=\"max-w-xs h-[220px] aspect-square\">\n <button\n type=\"button\"\n class=\"group relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm transition-colors cursor-pointer border-primary\"\n onClick={() => this.openDialog()}\n >\n {previewData ? (\n <Fragment>\n <video src={previewData.src} class=\"h-[220px] object-cover\" controls>\n <track kind=\"captions\" src=\"\" label=\"English\" />\n </video>\n <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100\">\n <Icon name=\"Edit\" addClass=\"size-6 text-white\" />\n <span class=\"text-sm font-semibold text-white\">{t('quick_message.change_video_link')}</span>\n </div>\n </Fragment>\n ) : (\n <div class=\"flex flex-col items-center gap-2 px-6 text-center\">\n <Icon name=\"Play\" addClass=\"size-14 text-primary\" />\n <span class=\"text-base font-semibold leading-tight text-primary\">+ {t('quick_message.add_video')}</span>\n </div>\n )}\n </button>\n\n {this.isDialogOpen && this.renderDialog(t)}\n </div>\n </div>\n );\n }\n\n private renderDialog(t: (key: string) => string) {\n return (\n <div class=\"fixed inset-0 z-80 flex items-center justify-center bg-slate-900/40 px-4\" onClick={() => this.closeDialog()}>\n <div class=\"w-full max-w-md rounded-2xl border bg-background p-6 shadow-xl text-surface border-none\" onClick={event => event.stopPropagation()}>\n <div class=\"flex items-start justify-between\">\n <h3 class=\"text-base font-semibold\">{t('quick_message.add_video')}</h3>\n <button type=\"button\" class=\"inline-flex cursor-pointer items-center justify-center rounded-full p-1\" onClick={() => this.closeDialog()}>\n <Icon name=\"X\" />\n </button>\n </div>\n\n <div class=\"mt-4 flex flex-col gap-4\">\n <label class=\"flex flex-col gap-2 text-sm font-medium\">\n {t('quick_message.link_video')}\n <input\n type=\"url\"\n value={this.videoUrl}\n placeholder={t('quick_message.type_video_link_here')}\n class=\"rounded-xl border px-3 py-2 text-sm focus:outline-none ring-primary border-primary bg-background\"\n onInput={event => this.handleUrlInput(event)}\n />\n </label>\n {this.errorMessage && <p class=\"text-xs text-red-500\">{this.errorMessage}</p>}\n </div>\n\n <div class=\"mt-6 flex gap-3\">\n <ZButton variant=\"outlined\" onClick={() => this.closeDialog()} fullWidth label={t('cancel')} />\n <ZButton variant=\"primary\" onClick={() => this.handleSaveVideo()} fullWidth disabled={this.videoUrl.trim() === ''} label={t('save')} />\n </div>\n </div>\n </div>\n );\n }\n}\n"]}