social.io/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): Add reusable message input component, refactor element properties to use accessor, update styles and docs, bump dependencies

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 23:03:02 +00:00
parent 5f48ecf7af
commit 7731054f0e
20 changed files with 3956 additions and 4853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@social.io/catalog',
version: '1.2.4',
version: '1.3.0',
description: 'catalog for social.io'
}

8
ts_web/elements/00colors.ts
View File

@@ -153,6 +153,12 @@ export const getColor = (colorName: keyof typeof colors, isDark: boolean = false
};
// CSS helper for theme-aware colors
export const bdTheme = (colorName: keyof typeof colors) => {
export const bdTheme = (colorNameOrLight: keyof typeof colors | string, dark?: string) => {
if (dark) {
// Direct color values provided
return cssManager.bdTheme(colorNameOrLight as string, dark);
}
// Color name from palette
const colorName = colorNameOrLight as keyof typeof colors;
return cssManager.bdTheme(colors[colorName].light, colors[colorName].dark);
};

1
ts_web/elements/index.ts
View File

@@ -6,6 +6,7 @@ export * from './sio-dropdown-menu.js';
// Conversation components
export * from './sio-conversation-selector.js';
export * from './sio-conversation-view.js';
export * from './sio-message-input.js';
export * from './sio-combox.js';
// Other components

127
ts_web/elements/sio-button.ts
View File

@@ -36,19 +36,19 @@ export class SioButton extends DeesElement {
`;
@property({ type: String })
public text: string = '';
public accessor text: string = '';
@property({ type: String })
public type: 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' = 'default';
public accessor type: 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' = 'default';
@property({ type: String })
public size: 'sm' | 'default' | 'lg' = 'default';
public accessor size: 'sm' | 'default' | 'lg' = 'default';
@property({ type: Boolean, reflect: true })
public disabled: boolean = false;
public accessor disabled: boolean = false;
@property({ type: String })
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
public accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
public static styles = [
cssManager.defaultStyles,
@@ -68,117 +68,123 @@ export class SioButton extends DeesElement {
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: ${unsafeCSS(radius.md)};
border-radius: 6px;
font-weight: 500;
transition: ${unsafeCSS(transitions.all)};
font-size: 14px;
line-height: 1;
letter-spacing: -0.01em;
transition: all 120ms ease;
cursor: pointer;
user-select: none;
outline: none;
border: 1px solid transparent;
gap: ${unsafeCSS(spacing["2"])};
font-size: 0.875rem;
line-height: 1.5;
border: none;
gap: 6px;
}
/* Size variants */
.button.size-sm {
height: 32px;
padding: 0 ${unsafeCSS(spacing["3"])};
padding: 0 12px;
font-size: 13px;
}
.button.size-default {
height: 36px;
padding: 0 ${unsafeCSS(spacing["4"])};
padding: 0 16px;
font-size: 14px;
}
.button.size-lg {
height: 44px;
padding: 0 ${unsafeCSS(spacing["6"])};
font-size: 16px;
height: 42px;
padding: 0 24px;
font-size: 15px;
}
/* Type variants */
.button.default {
background: ${bdTheme('background')};
color: ${bdTheme('foreground')};
border-color: ${bdTheme('border')};
box-shadow: ${unsafeCSS(shadows.sm)};
background: ${bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
}
.button.default:hover:not(.disabled) {
background: ${bdTheme('accent')};
border-color: ${bdTheme('accent')};
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
background: ${bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 20%)')};
}
.button.default:active:not(.disabled) {
transform: translateY(0);
box-shadow: ${unsafeCSS(shadows.sm)};
background: ${bdTheme('hsl(0 0% 87%)', 'hsl(0 0% 18%)')};
}
.button.primary {
background: ${bdTheme('primary')};
color: ${bdTheme('primaryForeground')};
box-shadow: ${unsafeCSS(shadows.sm)};
background: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
color: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 0%)')};
}
.button.primary:hover:not(.disabled) {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
background: ${bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 100%)')};
}
.button.primary:active:not(.disabled) {
transform: translateY(0);
box-shadow: ${unsafeCSS(shadows.sm)};
background: ${bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
}
/* Secondary variant */
.button.secondary {
background: transparent;
color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
box-shadow: inset 0 0 0 1px ${bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
}
.button.secondary:hover:not(.disabled) {
background: ${bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 15%)')};
}
.button.secondary:active:not(.disabled) {
background: ${bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 12%)')};
}
/* Destructive variant */
.button.destructive {
background: ${bdTheme('destructive')};
color: ${bdTheme('destructiveForeground')};
background: ${bdTheme('hsl(0 100% 95%)', 'hsl(0 50% 20%)')};
color: ${bdTheme('hsl(0 100% 45%)', 'hsl(0 100% 75%)')};
}
.button.destructive:hover:not(.disabled) {
opacity: 0.9;
background: ${bdTheme('hsl(0 100% 45%)', 'hsl(0 100% 50%)')};
color: white;
}
.button.destructive:active:not(.disabled) {
transform: translateY(1px);
background: ${bdTheme('hsl(0 100% 40%)', 'hsl(0 100% 45%)')};
color: white;
}
.button.outline {
background: transparent;
color: ${bdTheme('foreground')};
border-color: ${bdTheme('border')};
color: ${bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
box-shadow: inset 0 0 0 1.5px ${bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 30%)')};
}
.button.outline:hover:not(.disabled) {
background: ${bdTheme('accent')};
color: ${bdTheme('accentForeground')};
color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
box-shadow: inset 0 0 0 1.5px ${bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 50%)')};
}
.button.outline:active:not(.disabled) {
transform: translateY(1px);
background: ${bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
}
.button.ghost {
background: transparent;
color: ${bdTheme('foreground')};
border-color: transparent;
color: ${bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
}
.button.ghost:hover:not(.disabled) {
background: ${bdTheme('accent')};
color: ${bdTheme('accentForeground')};
border-color: transparent;
color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
background: ${bdTheme('hsl(0 0% 0% / 0.05)', 'hsl(0 0% 100% / 0.05)')};
}
.button.ghost:active:not(.disabled) {
background: ${bdTheme('accent')};
opacity: 0.8;
background: ${bdTheme('hsl(0 0% 0% / 0.1)', 'hsl(0 0% 100% / 0.1)')};
}
/* Status states */
@@ -214,13 +220,31 @@ export class SioButton extends DeesElement {
.button.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Focus state */
.button:focus-visible {
outline: 2px solid ${bdTheme('ring')};
outline: 2px solid ${bdTheme('hsl(0 0% 15% / 0.2)', 'hsl(0 0% 95% / 0.2)')};
outline-offset: 2px;
}
/* Icon sizing within buttons */
.button sio-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.button.size-sm sio-icon {
width: 14px;
height: 14px;
}
.button.size-lg sio-icon {
width: 18px;
height: 18px;
}
`,
];
@@ -260,6 +284,7 @@ export class SioButton extends DeesElement {
return;
}
// Let the native click bubble normally
// Don't dispatch a custom event to avoid double-triggering
}

