@product7/product7-js 0.5.5 → 0.5.7

package/src/widgets/{web-chat → liveChat}/views/ChatView.js

@@ -11,18 +11,19 @@
 		this._pendingAttachments = [];
 		this._emojiPickerOpen = false;
 		this._emojiOutsideHandler = null;
+		this._menuOutsideHandler = null;
 	}
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'web-chat-view web-chat-chat-view';
+		this.element.className = 'liveChat-view liveChat-chat-view';
 
 		this._updateContent();
 
 		this._unsubscribe = this.state.subscribe((type, data) => {
 			if (type === 'connectionChange') {
 				const banner = this.element?.querySelector(
-					'.web-chat-connection-banner'
+					'.liveChat-connection-banner'
 				);
 				if (banner) {
 					banner.style.display = data.connected ? 'none' : 'flex';
@@ -85,53 +86,68 @@
 		const teamName = this.state.teamName || 'Support';
 		const headerAvatarHtml = logoUrl
 			? `<img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(teamName)}" />`
-			: `<iconify-icon icon="ph:chats-circle-duotone" width="20" height="20"></iconify-icon>`;
+			: `<iconify-icon icon="ph:chats-circle" width="20" height="20"></iconify-icon>`;
+
+		const isExpanded = this.options.isExpanded?.() ?? false;
+		const expandIcon = isExpanded ? 'ph:arrows-in' : 'ph:arrows-out';
+		const expandLabel = isExpanded ? 'Collapse window' : 'Expand window';
 
 		this.element.innerHTML = `
-			<div class="web-chat-chat-header">
-				<button class="sdk-btn-icon web-chat-back-btn" aria-label="Back">
+			<div class="liveChat-chat-header">
+				<button class="sdk-btn-icon liveChat-back-btn" aria-label="Back">
 					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
 				</button>
-				<div class="web-chat-chat-header-avatar">
+				<div class="liveChat-chat-header-avatar">
 					${headerAvatarHtml}
 				</div>
-				<div class="web-chat-chat-header-info">
-					<span class="web-chat-chat-title">${this._escapeHtml(teamName)}</span>
-					<span class="web-chat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
+				<div class="liveChat-chat-header-info">
+					<span class="liveChat-chat-title">${this._escapeHtml(teamName)}</span>
+					<span class="liveChat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
 				</div>
-				<div class="web-chat-chat-header-actions">
-					<button class="sdk-btn-icon sdk-close-btn web-chat-mobile-close-btn" aria-label="Close">
+				<div class="liveChat-chat-header-actions">
+					<div class="liveChat-chat-menu-wrapper">
+						<button class="sdk-btn-icon liveChat-chat-menu-btn" aria-label="Options">
+							<iconify-icon icon="ph:dots-three" width="20" height="20"></iconify-icon>
+						</button>
+						<div class="liveChat-chat-menu-dropdown">
+							<button class="liveChat-chat-menu-item liveChat-expand-window-btn">
+								<iconify-icon icon="${expandIcon}" width="16" height="16"></iconify-icon>
+								<span>${expandLabel}</span>
+							</button>
+						</div>
+					</div>
+					<button class="sdk-btn-icon sdk-close-btn liveChat-mobile-close-btn" aria-label="Close">
 						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
 
-			<div class="web-chat-connection-banner" style="display:none;">
+			<div class="liveChat-connection-banner" style="display:none;">
 				<iconify-icon icon="ph:wifi-slash" width="14" height="14"></iconify-icon>
 				<span>Reconnecting…</span>
 			</div>
 
-			<div class="web-chat-chat-messages">
+			<div class="liveChat-chat-messages">
 				${messagesHtml}
 				${
 					isClosed
 						? `
-				<div class="web-chat-closed-banner">
-					<iconify-icon icon="ph:check-circle-duotone" width="18" height="18"></iconify-icon>
+				<div class="liveChat-closed-banner">
+					<iconify-icon icon="ph:check-circle" width="18" height="18"></iconify-icon>
 					<span>This conversation has been resolved</span>
 				</div>
 				`
 						: ''
 				}
-				<div class="web-chat-typing-indicator">
-					<div class="web-chat-typing-dots">
+				<div class="liveChat-typing-indicator">
+					<div class="liveChat-typing-dots">
 						<span></span><span></span><span></span>
 					</div>
-					<span class="web-chat-typing-text"></span>
+					<span class="liveChat-typing-text"></span>
 				</div>
 			</div>
 
-			<div class="web-chat-scroll-pill" style="display:none;">
+			<div class="liveChat-scroll-pill" style="display:none;">
 				<iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>
 				<span>New message</span>
 			</div>
@@ -140,33 +156,33 @@
 				isClosed
 					? ''
 					: `
-			<div class="web-chat-compose-attachments-preview"></div>
+			<div class="liveChat-compose-attachments-preview"></div>
 
-			<div class="web-chat-chat-compose">
-				<div class="web-chat-compose-input-wrapper">
-					<textarea class="web-chat-compose-input" placeholder="${placeholder}" rows="1"></textarea>
+			<div class="liveChat-chat-compose">
+				<div class="liveChat-compose-input-wrapper">
+					<textarea class="liveChat-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
-				<div class="web-chat-compose-bottom">
-					<div class="web-chat-compose-actions">
-						<button class="sdk-btn-icon web-chat-compose-attach" aria-label="Attach file">
-							<iconify-icon icon="ph:paperclip-duotone" width="20" height="20"></iconify-icon>
+				<div class="liveChat-compose-bottom">
+					<div class="liveChat-compose-actions">
+						<button class="sdk-btn-icon liveChat-compose-attach" aria-label="Attach file">
+							<iconify-icon icon="ph:paperclip" width="20" height="20"></iconify-icon>
 						</button>
-						<button class="sdk-btn-icon web-chat-emoji-btn" aria-label="Emoji">
-							<iconify-icon icon="ph:smiley-duotone" width="20" height="20"></iconify-icon>
+						<button class="sdk-btn-icon liveChat-emoji-btn" aria-label="Emoji">
+							<iconify-icon icon="ph:smiley" width="20" height="20"></iconify-icon>
 						</button>
 					</div>
-					<button class="web-chat-compose-send" aria-label="Send" disabled>
+					<button class="liveChat-compose-send" aria-label="Send" disabled>
 						<iconify-icon icon="ph:paper-plane-right" width="20" height="20"></iconify-icon>
 					</button>
 				</div>
-				<input type="file" class="web-chat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+				<input type="file" class="liveChat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
 			</div>
 			`
 			}
 		`;
 
 		this._typingIndicator = this.element.querySelector(
-			'.web-chat-typing-indicator'
+			'.liveChat-typing-indicator'
 		);
 		this._attachEvents();
 		this._scrollToBottom();
@@ -178,11 +194,11 @@
 		const logoUrl = this.options.logoUrl;
 
 		const logoHtml = logoUrl
-			? `<div class="web-chat-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
+			? `<div class="liveChat-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
 			: '';
 
 		return `
-			<div class="web-chat-chat-empty">
+			<div class="liveChat-chat-empty">
 				${logoHtml}
 				<h3>${isNewConversation ? 'Start a new conversation' : 'Start the conversation'}</h3>
 			</div>
@@ -194,12 +210,12 @@
 		return attachments
 			.map((att) => {
 				if (att.type === 'image') {
-					return `<img class="web-chat-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
+					return `<img class="liveChat-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
 				}
-				return `<a class="web-chat-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
-				<iconify-icon icon="ph:file-duotone" width="18" height="18"></iconify-icon>
+				return `<a class="liveChat-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
+				<iconify-icon icon="ph:file" width="18" height="18"></iconify-icon>
 				<span>${this._escapeHtml(att.name || 'file')}</span>
-				<iconify-icon icon="ph:download-simple" width="16" height="16" class="web-chat-file-download-icon"></iconify-icon>
+				<iconify-icon icon="ph:download-simple" width="16" height="16" class="liveChat-file-download-icon"></iconify-icon>
 			</a>`;
 			})
 			.join('');
@@ -212,8 +228,8 @@
 
 		const isOwn = message.isOwn;
 		const messageClass = isOwn
-			? 'web-chat-message-own'
-			: 'web-chat-message-received';
+			? 'liveChat-message-own'
+			: 'liveChat-message-received';
 		const timeStr = isLastInGroup
 			? this._formatMessageTime(message.timestamp)
 			: '';
@@ -221,25 +237,25 @@
 		const isOptimistic = message.isOptimistic;
 
 		const contentHtml = message.content
-			? `<div class="web-chat-message-content">${this._formatMessageContent(message.content)}</div>`
+			? `<div class="liveChat-message-content">${this._formatMessageContent(message.content)}</div>`
 			: '';
 		const bubbleHtml = contentHtml
-			? `<div class="web-chat-message-bubble">${contentHtml}</div>`
+			? `<div class="liveChat-message-bubble">${contentHtml}</div>`
 			: '';
 
 		if (isOwn) {
 			const sentIndicator = isLastInGroup
-				? `<div class="web-chat-message-meta web-chat-message-meta-own">
+				? `<div class="liveChat-message-meta liveChat-message-meta-own">
 						${
 							isOptimistic
-								? `<span class="web-chat-message-sent-status">Sending…</span>`
-								: `<span class="web-chat-message-sent-status">Sent</span>`
+								? `<span class="liveChat-message-sent-status">Sending…</span>`
+								: `<span class="liveChat-message-sent-status">Sent</span>`
 						}
 						${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
 					</div>`
 				: '';
 			return `
-				<div class="web-chat-message ${messageClass}${isOptimistic ? ' web-chat-message-optimistic' : ''}">
+				<div class="liveChat-message ${messageClass}${isOptimistic ? ' liveChat-message-optimistic' : ''}">
 					${bubbleHtml}
 					${attachmentsHtml}
 					${sentIndicator}
@@ -249,15 +265,15 @@
 
 		const avatarHtml = this._renderSenderAvatar(message.sender);
 		return `
-			<div class="web-chat-message ${messageClass}">
-				<div class="web-chat-message-row">
-					<div class="web-chat-message-avatar">${avatarHtml}</div>
-					<div class="web-chat-message-wrapper">
+			<div class="liveChat-message ${messageClass}">
+				<div class="liveChat-message-row">
+					<div class="liveChat-message-avatar">${avatarHtml}</div>
+					<div class="liveChat-message-wrapper">
 						${bubbleHtml}
 						${attachmentsHtml}
 					</div>
 				</div>
-				${timeStr ? `<div class="web-chat-message-meta"><span>${timeStr}</span></div>` : ''}
+				${timeStr ? `<div class="liveChat-message-meta"><span>${timeStr}</span></div>` : ''}
 			</div>
 		`;
 	}
@@ -286,11 +302,11 @@
 			const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
 
 			return `
-				<div class="web-chat-message-system-event">
-					<div class="web-chat-message-system-event-avatar">${logoHtml}</div>
-					<span class="web-chat-message-system-event-name">${this._escapeHtml(name)}</span>
-					<span class="web-chat-message-system-event-action">${this._escapeHtml(action)}</span>
-					${timeStr ? `<span class="web-chat-message-system-event-time">${timeStr}</span>` : ''}
+				<div class="liveChat-message-system-event">
+					<div class="liveChat-message-system-event-avatar">${logoHtml}</div>
+					<span class="liveChat-message-system-event-name">${this._escapeHtml(name)}</span>
+					<span class="liveChat-message-system-event-action">${this._escapeHtml(action)}</span>
+					${timeStr ? `<span class="liveChat-message-system-event-time">${timeStr}</span>` : ''}
 				</div>
 			`;
 		}
@@ -304,16 +320,16 @@
 		const timeStr = this._formatMessageTime(message.timestamp);
 
 		return `
-			<div class="web-chat-message web-chat-message-received">
-				<div class="web-chat-message-row">
-					<div class="web-chat-message-avatar">${avatarHtml}</div>
-					<div class="web-chat-message-wrapper">
-						<div class="web-chat-message-bubble">
-							<div class="web-chat-message-content">${this._formatMessageContent(content)}</div>
+			<div class="liveChat-message liveChat-message-received">
+				<div class="liveChat-message-row">
+					<div class="liveChat-message-avatar">${avatarHtml}</div>
+					<div class="liveChat-message-wrapper">
+						<div class="liveChat-message-bubble">
+							<div class="liveChat-message-content">${this._formatMessageContent(content)}</div>
 						</div>
 					</div>
 				</div>
-				${timeStr ? `<div class="web-chat-message-meta"><span>${timeStr}</span></div>` : ''}
+				${timeStr ? `<div class="liveChat-message-meta"><span>${timeStr}</span></div>` : ''}
 			</div>
 		`;
 	}
@@ -342,7 +358,7 @@
 			})
 			.join('');
 
