@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-polling-button.element.js

@@ -7,31 +7,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer-workspace.context-token.js';
 import { css, html, customElement, query, state } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { consumeContext } from '../../../../../../libs/context-api/index.js';
 let UmbLogViewerPollingButtonElement = class UmbLogViewerPollingButtonElement extends UmbLitElement {
-    #pollingIntervals;
-    #logViewerContext;
     constructor() {
-        super();
+        super(...arguments);
         this._poolingConfig = { enabled: false, interval: 0 };
         this.#pollingIntervals = [2000, 5000, 10000, 20000, 30000];
         this.#setPolingInterval = (interval) => {
-            this.#logViewerContext?.setPollingInterval(interval);
+            this._logViewerContext?.setPollingInterval(interval);
             this.#closePoolingPopover();
         };
-        this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
-            this.#logViewerContext = instance;
-            this.#observePoolingConfig();
-        });
+    }
+    #pollingIntervals;
+    #logViewerContext;
+    set _logViewerContext(value) {
+        this.#logViewerContext = value;
+        this.#observePoolingConfig();
+    }
+    get _logViewerContext() {
+        return this.#logViewerContext;
     }
     #observePoolingConfig() {
-        if (!this.#logViewerContext)
-            return;
-        this.observe(this.#logViewerContext.polling, (poolingConfig) => {
-            this._poolingConfig = { ...poolingConfig };
+        this.observe(this._logViewerContext?.polling, (poolingConfig) => {
+            this._poolingConfig = poolingConfig ? { ...poolingConfig } : { enabled: false, interval: 0 };
         });
     }
     #togglePolling() {
-        this.#logViewerContext?.togglePolling();
+        this._logViewerContext?.togglePolling();
     }
     #setPolingInterval;
     #closePoolingPopover() {
@@ -40,19 +42,26 @@ let UmbLogViewerPollingButtonElement = class UmbLogViewerPollingButtonElement ex
         }
         this.#togglePolling();
     }
