this.inputElement?.focus(), 0);
}
private styles = css`
diff --git a/src/tools/components/jwt-inspector/JwtInspector.ts b/src/tools/components/jwt-inspector/JwtInspector.ts
index 054e918..3f4722b 100644
--- a/src/tools/components/jwt-inspector/JwtInspector.ts
+++ b/src/tools/components/jwt-inspector/JwtInspector.ts
@@ -22,18 +22,22 @@ export class JwtInspector extends BaseTool {
@state() private header: Record
= {};
@state() private payload: Record = {};
- @query('#input') inputArea!: HTMLTextAreaElement;
- @query('#secretKey') secretKeyArea!: HTMLTextAreaElement;
-
- constructor() {
- super();
- }
+ @query('#input') inputElement!: HTMLTextAreaElement;
+ @query('#secretKey') secretKeyElement!: HTMLTextAreaElement;
async connectedCallback() {
super.connectedCallback();
await this.decodeJwt();
}
+ firstUpdated() {
+ setTimeout(() => this.inputElement?.focus(), 0);
+ }
+
+ constructor() {
+ super();
+ }
+
private styles = css`
${BaseTool.styles}
@@ -315,9 +319,8 @@ export class JwtInspector extends BaseTool {
this.alertInput = null;
this.verificationStatus = 'none';
- const inputTextarea = this.querySelector('#input') as HTMLTextAreaElement;
- if (inputTextarea) {
- inputTextarea.style.height = '28px';
+ if (this.inputElement) {
+ this.inputElement.style.height = '28px';
}
this.requestUpdate();
@@ -328,9 +331,8 @@ export class JwtInspector extends BaseTool {
this.alertSecretKey = null;
this.verificationStatus = 'none';
- const secretKeyTextarea = this.querySelector('#secretKey') as HTMLTextAreaElement;
- if (secretKeyTextarea) {
- secretKeyTextarea.style.height = '28px';
+ if (this.secretKeyElement) {
+ this.secretKeyElement.style.height = '28px';
}
this.requestUpdate();
diff --git a/src/tools/components/markdown-table-builder/MarkdownTableBuilder.ts b/src/tools/components/markdown-table-builder/MarkdownTableBuilder.ts
index 4aae167..70b9b92 100644
--- a/src/tools/components/markdown-table-builder/MarkdownTableBuilder.ts
+++ b/src/tools/components/markdown-table-builder/MarkdownTableBuilder.ts
@@ -16,7 +16,7 @@ export class MarkdownTableBuilder extends BaseTool {
@state() private isCopied = false;
@state() private alert: { type: 'error' | 'warning'; message: string } | null = null;
- @query('#output') private outputEl!: HTMLTextAreaElement;
+ @query('#output') private outputElement!: HTMLTextAreaElement;
connectedCallback() {
super.connectedCallback();
@@ -191,8 +191,8 @@ export class MarkdownTableBuilder extends BaseTool {
this.output = markdown;
setTimeout(() => {
- if (this.outputEl) {
- adjustTextareaHeight(this.outputEl);
+ if (this.outputElement) {
+ adjustTextareaHeight(this.outputElement);
}
}, 0);
}
diff --git a/src/tools/components/number-base-convertor/NumberBaseConvertor.ts b/src/tools/components/number-base-convertor/NumberBaseConvertor.ts
index 7105bac..968ecc0 100644
--- a/src/tools/components/number-base-convertor/NumberBaseConvertor.ts
+++ b/src/tools/components/number-base-convertor/NumberBaseConvertor.ts
@@ -19,7 +19,16 @@ export class NumberBaseConvertor extends BaseTool {
@state() private copiedBase: string | null = null;
@state() private alert: { type: 'error' | 'warning'; message: string } | null = null;
- @query('#input') inputTextarea!: HTMLTextAreaElement;
+ @query('#input') inputElement!: HTMLTextAreaElement;
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.processInput();
+ }
+
+ firstUpdated() {
+ setTimeout(() => this.inputElement?.focus(), 0);
+ }
private styles = css`
${BaseTool.styles}
@@ -59,11 +68,6 @@ export class NumberBaseConvertor extends BaseTool {
}
`;
- connectedCallback() {
- super.connectedCallback();
- this.processInput();
- }
-
protected renderTool() {
return html`
@@ -288,9 +292,8 @@ export class NumberBaseConvertor extends BaseTool {
this.alert = null;
this.copiedBase = null;
- const inputTextarea = this.querySelector('#input') as HTMLTextAreaElement;
- if (inputTextarea) {
- inputTextarea.style.height = '28px';
+ if (this.inputElement) {
+ this.inputElement.style.height = '28px';
}
this.requestUpdate();
diff --git a/src/tools/components/qr-code-generator/QrCodeGenerator.ts b/src/tools/components/qr-code-generator/QrCodeGenerator.ts
index ae5df0a..5f66dd5 100644
--- a/src/tools/components/qr-code-generator/QrCodeGenerator.ts
+++ b/src/tools/components/qr-code-generator/QrCodeGenerator.ts
@@ -1,5 +1,5 @@
import { html, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, state, query } from 'lit/decorators.js';
import { BaseTool } from '../../base/BaseTool';
import { adjustTextareaHeight } from '../../../utils/util';
import * as QRCode from 'qrcode';
@@ -18,6 +18,12 @@ export class QrCodeGenerator extends BaseTool {
@state() private foregroundColor = '#000000';
@state() private maskPattern = 2;
+ @query('#input-link') inputElement!: HTMLTextAreaElement;
+
+ firstUpdated() {
+ setTimeout(() => this.inputElement?.focus(), 0);
+ }
+
private styles = css`
${BaseTool.styles}
diff --git a/src/tools/components/rsa-encryption/RsaEncryption.ts b/src/tools/components/rsa-encryption/RsaEncryption.ts
index 07e92c0..e653025 100644
--- a/src/tools/components/rsa-encryption/RsaEncryption.ts
+++ b/src/tools/components/rsa-encryption/RsaEncryption.ts
@@ -33,6 +33,10 @@ export class RsaEncryption extends BaseTool {
@query('#file-input') private fileInput!: HTMLInputElement;
@query('#key-file-input') private keyFileInput!: HTMLInputElement;
+ firstUpdated() {
+ setTimeout(() => this.input?.focus(), 0);
+ }
+
private styles = css`
${BaseTool.styles}
`;
diff --git a/src/tools/components/sha-hashing/ShaHashing.ts b/src/tools/components/sha-hashing/ShaHashing.ts
index ff49ccb..a2123ad 100644
--- a/src/tools/components/sha-hashing/ShaHashing.ts
+++ b/src/tools/components/sha-hashing/ShaHashing.ts
@@ -27,6 +27,10 @@ export class ShaHashing extends BaseTool {
@query('#output') private output!: HTMLTextAreaElement;
@query('#file-input') private fileInput!: HTMLInputElement;
+ firstUpdated() {
+ setTimeout(() => this.input?.focus(), 0);
+ }
+
private styles = css`
${BaseTool.styles}
`;
diff --git a/src/tools/components/signature-verifier/SignatureVerifier.ts b/src/tools/components/signature-verifier/SignatureVerifier.ts
index 1e6fa48..ff4c1f5 100644
--- a/src/tools/components/signature-verifier/SignatureVerifier.ts
+++ b/src/tools/components/signature-verifier/SignatureVerifier.ts
@@ -40,6 +40,10 @@ export class SignatureVerifier extends BaseTool {
@query('#file-input') private fileInput!: HTMLInputElement;
@query('#key-file-input') private keyFileInput!: HTMLInputElement;
+ firstUpdated() {
+ setTimeout(() => this.input?.focus(), 0);
+ }
+
private styles = css`
${BaseTool.styles}
`;
diff --git a/src/tools/components/slug-generator/SlugGenerator.ts b/src/tools/components/slug-generator/SlugGenerator.ts
index 9361cd6..a090ea5 100644
--- a/src/tools/components/slug-generator/SlugGenerator.ts
+++ b/src/tools/components/slug-generator/SlugGenerator.ts
@@ -15,18 +15,24 @@ export class SlugGenerator extends BaseTool {
@state() private alert: { type: 'error' | 'warning'; message: string } | null = null;
@state() private isCopied = false;
- @query('#output') outputTextarea!: HTMLTextAreaElement;
-
- private styles = css`
- ${BaseTool.styles}
- /* Minimal local styling if needed. */
- `;
+ @query('#input') inputElement!: HTMLTextAreaElement;
+ @query('#output') outputElement!: HTMLTextAreaElement;
connectedCallback() {
super.connectedCallback();
this.processInput();
}
+ firstUpdated() {
+ this.processInput();
+ setTimeout(() => this.inputElement?.focus(), 0);
+ }
+
+ private styles = css`
+ ${BaseTool.styles}
+ /* Minimal local styling if needed. */
+ `;
+
protected renderTool() {
return html`
@@ -188,9 +194,9 @@ export class SlugGenerator extends BaseTool {
this.output = '';
}
- if (this.outputTextarea) {
+ if (this.outputElement) {
await this.updateComplete;
- adjustTextareaHeight(this.outputTextarea);
+ adjustTextareaHeight(this.outputElement);
}
}
@@ -199,11 +205,8 @@ export class SlugGenerator extends BaseTool {
this.output = '';
this.alert = null;
- const inputTextarea = this.querySelector('#input') as HTMLTextAreaElement;
- const outputTextarea = this.querySelector('#output') as HTMLTextAreaElement;
-
- inputTextarea.style.height = `28px`;
- outputTextarea.style.height = `auto`;
+ this.inputElement.style.height = `28px`;
+ this.outputElement.style.height = `auto`;
this.requestUpdate();
}
}
\ No newline at end of file
diff --git a/src/tools/components/unicode-inspector/UnicodeInspector.ts b/src/tools/components/unicode-inspector/UnicodeInspector.ts
index b640799..5b268a1 100644
--- a/src/tools/components/unicode-inspector/UnicodeInspector.ts
+++ b/src/tools/components/unicode-inspector/UnicodeInspector.ts
@@ -1,5 +1,5 @@
import { html, css } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
+import { customElement, state, property, query } from 'lit/decorators.js';
import { BaseTool } from '../../base/BaseTool';
import {
adjustTextareaHeight,
@@ -34,12 +34,18 @@ export class UnicodeInspector extends BaseTool {
@property({ type: Array }) formatOptions = FORMAT_OPTIONS;
+ @query('#input') inputElement!: HTMLTextAreaElement;
+
constructor() {
super();
this.initUnicodeBlocks();
this.processInput();
}
+ firstUpdated() {
+ setTimeout(() => this.inputElement?.focus(), 0);
+ }
+
private styles = css`
${BaseTool.styles}
diff --git a/src/tools/components/unix-path-convertor/UnixPathConvertor.ts b/src/tools/components/unix-path-convertor/UnixPathConvertor.ts
index cccdaf7..5cefd50 100644
--- a/src/tools/components/unix-path-convertor/UnixPathConvertor.ts
+++ b/src/tools/components/unix-path-convertor/UnixPathConvertor.ts
@@ -18,6 +18,10 @@ export class UnixPathConvertor extends BaseTool {
@query('#unix-input') unixPathTextarea!: HTMLTextAreaElement;
@query('#windows-input') windowsPathTextarea!: HTMLTextAreaElement;
+ firstUpdated() {
+ setTimeout(() => this.unixPathTextarea?.focus(), 0);
+ }
+
private styles = css`
${BaseTool.styles}
/* Minimal local styling if needed. */
diff --git a/src/tools/components/url-encoder/UrlEncoder.ts b/src/tools/components/url-encoder/UrlEncoder.ts
index 4cf0e8d..681666a 100644
--- a/src/tools/components/url-encoder/UrlEncoder.ts
+++ b/src/tools/components/url-encoder/UrlEncoder.ts
@@ -9,13 +9,20 @@ import {
@customElement('url-encoder')
export class UrlEncoder extends BaseTool {
@state() private selectedMode: 'encode' | 'decode' = 'encode';
- @state() private input = '';
+ @state() private input = 'https://localhost:3000/naΓ―vetΓ©';
@state() private output = '';
@state() private alert: { type: 'error' | 'warning'; message: string } | null = null;
@state() private isCopied = false;
- @state() private preserveUrl = true;
+ @state() private encodePreserveUrl = true;
+ @state() private decodePreserveUrl = true;
- @query('#output') outputTextarea!: HTMLTextAreaElement;
+ @query('#input') inputElement!: HTMLTextAreaElement;
+ @query('#output') outputElement!: HTMLTextAreaElement;
+
+ firstUpdated() {
+ this.processInput();
+ setTimeout(() => this.inputElement?.focus(), 0);
+ }
private styles = css`
${BaseTool.styles}
@@ -23,6 +30,12 @@ export class UrlEncoder extends BaseTool {
`;
protected renderTool() {
+ const isEncode = this.selectedMode === 'encode';
+ const preserveCurrentMode = isEncode ? this.encodePreserveUrl : this.decodePreserveUrl;
+ const switchLabel = isEncode
+ ? 'Preserve URL structure'
+ : 'Fully decode URL structure';
+
return html`
@@ -56,6 +69,7 @@ export class UrlEncoder extends BaseTool {
+