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

zignal-stencil-library 1.1.120 → 1.1.121

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 (270) hide show

package/dist/collection/components/dialog-search/dialog-search.js CHANGED Viewed

@@ -63,10 +63,10 @@ export class DialogSearch {
         const theme = configStore.get('theme');
         const isMobile = responsiveStore.get('isMobile');
         const selectReadOptions = [{ label: t('chat_tab.all_chat') }, { label: t('chat_tab.already_read'), value: true }, { label: t('chat_tab.unread'), value: false }];
-        return (h(Host, { key: '10ccc1bd5a3ec50dd9ae3e5ed1e78ff81e29619c' }, h("div", { key: '87ca94f426506e875fa8d090604add34d66dbebb', class: `dialog-search scroll-container z-background-${theme} ${isMobile ? 'w-xs' : 'w-xl'}` }, h("div", { key: '8b12c0d89b5bc85ed2bb49c88694f2d6cc376113', class: "dialog-search-toolbar-action" }, h("div", { key: 'd15871433219110757b6e7d084ade8b8a3329f35', class: "dialog-search-toolbar-action-wrapper " }, h("span", { key: 'b5e38452a8d09bd514a53898d1d52f481b62a6ea', class: `dialog-search-toolbar-action-reset z-text-${theme}`, onClick: this.handleReset }, t('reset')), h(ZIconButton, { key: 'c0deb86b9f391c55b1dce1bbe931b5624206c73b', iconName: "X", variant: "none", onClick: this.handleCancel }))), h("h2", { key: '8b7cd9ab00649e251088bd7b6ec19962b4523ad7', class: `dialog-search-toolbar-title z-text-${theme}` }, t('chat_tab.search_chat')), h("div", { key: 'a276f7ce9948248e3af1c4e92894a6eed69b9d22', class: "space-y-2" }, h("p", { key: '125da79b5e20c6c3d545e15ab5cb35e37acee392', class: `font-bold z-text-${theme}` }, t('search'), "\u00A0", h("span", { key: '05b550976caf2ca70b638d1dfed507b5680fff5a', class: `text-sm z-text-gray-${theme}` }, "(", t('chat_tab.filter_search_fields'), ")")), h(ZInput, { key: 'df6b955c72a16efee0a252f7e2168898c285cf2b', placeholder: t('search'), value: this.filter.search, onChange: value => this.handleChange('search', value) }), h("p", { key: '8f056e7909274d6d234d045f0221f8b6af97e5f8', class: `font-bold z-text-${theme}` }, t('chat_tab.read_status')), h("div", { key: 'ebf4c52af339e260bcd5a425c9abbee74778c977', class: "dialog-search-read-option" }, selectReadOptions.map(({ label, value }) => {
+        return (h(Host, { key: 'c75cb00a8f108f2c54aa833f2f42d00083203db1' }, h("div", { key: '725102782e251e5bcf5544a7dc0dc71025717cdf', class: `dialog-search scroll-container z-background-${theme} ${isMobile ? 'w-xs' : 'w-xl'}` }, h("div", { key: '8c4b2c1177e1f77cf488b6168741dfe9be756e26', class: "dialog-search-toolbar-action" }, h("div", { key: '7aa1807c7a909c9a9a8a287656ce0bb4aad81d8a', class: "dialog-search-toolbar-action-wrapper " }, h("span", { key: '66517a9a1565e5029d05d399e2bfdeadceedfa14', class: `dialog-search-toolbar-action-reset z-text-${theme}`, onClick: this.handleReset }, t('reset')), h(ZIconButton, { key: '8176803f3b916466523d852e21567fe9eb2ddf36', iconName: "X", variant: "none", onClick: this.handleCancel }))), h("h2", { key: '6ec3a7f7b51e9fa97b5a521d36c8510e5496b937', class: `dialog-search-toolbar-title z-text-${theme}` }, t('chat_tab.search_chat')), h("div", { key: '36be24f841c6ebc4698d1fcae5c50c84abaaa2fe', class: "space-y-2" }, h("p", { key: '9dd4b01e17a0ccec920685c72c82a070041fba48', class: `font-bold z-text-${theme}` }, t('search'), "\u00A0", h("span", { key: 'a75f71d81431d133e95b0417c0b72dbb1ae79f82', class: `text-sm z-text-gray-${theme}` }, "(", t('chat_tab.filter_search_fields'), ")")), h(ZInput, { key: '12b02b05e1904b73bb1a68132c1ff89b9d91c223', placeholder: t('search'), value: this.filter.search, onChange: value => this.handleChange('search', value) }), h("p", { key: 'c9a5575ea47f5740832572a2115d678d3f179e74', class: `font-bold z-text-${theme}` }, t('chat_tab.read_status')), h("div", { key: '3dcbeab543b64a902469232b85740bfa0b459f88', class: "dialog-search-read-option" }, selectReadOptions.map(({ label, value }) => {
             const isSelected = value === this.filter.read;
             return h(ZButton, { variant: isSelected ? 'primary' : 'outlined', label: label, title: label, onClick: () => this.handleChange('read', value) });
-        })), h("p", { key: '6049524829d52d4e31d26bb17d804f7d50038fc6', class: `font-bold z-text-${theme}` }, t('channel')), h("div", { key: 'e1316295a422d1400985795caf92ca0b28f31951', class: 'mb-2', id: "filter-channel" }, h("autocomplete-multiple-select", { key: 'ede05e1fe3c8f8960495cfbfbf0e97e5ca5e0bb4', selectedIds: this.filter.connectionIds, fetchItems: async () => Promise.resolve(this.connectionList), onSelecting: event => this.handleChange('connectionIds', event.detail), referenceSelector: "filter-channel" })), h("p", { key: 'e33489ad4d1fbda908abe356c2515ec9eeb34283', class: `font-bold z-text-${theme}` }, t('chat_tab.last_reply')), h("div", { key: '3ec95b635d854898478fc7d330817ad43b9ce5d8', class: 'mb-2', id: "filter-last-answer" }, h("autocomplete-multiple-select", { key: 'b4fa89c0adf2722eb66395b9cc8b9480e234340e', selectedIds: this.filter.lastAnswerByIds, fetchItems: async () => Promise.resolve(this.answerList), onSelecting: event => this.handleChange('lastAnswerByIds', event.detail), referenceSelector: "filter-last-answer" })), h("p", { key: 'd1c4d0c41f8c3ca0248c960bed2b03f58ac999d0', class: `font-bold z-text-${theme}` }, t('status')), h("div", { key: '4cb65a6cc744ee6c6c68bb54629fa8c0395bebf3', class: 'mb-2', id: "filter-status" }, h("autocomplete-multiple-select", { key: '9af9c1fe832b860f9f569e1f3292c778cf2c8bba', selectedIds: this.filter.statusIds, fetchItems: handleGetUserStatuses, onSelecting: event => this.handleChange('statusIds', event.detail), referenceSelector: "filter-status" })), h("p", { key: '482bcd7a6f55261a76a3d93e3968fe3da380b986', class: `font-bold z-text-${theme}` }, t('tag')), h("div", { key: '0433275d19b81a1b2deb0d080b0266b5c11d67fc', class: 'mb-2', id: "filter-tag" }, h("autocomplete-multiple-select", { key: '61e539c946acda6669eaf7eb26cb20fc89ab7d20', selectedIds: this.filter.tagIds, fetchItems: handleGetUserTags, onSelecting: event => this.handleChange('tagIds', event.detail), referenceSelector: "filter-tag" }))), h("div", { key: '405204b83aa8ee05d686d7b9b368c01d5e98e461', class: "dialog-search-action-wrapper" }, h(ZButton, { key: '0bf07cc3e01bc85fba00d3e7855ed79e9d8e203a', label: t('search_data'), fullWidth: true, onClick: this.handleSubmit })))));
+        })), h("p", { key: '62da81154a7eb9c6a4b6d04c249f116ebf47cb11', class: `font-bold z-text-${theme}` }, t('channel')), h("div", { key: '93ef5b5a3a4ee87f9d70c910bf64bf20b0f82e97', class: 'mb-2', id: "filter-channel" }, h("autocomplete-multiple-select", { key: 'fb39c5f5c85a0c2d81f61f5acd1cfebccd679b5f', selectedIds: this.filter.connectionIds, fetchItems: async () => Promise.resolve(this.connectionList), onSelecting: event => this.handleChange('connectionIds', event.detail), referenceSelector: "filter-channel" })), h("p", { key: '0f88d73944bc266749e17dd1253305124a126883', class: `font-bold z-text-${theme}` }, t('chat_tab.last_reply')), h("div", { key: '642a550999905d3b2c92f102f1f6a6e6b80ebfd0', class: 'mb-2', id: "filter-last-answer" }, h("autocomplete-multiple-select", { key: '2b6449a5c56f96cf4d9318bf24a523c368f43ed0', selectedIds: this.filter.lastAnswerByIds, fetchItems: async () => Promise.resolve(this.answerList), onSelecting: event => this.handleChange('lastAnswerByIds', event.detail), referenceSelector: "filter-last-answer" })), h("p", { key: 'b17efa41d23df810f5c4c89e8c154493e82f33ad', class: `font-bold z-text-${theme}` }, t('status')), h("div", { key: 'bd7cca775fa42c450f85f477b8bad10a4c7cb954', class: 'mb-2', id: "filter-status" }, h("autocomplete-multiple-select", { key: '287ae6fd15b56feb02bffc5d01adb8192c17ec45', selectedIds: this.filter.statusIds, fetchItems: handleGetUserStatuses, onSelecting: event => this.handleChange('statusIds', event.detail), referenceSelector: "filter-status" })), h("p", { key: '484cde3c2c37521bbff9a46c33514043bfca8bf5', class: `font-bold z-text-${theme}` }, t('tag')), h("div", { key: '207e1503635c216c1b1ee694625f1801511a58c2', class: 'mb-2', id: "filter-tag" }, h("autocomplete-multiple-select", { key: '5a9d86980eaf471bd83668985d71dd87f3eee211', selectedIds: this.filter.tagIds, fetchItems: handleGetUserTags, onSelecting: event => this.handleChange('tagIds', event.detail), referenceSelector: "filter-tag" }))), h("div", { key: 'a9d17d26a6ef75d244654f13cd49dc78f1507ad0', class: "dialog-search-action-wrapper" }, h(ZButton, { key: '33cd22ec63774aac2fd8abc0c47c5517b0e8a0b3', label: t('search_data'), fullWidth: true, onClick: this.handleSubmit })))));
     }
     static get is() { return "dialog-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/internal-component/about-section.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { displayDate } from "../../utils/dayjs";
 import { useTranslation } from "../../utils/utils";
 import { ZIconButton } from "./z-icon-button";
@@ -9,6 +9,7 @@ export const AboutSection = ({ user, readOnly = false, activeTabIndex, onOpenDia
     const t = useTranslation();
     const theme = configStore.get('theme');
     const selectedChat = selectedChatStore.get('selectedChat');
-    return (h("div", { class: "profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 border-divider", "data-theme": theme }, h("div", { class: "col-span-3" }, h("span", { class: "text-primary" }, t('about'))), h("div", { class: "col-span-1" }, h("span", { class: "text-sm text-gray" }, t('channel'))), h("div", { class: "col-span-2" }, h("div", { class: "profile-info-connection-wrapper" }, h("span", { class: "text-sm text-primary" }, user.channel === 'zignal' ? 'Zignal' : selectedChat.connection.name), h("img", { src: getChatChannelPictureUrl(selectedChat), alt: "agent avatar", class: "profile-info-avatar", loading: "lazy" }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('email'))), h("div", { class: "col-span-2 profile-info-box-wrapper" }, h("span", { class: `text-sm text-primary` }, user.email ? (Array.isArray(user.email) ? user.email.join(', ') : user.email) : '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Email', field: 'email', value: user.email }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('phone_no'))), h("div", { class: "col-span-2 profile-info-box-wrapper" }, h("span", { class: `text-sm text-primary` }, user.phone_number ? (Array.isArray(user.phone_number) ? user.phone_number.join(', ') : user.phone_number) : '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Phone no.', field: 'phone_number', value: user.phone_number }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('address'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-pre-line text-primary` }, getAddressAsText(user.address) || '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Address', field: 'address', value: user.address, type: 'address' }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('gender'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-capitalize text-primary` }, user.gender ? user.gender : '-'), !readOnly && activeTabIndex === 1 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Gender', field: 'gender', value: user.gender, type: 'input' }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('locale'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `text-sm text-primary` }, user.locale), !readOnly && activeTabIndex === 1 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Locale', field: 'locale', value: user.locale, type: 'input' }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('register_date'))), h("div", { class: "col-span-2" }, h("span", { class: `text-sm text-primary` }, displayDate(user.created_at))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('last_active_date'))), h("div", { class: "col-span-2" }, h("span", { class: `text-sm text-primary` }, displayDate(user.last_active_at))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('note'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-pre-line text-primary` }, user.note ? user.note : '-'), !readOnly && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Note', field: 'note', value: user.note, type: 'textarea' }) })))));
+    return (h("div", { class: "profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 border-divider", "data-theme": theme }, h("div", { class: "col-span-3" }, h("span", { class: "text-primary" }, t('about'))), h("div", { class: "col-span-1" }, h("span", { class: "text-sm text-gray" }, t('channel'))), h("div", { class: "col-span-2" }, h("div", { class: "profile-info-connection-wrapper" }, h("span", { class: "text-sm text-primary" }, user.channel === 'zignal' ? 'Zignal' : selectedChat.connection.name), h("img", { src: getChatChannelPictureUrl(selectedChat), alt: "agent avatar", class: "profile-info-avatar", loading: "lazy" }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('email'))), h("div", { class: "col-span-2 profile-info-box-wrapper" }, h("span", { class: `text-sm text-primary` }, user.email ? (Array.isArray(user.email) ? user.email.join(', ') : user.email) : '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Email', field: 'email', value: user.email }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('phone_no'))), h("div", { class: "col-span-2 profile-info-box-wrapper" }, h("span", { class: `text-sm text-primary` }, user.phone_number ? (Array.isArray(user.phone_number) ? user.phone_number.join(', ') : user.phone_number) : '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Phone no.', field: 'phone_number', value: user.phone_number }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('address'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-pre-line text-primary` }, getAddressAsText(user.address) || '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Address', field: 'address', value: user.address, type: 'address' }) }))), selectedChat.type !== 'group' &&
+        h(Fragment, null, h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('gender'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-capitalize text-primary` }, user.gender ? user.gender : '-'), !readOnly && activeTabIndex === 1 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Gender', field: 'gender', value: user.gender, type: 'input' }) })))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('locale'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `text-sm text-primary` }, user.locale), !readOnly && activeTabIndex === 1 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Locale', field: 'locale', value: user.locale, type: 'input' }) }))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('register_date'))), h("div", { class: "col-span-2" }, h("span", { class: `text-sm text-primary` }, displayDate(user.created_at))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('last_active_date'))), h("div", { class: "col-span-2" }, h("span", { class: `text-sm text-primary` }, displayDate(user.last_active_at))), h("div", { class: "col-span-1" }, h("span", { class: `text-sm text-gray` }, t('note'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-pre-line text-primary` }, user.note ? user.note : '-'), !readOnly && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Note', field: 'note', value: user.note, type: 'textarea' }) })))));
 };
 //# sourceMappingURL=about-section.js.map

