@umbraco-cms/backoffice 16.3.4 → 16.4.0-rc

package/dist-cms/packages/documents/documents/workspace/document-workspace-split-view.element.js

@@ -12,11 +12,13 @@ import './document-workspace-split-view-variant-selector.element.js';
 let UmbDocumentWorkspaceSplitViewElement = class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
     constructor() {
         super();
+        this._loading = true;
         // TODO: Refactor: use a split view workspace context token: [NL]
         this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
             this._workspaceContext = context;
             this.#observeActiveVariantInfo();
             this.#observeIcon();
+            this.#observeLoading();
             this.#observeCollectionOverrides();
         });
     }
@@ -28,18 +30,24 @@ let UmbDocumentWorkspaceSplitViewElement = class UmbDocumentWorkspaceSplitViewEl
     #observeIcon() {
         this.observe(this._workspaceContext?.contentTypeIcon, (icon) => {
             this._icon = icon ?? undefined;
-        });
+        }, 'observeIcon');
+    }
+    #observeLoading() {
+        this.observe(this._workspaceContext?.loading.isOn, (loading) => {
+            this._loading = loading ?? false;
+        }, 'observeIcon');
     }
     #observeCollectionOverrides() {
         this.observe(this._workspaceContext?.collection.manifestOverrides, (overrides) => {
             this._overrides = overrides ? [overrides] : undefined;
-        });
+        }, 'observeCollectionOverrides');
     }
     render() {
         return this._variants
             ? html `<div id="splitViews">
 						${repeat(this._variants, (view) => view.index + '_' + (view.culture ?? '') + '_' + (view.segment ?? '') + '_' + this._variants.length, (view) => html `
 								<umb-workspace-split-view
+									.loading=${this._loading}
 									.displayNavigation=${view.index === this._variants.length - 1}
 									.overrides=${this._overrides}
 									.splitViewIndex=${view.index}>
@@ -70,10 +78,6 @@ let UmbDocumentWorkspaceSplitViewElement = class UmbDocumentWorkspaceSplitViewEl
 				width: 100%;
 				height: calc(100% - var(--umb-footer-layout-height));
 			}