-		return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
+		return `<div class="liveChat-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_formatMessageTime(timestamp) {
@@ -372,9 +388,9 @@
 
 	_appendMessage(message) {
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.liveChat-chat-messages'
 		);
-		const emptyState = messagesContainer.querySelector('.web-chat-chat-empty');
+		const emptyState = messagesContainer.querySelector('.liveChat-chat-empty');
 		if (emptyState) {
 			emptyState.remove();
 		}
@@ -394,14 +410,14 @@
 		if (isNearBottom) {
 			this._scrollToBottom();
 		} else if (!message.isOwn) {
-			const pill = this.element.querySelector('.web-chat-scroll-pill');
+			const pill = this.element.querySelector('.liveChat-scroll-pill');
 			if (pill) pill.style.display = 'flex';
 		}
 	}
 
 	_scrollToBottom() {
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.liveChat-chat-messages'
 		);
 		if (messagesContainer) {
 			setTimeout(() => {
@@ -412,9 +428,9 @@
 
 	_setupScrollPill() {
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.liveChat-chat-messages'
 		);
-		const pill = this.element.querySelector('.web-chat-scroll-pill');
+		const pill = this.element.querySelector('.liveChat-scroll-pill');
 		if (!messagesContainer || !pill) return;
 
 		pill.addEventListener('click', () => {
@@ -469,8 +485,8 @@
 	}
 
 	_updateSendButtonState() {
-		const input = this.element.querySelector('.web-chat-compose-input');
-		const sendBtn = this.element.querySelector('.web-chat-compose-send');
+		const input = this.element.querySelector('.liveChat-compose-input');
+		const sendBtn = this.element.querySelector('.liveChat-compose-send');
 		if (input && sendBtn) {
 			sendBtn.disabled =
 				!input.value.trim() && this._pendingAttachments.length === 0;
@@ -479,7 +495,7 @@
 
 	_renderAttachmentPreviews() {
 		const container = this.element.querySelector(
-			'.web-chat-compose-attachments-preview'
+			'.liveChat-compose-attachments-preview'
 		);
 		if (!container) return;
 
@@ -494,18 +510,18 @@
 			.map((att, i) => {
 				const isImage = att.type.startsWith('image');
 				const thumb = isImage
-					? `<img class="web-chat-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
-					: `<div class="web-chat-attachment-thumb web-chat-attachment-file-icon"><iconify-icon icon="ph:file-duotone" width="24" height="24"></iconify-icon></div>`;
+					? `<img class="liveChat-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
+					: `<div class="liveChat-attachment-thumb liveChat-attachment-file-icon"><iconify-icon icon="ph:file" width="24" height="24"></iconify-icon></div>`;
 				return `