package/dist/collection/components/internal-component/about-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"about-section.js","sourceRoot":"","sources":["../../../src/components/internal-component/about-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { UserItem, UserAddress } from '../../store/type';\nimport { displayDate } from '../../utils/dayjs';\nimport { useTranslation } from '../../utils/utils';\nimport { ZIconButton } from './z-icon-button';\nimport { getAddressAsText } from '../../utils/func';\nimport { configStore, selectedChatStore } from '../../store/store';\nimport { getChatChannelPictureUrl } from '../../store/chat';\n\ninterface AboutSectionProps {\n user: UserItem;\n readOnly?: boolean;\n activeTabIndex: number;\n onOpenDialogEditor: (params: { label: string; field: string; value: string \| string[] \| UserAddress; type?: 'input' \| 'textarea' \| 'address' }) => void;\n}\n\nexport const AboutSection: FunctionalComponent<AboutSectionProps> = ({ user, readOnly = false, activeTabIndex, onOpenDialogEditor }) => {\n const t = useTranslation();\n const theme = configStore.get('theme');\n const selectedChat = selectedChatStore.get('selectedChat');\n\n return (\n <div class=\"profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 border-divider\" data-theme={theme}>\n <div class=\"col-span-3\">\n <span class=\"text-primary\">{t('about')}</span>\n </div>\n\n <div class=\"col-span-1\">\n <span class=\"text-sm text-gray\">{t('channel')}</span>\n </div>\n <div class=\"col-span-2\">\n <div class=\"profile-info-connection-wrapper\">\n <span class=\"text-sm text-primary\">{user.channel === 'zignal' ? 'Zignal' : selectedChat.connection.name}</span>\n <img\n src={getChatChannelPictureUrl(selectedChat)}\n alt=\"agent avatar\"\n class=\"profile-info-avatar\"\n loading=\"lazy\"\n />\n </div>\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('email')}</span>\n </div>\n <div class=\"col-span-2 profile-info-box-wrapper\">\n <span class={`text-sm text-primary`}>{user.email ? (Array.isArray(user.email) ? user.email.join(', ') : user.email) : '-'}</span>\n {!readOnly && activeTabIndex === 0 && (\n <ZIconButton variant=\"text\" iconName=\"Pencil\" addClassIcon=\"size-4\" onClick={() => onOpenDialogEditor({ label: 'Email', field: 'email', value: user.email })} />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('phone_no')}</span>\n </div>\n <div class=\"col-span-2 profile-info-box-wrapper\">\n <span class={`text-sm text-primary`}>\n {user.phone_number ? (Array.isArray(user.phone_number) ? user.phone_number.join(', ') : user.phone_number) : '-'}\n </span>\n {!readOnly && activeTabIndex === 0 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Phone no.', field: 'phone_number', value: user.phone_number })}\n />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('address')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`profile-info-pre-line text-primary`}>{getAddressAsText(user.address) \|\| '-'}</span>\n {!readOnly && activeTabIndex === 0 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Address', field: 'address', value: user.address, type: 'address' })}\n />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('gender')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`profile-info-capitalize text-primary`}>{user.gender ? user.gender : '-'}</span>\n {!readOnly && activeTabIndex === 1 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Gender', field: 'gender', value: user.gender, type: 'input' })}\n />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('locale')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`text-sm text-primary`}>{user.locale}</span>\n {!readOnly && activeTabIndex === 1 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Locale', field: 'locale', value: user.locale, type: 'input' })}\n />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('register_date')}</span>\n </div>\n <div class=\"col-span-2\">\n <span class={`text-sm text-primary`}>{displayDate(user.created_at)}</span>\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('last_active_date')}</span>\n </div>\n <div class=\"col-span-2\">\n <span class={`text-sm text-primary`}>{displayDate(user.last_active_at)}</span>\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('note')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`profile-info-pre-line text-primary`}>{user.note ? user.note : '-'}</span>\n {!readOnly && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Note', field: 'note', value: user.note, type: 'textarea' })}\n />\n )}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"about-section.js","sourceRoot":"","sources":["../../../src/components/internal-component/about-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { UserItem, UserAddress } from '../../store/type';\nimport { displayDate } from '../../utils/dayjs';\nimport { useTranslation } from '../../utils/utils';\nimport { ZIconButton } from './z-icon-button';\nimport { getAddressAsText } from '../../utils/func';\nimport { configStore, selectedChatStore } from '../../store/store';\nimport { getChatChannelPictureUrl } from '../../store/chat';\n\ninterface AboutSectionProps {\n user: UserItem;\n readOnly?: boolean;\n activeTabIndex: number;\n onOpenDialogEditor: (params: { label: string; field: string; value: string \| string[] \| UserAddress; type?: 'input' \| 'textarea' \| 'address' }) => void;\n}\n\nexport const AboutSection: FunctionalComponent<AboutSectionProps> = ({ user, readOnly = false, activeTabIndex, onOpenDialogEditor }) => {\n const t = useTranslation();\n const theme = configStore.get('theme');\n const selectedChat = selectedChatStore.get('selectedChat');\n\n return (\n <div class=\"profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 border-divider\" data-theme={theme}>\n <div class=\"col-span-3\">\n <span class=\"text-primary\">{t('about')}</span>\n </div>\n\n <div class=\"col-span-1\">\n <span class=\"text-sm text-gray\">{t('channel')}</span>\n </div>\n <div class=\"col-span-2\">\n <div class=\"profile-info-connection-wrapper\">\n <span class=\"text-sm text-primary\">{user.channel === 'zignal' ? 'Zignal' : selectedChat.connection.name}</span>\n <img\n src={getChatChannelPictureUrl(selectedChat)}\n alt=\"agent avatar\"\n class=\"profile-info-avatar\"\n loading=\"lazy\"\n />\n </div>\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('email')}</span>\n </div>\n <div class=\"col-span-2 profile-info-box-wrapper\">\n <span class={`text-sm text-primary`}>{user.email ? (Array.isArray(user.email) ? user.email.join(', ') : user.email) : '-'}</span>\n {!readOnly && activeTabIndex === 0 && (\n <ZIconButton variant=\"text\" iconName=\"Pencil\" addClassIcon=\"size-4\" onClick={() => onOpenDialogEditor({ label: 'Email', field: 'email', value: user.email })} />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('phone_no')}</span>\n </div>\n <div class=\"col-span-2 profile-info-box-wrapper\">\n <span class={`text-sm text-primary`}>\n {user.phone_number ? (Array.isArray(user.phone_number) ? user.phone_number.join(', ') : user.phone_number) : '-'}\n </span>\n {!readOnly && activeTabIndex === 0 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Phone no.', field: 'phone_number', value: user.phone_number })}\n />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('address')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`profile-info-pre-line text-primary`}>{getAddressAsText(user.address) \|\| '-'}</span>\n {!readOnly && activeTabIndex === 0 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Address', field: 'address', value: user.address, type: 'address' })}\n />\n )}\n </div>\n\n {selectedChat.type !== 'group' &&\n <Fragment>\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('gender')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`profile-info-capitalize text-primary`}>{user.gender ? user.gender : '-'}</span>\n {!readOnly && activeTabIndex === 1 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Gender', field: 'gender', value: user.gender, type: 'input' })}\n />\n )}\n </div>\n </Fragment>\n }\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('locale')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`text-sm text-primary`}>{user.locale}</span>\n {!readOnly && activeTabIndex === 1 && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Locale', field: 'locale', value: user.locale, type: 'input' })}\n />\n )}\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('register_date')}</span>\n </div>\n <div class=\"col-span-2\">\n <span class={`text-sm text-primary`}>{displayDate(user.created_at)}</span>\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('last_active_date')}</span>\n </div>\n <div class=\"col-span-2\">\n <span class={`text-sm text-primary`}>{displayDate(user.last_active_at)}</span>\n </div>\n\n <div class=\"col-span-1\">\n <span class={`text-sm text-gray`}>{t('note')}</span>\n </div>\n <div class=\"profile-info-content-wrapper-baseline\">\n <span class={`profile-info-pre-line text-primary`}>{user.note ? user.note : '-'}</span>\n {!readOnly && (\n <ZIconButton\n variant=\"text\"\n iconName=\"Pencil\"\n addClassIcon=\"size-4\"\n onClick={() => onOpenDialogEditor({ label: 'Note', field: 'note', value: user.note, type: 'textarea' })}\n />\n )}\n </div>\n </div>\n );\n};\n"]}

package/dist/collection/components/internal-component/chat-item.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { displayDateTime, displayTime, isToday } from "../../utils/dayjs";
 import { Icon } from "./icon";
 import { useTranslation } from "../../utils/utils";
 import { getChatChannelPictureUrl, getChatName, getChatPicture } from "../../store/chat";
+import { ZAvatarGroup } from "./z-avatar-group";
 export const ChatItem = ({ item }) => {
     const t = useTranslation();
     const { id, connection, channel, tags, unread_count, last_message, last_message_at, type, pin, mark_as_unread } = item;
@@ -59,7 +60,7 @@ export const ChatItem = ({ item }) => {
     };
     const _sortedTags = tags.sort((a, b) => a.sequence - b.sequence);
     return (h("div", { class: `chat-item ${isSelected ? 'bg-pink-100' : backgroundClass}`, "data-theme": theme, onClick: () => handleSelectChatClick() }, pin && (h("div", { class: "chat-item-pin" }, h(Icon, { name: "Pin", addClass: "chat-item-pin-icon text-accent" }))), h("div", { class: "chat-item-content-container" }, h("div", { class: "chat-item-avatar-wrapper" }, h("z-avatar", { pictureUrl: getChatPicture(item) }), type === 'group' &&
-        h("div", { class: "chat-item-avatar-badge" }, h("z-avatar", { size: "x-small" }))), h("div", { class: "chat-item-content-wrapper" }, h("div", { class: "chat-item-content-main" }, connection.type === 'zwiz' &&
+        h("div", { class: "chat-item-avatar-badge" }, h(ZAvatarGroup, { size: "x-small" }))), h("div", { class: "chat-item-content-wrapper" }, h("div", { class: "chat-item-content-main" }, connection.type === 'zwiz' &&
         h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/zwiz.png`, alt: "agent avatar zwiz", class: "chat-item-content-main-image", loading: "lazy" }), h("img", { src: getChatChannelPictureUrl(item), alt: "agent avatar", class: "chat-item-content-main-image", loading: "lazy" }), h("span", { title: connection.name, class: `chat-item-content-main-name ${platformColor} ` }, connection.name), h("div", { title: getLastMessageTime(), class: "chat-item-content-main-time" }, getLastMessageTime())), h("div", { class: `chat-item-content-secondary` }, h("div", null, h("div", { title: chatName, class: `${isUnread ? 'font-bold' : ''} ${isSelected ? 'text-black' : textClass} chat-item-content-secondary-nickname` }, chatName), h("div", { title: getLastMessage(), class: `${isUnread ? 'font-bold' : ''} chat-item-content-secondary-message` }, getLastMessage())), isUnread && (h("span", { class: `chat-item-content-unread ${unread_count === 0 ? 'chat-item-content-unread-mark' : 'chat-item-content-unread-count'}` }, unread_count > 0 && (unread_count > 1000 ? '999+' : unread_count)))), h("tag-list", { tags: _sortedTags, chatId: id, referenceSelector: `chat-tag-${id}` })))));
 };
 //# sourceMappingURL=chat-item.js.map

package/dist/collection/components/internal-component/chat-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-item.js","sourceRoot":"","sources":["../../../src/components/internal-component/chat-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;~~AAMzF~~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~~gBAAU~~,IAAI,EAAC,SAAS,GAAG,~~CACvB~~,CAEJ;YACN,WAAK,KAAK,EAAC,2BAA2B;gBACpC,WAAK,KAAK,EAAC,wBAAwB;oBAChC,UAAU,CAAC,IAAI,KAAK,MAAM;wBACzB,WAAK,GAAG,EAAE,iFAAiF,EAAE,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAC,MAAM,GAAG;oBAE7K,WAAK,GAAG,EAAE,wBAAwB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAC,cAAc,EAAC,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAC,MAAM,GAAG;oBACnH,YAAM,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,+BAA+B,aAAa,GAAG,IACjF,UAAU,CAAC,IAAI,CACX;oBAEP,WAAK,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAC,6BAA6B,IAClE,kBAAkB,EAAE,CACjB,CACF;gBACN,WAAK,KAAK,EAAE,6BAA6B;oBACvC;wBACE,WAAK,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,uCAAuC,IACxI,QAAQ,CACL;wBACN,WAAK,KAAK,EAAE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,sCAAsC,IACtG,cAAc,EAAE,CACb,CACF;oBAEL,QAAQ,IAAI,CACX,YAAM,KAAK,EAAE,4BAA4B,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gCAAgC,EAAE,IAC/H,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAC7D,CACR,CACG;gBAEN,gBAAU,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,iBAAiB,EAAE,YAAY,EAAE,EAAE,GAAI,CAC5E,CAUF,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore, selectedChatStore } from '../../store/store';\nimport { leaveRoom } from '../../utils/socket';\nimport { TChatItem } from '../../store/type';\nimport { displayDateTime, displayTime, isToday } from '../../utils/dayjs';\nimport { Icon } from './icon';\nimport { useTranslation } from '../../utils/utils';\nimport { getChatChannelPictureUrl, getChatName, getChatPicture } from '../../store/chat';\n\ninterface ChatItemProps {\n item: TChatItem;\n}\n\nexport const ChatItem: FunctionalComponent<ChatItemProps> = ({ item }) => {\n const t = useTranslation();\n const { id, connection, channel, tags, unread_count, last_message, last_message_at, type, pin, mark_as_unread } = item;\n const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';\n const theme = configStore.get('theme');\n const isSelected = selectedChatStore.get('selectedChat')?.id === id;\n const backgroundClass = theme === 'dark' ? 'z-background-dark' : 'z-background-light';\n const textClass = theme === 'dark' ? 'z-text-dark' : 'z-text-light';\n const isUnread = (unread_count > 0) \|\| mark_as_unread\n const chatName = getChatName(item);\n\n const getLastMessage = () => {\n if (['{image}', '{sticker}', '{audio}', '{video}', '{location}', '{text}', '{file}', '{template}', '{ig_reel}', '{story_mention}'].includes(last_message?.toLowerCase())) {\n const sender = ['user', 'group'].includes(type) ? chatName : t('you');\n let lastMessage = '';\n switch (last_message) {\n case '{ig_reel}':\n lastMessage = t('ig_reel');\n break;\n case '{story_mention}':\n lastMessage = t('story_mention');\n break;\n case '{file}':\n lastMessage = t('file');\n break;\n case '{image}':\n lastMessage = t('image');\n break;\n case '{video}':\n lastMessage = t('video');\n break;\n }\n\n return sender + ' ' + t('sent') + ' ' + lastMessage;\n }\n\n return last_message;\n };\n\n const getLastMessageTime = () => {\n if (last_message_at) {\n if (isToday(last_message_at)) {\n return displayTime(last_message_at);\n } else {\n return displayDateTime(last_message_at);\n }\n }\n }\n\n const handleSelectChatClick = () => {\n const selectedChat = selectedChatStore.get('selectedChat');\n if (selectedChat && selectedChat.id !== item.id) {\n leaveRoom(selectedChat.id);\n }\n\n selectedChatStore.set('selectedChat', item);\n };\n\n const _sortedTags = tags.sort((a, b) => a.sequence - b.sequence);\n\n return (\n <div\n class={`chat-item ${isSelected ? 'bg-pink-100' : backgroundClass}`}\n data-theme={theme}\n onClick={() => handleSelectChatClick()}\n >\n {pin && (\n <div class=\"chat-item-pin\">\n <Icon name=\"Pin\" addClass=\"chat-item-pin-icon text-accent\" />\n </div>\n )}\n\n <div class=\"chat-item-content-container\">\n <div class=\"chat-item-avatar-wrapper\">\n <z-avatar pictureUrl={getChatPicture(item)} />\n {type === 'group' &&\n <div class=\"chat-item-avatar-badge\">\n <~~z-avatar~~ size=\"x-small\" />\n </div>\n }\n </div>\n <div class=\"chat-item-content-wrapper\">\n <div class=\"chat-item-content-main\">\n {connection.type === 'zwiz' &&\n <img src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/zwiz.png`} alt=\"agent avatar zwiz\" class=\"chat-item-content-main-image\" loading=\"lazy\" />\n }\n <img src={getChatChannelPictureUrl(item)} alt=\"agent avatar\" class=\"chat-item-content-main-image\" loading=\"lazy\" />\n <span title={connection.name} class={`chat-item-content-main-name ${platformColor} `}>\n {connection.name}\n </span>\n\n <div title={getLastMessageTime()} class=\"chat-item-content-main-time\">\n {getLastMessageTime()}\n </div>\n </div>\n <div class={`chat-item-content-secondary`}>\n <div>\n <div title={chatName} class={`${isUnread ? 'font-bold' : ''} ${isSelected ? 'text-black' : textClass} chat-item-content-secondary-nickname`}>\n {chatName}\n </div>\n <div title={getLastMessage()} class={`${isUnread ? 'font-bold' : ''} chat-item-content-secondary-message`}>\n {getLastMessage()}\n </div>\n </div>\n\n {isUnread && (\n <span class={`chat-item-content-unread ${unread_count === 0 ? 'chat-item-content-unread-mark' : 'chat-item-content-unread-count'}`}>\n {unread_count > 0 && (unread_count > 1000 ? '999+' : unread_count)}\n </span>\n )}\n </div>\n\n <tag-list tags={_sortedTags} chatId={id} referenceSelector={`chat-tag-${id}`} />\n </div>\n {/* <div class=\"text-right flex flex-col justify-between\">\n <div class=\"mt-auto ml-auto\">\n <img\n src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/nong-z.png`}\n alt=\"agent avatar\"\n class=\"size-5 rounded-full\"\n />\n </div>\n </div> */}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"chat-item.js","sourceRoot":"","sources":["../../../src/components/internal-component/chat-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore, selectedChatStore } from '../../store/store';\nimport { leaveRoom } from '../../utils/socket';\nimport { TChatItem } from '../../store/type';\nimport { displayDateTime, displayTime, isToday } from '../../utils/dayjs';\nimport { Icon } from './icon';\nimport { useTranslation } from '../../utils/utils';\nimport { getChatChannelPictureUrl, getChatName, getChatPicture } from '../../store/chat';\nimport { ZAvatarGroup } from './z-avatar-group';\n\ninterface ChatItemProps {\n item: TChatItem;\n}\n\nexport const ChatItem: FunctionalComponent<ChatItemProps> = ({ item }) => {\n const t = useTranslation();\n const { id, connection, channel, tags, unread_count, last_message, last_message_at, type, pin, mark_as_unread } = item;\n const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';\n const theme = configStore.get('theme');\n const isSelected = selectedChatStore.get('selectedChat')?.id === id;\n const backgroundClass = theme === 'dark' ? 'z-background-dark' : 'z-background-light';\n const textClass = theme === 'dark' ? 'z-text-dark' : 'z-text-light';\n const isUnread = (unread_count > 0) \|\| mark_as_unread\n const chatName = getChatName(item);\n\n const getLastMessage = () => {\n if (['{image}', '{sticker}', '{audio}', '{video}', '{location}', '{text}', '{file}', '{template}', '{ig_reel}', '{story_mention}'].includes(last_message?.toLowerCase())) {\n const sender = ['user', 'group'].includes(type) ? chatName : t('you');\n let lastMessage = '';\n switch (last_message) {\n case '{ig_reel}':\n lastMessage = t('ig_reel');\n break;\n case '{story_mention}':\n lastMessage = t('story_mention');\n break;\n case '{file}':\n lastMessage = t('file');\n break;\n case '{image}':\n lastMessage = t('image');\n break;\n case '{video}':\n lastMessage = t('video');\n break;\n }\n\n return sender + ' ' + t('sent') + ' ' + lastMessage;\n }\n\n return last_message;\n };\n\n const getLastMessageTime = () => {\n if (last_message_at) {\n if (isToday(last_message_at)) {\n return displayTime(last_message_at);\n } else {\n return displayDateTime(last_message_at);\n }\n }\n }\n\n const handleSelectChatClick = () => {\n const selectedChat = selectedChatStore.get('selectedChat');\n if (selectedChat && selectedChat.id !== item.id) {\n leaveRoom(selectedChat.id);\n }\n\n selectedChatStore.set('selectedChat', item);\n };\n\n const _sortedTags = tags.sort((a, b) => a.sequence - b.sequence);\n\n return (\n <div\n class={`chat-item ${isSelected ? 'bg-pink-100' : backgroundClass}`}\n data-theme={theme}\n onClick={() => handleSelectChatClick()}\n >\n {pin && (\n <div class=\"chat-item-pin\">\n <Icon name=\"Pin\" addClass=\"chat-item-pin-icon text-accent\" />\n </div>\n )}\n\n <div class=\"chat-item-content-container\">\n <div class=\"chat-item-avatar-wrapper\">\n <z-avatar pictureUrl={getChatPicture(item)} />\n {type === 'group' &&\n <div class=\"chat-item-avatar-badge\">\n <ZAvatarGroup size=\"x-small\" />\n </div>\n }\n </div>\n <div class=\"chat-item-content-wrapper\">\n <div class=\"chat-item-content-main\">\n {connection.type === 'zwiz' &&\n <img src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/zwiz.png`} alt=\"agent avatar zwiz\" class=\"chat-item-content-main-image\" loading=\"lazy\" />\n }\n <img src={getChatChannelPictureUrl(item)} alt=\"agent avatar\" class=\"chat-item-content-main-image\" loading=\"lazy\" />\n <span title={connection.name} class={`chat-item-content-main-name ${platformColor} `}>\n {connection.name}\n </span>\n\n <div title={getLastMessageTime()} class=\"chat-item-content-main-time\">\n {getLastMessageTime()}\n </div>\n </div>\n <div class={`chat-item-content-secondary`}>\n <div>\n <div title={chatName} class={`${isUnread ? 'font-bold' : ''} ${isSelected ? 'text-black' : textClass} chat-item-content-secondary-nickname`}>\n {chatName}\n </div>\n <div title={getLastMessage()} class={`${isUnread ? 'font-bold' : ''} chat-item-content-secondary-message`}>\n {getLastMessage()}\n </div>\n </div>\n\n {isUnread && (\n <span class={`chat-item-content-unread ${unread_count === 0 ? 'chat-item-content-unread-mark' : 'chat-item-content-unread-count'}`}>\n {unread_count > 0 && (unread_count > 1000 ? '999+' : unread_count)}\n </span>\n )}\n </div>\n\n <tag-list tags={_sortedTags} chatId={id} referenceSelector={`chat-tag-${id}`} />\n </div>\n {/* <div class=\"text-right flex flex-col justify-between\">\n <div class=\"mt-auto ml-auto\">\n <img\n src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/nong-z.png`}\n alt=\"agent avatar\"\n class=\"size-5 rounded-full\"\n />\n </div>\n </div> */}\n </div>\n </div>\n );\n};\n"]}

package/dist/collection/components/internal-component/context-section.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import { ZIconButton } from "./z-icon-button";
 import { configStore } from "../../store/store";
-export const ContextSection = ({ user, readOnly = false, activeTabIndex, isEditContext, context, onEditContext, onCloseContext, onSaveUserContexts, onContextSelecting,
-// onRemoveContext,
-onCreateUserContext, }) => {
+export const ContextSection = ({ user, readOnly = false, activeTabIndex, isEditContext, context, onEditContext, onCloseContext, onSaveUserContexts, onContextSelecting, onCreateUserContext, }) => {
     const theme = configStore.get('theme');
-    return (h("div", { class: `profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 z-border-divider-${theme}` }, h("div", { class: "col-span-3 profile-info-box-wrapper" }, h("span", { class: `z-text-${theme} whitespace-nowrap` }, "\u0E1A\u0E23\u0E34\u0E1A\u0E17\u0E02\u0E2D\u0E07\u0E1A\u0E17\u0E2A\u0E19\u0E17\u0E19\u0E32"), !readOnly && activeTabIndex === 0 && (h("slot", null, isEditContext ? (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "X", addClassIcon: "size-4", onClick: onCloseContext }), h(ZIconButton, { variant: "text", iconName: "Save", addClassIcon: "size-4", onClick: onSaveUserContexts }))) : (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: onEditContext })))))), h("div", { class: `profile-info-tag-wrapper scroll-container` }, isEditContext ? (h("div", { class: "profile-info-box-wrapper" }, h("autocomplete-select", { value: user.context === context ? user.context : '', fetchItems: () => Promise.resolve([{
-                id: '1',
+    return (h("div", { class: `profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 z-border-divider-${theme}` }, h("div", { class: "col-span-3 profile-info-box-wrapper" }, h("span", { class: `z-text-${theme} whitespace-nowrap` }, "\u0E1A\u0E23\u0E34\u0E1A\u0E17\u0E02\u0E2D\u0E07\u0E1A\u0E17\u0E2A\u0E19\u0E17\u0E19\u0E32"), !readOnly && activeTabIndex === 0 && (h("slot", null, isEditContext ? (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "X", addClassIcon: "size-4", onClick: onCloseContext }), h(ZIconButton, { variant: "text", iconName: "Save", addClassIcon: "size-4", onClick: onSaveUserContexts }))) : (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: onEditContext })))))), h("div", { class: `profile-info-tag-wrapper scroll-container` }, isEditContext ? (h("autocomplete-select", { value: user.context === context ? user.context : '', fetchItems: () => Promise.resolve([{
                 name: 'contactadmin'
-            }]), createItem: (name) => onCreateUserContext(name), onSelecting: item => onContextSelecting(item.detail.name), referenceSelector: "profile-context" }))) : (h("div", { class: "profile-info-box-wrapper" }, h("span", { class: `text-sm z-text-${theme}` }, user.context ? user.context : '-'))))));
+            }]), createItem: async (name) => {
+            const result = await onCreateUserContext(name);
+            return { name: result };
+        }, onSelecting: item => onContextSelecting(item.detail.name), referenceSelector: "profile-context", showClearButton: true })) : (h("div", { class: "profile-info-box-wrapper" }, h("span", { class: `text-sm z-text-${theme}` }, user.context ? user.context : '-'))))));
 };
 //# sourceMappingURL=context-section.js.map