-
-			#breadcrumbs {
-				margin: 0 var(--uui-size-layout-1);
-			}
 		`,
     ]; }
 };
@@ -86,6 +90,9 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentWorkspaceSplitViewElement.prototype, "_overrides", void 0);
+__decorate([
+    state()
+], UmbDocumentWorkspaceSplitViewElement.prototype, "_loading", void 0);
 UmbDocumentWorkspaceSplitViewElement = __decorate([
     customElement('umb-document-workspace-split-view')
 ], UmbDocumentWorkspaceSplitViewElement);

package/dist-cms/packages/documents/documents/workspace/document-workspace.context.js

@@ -52,6 +52,14 @@ export class UmbDocumentWorkspaceContext extends UmbContentDetailWorkspaceContex
             const config = await context?.getDocumentConfiguration();
             const allowSegmentCreation = config?.allowNonExistingSegmentsCreation ?? false;
             const allowEditInvariantFromNonDefault = config?.allowEditInvariantFromNonDefault ?? true;
+            // Deprecation warning for allowNonExistingSegmentsCreation (default from server is true, so we warn on false)
+            if (!allowSegmentCreation) {
+                new UmbDeprecation({
+                    deprecated: 'The "AllowNonExistingSegmentsCreation" setting is deprecated.',
+                    removeInVersion: '19.0.0',
+                    solution: 'This functionality will be moved to a client-side extension.',
+                }).warn();
+            }
             this._variantOptionsFilter = (variantOption) => {
                 const isNotCreatedSegmentVariant = variantOption.segment && !variantOption.variant;
                 // Do not allow creating a segment variant
@@ -82,7 +90,7 @@ export class UmbDocumentWorkspaceContext extends UmbContentDetailWorkspaceContex
             else {
                 this.#enforceUserPermission(UMB_USER_PERMISSION_DOCUMENT_UPDATE, 'You do not have permission to update documents.');
             }
-        });
+        }, null);
         this.routes.setRoutes([
             {
                 path: UMB_CREATE_FROM_BLUEPRINT_DOCUMENT_WORKSPACE_PATH_PATTERN.toString(),

package/dist-cms/packages/extension-types/index.d.ts

@@ -41,6 +41,8 @@ import '../core/entity-action/index.js';
 import '../core/entity-bulk-action/index.js';
 import '../core/entity-create-option-action/index.js';
 import '../core/entity-item/index.js';
+import '../core/entity-sign/index.js';
+import '../core/entity-flag/index.js';
 import '../core/entity/index.js';
 import '../core/event/index.js';
 import '../core/extension-registry/index.js';

package/dist-cms/packages/language/entity-actions/manifests.js

@@ -22,7 +22,7 @@ export const manifests = [
         forEntityTypes: [UMB_LANGUAGE_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/log-viewer/workspace/logviewer-workspace.context.d.ts

@@ -61,5 +61,6 @@ export declare class UmbLogViewerWorkspaceContext extends UmbContextBase impleme
     togglePolling(): void;
     setPollingInterval(interval: UmbPoolingInterval): void;
     toggleSortOrder(): void;
+    stopPolling(): void;
 }
 export { UmbLogViewerWorkspaceContext as api };

package/dist-cms/packages/log-viewer/workspace/logviewer-workspace.context.js

@@ -133,6 +133,7 @@ export class UmbLogViewerWorkspaceContext extends UmbContextBase {
     hostDisconnected() {
         super.hostDisconnected();
         window.removeEventListener('changestate', this.onChangeState);
+        this.stopPolling();
     }
     setDateRange(dateRange) {
         let { startDate, endDate } = dateRange;
@@ -258,7 +259,7 @@ export class UmbLogViewerWorkspaceContext extends UmbContextBase {
             }, this.#polling.getValue().interval);
             return;
         }
-        clearInterval(this.#intervalID);
+        this.stopPolling();
     }
     setPollingInterval(interval) {
         this.#polling.update({ interval });
@@ -268,5 +269,11 @@ export class UmbLogViewerWorkspaceContext extends UmbContextBase {
         const newDirection = direction === DirectionModel.ASCENDING ? DirectionModel.DESCENDING : DirectionModel.ASCENDING;
         this.#sortingDirection.setValue(newDirection);
     }
+    stopPolling() {
+        if (this.#intervalID) {
+            clearInterval(this.#intervalID);
+            this.#intervalID = null;
+        }
+    }
 }
 export { UmbLogViewerWorkspaceContext as api };

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/detail/detail-data.request-manager.js

@@ -69,7 +69,7 @@ export class UmbManagementApiDetailDataRequestManager extends UmbControllerBase
         return { error };
     }
     async delete(id) {
-        const { error } = await this.#delete(id);
+        const { error } = await tryExecute(this, this.#delete(id));
         // Only update the cache when we are connected to the server events
         if (this.#isConnectedToServerEvents && !error) {
             this.#dataCache.delete(id);

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/media/media/audit-log/info-app/media-history-workspace-info-app.element.js

@@ -150,6 +150,7 @@ let UmbMediaHistoryWorkspaceInfoAppElement = class UmbMediaHistoryWorkspaceInfoA
 			}
 
 			.log-type uui-tag {
+				justify-self: center;
 				height: fit-content;
 				margin-top: auto;
 				margin-bottom: auto;

package/dist-cms/packages/media/media/collection/media-collection.context.js

@@ -24,6 +24,7 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext {
             updateDate: date,
             createDate: date,
             entityType: UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE,
+            flags: [],
             ...placeholder,
         }))
             .reverse();

package/dist-cms/packages/media/media/collection/repository/media-collection.server.data-source.js

@@ -35,6 +35,7 @@ export class UmbMediaCollectionServerDataSource {
                     values: item.values.map((item) => {
                         return { alias: item.alias, value: item.value };
                     }),
+                    flags: item.flags,
                 };
                 return model;
             });

package/dist-cms/packages/media/media/collection/types.d.ts

@@ -1,5 +1,6 @@
 import type { UmbFileDropzoneItemStatus } from '../../dropzone/index.js';
 import type { UmbCollectionFilterModel } from '../../../core/collection/index.js';
+import type { UmbEntityWithFlags } from '../../../core/entity-flag/index.js';
 export interface UmbMediaCollectionFilterModel extends UmbCollectionFilterModel {
     unique?: string;
     dataTypeId?: string;
@@ -11,7 +12,7 @@ export interface UmbMediaCollectionFilterModel extends UmbCollectionFilterModel
         isSystem: boolean;
     }>;
 }
-export interface UmbMediaCollectionItemModel {
+export interface UmbMediaCollectionItemModel extends UmbEntityWithFlags {
     unique: string;
     entityType: string;
     contentTypeAlias?: string;

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.js

@@ -34,6 +34,7 @@ let UmbInputUploadFieldSvgElement = class UmbInputUploadFieldSvgElement extends
 				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
 				background-repeat: repeat;
 				background-size: 10px 10px;
+				max-width: 100%;
 			}
 		`,
     ]; }