-				<div class="web-chat-attachment-preview" data-index="${i}">
+				<div class="liveChat-attachment-preview" data-index="${i}">
 					${thumb}
-					<button class="web-chat-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
+					<button class="liveChat-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
 				</div>
 			`;
 			})
 			.join('');
 
-		container.querySelectorAll('.web-chat-attachment-remove').forEach((btn) => {
+		container.querySelectorAll('.liveChat-attachment-remove').forEach((btn) => {
 			btn.addEventListener('click', (e) => {
 				const idx = parseInt(e.currentTarget.dataset.index, 10);
 				this._pendingAttachments.splice(idx, 1);
@@ -517,13 +533,13 @@
 
 	_attachEvents() {
 		this.element
-			.querySelector('.web-chat-back-btn')
+			.querySelector('.liveChat-back-btn')
 			.addEventListener('click', () => {
 				this.state.setView('messages');
 			});
 
 		const mobileCloseBtn = this.element.querySelector(
-			'.web-chat-mobile-close-btn'
+			'.liveChat-mobile-close-btn'
 		);
 		if (mobileCloseBtn) {
 			mobileCloseBtn.addEventListener('click', () => {
@@ -531,8 +547,47 @@
 			});
 		}
 
-		const input = this.element.querySelector('.web-chat-compose-input');
-		const sendBtn = this.element.querySelector('.web-chat-compose-send');
+		const menuBtn = this.element.querySelector('.liveChat-chat-menu-btn');
+		const dropdown = this.element.querySelector('.liveChat-chat-menu-dropdown');
+		if (menuBtn && dropdown) {
+			menuBtn.addEventListener('click', (e) => {
+				e.stopPropagation();
+				dropdown.classList.toggle('open');
+				if (
+					dropdown.classList.contains('open') &&
+					this._menuOutsideHandler === null
+				) {
+					this._menuOutsideHandler = (ev) => {
+						if (!dropdown.contains(ev.target) && !menuBtn.contains(ev.target)) {
+							dropdown.classList.remove('open');
+							document.removeEventListener('click', this._menuOutsideHandler);
+							this._menuOutsideHandler = null;
+						}
+					};
+					setTimeout(
+						() => document.addEventListener('click', this._menuOutsideHandler),
+						0
+					);
+				}
+			});
+		}
+
+		const expandWindowBtn = this.element.querySelector(
+			'.liveChat-expand-window-btn'
+		);
+		if (expandWindowBtn && dropdown) {
+			expandWindowBtn.addEventListener('click', () => {
+				dropdown.classList.remove('open');
+				if (this._menuOutsideHandler) {
+					document.removeEventListener('click', this._menuOutsideHandler);
+					this._menuOutsideHandler = null;
+				}
+				this.options.onToggleExpand?.();
+			});
+		}
+
+		const input = this.element.querySelector('.liveChat-compose-input');
+		const sendBtn = this.element.querySelector('.liveChat-compose-send');
 
 		if (input && sendBtn) {
 			input.addEventListener('input', () => {
@@ -557,7 +612,7 @@
 			});
 		}
 
-		const emojiBtn = this.element.querySelector('.web-chat-emoji-btn');
+		const emojiBtn = this.element.querySelector('.liveChat-emoji-btn');
 		if (emojiBtn) {
 			emojiBtn.addEventListener('click', (e) => {
 				e.stopPropagation();
@@ -565,9 +620,9 @@
 			});
 		}
 
-		const attachBtn = this.element.querySelector('.web-chat-compose-attach');
+		const attachBtn = this.element.querySelector('.liveChat-compose-attach');
 		const fileInput = this.element.querySelector(
-			'.web-chat-compose-file-input'
+			'.liveChat-compose-file-input'
 		);
 
 		if (attachBtn && fileInput) {
@@ -596,11 +651,11 @@
 		}
 
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.liveChat-chat-messages'
 		);
 		if (messagesContainer) {
 			messagesContainer.addEventListener('click', (e) => {
-				const fileLink = e.target.closest('.web-chat-message-file');
+				const fileLink = e.target.closest('.liveChat-message-file');
 				if (fileLink) {
 					e.preventDefault();
 					const url = fileLink.dataset.url;
@@ -609,7 +664,7 @@
 					return;
 				}
 
-				const img = e.target.closest('.web-chat-message-image');
+				const img = e.target.closest('.liveChat-message-image');
 				if (img) {
 					const url = img.dataset.url || img.src;
 					window.open(url, '_blank');
@@ -648,7 +703,7 @@
 	async _sendMessage() {
 		if (this._isConversationClosed) return;
 
-		const input = this.element.querySelector('.web-chat-compose-input');
+		const input = this.element.querySelector('.liveChat-compose-input');
 		const content = input.value.trim();
 		const hasAttachments = this._pendingAttachments.length > 0;
 
@@ -713,7 +768,7 @@
 
 	async _toggleEmojiPicker() {
 		const existing = this.element.querySelector(
-			'.web-chat-emoji-picker-container'
+			'.liveChat-emoji-picker-container'
 		);
 		if (existing) {
 			existing.remove();
@@ -732,12 +787,12 @@
 		}
 
 		const container = document.createElement('div');
-		container.className = 'web-chat-emoji-picker-container';
+		container.className = 'liveChat-emoji-picker-container';
 
 		const picker = document.createElement('emoji-picker');
 		container.appendChild(picker);
 
-		const compose = this.element.querySelector('.web-chat-chat-compose');
+		const compose = this.element.querySelector('.liveChat-chat-compose');
 		compose.parentNode.insertBefore(container, compose);
 		this._emojiPickerOpen = true;
 
@@ -754,7 +809,7 @@
 		this._emojiOutsideHandler = (e) => {
 			if (
 				!container.contains(e.target) &&
-				!e.target.closest('.web-chat-emoji-btn')
+				!e.target.closest('.liveChat-emoji-btn')
 			) {
 				container.remove();
 				this._emojiPickerOpen = false;
@@ -769,7 +824,7 @@
 	}
 
 	_insertEmoji(emoji) {
-		const input = this.element.querySelector('.web-chat-compose-input');
+		const input = this.element.querySelector('.liveChat-compose-input');
 		if (!input) return;
 		const start = input.selectionStart;
 		const end = input.selectionEnd;
@@ -813,7 +868,7 @@
 		if (this._typingIndicator) {
 			this._typingIndicator.style.display = 'flex';
 			const textEl = this._typingIndicator.querySelector(
-				'.web-chat-typing-text'
+				'.liveChat-typing-text'
 			);
 			if (textEl) {
 				textEl.textContent = `${userName || 'Support'} is typing...`;
@@ -839,6 +894,9 @@
 		if (this._emojiOutsideHandler) {
 			document.removeEventListener('click', this._emojiOutsideHandler);
 		}
+		if (this._menuOutsideHandler) {
+			document.removeEventListener('click', this._menuOutsideHandler);
+		}
 		if (this.element && this.element.parentNode) {
 			this.element.parentNode.removeChild(this.element);
 		}