package/dist/collection/components/internal-component/context-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context-section.js","sourceRoot":"","sources":["../../../src/components/internal-component/context-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;~~AAgBhD~~,MAAM,CAAC,MAAM,cAAc,GAAyC,CAAC,EACnE,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,aAAa,EACb,OAAO,EACP,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,kBAAkB~~;AAClB~~,~~mBAAmB;AACnB~~,mBAAmB,GACpB,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAEvC,OAAO,CACL,WAAK,KAAK,EAAE,4EAA4E,KAAK,EAAE;QAC7F,WAAK,KAAK,EAAC,qCAAqC;YAC9C,YAAM,KAAK,EAAE,UAAU,KAAK,oBAAoB,iGAAwB;YAEvE,CAAC,QAAQ,IAAI,cAAc,KAAK,CAAC,IAAI,CACpC,gBACG,aAAa,CAAC,CAAC,CAAC,CACf,WAAK,KAAK,EAAC,6CAA6C;gBACtD,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,GAAI;gBAC1F,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAE,kBAAkB,GAAI,CAC7F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,6CAA6C;gBACtD,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,GAAI,CAC1F,CACP,CACI,CACR,CACG;QAEN,WAAK,KAAK,EAAE,2CAA2C,IACpD,aAAa,CAAC,CAAC,CAAC,CACf,~~WAAK,KAAK,EAAC,0BAA0B;YACnC,~~2BACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACnD,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;~~wBACjC~~,~~EAAE,EAAE,GAAG;wBACP,~~IAAI,EAAE,cAAc;~~qBACrB~~,CAAC,CAAC,EACH,UAAU,EAAE,~~CAAC~~,IAAI,EAAE,EAAE,~~CAAC~~,mBAAmB,CAAC,IAAI,CAAC,~~EAC/C~~,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EACzD,iBAAiB,EAAC,iBAAiB,~~GACnC~~,~~CACE~~,~~CACP~~,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B;YACnC,YAAM,KAAK,EAAE,kBAAkB,KAAK,EAAE,IACnC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAC7B,CACH,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { UserItem } from '../../store/type';\nimport { ZIconButton } from './z-icon-button';\nimport { configStore } from '../../store/store';\n\ninterface TagSectionProps {\n user: UserItem;\n readOnly?: boolean;\n activeTabIndex: number;\n isEditContext: boolean;\n context?: string;\n onEditContext: () => void;\n onCloseContext: () => void;\n onSaveUserContexts: () => void;\n onContextSelecting: (context: string) => void;\n ~~// onRemoveContext: () => void;\n~~ onCreateUserContext: (name: string) => Promise<string>;\n}\n\nexport const ContextSection: FunctionalComponent<TagSectionProps> = ({\n user,\n readOnly = false,\n activeTabIndex,\n isEditContext,\n context,\n onEditContext,\n onCloseContext,\n onSaveUserContexts,\n onContextSelecting,\n ~~// onRemoveContext,\n~~ onCreateUserContext,\n}) => {\n const theme = configStore.get('theme');\n\n return (\n <div class={`profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 z-border-divider-${theme}`}>\n <div class=\"col-span-3 profile-info-box-wrapper\">\n <span class={`z-text-${theme} whitespace-nowrap`}>บริบทของบทสนทนา</span>\n\n {!readOnly && activeTabIndex === 0 && (\n <slot>\n {isEditContext ? (\n <div class=\"profile-info-box-wrapper justify-end w-full\">\n <ZIconButton variant=\"text\" iconName=\"X\" addClassIcon=\"size-4\" onClick={onCloseContext} />\n <ZIconButton variant=\"text\" iconName=\"Save\" addClassIcon=\"size-4\" onClick={onSaveUserContexts} />\n </div>\n ) : (\n <div class=\"profile-info-box-wrapper justify-end w-full\">\n <ZIconButton variant=\"text\" iconName=\"Pencil\" addClassIcon=\"size-4\" onClick={onEditContext} />\n </div>\n )}\n </slot>\n )}\n </div>\n\n <div class={`profile-info-tag-wrapper scroll-container`}>\n {isEditContext ? (\n <~~div class=\"profile-info-box-wrapper\">\n <~~autocomplete-select\n value={user.context === context ? user.context : ''}\n fetchItems={() => Promise.resolve([{\n ~~id: '1',\n~~ name: 'contactadmin'\n }])}\n createItem={(name) => onCreateUserContext(name)}\n onSelecting={item => onContextSelecting(item.detail.name)}\n referenceSelector=\"profile-context\"\n ~~/>\~~n ~~</div>\~~n ) : (\n <div class=\"profile-info-box-wrapper\">\n <span class={`text-sm z-text-${theme}`}>\n {user.context ? user.context : '-'}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"context-section.js","sourceRoot":"","sources":["../../../src/components/internal-component/context-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAehD,MAAM,CAAC,MAAM,cAAc,GAAyC,CAAC,EACnE,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,aAAa,EACb,OAAO,EACP,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAEvC,OAAO,CACL,WAAK,KAAK,EAAE,4EAA4E,KAAK,EAAE;QAC7F,WAAK,KAAK,EAAC,qCAAqC;YAC9C,YAAM,KAAK,EAAE,UAAU,KAAK,oBAAoB,iGAAwB;YAEvE,CAAC,QAAQ,IAAI,cAAc,KAAK,CAAC,IAAI,CACpC,gBACG,aAAa,CAAC,CAAC,CAAC,CACf,WAAK,KAAK,EAAC,6CAA6C;gBACtD,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,GAAI;gBAC1F,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAE,kBAAkB,GAAI,CAC7F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,6CAA6C;gBACtD,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,GAAI,CAC1F,CACP,CACI,CACR,CACG;QAEN,WAAK,KAAK,EAAE,2CAA2C,IACpD,aAAa,CAAC,CAAC,CAAC,CACf,2BACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACnD,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;oBACjC,IAAI,EAAE,cAAc;iBACrB,CAAC,CAAC,EACH,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;gBACzB,MAAM,MAAM,GAAG,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAA;gBAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC1B,CAAC,EACD,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EACzD,iBAAiB,EAAC,iBAAiB,EACnC,eAAe,SACf,CACH,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B;YACnC,YAAM,KAAK,EAAE,kBAAkB,KAAK,EAAE,IACnC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAC7B,CACH,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { UserItem } from '../../store/type';\nimport { ZIconButton } from './z-icon-button';\nimport { configStore } from '../../store/store';\n\ninterface TagSectionProps {\n user: UserItem;\n readOnly?: boolean;\n activeTabIndex: number;\n isEditContext: boolean;\n context?: string;\n onEditContext: () => void;\n onCloseContext: () => void;\n onSaveUserContexts: () => void;\n onContextSelecting: (context: string) => void;\n onCreateUserContext: (name: string) => Promise<string>;\n}\n\nexport const ContextSection: FunctionalComponent<TagSectionProps> = ({\n user,\n readOnly = false,\n activeTabIndex,\n isEditContext,\n context,\n onEditContext,\n onCloseContext,\n onSaveUserContexts,\n onContextSelecting,\n onCreateUserContext,\n}) => {\n const theme = configStore.get('theme');\n\n return (\n <div class={`profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 z-border-divider-${theme}`}>\n <div class=\"col-span-3 profile-info-box-wrapper\">\n <span class={`z-text-${theme} whitespace-nowrap`}>บริบทของบทสนทนา</span>\n\n {!readOnly && activeTabIndex === 0 && (\n <slot>\n {isEditContext ? (\n <div class=\"profile-info-box-wrapper justify-end w-full\">\n <ZIconButton variant=\"text\" iconName=\"X\" addClassIcon=\"size-4\" onClick={onCloseContext} />\n <ZIconButton variant=\"text\" iconName=\"Save\" addClassIcon=\"size-4\" onClick={onSaveUserContexts} />\n </div>\n ) : (\n <div class=\"profile-info-box-wrapper justify-end w-full\">\n <ZIconButton variant=\"text\" iconName=\"Pencil\" addClassIcon=\"size-4\" onClick={onEditContext} />\n </div>\n )}\n </slot>\n )}\n </div>\n\n <div class={`profile-info-tag-wrapper scroll-container`}>\n {isEditContext ? (\n <autocomplete-select\n value={user.context === context ? user.context : ''}\n fetchItems={() => Promise.resolve([{\n name: 'contactadmin'\n }])}\n createItem={async (name) => {\n const result = await onCreateUserContext(name)\n return { name: result };\n }}\n onSelecting={item => onContextSelecting(item.detail.name)}\n referenceSelector=\"profile-context\"\n showClearButton\n />\n ) : (\n <div class=\"profile-info-box-wrapper\">\n <span class={`text-sm z-text-${theme}`}>\n {user.context ? user.context : '-'}\n </span>\n </div>\n )}\n </div>\n </div>\n );\n};\n"]}

package/dist/collection/components/internal-component/z-avatar-group.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+import { Icon } from "./icon";
+export const ZAvatarGroup = ({ size = 'medium' }) => {
+    const sizing = () => {
+        if (size === '2x-small') {
+            return {
+                base: 'z-avatar-2x-small',
+                icon: 'size-[8px]',
+            };
+        }
+        if (size === 'x-small') {
+            return {
+                base: 'z-avatar-x-small',
+                icon: 'size-[10px]',
+            };
+        }
+        if (size === 'small') {
+            return {
+                base: 'z-avatar-small',
+                icon: 'size-4',
+            };
+        }
+        if (size === 'medium') {
+            return {
+                base: 'z-avatar-medium',
+                icon: 'size-8',
+            };
+        }
+        if (size === 'large') {
+            return {
+                base: 'z-avatar-large',
+                icon: 'size-16',
+            };
+        }
+        if (size === 'full') {
+            return {
+                base: 'z-avatar-full',
+                icon: 'size-32',
+            };
+        }
+    };
+    return (h("div", { class: `bg-secondary rounded-full ${sizing().base} z-avatar-error` }, h(Icon, { name: "UsersRound", addClass: `${sizing().icon} text-white` })));
+};
+//# sourceMappingURL=z-avatar-group.js.map

package/dist/collection/components/internal-component/z-avatar-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"z-avatar-group.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAM9B,MAAM,CAAC,MAAM,YAAY,GAA2C,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE;IAE1F,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxB,OAAO;gBACL,IAAI,EAAE,mBAAmB;gBACzB,IAAI,EAAE,YAAY;aACnB,CAAC;QACJ,CAAC;QACD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO;gBACL,IAAI,EAAE,kBAAkB;gBACxB,IAAI,EAAE,aAAa;aACpB,CAAC;QACJ,CAAC;QACD,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,OAAO;gBACL,IAAI,EAAE,gBAAgB;gBACtB,IAAI,EAAE,QAAQ;aACf,CAAC;QACJ,CAAC;QACD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,OAAO;gBACL,IAAI,EAAE,iBAAiB;gBACvB,IAAI,EAAE,QAAQ;aACf,CAAC;QACJ,CAAC;QACD,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,OAAO;gBACL,IAAI,EAAE,gBAAgB;gBACtB,IAAI,EAAE,SAAS;aAChB,CAAC;QACJ,CAAC;QACD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACpB,OAAO;gBACL,IAAI,EAAE,eAAe;gBACrB,IAAI,EAAE,SAAS;aAChB,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,WAAK,KAAK,EAAE,6BAA6B,MAAM,EAAE,CAAC,IAAI,iBAAiB;QACrE,EAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAE,GAAG,MAAM,EAAE,CAAC,IAAI,aAAa,GAAI,CAC/D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Icon } from './icon';\n\ninterface ZAvatarGroupProps {\n size?: '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'full';\n}\n\nexport const ZAvatarGroup: FunctionalComponent<ZAvatarGroupProps> = ({ size = 'medium' }) => {\n\n const sizing = () => {\n if (size === '2x-small') {\n return {\n base: 'z-avatar-2x-small',\n icon: 'size-[8px]',\n };\n }\n if (size === 'x-small') {\n return {\n base: 'z-avatar-x-small',\n icon: 'size-[10px]',\n };\n }\n if (size === 'small') {\n return {\n base: 'z-avatar-small',\n icon: 'size-4',\n };\n }\n if (size === 'medium') {\n return {\n base: 'z-avatar-medium',\n icon: 'size-8',\n };\n }\n if (size === 'large') {\n return {\n base: 'z-avatar-large',\n icon: 'size-16',\n };\n }\n if (size === 'full') {\n return {\n base: 'z-avatar-full',\n icon: 'size-32',\n };\n }\n };\n\n return (\n <div class={`bg-secondary rounded-full ${sizing().base} z-avatar-error`}>\n <Icon name=\"UsersRound\" addClass={`${sizing().icon} text-white`} />\n </div>\n );\n};\n"]}