package/dist-cms/packages/media/media/dropzone/media-dropzone.manager.js

@@ -151,7 +151,7 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         const preset = {
             unique: item.unique,
             mediaType: { unique: mediaTypeUnique, collection: null },
-            variants: [{ culture: null, segment: null, createDate: null, updateDate: null, name }],
+            variants: [{ culture: null, segment: null, createDate: null, updateDate: null, flags: [], name }],
             values: item.temporaryFile ? [umbracoFile] : undefined,
         };
         const { data } = await this.#mediaDetailRepository.createScaffold(preset);

package/dist-cms/packages/media/media/entity-actions/create/create.action.d.ts

@@ -1,6 +1,6 @@
-import type { UmbEntityActionArgs } from '../../../../core/entity-action/index.js';
 import { UmbEntityActionBase } from '../../../../core/entity-action/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+import type { UmbEntityActionArgs } from '../../../../core/entity-action/index.js';
 export declare class UmbCreateMediaEntityAction extends UmbEntityActionBase<never> {
     constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>);
     execute(): Promise<void>;

package/dist-cms/packages/media/media/entity-actions/create/create.action.js

@@ -1,7 +1,7 @@
 import { UmbMediaItemRepository } from '../../repository/index.js';
 import { UMB_MEDIA_CREATE_OPTIONS_MODAL } from './media-create-options-modal.token.js';
-import { UmbEntityActionBase } from '../../../../core/entity-action/index.js';
 import { umbOpenModal } from '../../../../core/modal/index.js';
+import { UmbEntityActionBase } from '../../../../core/entity-action/index.js';
 export class UmbCreateMediaEntityAction extends UmbEntityActionBase {
     constructor(host, args) {
         super(host, args);

package/dist-cms/packages/media/media/entity-actions/create/manifests.js

@@ -11,7 +11,7 @@ export const manifests = [
         forEntityTypes: [UMB_MEDIA_ROOT_ENTITY_TYPE, UMB_MEDIA_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
         conditions: [

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.js

@@ -90,6 +90,7 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
                     name: newName,
                     createDate: null,
                     updateDate: null,
+                    flags: [],
                 },
             ],
         };

package/dist-cms/packages/media/media/paths.js

@@ -7,4 +7,4 @@ export const UMB_MEDIA_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsol
     entityType: UMB_MEDIA_ENTITY_TYPE,
 });
 export const UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN = new UmbPathPattern('create/parent/:parentEntityType/:parentUnique/:mediaTypeUnique', UMB_MEDIA_WORKSPACE_PATH);
-export const UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN = new UmbPathPattern('edit/:unique');
+export const UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN = new UmbPathPattern('edit/:unique', UMB_MEDIA_WORKSPACE_PATH);

package/dist-cms/packages/media/media/property-editors/upload-field/Umbraco.UploadField.js

@@ -9,7 +9,7 @@ export const manifest = {
                 {
                     alias: 'fileExtensions',
                     label: 'Accepted file extensions',
-                    description: 'Insert one extension per line, for example `.jpg`.\n\nYou can also use mime types, for example `image/*` or `application/pdf`.',
+                    description: 'Insert one extension per line, for example `jpg`.\n\nYou can also use mime types, for example `image/*` or `application/pdf`.',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.AcceptedUploadTypes',
                 },
             ],

package/dist-cms/packages/media/media/repository/detail/media-detail.server.data-source.js

@@ -36,6 +36,7 @@ export class UmbMediaServerDataSource extends UmbControllerBase {
                 icon: mediaTypeIcon,
             },
             isTrashed: false,
+            flags: [],
             values: [],
             variants: [
                 {
@@ -44,6 +45,7 @@ export class UmbMediaServerDataSource extends UmbControllerBase {
                     name: '',
                     createDate: null,
                     updateDate: null,
+                    flags: [],
                 },
             ],
         };