+    #getPollingLabel() {
+        const seconds = this._poolingConfig.interval / 1000;
+        return this.localize.term('logViewer_pollingActive', seconds);
+    }
+    #getIntervalLabel(interval) {
+        const seconds = interval / 1000;
+        return this.localize.term('logViewer_pollingInterval', seconds);
+    }
     render() {
         return html `
 			<uui-button-group>
-				<uui-button label="Start pooling" @click=${this.#togglePolling}
-					>${this._poolingConfig.enabled
-            ? html `<uui-icon name="icon-axis-rotation" id="polling-enabled-icon"></uui-icon>Polling
-								${this._poolingConfig.interval / 1000} seconds`
-            : 'Polling'}</uui-button
-				>
+				<uui-button label=${this.localize.term('logViewer_startPolling')} @click=${this.#togglePolling}>
+					${this._poolingConfig.enabled
+            ? html `<uui-icon name="icon-axis-rotation" id="polling-enabled-icon"></uui-icon>${this.#getPollingLabel()}`
+            : html `<umb-localize key="logViewer_polling">Polling</umb-localize>`}
+				</uui-button>
 
-				<umb-dropdown id="polling-rate-dropdown" compact label="Choose pooling time">
+				<umb-dropdown id="polling-rate-dropdown" compact label=${this.localize.term('logViewer_choosePollingInterval')}>
 					${this.#pollingIntervals.map((interval) => html `<uui-menu-item
-								label="Every ${interval / 1000} seconds"
+								label=${this.#getIntervalLabel(interval)}
 								@click-label=${() => this.#setPolingInterval(interval)}></uui-menu-item>`)}
 				</umb-dropdown>
 			</uui-button-group>
@@ -96,6 +105,9 @@ __decorate([
 __decorate([
     state()
 ], UmbLogViewerPollingButtonElement.prototype, "_poolingConfig", void 0);
+__decorate([
+    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
+], UmbLogViewerPollingButtonElement.prototype, "_logViewerContext", null);
 UmbLogViewerPollingButtonElement = __decorate([
     customElement('umb-log-viewer-polling-button')
 ], UmbLogViewerPollingButtonElement);

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-search-input-modal.element.js

@@ -26,27 +26,31 @@ let UmbLogViewerSaveSearchModalElement = class UmbLogViewerSaveSearchModalElemen
     }
     render() {
         return html `
-			<uui-dialog-layout headline="Save Search">
-				<span>Enter a friendly name for your search query</span>
+			<uui-dialog-layout headline=${this.localize.term('logViewer_saveSearch')}>
+				<umb-localize key="logViewer_saveSearchDescription"> Enter a friendly name for your search query </umb-localize>
 				<uui-form-layout-item>
-					<uui-label slot="label">Query:</uui-label>
+					<uui-label slot="label"><umb-localize key="logViewer_query">Query</umb-localize>:</uui-label>
 					<span>${this.data?.query}</span>
 				</uui-form-layout-item>
 				<uui-form-layout-item>
-					<uui-label slot="label" for="input">Name:</uui-label>
-					<uui-input label="Search name" id="input" @input=${this.#validate}></uui-input>
+					<uui-label slot="label" for="input"><umb-localize key="general_name">Name</umb-localize>:</uui-label>
+					<uui-input
+						label=${this.localize.term('logViewer_searchName')}
+						id="input"
+						@input=${this.#validate}></uui-input>
 				</uui-form-layout-item>
 
-				<uui-button slot="actions" @click="${this._handleClose}" label="Close dialog">Close</uui-button>
+				<uui-button
+					slot="actions"
+					@click="${this._handleClose}"
+					label=${this.localize.term('general_close')}></uui-button>
 				<uui-button
 					.disabled=${!this._hasValue}
 					slot="actions"
 					look="primary"
 					color="positive"
-					label="Save search"
-					@click="${this._handleSubmit}"
-					>Save</uui-button
-				>
+					label=${this.localize.term('logViewer_saveSearch')}
+					@click="${this._handleSubmit}"></uui-button>
 			</uui-dialog-layout>
 		`;
     }

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.d.ts

@@ -5,8 +5,9 @@ export declare class UmbLogViewerSearchInputElement extends UmbLitElement {
     private _searchDropdownElement;
     private _savedSearches;
     private _inputQuery;
-    private _showLoader;
     private _isQuerySaved;
+    private set _logViewerContext(value);
+    private get _logViewerContext();
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.js

@@ -6,57 +6,60 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer-workspace.context-token.js';
 import { UMB_LOG_VIEWER_SAVE_SEARCH_MODAL } from './log-viewer-search-input-modal.modal-token.js';
-import { css, html, customElement, query, state } from '../../../../../../external/lit/index.js';
+import { css, html, customElement, query, state, when, nothing } from '../../../../../../external/lit/index.js';
 import { escapeHTML } from '../../../../../core/utils/index.js';
 import { query as getQuery, path, toQueryString } from '../../../../../core/router/index.js';
-import { Subject, debounceTime, tap } from '../../../../../../external/rxjs/index.js';
 import { umbConfirmModal, umbOpenModal } from '../../../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { consumeContext } from '../../../../../../libs/context-api/index.js';
+import { UmbStringState } from '../../../../../../libs/observable-api/index.js';
+import { debounceTime, skip } from '../../../../../../external/rxjs/index.js';
 import './log-viewer-search-input-modal.element.js';
 let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extends UmbLitElement {
-    // TODO: Revisit this code, to not use RxJS directly:
-    #inputQuery$;
+    // Local state for debouncing user input before updating context
+    #localQueryState;
     #logViewerContext;
+    set _logViewerContext(value) {
+        this.#logViewerContext = value;
+        this.#observeStuff();
+        this.#logViewerContext?.getSavedSearches();
+    }
+    get _logViewerContext() {
+        return this.#logViewerContext;
+    }
     constructor() {
         super();
         this._savedSearches = [];
         this._inputQuery = '';
-        this._showLoader = false;
         this._isQuerySaved = false;
-        // TODO: Revisit this code, to not use RxJS directly:
-        this.#inputQuery$ = new Subject();
-        this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
-            this.#logViewerContext = instance;
-            this.#observeStuff();
-            this.#logViewerContext?.getSavedSearches();
-        });
-        this.#inputQuery$
-            .pipe(tap(() => (this._showLoader = true)), debounceTime(250))
-            .subscribe((query) => {
-            this.#logViewerContext?.setFilterExpression(query);
+        // Local state for debouncing user input before updating context
+        this.#localQueryState = new UmbStringState('');
+        // Debounce local input and update context
+        this.observe(this.#localQueryState.asObservable().pipe(skip(1), // Skip initial value
+        debounceTime(250)), (query) => {
+            this._logViewerContext?.setFilterExpression(query);
             this.#persist(query);
-            this._isQuerySaved = this._savedSearches.some((search) => search.query === query);
-            this._showLoader = false;
         });
     }
     #observeStuff() {
-        if (!this.#logViewerContext)
-            return;
-        this.observe(this.#logViewerContext.savedSearches, (savedSearches) => {
+        this.observe(this._logViewerContext?.savedSearches, (savedSearches) => {
             this._savedSearches = savedSearches?.items ?? [];
             this._isQuerySaved = this._savedSearches.some((search) => search.query === this._inputQuery);
         });
-        this.observe(this.#logViewerContext.filterExpression, (query) => {
-            this._inputQuery = query;
-            this._isQuerySaved = this._savedSearches.some((search) => search.query === query);
+        this.observe(this._logViewerContext?.filterExpression, (query) => {
+            this._inputQuery = query ?? '';
+            this._isQuerySaved = this._savedSearches.some((search) => search.query === this._inputQuery);
         });
     }
     #setQuery(event) {
         const target = event.target;
-        this.#inputQuery$.next(target.value);
+        const query = target.value;
+        // Update local state which will debounce before updating context
+        this.#localQueryState.setValue(query);
     }
     #setQueryFromSavedSearch(query) {
-        this.#inputQuery$.next(query);
+        this._logViewerContext?.setFilterExpression(query);
+        this.#persist(query);
         this._searchDropdownElement.open = false;
     }
     #persist(filter) {
@@ -68,20 +71,25 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
         window.history.pushState({}, '', `${path()}?${toQueryString(query)}`);
     }
     #clearQuery() {
-        this.#inputQuery$.next('');
-        this.#logViewerContext?.setFilterExpression('');
+        this._logViewerContext?.setFilterExpression('');
+        this.#persist('');
+        this.#localQueryState.setValue('');
+    }
+    #refreshSearch() {
+        // Force immediate search, bypassing debounce
+        this._logViewerContext?.getLogs();
     }
     #saveSearch(savedSearch) {
-        this.#logViewerContext?.saveSearch(savedSearch);
+        this._logViewerContext?.saveSearch(savedSearch);
     }
     async #removeSearch(name) {
         await umbConfirmModal(this, {
             headline: this.localize.term('logViewer_deleteSavedSearch'),
             content: this.localize.term('defaultdialogs_confirmdelete', escapeHTML(name)),
             color: 'danger',
-            confirmLabel: 'Delete',
+            confirmLabel: this.localize.term('actions_delete'),
         });
-        this.#logViewerContext?.removeSearch({ name });
+        this._logViewerContext?.removeSearch({ name });
         //this.dispatchEvent(new UmbDeleteEvent());
     }
     async #openSaveSearchDialog() {
@@ -100,37 +108,40 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
         return html `
 			<uui-input
 				id="search-input"
-				label="Search logs"
-				.placeholder=${'Search logs...'}
+				label=${this.localize.term('logViewer_searchLogs')}
+				.placeholder=${this.localize.term('logViewer_searchLogsPlaceholder')}
 				slot="trigger"
 				@input=${this.#setQuery}
 				.value=${this._inputQuery}>
-				${this._showLoader
-            ? html `<div id="loader-container" slot="append">
-							<uui-loader-circle></uui-loader-circle>
-						</div>`
-            : ''}
-				${this._inputQuery
-            ? html `${!this._isQuerySaved
-                ? html `<uui-button compact slot="append" label="Save search" @click=${this.#openSaveSearchDialog}
-										><uui-icon name="icon-favorite"></uui-icon
-									></uui-button>`
-                : ''}<uui-button compact slot="append" label="Clear" @click=${this.#clearQuery}
-								><uui-icon name="icon-delete"></uui-icon
-							></uui-button>`
-            : html ``}
+				${when(this._inputQuery !== '', () => html `${when(this._isQuerySaved, () => nothing, () => html `<uui-button
+										compact
+										slot="append"
+										label=${this.localize.term('logViewer_saveSearch')}
+										@click=${this.#openSaveSearchDialog}>
+										<uui-icon name="icon-favorite"></uui-icon>
+									</uui-button>`)}
+							<uui-button
+								compact
+								slot="append"
+								label=${this.localize.term('logViewer_refreshSearch')}
+								@click=${this.#refreshSearch}>
+								<uui-icon name="icon-refresh"></uui-icon>
+							</uui-button>
+							<uui-button compact slot="append" label=${this.localize.term('general_clear')} @click=${this.#clearQuery}>
+								<uui-icon name="icon-delete"></uui-icon>
+							</uui-button>`, () => nothing)}
 				<umb-dropdown id="search-dropdown" slot="append" label=${this.localize.term('logViewer_savedSearches')}>
 					<span slot="label"><umb-localize key="logViewer_savedSearches">Saved searches</umb-localize></span>
 					<uui-scroll-container id="saved-searches-container" role="list">
 						${this._savedSearches.map((search) => html `<li class="saved-search-item">
 									<button
-										label="Search for ${search.name}"
+										label=${this.localize.term('logViewer_searchFor', search.name ?? '')}
 										class="saved-search-item-button"
 										@click=${() => this.#setQueryFromSavedSearch(search.query ?? '')}>
 										<span class="saved-search-item-name">${search.name}</span>
 										<span class="saved-search-item-query">${search.query}</span></button
 									><uui-button
-										label="Remove saved search"
+										label=${this.localize.term('logViewer_deleteThisSearch')}
 										color="danger"
 										@click=${() => this.#removeSearch(search.name ?? '')}
 										><uui-icon name="icon-trash"></uui-icon
@@ -162,13 +173,6 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
 				flex: 1;
 			}
 
-			#loader-container {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin: 0 var(--uui-size-space-4);
-			}
-
 			.saved-search-item {
 				display: flex;
 				justify-content: space-between;
@@ -221,12 +225,12 @@ __decorate([
 __decorate([
     state()
 ], UmbLogViewerSearchInputElement.prototype, "_inputQuery", void 0);
-__decorate([
-    state()
-], UmbLogViewerSearchInputElement.prototype, "_showLoader", void 0);
 __decorate([
     state()
 ], UmbLogViewerSearchInputElement.prototype, "_isQuerySaved", void 0);
+__decorate([
+    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
+], UmbLogViewerSearchInputElement.prototype, "_logViewerContext", null);
 UmbLogViewerSearchInputElement = __decorate([
     customElement('umb-log-viewer-search-input')
 ], UmbLogViewerSearchInputElement);

package/dist-cms/packages/log-viewer/workspace/views/search/log-search-view.element.d.ts

@@ -2,7 +2,8 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbLogViewerSearchViewElement extends UmbLitElement {
     #private;
     private _canShowLogs;
-    constructor();
+    private set _logViewerContext(value);
+    private get _logViewerContext();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/log-viewer/workspace/views/search/log-search-view.element.js

@@ -8,30 +8,32 @@ import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../logviewer-workspace.context-to
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { css, html, customElement, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { consumeContext } from '../../../../../libs/context-api/index.js';
 let UmbLogViewerSearchViewElement = class UmbLogViewerSearchViewElement extends UmbLitElement {
-    #logViewerContext;
-    #canShowLogsObserver;
     constructor() {
-        super();
+        super(...arguments);
         this._canShowLogs = true;
-        this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
-            this.#logViewerContext = instance;
-            this.#observeCanShowLogs();
-        });
     }
+    #logViewerContext;
+    set _logViewerContext(value) {
+        this.#logViewerContext = value;
+        this.#observeCanShowLogs();
+    }
+    get _logViewerContext() {
+        return this.#logViewerContext;
+    }
+    #canShowLogsObserver;
     #observeCanShowLogs() {
         if (this.#canShowLogsObserver)
             this.#canShowLogsObserver.destroy();
-        if (!this.#logViewerContext)
-            return;
-        this.#canShowLogsObserver = this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
+        this.#canShowLogsObserver = this.observe(this._logViewerContext?.canShowLogs, (canShowLogs) => {
             this._canShowLogs = canShowLogs ?? this._canShowLogs;
         });
     }
     render() {
         return html `
 			<umb-body-layout header-transparent header-fit-height>
-				<div id="header" slot="header">
+				<div id="header" slot="header" role="search" aria-label="Filter logs">
 					<div id="levels-container">
 						<umb-log-viewer-log-level-filter-menu></umb-log-viewer-log-level-filter-menu>
 						<div id="dates-polling-container">
@@ -98,6 +100,9 @@ let UmbLogViewerSearchViewElement = class UmbLogViewerSearchViewElement extends
 __decorate([
     state()
 ], UmbLogViewerSearchViewElement.prototype, "_canShowLogs", void 0);
+__decorate([
+    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
+], UmbLogViewerSearchViewElement.prototype, "_logViewerContext", null);
 UmbLogViewerSearchViewElement = __decorate([
     customElement('umb-log-viewer-search-view')
 ], UmbLogViewerSearchViewElement);

package/dist-cms/packages/management-api/detail/cache-invalidation.manager.d.ts

@@ -5,6 +5,7 @@ import { UmbControllerBase } from '../../../libs/class-api/index.js';
 export interface UmbManagementApiDetailDataInvalidationManagerArgs<DetailResponseModelType> {
     dataCache: UmbManagementApiDetailDataCache<DetailResponseModelType>;
     eventSources: Array<string>;
+    eventTypes?: Array<string>;
 }
 export declare class UmbManagementApiDetailDataCacheInvalidationManager<DetailResponseModelType> extends UmbControllerBase {
     #private;

package/dist-cms/packages/management-api/detail/cache-invalidation.manager.js

@@ -2,12 +2,14 @@ import { UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT } from '../server-event/constan
 import { UmbControllerBase } from '../../../libs/class-api/index.js';
 export class UmbManagementApiDetailDataCacheInvalidationManager extends UmbControllerBase {
     #eventSources;
+    #eventTypes;
     #serverEventContext;
     constructor(host, args) {
         super(host);
         {
             this._dataCache = args.dataCache;
             this.#eventSources = args.eventSources;
+            this.#eventTypes = args.eventTypes ?? ['Updated', 'Deleted'];
             this.consumeContext(UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT, (context) => {
                 this.#serverEventContext = context;
                 this.#observeServerEvents();
@@ -24,7 +26,7 @@ export class UmbManagementApiDetailDataCacheInvalidationManager extends UmbContr
         this._dataCache.delete(event.key);
     }
     #observeServerEvents() {
-        this.observe(this.#serverEventContext?.byEventSourcesAndEventTypes(this.#eventSources, ['Updated', 'Deleted']), (event) => {
+        this.observe(this.#serverEventContext?.byEventSourcesAndEventTypes(this.#eventSources, this.#eventTypes), (event) => {
             if (!event)
                 return;
             this._onServerEvent(event);

package/dist-cms/packages/management-api/item/cache-invalidation.manager.d.ts

@@ -5,6 +5,7 @@ import { UmbControllerBase } from '../../../libs/class-api/index.js';
 export interface UmbManagementApiItemDataInvalidationManagerArgs<ItemResponseModelType> {
     dataCache: UmbManagementApiItemDataCache<ItemResponseModelType>;
     eventSources: Array<string>;
+    eventTypes?: Array<string>;
 }
 export declare class UmbManagementApiItemDataCacheInvalidationManager<ItemResponseModelType> extends UmbControllerBase {
     #private;

package/dist-cms/packages/management-api/item/cache-invalidation.manager.js

@@ -2,12 +2,14 @@ import { UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT } from '../server-event/constan
 import { UmbControllerBase } from '../../../libs/class-api/index.js';
 export class UmbManagementApiItemDataCacheInvalidationManager extends UmbControllerBase {
     #eventSources;
+    #eventTypes;
     #serverEventContext;
     constructor(host, args) {
         super(host);
         {
             this._dataCache = args.dataCache;
             this.#eventSources = args.eventSources;
+            this.#eventTypes = args.eventTypes ?? ['Updated', 'Deleted'];
             this.consumeContext(UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT, (context) => {
                 this.#serverEventContext = context;
                 this.#observeServerEvents();
@@ -25,7 +27,7 @@ export class UmbManagementApiItemDataCacheInvalidationManager extends UmbControl
     }
     #observeServerEvents() {
         // Invalidate cache entries when entities are updated or deleted
-        this.observe(this.#serverEventContext?.byEventSourcesAndEventTypes(this.#eventSources, ['Updated', 'Deleted']), (event) => {
+        this.observe(this.#serverEventContext?.byEventSourcesAndEventTypes(this.#eventSources, this.#eventTypes), (event) => {
             if (!event)
                 return;
             this._onServerEvent(event);

package/dist-cms/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.d.ts

@@ -19,8 +19,11 @@ export declare class UmbInputMarkdownElement extends UmbInputMarkdownElement_bas
      */
     get readonly(): boolean;
     set readonly(value: boolean);
+    required?: boolean;
+    requiredMessage?: string;
     private _codeEditor?;
     private _actionExtensions;
+    constructor();
     private _focusEditor;
     private _insertLine;
     private _insertBetweenSelection;

package/dist-cms/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.js

@@ -15,21 +15,13 @@ import { UmbTextStyles } from '../../../core/style/index.js';
 import { umbOpenModal } from '../../../core/modal/index.js';
 import { UMB_MEDIA_PICKER_MODAL, UmbMediaUrlRepository } from '../../../media/media/index.js';
 import { UmbCodeEditorLoadedEvent } from '../../../code-editor/index.js';
-import { UmbFormControlMixin } from '../../../core/validation/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../core/validation/index.js';
 import { sanitizeHTML } from '../../../core/utils/index.js';
 /**
  * @element umb-input-markdown
  * @fires change - when the value of the input changes
  */
 let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement) {
-    constructor() {
-        super(...arguments);
-        // TODO: Make actions be able to handle multiple selection
-        this.preview = false;
-        this.#readonly = false;
-        this._actionExtensions = [];
-        this.#mediaUrlRepository = new UmbMediaUrlRepository(this);
-    }
     getFormElement() {
         return this._codeEditor;
     }
@@ -49,6 +41,15 @@ let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormContr
     #readonly;
     #editor;
     #mediaUrlRepository;
+    constructor() {
+        super();
+        // TODO: Make actions be able to handle multiple selection
+        this.preview = false;
+        this.#readonly = false;
+        this._actionExtensions = [];
+        this.#mediaUrlRepository = new UmbMediaUrlRepository(this);
+        this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''));
+    }
     #onCodeEditorLoaded(event) {
         if (event.type !== UmbCodeEditorLoadedEvent.TYPE)
             return;
@@ -627,6 +628,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputMarkdownElement.prototype, "readonly", null);
+__decorate([
+    property({ type: Boolean })
+], UmbInputMarkdownElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputMarkdownElement.prototype, "requiredMessage", void 0);
 __decorate([
     query('umb-code-editor')
 ], UmbInputMarkdownElement.prototype, "_codeEditor", void 0);

package/dist-cms/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.d.ts

@@ -1,12 +1,12 @@
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../core/property-editor/index.js';
 import '../../components/input-markdown-editor/index.js';
+declare const UmbPropertyEditorUIMarkdownEditorElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-markdown-editor
  */
-export declare class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIMarkdownEditorElement extends UmbPropertyEditorUIMarkdownEditorElement_base implements UmbPropertyEditorUiElement {
     #private;
-    value?: string;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      * @type {boolean}
@@ -14,9 +14,16 @@ export declare class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElem
      * @default false
      */
     readonly: boolean;
+    /**
+     * Sets the input to mandatory, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    mandatory?: boolean;
+    mandatoryMessage: string;
     private _preview?;
     private _overlaySize;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export { UmbPropertyEditorUIMarkdownEditorElement as element };

package/dist-cms/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.js

@@ -8,10 +8,11 @@ import { html, customElement, property, state } from '../../../../external/lit/i
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import '../../components/input-markdown-editor/index.js';
 import { UmbChangeEvent } from '../../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-markdown-editor
  */
-let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement {
+let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIMarkdownEditorElement extends UmbFormControlMixin(UmbLitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -21,6 +22,7 @@ let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIMarkdown
          * @default false
          */
         this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this._overlaySize = 'small';
     }
     set config(config) {
@@ -33,6 +35,9 @@ let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIMarkdown
         this.value = event.target.value;
         this.dispatchEvent(new UmbChangeEvent());
     }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-markdown'));
+    }
     render() {
         return html `
 			<umb-input-markdown
@@ -40,16 +45,21 @@ let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIMarkdown
 				.overlaySize=${this._overlaySize}
 				?preview=${this._preview}
 				@change=${this.#onChange}
-				?readonly=${this.readonly}></umb-input-markdown>
+				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}></umb-input-markdown>
 		`;
     }
 };
-__decorate([
-    property()
-], UmbPropertyEditorUIMarkdownEditorElement.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIMarkdownEditorElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIMarkdownEditorElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIMarkdownEditorElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIMarkdownEditorElement.prototype, "_preview", void 0);