diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index 4e3fd75c2..61d52405c 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -10,7 +10,7 @@
-
+
The schema name becomes part of the api url,
e.g {{apiUrl.buildUrl("api/content/")}}{{appName}}/{{schemaName | async}}/.
diff --git a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
index af1a59b0f..1e85110c7 100644
--- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
@@ -28,7 +28,7 @@
-
+
diff --git a/src/Squidex/app/framework/angular/lowercase-input.directive.ts b/src/Squidex/app/framework/angular/lowercase-input.directive.ts
new file mode 100644
index 000000000..e510ba12f
--- /dev/null
+++ b/src/Squidex/app/framework/angular/lowercase-input.directive.ts
@@ -0,0 +1,62 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Directive, forwardRef, ElementRef, Renderer } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const NOOP = () => { /* NOOP */ };
+
+export const SQX_LOWERCASE_INPUT_VALUE_ACCESSOR: any = {
+ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LowerCaseInputDirective), multi: true
+};
+
+@Directive({
+ selector: '[sqxLowerCaseInput]',
+ providers: [SQX_LOWERCASE_INPUT_VALUE_ACCESSOR],
+ host: {
+ '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'
+ }
+})
+export class LowerCaseInputDirective implements ControlValueAccessor {
+ private changeCallback: (value: any) => void = NOOP;
+ private touchedCallback: () => void = NOOP;
+
+ constructor(
+ private readonly renderer: Renderer,
+ private readonly elementRef: ElementRef
+ ) {
+ }
+
+ public writeValue(value: any) {
+ const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
+
+ this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', normalizedValue);
+ }
+
+ public setDisabledState(isDisabled: boolean): void {
+ this.renderer.setElementProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
+ }
+
+ public registerOnChange(fn: any) {
+ this.changeCallback = fn;
+ }
+
+ public registerOnTouched(fn: any) {
+ this.touchedCallback = fn;
+ }
+
+ public onChange(value: any) {
+ const normalizedValue = (value == null ? '' : value.toString()).toLowerCase();
+
+ this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', normalizedValue);
+ this.changeCallback(normalizedValue);
+ }
+
+ public onTouched() {
+ this.touchedCallback();
+ }
+}
\ No newline at end of file
diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts
index 00d6e3df4..f04ca16d7 100644
--- a/src/Squidex/app/framework/declarations.ts
+++ b/src/Squidex/app/framework/declarations.ts
@@ -19,6 +19,7 @@ export * from './angular/geolocation-editor.component';
export * from './angular/http-utils';
export * from './angular/indeterminate-value.directive';
export * from './angular/json-editor.component';
+export * from './angular/lowercase-input.directive';
export * from './angular/markdown-editor.component';
export * from './angular/modal-view.directive';
export * from './angular/money.pipe';
diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts
index 50ef39dbd..191b90d22 100644
--- a/src/Squidex/app/framework/module.ts
+++ b/src/Squidex/app/framework/module.ts
@@ -29,6 +29,7 @@ import {
IndeterminateValueDirective,
JsonEditorComponent,
LocalStoreService,
+ LowerCaseInputDirective,
MarkdownEditorComponent,
MessageBus,
ModalViewDirective,
@@ -78,6 +79,7 @@ import {
GeolocationEditorComponent,
IndeterminateValueDirective,
JsonEditorComponent,
+ LowerCaseInputDirective,
MarkdownEditorComponent,
ModalViewDirective,
MoneyPipe,
@@ -112,6 +114,7 @@ import {
GeolocationEditorComponent,
IndeterminateValueDirective,
JsonEditorComponent,
+ LowerCaseInputDirective,
MarkdownEditorComponent,
ModalViewDirective,
MoneyPipe,
diff --git a/src/Squidex/app/shared/components/app-form.component.html b/src/Squidex/app/shared/components/app-form.component.html
index 77c9a57e3..fcdd9b023 100644
--- a/src/Squidex/app/shared/components/app-form.component.html
+++ b/src/Squidex/app/shared/components/app-form.component.html
@@ -10,7 +10,7 @@
-
+
The app name becomes part of the api url,
e.g {{apiUrl.buildUrl("api/content/")}}{{appName | async}}/.
diff --git a/src/Squidex/app/shell/pages/internal/apps-menu.component.scss b/src/Squidex/app/shell/pages/internal/apps-menu.component.scss
index ebbca3da0..ec59b86ca 100644
--- a/src/Squidex/app/shell/pages/internal/apps-menu.component.scss
+++ b/src/Squidex/app/shell/pages/internal/apps-menu.component.scss
@@ -52,11 +52,11 @@
&-pill {
@include absolute(.8rem, .625rem, auto, auto);
@include border-radius(8px);
- padding: 0 .6rem;
+ padding: 0 .4rem;
background: $color-theme-blue-lightest;
border: 0;
- line-height: 1.5rem;
- font-size: .9rem;
+ line-height: 1.2rem;
+ font-size: .8rem;
font-weight: normal;
color: $color-theme-blue;
}