@@ -76,6 +78,8 @@ export class UmbMediaServerDataSource extends UmbControllerBase {
                     name: variant.name,
                     createDate: variant.createDate,
                     updateDate: variant.updateDate,
+                    // TODO: Media variant flags are not yet implemented in the backend.
+                    flags: [],
                 };
             }),
             mediaType: {
@@ -84,6 +88,7 @@ export class UmbMediaServerDataSource extends UmbControllerBase {
                 icon: data.mediaType.icon,
             },
             isTrashed: data.isTrashed,
+            flags: data.flags,
         };
         return { data: media };
     }

package/dist-cms/packages/media/media/repository/item/media-item.server.cache-invalidation.manager.js

@@ -7,6 +7,7 @@ export class UmbManagementApiMediaItemDataCacheInvalidationManager extends UmbMa
             /* The Media item model includes info about the Media Type.
             We need to invalidate the cache for both Media and MediaType events. */
             eventSources: ['Umbraco:CMS:Media', 'Umbraco:CMS:MediaType'],
+            eventTypes: ['Updated', 'Deleted', 'Trashed'],
         });
     }
     _onServerEvent(event) {

package/dist-cms/packages/media/media/tree/media-tree.server.data-source.js

@@ -62,8 +62,11 @@ const mapper = (item) => {
             return {
                 name: variant.name,
                 culture: variant.culture || null,
+                // Notice: Media variant flags are not yet implemented in the backend.
+                //flags: variant.flags,
             };
         }),
         createDate: item.createDate,
+        flags: item.flags,
     };
 };

package/dist-cms/packages/media/media/workspace/constants.js

@@ -6,4 +6,5 @@ export const UMB_MEMBER_DETAIL_MODEL_VARIANT_SCAFFOLD = {
     name: '',
     createDate: null,
     updateDate: null,
+    flags: [],
 };

package/dist-cms/packages/members/member/collection/repository/member-collection.server.data-source.js

@@ -49,6 +49,7 @@ export class UmbMemberCollectionServerDataSource {
                 memberType: { unique: item.memberType.id, icon: item.memberType.icon },
                 username: item.username,
                 values: item.values,
+                flags: item.flags,
             };
             return memberDetail;
         });

package/dist-cms/packages/members/member/entity-actions/create/manifests.js

@@ -10,7 +10,7 @@ export const manifests = [
         forEntityTypes: [UMB_MEMBER_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/members/member/repository/detail/member-detail.server.data-source.js

@@ -45,6 +45,7 @@ export class UmbMemberServerDataSource extends UmbControllerBase {
             lastPasswordChangeDate: null,
             groups: [],
             values: [],
+            flags: [],
             variants: [
                 {
                     name: '',
@@ -52,6 +53,7 @@ export class UmbMemberServerDataSource extends UmbControllerBase {
                     segment: null,
                     createDate: new Date().toISOString(),
                     updateDate: new Date().toISOString(),
+                    flags: [],
                 },
             ],
         };
@@ -107,8 +109,11 @@ export class UmbMemberServerDataSource extends UmbControllerBase {
                     name: variant.name,
                     createDate: variant.createDate,
                     updateDate: variant.updateDate,
+                    // TODO: Transfer member flags when available in the API: [NL]
+                    flags: [], //variant.flags,
                 };
             }),
+            flags: data.flags,
         };
         return { data: Member };
     }

package/dist-cms/packages/members/member/workspace/member/constants.js

@@ -4,6 +4,7 @@ export const UMB_MEMBER_DETAIL_MODEL_VARIANT_SCAFFOLD = {
     name: '',
     createDate: null,
     updateDate: null,
+    flags: [],
 };
 export { UMB_MEMBER_WORKSPACE_CONTEXT } from './member-workspace.context-token.js';
 export const UMB_MEMBER_WORKSPACE_ALIAS = 'Umb.Workspace.Member';

package/dist-cms/packages/members/member-group/entity-actions/manifests.js