8
ts_web/elements/sio-combox.ts
View File

@@ -37,13 +37,13 @@ export class SioCombox extends DeesElement {
public static demo = () => html` <sio-combox></sio-combox> `;
@property({ type: Object })
public referenceObject: HTMLElement;
public accessor referenceObject: HTMLElement;
@state()
private selectedConversationId: string | null = null;
private accessor selectedConversationId: string | null = null;
@state()
private conversations: IConversation[] = [
private accessor conversations: IConversation[] = [
{
id: '1',
title: 'Technical Support',
@@ -72,7 +72,7 @@ export class SioCombox extends DeesElement {
];
@state()
private messages: { [conversationId: string]: IMessage[] } = {
private accessor messages: { [conversationId: string]: IMessage[] } = {
'1': [
{ id: '1', text: 'Hi, I\'m having trouble logging in', sender: 'user', time: '10:00 AM' },
{ id: '2', text: 'I can help you with that. Can you tell me what error you\'re seeing?', sender: 'support', time: '10:02 AM' },

6
ts_web/elements/sio-conversation-selector.ts
View File

@@ -38,13 +38,13 @@ export class SioConversationSelector extends DeesElement {
`;
@property({ type: Array })
public conversations: IConversation[] = [];
public accessor conversations: IConversation[] = [];
@property({ type: String })
public selectedConversationId: string | null = null;
public accessor selectedConversationId: string | null = null;
@state()
private searchQuery: string = '';
private accessor searchQuery: string = '';
public static styles = [
cssManager.defaultStyles,

136
ts_web/elements/sio-conversation-view.ts
View File

@@ -15,9 +15,11 @@ import { colors, bdTheme } from './00colors.js';
import { spacing, radius, shadows, transitions } from './00tokens.js';
import { fontFamilies, typography } from './00fonts.js';
import { SioDropdownMenu, type IDropdownMenuItem } from './sio-dropdown-menu.js';
import { SioMessageInput } from './sio-message-input.js';
// Make sure components are loaded
SioDropdownMenu;
SioMessageInput;
// Types
export interface IAttachment {
@@ -57,22 +59,19 @@ export class SioConversationView extends DeesElement {
`;
@property({ type: Object })
public conversation: IConversationData | null = null;
public accessor conversation: IConversationData | null = null;
@state()
private messageText: string = '';
private accessor isTyping: boolean = false;
@state()
private isTyping: boolean = false;
private accessor isDragging: boolean = false;
@state()
private isDragging: boolean = false;
private accessor uploadingFiles: Map<string, { file: File; progress: number }> = new Map();
@state()
private uploadingFiles: Map<string, { file: File; progress: number }> = new Map();
@state()
private pendingAttachments: IAttachment[] = [];
private accessor pendingAttachments: IAttachment[] = [];
private dropdownMenuItems: IDropdownMenuItem[] = [
{ id: 'mute', label: 'Mute notifications', icon: 'bell-off' },
@@ -238,45 +237,6 @@ export class SioConversationView extends DeesElement {
-webkit-backdrop-filter: blur(10px);
}
.input-wrapper {
display: flex;
gap: ${unsafeCSS(spacing["2"])};
align-items: flex-end;
}
.message-input {
flex: 1;
min-height: 42px;
max-height: 120px;
padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing[3])};
background: ${bdTheme('secondary')};
border: 1px solid ${bdTheme('border')};
border-radius: ${unsafeCSS(radius.xl)};
font-size: 0.9375rem;
color: ${bdTheme('foreground')};
outline: none;
resize: none;
font-family: ${unsafeCSS(fontFamilies.sans)};
line-height: 1.5;
transition: ${unsafeCSS(transitions.all)};
}
.message-input::placeholder {
color: ${bdTheme('mutedForeground')};
font-size: 0.875rem;
}
.message-input:focus {
border-color: ${bdTheme('ring')};
background: ${bdTheme('background')};
box-shadow: 0 0 0 3px ${bdTheme('ring')}15;
}
.input-actions {
display: flex;
gap: ${unsafeCSS(spacing["1"])};
}
.empty-state {
flex: 1;
display: flex;
@@ -440,7 +400,8 @@ export class SioConversationView extends DeesElement {
.pending-attachments {
padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
background: ${bdTheme('secondary')};
border-radius: ${unsafeCSS(radius.md)};
border: 1px solid ${bdTheme('border')};
border-radius: ${unsafeCSS(radius.lg)};
margin-bottom: ${unsafeCSS(spacing["2"])};
}
@@ -480,10 +441,6 @@ export class SioConversationView extends DeesElement {
.remove-attachment:hover {
color: ${bdTheme('destructive')};
}
.file-input {
display: none;
}
`,
];
@@ -606,41 +563,10 @@ export class SioConversationView extends DeesElement {
`)}
</div>
` : ''}
<div class="input-wrapper">
<textarea
class="message-input"
placeholder="Type a message..."
.value=${this.messageText}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
rows="1"
></textarea>
<div class="input-actions">
<input
type="file"
class="file-input"
id="fileInput"
multiple
accept="image/*,.pdf,.doc,.docx,.txt"
@change=${this.handleFileSelect}
/>
<sio-button type="ghost" size="sm" @click=${(e: Event) => {
e.preventDefault();
e.stopPropagation();
this.openFileSelector();
}}>
<sio-icon icon="paperclip" size="16"></sio-icon>
</sio-button>
<sio-button
type="primary"
size="sm"
?disabled=${!this.messageText.trim() && this.pendingAttachments.length === 0}
@click=${this.sendMessage}
>
<sio-icon icon="send" size="16"></sio-icon>
</sio-button>
</div>
</div>
<sio-message-input
@send-message=${this.handleMessageSend}
@files-selected=${this.handleFilesSelected}
></sio-message-input>
</div>
`;
}
@@ -652,28 +578,14 @@ export class SioConversationView extends DeesElement {
}));
}
private handleInput(e: Event) {
const textarea = e.target as HTMLTextAreaElement;
this.messageText = textarea.value;
private handleMessageSend(event: CustomEvent) {
const { text, attachments } = event.detail;
// Auto-resize textarea
textarea.style.height = 'auto';
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
}
private handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
this.sendMessage();
}
}
private sendMessage() {
if (!this.messageText.trim() && this.pendingAttachments.length === 0) return;
if (!text.trim() && attachments.length === 0) return;
const message: IMessage = {
id: Date.now().toString(),
text: this.messageText.trim(),
text: text.trim(),
sender: 'user',
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
status: 'sending',
@@ -687,13 +599,8 @@ export class SioConversationView extends DeesElement {
composed: true
}));
// Clear input and attachments
this.messageText = '';
// Clear pending attachments
this.pendingAttachments = [];
const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
if (textarea) {
textarea.style.height = 'auto';
}
// Simulate typing indicator (remove in production)
setTimeout(() => {
@@ -704,6 +611,13 @@ export class SioConversationView extends DeesElement {
}, 1000);
}
private handleFilesSelected(event: CustomEvent) {
const { files } = event.detail;
// Handle files if needed
// For now, we're handling attachments separately in the parent component
}
public updated() {
// Scroll to bottom when new messages arrive
const container = this.shadowRoot?.querySelector('#messages');

6
ts_web/elements/sio-dropdown-menu.ts
View File

@@ -49,13 +49,13 @@ export class SioDropdownMenu extends DeesElement {
`;
@property({ type: Array })
public items: IDropdownMenuItem[] = [];
public accessor items: IDropdownMenuItem[] = [];
@property({ type: String })
public align: 'left' | 'right' = 'right';
public accessor align: 'left' | 'right' = 'right';
@state()
private isOpen: boolean = false;
private accessor isOpen: boolean = false;
private documentClickHandler: (e: MouseEvent) => void;
private scrollHandler: () => void;

6
ts_web/elements/sio-fab.ts
View File

@@ -29,13 +29,13 @@ declare global {
@customElement('sio-fab')
export class SioFab extends DeesElement {
@property({ type: Boolean })
public showCombox = false;
public accessor showCombox = false;
@state()
private hasShownOnce = false;
private accessor hasShownOnce = false;
@state()
private shouldPulse = false;
private accessor shouldPulse = false;
public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;

8
ts_web/elements/sio-icon.ts
View File

@@ -29,16 +29,16 @@ export class SioIcon extends DeesElement {
`;
@property({ type: String })
public icon: string;
public accessor icon: string;
@property({ type: Number })
public size: number = 24;
public accessor size: number = 24;
@property({ type: String })
public color: string = 'currentColor';
public accessor color: string = 'currentColor';
@property({ type: Number })
public strokeWidth: number = 2;
public accessor strokeWidth: number = 2;
// Cache for rendered icons
private static iconCache = new Map<string, string>();

14
ts_web/elements/sio-image-lightbox.ts
View File

@@ -46,11 +46,11 @@ export class SioImageLightbox extends DeesElement {
`;
@property({ type: Boolean })
public isOpen: boolean = false;
public accessor isOpen: boolean = false;
@property({ type: Object })
public file: ILightboxFile | null = null;
public accessor file: ILightboxFile | null = null;
// For backwards compatibility
public get image(): ILightboxFile | null {
return this.file;
@@ -60,16 +60,16 @@ export class SioImageLightbox extends DeesElement {
}
@state()
private fileLoaded: boolean = false;
private accessor fileLoaded: boolean = false;
@state()
private scale: number = 1;
private accessor scale: number = 1;
@state()
private translateX: number = 0;
private accessor translateX: number = 0;
@state()
private translateY: number = 0;
private accessor translateY: number = 0;
private isDragging: boolean = false;
private startX: number = 0;

279
ts_web/elements/sio-message-input.ts Normal file
View File

@@ -0,0 +1,279 @@
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
cssManager,
css,
unsafeCSS,
state,
} from '@design.estate/dees-element';
// Import design tokens
import { colors, bdTheme } from './00colors.js';
import { spacing, radius, shadows, transitions } from './00tokens.js';
import { fontFamilies, typography } from './00fonts.js';
declare global {
interface HTMLElementTagNameMap {
'sio-message-input': SioMessageInput;
}
}
@customElement('sio-message-input')
export class SioMessageInput extends DeesElement {
public static demo = () => html`
<sio-message-input style="width: 600px;"></sio-message-input>
`;
@property({ type: String })
public accessor placeholder: string = 'Type a message...';
@property({ type: Boolean })
public accessor disabled: boolean = false;
@state()
private accessor messageText: string = '';
@state()
private accessor pendingAttachments: File[] = [];
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
font-family: ${unsafeCSS(fontFamilies.sans)};
}
.input-container {
display: flex;
align-items: flex-end;
background: ${bdTheme('secondary')};
border: 1px solid ${bdTheme('border')};
border-radius: 24px;
padding: 2px;
transition: all 200ms ease;
overflow: hidden;
}
.input-container:focus-within {
border-color: ${bdTheme('ring')};
background: ${bdTheme('background')};
}
.message-input {
flex: 1;
min-height: 44px;
max-height: 120px;
padding: 12px 16px;
background: transparent;
border: none;
font-size: 15px;
color: ${bdTheme('foreground')};
outline: none;
resize: none;
font-family: ${unsafeCSS(fontFamilies.sans)};
line-height: 1.5;
}
.message-input::placeholder {
color: ${bdTheme('mutedForeground')};
}
.action-buttons {
display: flex;
gap: 4px;
align-items: center;
padding-right: 2px;
}
.action-button {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: transparent;
color: ${bdTheme('mutedForeground')};
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 120ms ease;
position: relative;
outline: none;
}
.action-button:hover {
color: ${bdTheme('foreground')};
background: ${bdTheme('hsl(0 0% 0% / 0.05)', 'hsl(0 0% 100% / 0.05)')};
}
.action-button:active {
transform: scale(0.95);
}
.action-button.attachment {
opacity: 0.7;
}
.action-button.attachment:hover {
opacity: 1;
}
.action-button.send {
background: ${bdTheme('primary')};
color: white;
margin-left: 2px;
}
.action-button.send:hover {
background: ${bdTheme('hsl(221 83% 49%)', 'hsl(217 91% 65%)')};
}
.action-button.send:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.action-button.send:disabled:hover {
background: ${bdTheme('primary')};
transform: none;
}
.file-input {
display: none;
}
/* Icon styles */
sio-icon {
width: 20px;
height: 20px;
}
.action-button.send sio-icon {
width: 18px;
height: 18px;
}
`,
];
public render(): TemplateResult {
return html`
<div class="input-container">
<textarea
class="message-input"
placeholder="${this.placeholder}"
.value=${this.messageText}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
?disabled=${this.disabled}
rows="1"
></textarea>
<div class="action-buttons">
<input
type="file"
class="file-input"
id="fileInput"
multiple
accept="image/*,.pdf,.doc,.docx,.txt"
@change=${this.handleFileSelect}
/>
<button
class="action-button attachment"
@click=${this.openFileSelector}
?disabled=${this.disabled}
>
<sio-icon icon="paperclip"></sio-icon>
</button>
<button
class="action-button send"
?disabled=${!this.messageText.trim() || this.disabled}
@click=${this.sendMessage}
>
<sio-icon icon="send"></sio-icon>
</button>
</div>
</div>
`;
}
private handleInput(event: Event) {
const textarea = event.target as HTMLTextAreaElement;
this.messageText = textarea.value;
// Auto-resize textarea
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
}
private handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
this.sendMessage();
}
}
private sendMessage() {
if (!this.messageText.trim() && this.pendingAttachments.length === 0) {
return;
}
this.dispatchEvent(new CustomEvent('send-message', {
detail: {
text: this.messageText,
attachments: this.pendingAttachments
},
bubbles: true,
composed: true
}));
// Clear input
this.messageText = '';
this.pendingAttachments = [];
// Reset textarea height
const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
if (textarea) {
textarea.style.height = 'auto';
}
}
private openFileSelector() {
const fileInput = this.shadowRoot?.querySelector('#fileInput') as HTMLInputElement;
if (fileInput) {
fileInput.click();
}
}
private handleFileSelect(event: Event) {
const input = event.target as HTMLInputElement;
const files = Array.from(input.files || []);
this.pendingAttachments = [...this.pendingAttachments, ...files];
this.dispatchEvent(new CustomEvent('files-selected', {
detail: { files },
bubbles: true,
composed: true
}));
input.value = ''; // Clear input for re-selection
}
public focus() {
const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
textarea?.focus();
}
public clear() {
this.messageText = '';
this.pendingAttachments = [];
const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
if (textarea) {
textarea.style.height = 'auto';
}
}
}

27
ts_web/elements/sio-pdf-viewer.ts
View File

@@ -8,7 +8,6 @@ import {
css,
unsafeCSS,
state,
type PropertyValues,
} from '@design.estate/dees-element';
// Import design tokens
@@ -37,28 +36,28 @@ export class SioPdfViewer extends DeesElement {
`;
@property({ type: String })
public url: string = '';
public accessor url: string = '';
@property({ type: String })
public fileName: string = 'document.pdf';
public accessor fileName: string = 'document.pdf';
@state()
private isLoading: boolean = true;
private accessor isLoading: boolean = true;
@state()
private hasError: boolean = false;
private accessor hasError: boolean = false;
@state()
private pdfDocument: any = null;
private accessor pdfDocument: any = null;
@state()
private currentPage: number = 1;
private accessor currentPage: number = 1;
@state()
private totalPages: number = 0;
private accessor totalPages: number = 0;
@state()
private scale: number = 1;
private accessor scale: number = 1;
private static pdfJsLoaded: boolean = false;
private static pdfJsLoading: Promise<void> | null = null;
@@ -399,7 +398,7 @@ export class SioPdfViewer extends DeesElement {
}
}
public async firstUpdated(_changedProperties: PropertyValues) {
public async firstUpdated(_changedProperties: any) {
super.firstUpdated(_changedProperties);
// Set up resize observer for responsive rendering after first render

2
ts_web/elements/sio-recorder.ts
View File

@@ -47,7 +47,7 @@ export class SioRecorder extends DeesElement {
* Query for the div in our template that will be used for playback.
*/
@query('#playback')
private playbackDiv!: HTMLDivElement;
private accessor playbackDiv!: HTMLDivElement;
static styles = css`
:host {

2
ts_web/pages/mainpage.ts
View File

@@ -12,7 +12,7 @@ export const mainpage = () => html`
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding: 0;
}
.demo-section {
background: white;