package/dist/collection/components/internal-component/z-context-input.js CHANGED Viewed

@@ -1,9 +1,42 @@
 import { h } from "@stencil/core";
 import { configStore } from "../../store/store";
 import { ZIconButton } from "./z-icon-button";
+let keyTextareaEl = null;
+let valueTextareaEl = null;
+const syncHeights = () => {
+    if (!keyTextareaEl || !valueTextareaEl)
+        return;
+    keyTextareaEl.style.height = 'auto';
+    valueTextareaEl.style.height = 'auto';
+    const maxHeight = Math.max(keyTextareaEl.scrollHeight, valueTextareaEl.scrollHeight);
+    keyTextareaEl.style.height = `${maxHeight}px`;
+    valueTextareaEl.style.height = `${maxHeight}px`;
+};
 export const ZContextInput = ({ keyInput, valueInput, onDelete }) => {
     const theme = configStore.get('theme');
-    return (h("div", { class: "z-context-input" }, h("input", { disabled: keyInput.disabled, id: keyInput.id, placeholder: keyInput.placeholder, class: `z-context-input-key z-border-divider-${theme} z-background-${theme} z-text-${theme}`, value: keyInput.value, onInput: (e) => keyInput.onChange?.(e.target.value), onKeyDown: keyInput.onKeyDown, autoFocus: true }), h("textarea", { disabled: keyInput.disabled, id: valueInput.id, placeholder: valueInput.placeholder, class: `z-context-input-value z-border-${theme} z-background-${theme} z-text-${theme}`, value: valueInput.value, onInput: (e) => valueInput.onChange?.(e.target.value), rows: 1 }), onDelete &&
+    const handleKeyInput = (e) => {
+        const target = e.target;
+        keyInput.onChange?.(target.value);
+        requestAnimationFrame(() => syncHeights());
+    };
+    const handleValueInput = (e) => {
+        const target = e.target;
+        valueInput.onChange?.(target.value);
+        requestAnimationFrame(() => syncHeights());
+    };
+    const handleKeyRef = (el) => {
+        if (el) {
+            keyTextareaEl = el;
+            requestAnimationFrame(() => syncHeights());
+        }
+    };
+    const handleValueRef = (el) => {
+        if (el) {
+            valueTextareaEl = el;
+            requestAnimationFrame(() => syncHeights());
+        }
+    };
+    return (h("div", { class: "z-context-input" }, h("textarea", { ref: handleKeyRef, disabled: keyInput.disabled, id: keyInput.id, placeholder: keyInput.placeholder, class: `z-context-input-key z-border-divider-${theme} z-background-${theme} z-text-${theme} scroll-container`, value: keyInput.value, onInput: handleKeyInput, autoFocus: true, rows: 1 }), h("textarea", { ref: handleValueRef, disabled: keyInput.disabled, id: valueInput.id, placeholder: valueInput.placeholder, class: `z-context-input-value z-border-${theme} z-background-${theme} z-text-${theme} scroll-container`, value: valueInput.value, onInput: handleValueInput, rows: 1 }), onDelete &&
         h("div", { class: "ml-0.5" }, h(ZIconButton, { variant: 'text', iconName: "Trash2", addClassIcon: `size-4 z-text-primary-${theme}`, onClick: onDelete }))));
 };
 //# sourceMappingURL=z-context-input.js.map

package/dist/collection/components/internal-component/z-context-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-context-input.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-context-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;~~AAiB9C~~,MAAM,CAAC,MAAM,aAAa,GAA4C,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3G,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;~~IACvC~~,~~OAAO~~,~~CACL~~,~~WAAK~~,~~KAAK~~,~~EAAC~~,~~iBAAiB~~;~~QAC1B~~,~~aACE~~,~~QAAQ~~,~~EAAE~~,~~QAAQ~~,CAAC,QAAQ,~~EAC3B~~,~~EAAE~~,EAAE,~~QAAQ~~,CAAC,EAAE,~~EACf~~,WAAW,EAAE,~~QAAQ~~,CAAC,~~WAAW~~,~~EACjC~~,~~KAAK~~,EAAE,~~wCAAwC~~,~~KAAK~~,~~iBAAiB~~,~~KAAK~~,~~WAAW~~,~~KAAK~~,~~EAAE~~,~~EAC5F~~,~~KAAK~~,~~EAAE~~,QAAQ,CAAC,KAAK,~~EACrB~~,~~OAAO~~,EAAE,CAAC,~~CAAM~~,EAAE,EAAE,CAAC,~~QAAQ~~,CAAC,~~QAAQ~~,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,~~KAAK~~,CAAC,~~EACxD~~,~~SAAS~~,EAAE,~~QAAQ~~,CAAC,~~SAAS~~,~~EAC7B~~,~~SAAS~~,EAAE,~~IAAI~~,~~GACf~~;~~QACF~~,gBACE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,EAAE,EAAE,~~UAAU~~,CAAC,EAAE,~~EACjB~~,WAAW,EAAE,~~UAAU~~,CAAC,WAAW,~~EACnC~~,KAAK,EAAE,~~kCAAkC~~,KAAK,iBAAiB,KAAK,WAAW,KAAK,~~EAAE~~,~~EACtF~~,KAAK,EAAE,~~UAAU~~,CAAC,KAAK,~~EACvB~~,OAAO,EAAE,~~CAAC~~,~~CAAM~~,EAAE,EAAE,CAAC,~~UAAU~~,~~CAAC~~,QAAQ,EAAE,~~CAAC~~,CAAC,CAAC,~~MAAM~~,CAAC,KAAK,CAAC,~~EAC1D~~,IAAI,EAAE,CAAC,GACP;QACD,QAAQ;YACP,WAAK,KAAK,EAAC,QAAQ;gBACjB,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAC,YAAY,EAAE,yBAAyB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,GAAI,CAC/G,CAEJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { ZIconButton } from './z-icon-button';\n\ninterface ZContextInputItem {\n id?: string;\n placeholder?: string;\n value?: string;\n onChange?: (value: string) => void;\n ~~onKeyDown?: (event: KeyboardEvent) => void;\n~~ error?: string;\n disabled?: boolean\n}\ninterface ZContextInputProps {\n keyInput: ZContextInputItem\n valueInput: ZContextInputItem\n onDelete?: () => void\n}\n\nexport const ZContextInput: FunctionalComponent<ZContextInputProps> = ({ keyInput, valueInput, onDelete }) => {\n const theme = configStore.get('theme');\n return (\n <div class=\"z-context-input\">\n <~~input~~\n disabled={keyInput.disabled}\n id={keyInput.id}\n placeholder={keyInput.placeholder}\n class={`z-context-input-key z-border-divider-${theme} z-background-${theme} z-text-${theme}`}\n value={keyInput.value}\n onInput={~~(e: any) => keyInput.onChange?.(e.target.value)~~}\n ~~onKeyDown~~={~~keyInput.onKeyDown~~}\n ~~autoFocus~~={~~true~~}\n />\n <textarea\n disabled={keyInput.disabled}\n id={valueInput.id}\n placeholder={valueInput.placeholder}\n class={`z-context-input-value z-border-${theme} z-background-${theme} z-text-${theme}`}\n value={valueInput.value}\n onInput={~~(e: any) => valueInput.onChange?.(e.target.value)~~}\n rows={1}\n />\n {onDelete &&\n <div class=\"ml-0.5\">\n <ZIconButton variant='text' iconName=\"Trash2\" addClassIcon={`size-4 z-text-primary-${theme}`} onClick={onDelete} />\n </div>\n }\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"z-context-input.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-context-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { ZIconButton } from './z-icon-button';\n\ninterface ZContextInputItem {\n id?: string;\n placeholder?: string;\n value?: string;\n onChange?: (value: string) => void;\n error?: string;\n disabled?: boolean\n}\ninterface ZContextInputProps {\n keyInput: ZContextInputItem\n valueInput: ZContextInputItem\n onDelete?: () => void\n}\n\nlet keyTextareaEl: HTMLTextAreaElement \| null = null;\nlet valueTextareaEl: HTMLTextAreaElement \| null = null;\n\nconst syncHeights = () => {\n if (!keyTextareaEl \|\| !valueTextareaEl) return;\n\n keyTextareaEl.style.height = 'auto';\n valueTextareaEl.style.height = 'auto';\n\n const maxHeight = Math.max(keyTextareaEl.scrollHeight, valueTextareaEl.scrollHeight);\n\n keyTextareaEl.style.height = `${maxHeight}px`;\n valueTextareaEl.style.height = `${maxHeight}px`;\n};\n\nexport const ZContextInput: FunctionalComponent<ZContextInputProps> = ({ keyInput, valueInput, onDelete }) => {\n const theme = configStore.get('theme');\n\n const handleKeyInput = (e: Event) => {\n const target = e.target as HTMLTextAreaElement;\n keyInput.onChange?.(target.value);\n requestAnimationFrame(() => syncHeights());\n };\n\n const handleValueInput = (e: Event) => {\n const target = e.target as HTMLTextAreaElement;\n valueInput.onChange?.(target.value);\n requestAnimationFrame(() => syncHeights());\n };\n\n const handleKeyRef = (el?: HTMLTextAreaElement) => {\n if (el) {\n keyTextareaEl = el;\n requestAnimationFrame(() => syncHeights());\n }\n };\n\n const handleValueRef = (el?: HTMLTextAreaElement) => {\n if (el) {\n valueTextareaEl = el;\n requestAnimationFrame(() => syncHeights());\n }\n };\n\n return (\n <div class=\"z-context-input\">\n <textarea\n ref={handleKeyRef}\n disabled={keyInput.disabled}\n id={keyInput.id}\n placeholder={keyInput.placeholder}\n class={`z-context-input-key z-border-divider-${theme} z-background-${theme} z-text-${theme} scroll-container`}\n value={keyInput.value}\n onInput={handleKeyInput}\n autoFocus={true}\n rows={1}\n />\n <textarea\n ref={handleValueRef}\n disabled={keyInput.disabled}\n id={valueInput.id}\n placeholder={valueInput.placeholder}\n class={`z-context-input-value z-border-${theme} z-background-${theme} z-text-${theme} scroll-container`}\n value={valueInput.value}\n onInput={handleValueInput}\n rows={1}\n />\n {onDelete &&\n <div class=\"ml-0.5\">\n <ZIconButton variant='text' iconName=\"Trash2\" addClassIcon={`size-4 z-text-primary-${theme}`} onClick={onDelete} />\n </div>\n }\n </div>\n );\n};\n"]}