@@ -11,7 +11,7 @@ export const manifests = [
         forEntityTypes: [UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/property-editors/collection/manifests.js

@@ -44,6 +44,7 @@ const propertyEditorUiManifest = {
                     label: 'Workspace View icon',
                     description: "The icon for the Collection's Workspace View.",
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
+                    config: [{ alias: 'placeholder', value: 'icon-grid' }],
                 },
                 {
                     alias: 'tabName',

package/dist-cms/packages/property-editors/icon-picker/manifests.js

@@ -8,6 +8,16 @@ export const manifests = [
             label: 'Icon Picker',
             icon: 'icon-autofill',
             group: 'common',
+            settings: {
+                properties: [
+                    {
+                        alias: 'placeholder',
+                        label: 'Placeholder icon (empty state)',
+                        description: 'Icon name to show when no icon is selected',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
+                    },
+                ],
+            },
         },
     },
 ];

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

@@ -1,14 +1,18 @@
-import type { UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
+import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
+declare const UmbPropertyEditorUIIconPickerElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-icon-picker
  */
-export declare class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIIconPickerElement extends UmbPropertyEditorUIIconPickerElement_base implements UmbPropertyEditorUiElement {
+    mandatory: boolean;
+    protected firstUpdated(): void;
     set value(v: string);
     get value(): string;
-    private _value;
     private _icon;
     private _color;
+    private _placeholderIcon;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
     private _openModal;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -4,43 +4,63 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property, state } from '../../../external/lit/index.js';
+import { html, customElement, property, state, ifDefined } from '../../../external/lit/index.js';
 import { umbOpenModal } from '../../core/modal/index.js';
 import { UMB_ICON_PICKER_MODAL } from '../../core/icon-registry/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { extractUmbColorVariable } from '../../core/resources/index.js';
 import { UmbChangeEvent } from '../../core/event/index.js';
+import { UmbFormControlMixin } from '../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-icon-picker
  */
-let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerElement extends UmbLitElement {
+let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
-        this._value = '';
+        this.mandatory = false;
         this._icon = '';
         this._color = '';
+        this._placeholderIcon = '';
+    }
+    firstUpdated() {
+        this.addValidator('valueMissing', () => 'Icon is required', () => this.mandatory && !this._icon);
     }
-    //
     set value(v) {
-        this._value = v ?? '';
-        const parts = this._value.split(' ');
+        const val = v ?? '';
+        super.value = val;
+        const parts = val.split(' ');
         if (parts.length === 2) {
             this._icon = parts[0];
             this._color = parts[1].replace('color-', '');
         }
         else {
-            this._icon = this._value;
+            this._icon = val;
             this._color = '';
         }
     }
     get value() {
-        return this._value;
+        return super.value ?? '';
+    }
+    set config(config) {
+        if (!config)
+            return;
+        const placeholder = config.getValueByAlias('placeholder');
+        this._placeholderIcon = typeof placeholder === 'string' ? placeholder : '';
     }
     async _openModal() {
-        const data = await umbOpenModal(this, UMB_ICON_PICKER_MODAL).catch(() => undefined);
+        const data = await umbOpenModal(this, UMB_ICON_PICKER_MODAL, {
+            value: {
+                icon: this._icon,
+                color: this._color,
+            },
+            data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory },
+        }).catch(() => undefined);
         if (!data)
             return;
-        if (data.color) {
+        if (!data.icon) {
+            this.value = '';
+        }
+        else if (data.color) {
             this.value = `${data.icon} color-${data.color}`;
         }
         else {
@@ -49,19 +69,27 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
+        const isEmpty = !this._icon;
         return html `
 			<uui-button
 				compact
-				label=${this.localize.term('defaultdialogs_selectIcon')}
 				look="outline"
+				label=${this.localize.term('defaultdialogs_selectIcon')}
 				@click=${this._openModal}>
-				${this._color
-            ? html ` <uui-icon name="${this._icon}" style="color:var(${extractUmbColorVariable(this._color)})"></uui-icon>`
-            : html ` <uui-icon name="${this._icon}"></uui-icon>`}
+				${isEmpty
+            ? html ` <uui-icon name="${ifDefined(this._placeholderIcon)}" style="opacity:.35"></uui-icon> `
+            : this._color
+                ? html `
+								<uui-icon name="${this._icon}" style="color:var(${extractUmbColorVariable(this._color)})"> </uui-icon>
+							`
+                : html `<uui-icon name="${this._icon}"></uui-icon>`}
 			</uui-button>
 		`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIIconPickerElement.prototype, "mandatory", void 0);
 __decorate([
     property()
 ], UmbPropertyEditorUIIconPickerElement.prototype, "value", null);
@@ -71,6 +99,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIIconPickerElement.prototype, "_color", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIIconPickerElement.prototype, "_placeholderIcon", void 0);
 UmbPropertyEditorUIIconPickerElement = __decorate([
     customElement('umb-property-editor-ui-icon-picker')
 ], UmbPropertyEditorUIIconPickerElement);