@umbraco-cms/backoffice 16.4.1 → 16.5.0

package/dist-cms/assets/lang/en.js

@@ -2355,11 +2355,15 @@ export default {
     },
     profiling: {
         performanceProfiling: 'Performance profiling',
-        performanceProfilingDescription: "<p>Umbraco currently runs in debug mode. This means you can use the built-in performance profiler to assess the performance when rendering pages.</p><p>If you want to activate the profiler for a specific page rendering, simply add <strong>umbDebug=true</strong> to the querystring when requesting the page.</p><p>If you want the profiler to be activated by default for all page renderings, you can use the toggle below. It will set a cookie in your browser, which then activates the profiler automatically. In other words, the profiler will only be active by default in <em>your</em> browser - not everyone else's.</p>",
+        performanceProfilingDescription: "<p>Umbraco currently runs in debug mode. This means you can use the built-in performance profiler to assess the performance when rendering pages.</p><p>If you want to activate the profiler for a specific page rendering, simply add <strong>umbDebug=true</strong> to the querystring when requesting the page.</p><p>If you want the profiler to be activated by default for all page renderings, you can use the toggle below. It will set a cookie in your browser, which then activates the profiler automatically. In other words, the profiler will only be active by default in <em>your</em> browser - not everyone else's.</p><p><strong>Note:</strong> This will only work if the Backoffice is currently located on the same URL as the front-end website.</p>",
         activateByDefault: 'Activate the profiler by default',
         reminder: 'Friendly reminder',
         reminderDescription: '<p>You should never let a production site run in debug mode. Debug mode is turned off by setting <strong>Umbraco:CMS:Hosting:Debug</strong> to <strong>false</strong> in appsettings.json, appsettings.{Environment}.json or via an environment variable.</p>',
         profilerEnabledDescription: "<p>Umbraco currently does not run in debug mode, so you can't use the built-in profiler. This is how it should be for a production site.</p><p>Debug mode is turned on by setting <strong>Umbraco:CMS:Hosting:Debug</strong> to <strong>true</strong> in appsettings.json, appsettings.{Environment}.json or via an environment variable.</p>",
+        errorEnablingProfilerTitle: 'Error enabling profiler',
+        errorEnablingProfilerDescription: 'It was not possible to enable the profiler. Check that you are accessing the Backoffice on the same URL as the front-end website, and try again. If the problem persists, please check the log for more details.',
+        errorDisablingProfilerTitle: 'Error disabling profiler',
+        errorDisablingProfilerDescription: 'It was not possible to disable the profiler. Try again, and if the problem persists, please check the log for more details.',
     },
     settingsDashboardVideos: {
         trainingHeadline: 'Hours of Umbraco training videos are only a click away',

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.d.ts

@@ -16,6 +16,7 @@ export declare class UmbBlockGridEntriesElement extends UmbBlockGridEntriesEleme
     private _styleElement?;
     private _layoutEntries;
     private _isReadOnly;
+    private _limitMax?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.js

@@ -195,6 +195,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         new UmbFormControlValidator(this, this /*, this.#dataPath*/);
     }
     async #setupRangeValidation(rangeLimit) {
+        this._limitMax = rangeLimit?.max;
         if (this.#rangeUnderflowValidator) {
             this.removeValidator(this.#rangeUnderflowValidator);
             this.#rangeUnderflowValidator = undefined;
@@ -266,6 +267,8 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 		`;
     }
     #renderCreateButtonGroup() {
+        if (this._limitMax === 1 && this._layoutEntries.length > 0)
+            return nothing;
         if (this._areaKey === null || this._layoutEntries.length === 0) {
             return html ` <uui-button-group id="createButton">
 				${this.#renderCreateButton()} ${this.#renderPasteButton()}
@@ -396,6 +399,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntriesElement.prototype, "_isReadOnly", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntriesElement.prototype, "_limitMax", void 0);
 UmbBlockGridEntriesElement = __decorate([
     customElement('umb-block-grid-entries')
 ], UmbBlockGridEntriesElement);

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

@@ -262,12 +262,9 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
 		`;
     }
     #renderCreateButtonGroup() {
-        if (this.readonly && this._layouts.length > 0) {
+        if (this._layouts.length > 0 && (this._limitMax === 1 || this.readonly))
             return nothing;
-        }
-        else {
-            return html `<uui-button-group>${this.#renderCreateButton()}${this.#renderPasteButton()}</uui-button-group>`;
-        }
+        return html `<uui-button-group>${this.#renderCreateButton()}${this.#renderPasteButton()}</uui-button-group>`;
     }
     #renderInlineCreateButton(index) {
         if (this.readonly)

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.js

@@ -261,6 +261,8 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         const segments = this.structure.variesBySegment ? [] : undefined;
         const repo = new UmbDataTypeDetailRepository(this);
         const propertyTypes = await this.structure.getContentTypeProperties();
+        const contentTypeVariesByCulture = this.structure.getVariesByCulture();
+        const contentTypeVariesBySegment = this.structure.getVariesBySegment();
         const valueDefinitions = await Promise.all(propertyTypes.map(async (property) => {
             // TODO: Implement caching for data-type requests. [NL]
             const dataType = (await repo.requestByUnique(property.dataType.unique)).data;
@@ -277,8 +279,9 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
                 propertyEditorSchemaAlias: dataType.editorAlias,
                 config: dataType.values,
                 typeArgs: {
-                    variesByCulture: property.variesByCulture,
-                    variesBySegment: property.variesBySegment,
+                    // Only vary if the content type varies:
+                    variesByCulture: contentTypeVariesByCulture ? property.variesByCulture : false,
+                    variesBySegment: contentTypeVariesBySegment ? property.variesBySegment : false,
                 },
             };
         }));

package/dist-cms/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.js

@@ -168,6 +168,8 @@ let UmbInputMultipleTextStringElement = class UmbInputMultipleTextStringElement
     #renderAddButton() {
         if (this.disabled || this.readonly)
             return nothing;
+        if (this.max === 1 && this._items.length > 0)
+            return nothing;
         return html `
 			<uui-button
 				color="default"

package/dist-cms/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.d.ts

@@ -1,4 +1,5 @@
 import type { UmbIconPickerModalData, UmbIconPickerModalValue } from './icon-picker-modal.token.js';
+import { nothing } from '../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../modal/index.js';
 export declare class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalValue> {
     #private;
@@ -9,6 +10,7 @@ export declare class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIc
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     renderSearch(): import("lit-html").TemplateResult<1>;
+    renderColors(): typeof nothing | import("lit-html").TemplateResult<1>;
     renderIcons(): unknown;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.js

@@ -61,23 +61,7 @@ let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModal
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectIcon')}>
 				<div id="container">
 					${this.renderSearch()}
-					<hr />
-					<uui-color-swatches
-						value=${ifDefined(this.value.color)}
-						label=${this.localize.term('defaultdialogs_colorSwitcher')}
-						@change=${this.#onColorChange}>
-						${
-        // TODO: Missing localization for the color aliases. [NL]
-        this._colorList.map((color) => html `
-									<uui-color-swatch
-										label=${color.alias}
-										title=${color.alias}
-										value=${color.alias}
-										style="--uui-swatch-color: var(${color.varName})">
-									</uui-color-swatch>
-								`)}
-					</uui-color-swatches>
-					<hr />
+					${this.renderColors()}
 					<uui-scroll-container id="icons">
 						${this.data?.showEmptyOption && !this._isSearching
             ? html `
@@ -121,8 +105,28 @@ let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModal
 				${umbFocus()}>
 				<uui-icon name="search" slot="prepend" id="search_icon"></uui-icon>
 			</uui-input>
+			<hr />
 		`;
     }
+    renderColors() {
+        return this.data?.hideColors === true
+            ? nothing
+            : html `<uui-color-swatches
+						value=${ifDefined(this.value.color)}
+						label=${this.localize.term('defaultdialogs_colorSwitcher')}
+						@change=${this.#onColorChange}>
+						${this._colorList.map((color) => html `
+									<uui-color-swatch
+										label=${color.alias}
+										title=${color.alias}
+										value=${color.alias}
+										style="--uui-swatch-color: var(${color.varName})">
+									</uui-color-swatch>
+								`)}
+					</uui-color-swatches>
+					<hr />
+			`;
+    }
     renderIcons() {
         return this._iconsFiltered
             ? repeat(this._iconsFiltered, (icon) => icon.name, (icon) => html `

package/dist-cms/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.d.ts

@@ -2,6 +2,7 @@ import { UmbModalToken } from '../../modal/index.js';
 export interface UmbIconPickerModalData {
     placeholder?: string;
     showEmptyOption?: boolean;
+    hideColors?: boolean;
 }
 export interface UmbIconPickerModalValue {
     color: string | undefined;

package/dist-cms/packages/documents/documents/components/input-document/input-document.element.js

@@ -150,7 +150,7 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends UmbFormContr
         return html `${this.#renderItems()} ${this.#renderAddButton()}`;
     }
     #renderAddButton() {
-        if (this.selection.length >= this.max)
+        if (this.selection.length > 0 && this.max === 1)
             return nothing;
         if (this.readonly && this.selection.length > 0) {
             return nothing;

package/dist-cms/packages/media/media/components/input-rich-media/input-rich-media.element.js

@@ -299,6 +299,8 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
     #renderAddButton() {
         if (this.readonly)
             return nothing;
+        if (this.max === 1 && this._cards.length > 0)
+            return nothing;
         return html `
 			<uui-button
 				id="btn-add"
@@ -355,6 +357,8 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         css `
 			:host {
 				position: relative;
+				display: block;
+				width: 100%;
 			}
 			.container {
 				display: grid;

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

@@ -4,7 +4,7 @@ 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 { getMimeTypeFromExtension } from '../../components/index.js';
+import { getMimeTypeFromExtension } from './utils.js';
 import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';

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

@@ -20,9 +20,12 @@ let UmbInputUploadFieldSvgElement = class UmbInputUploadFieldSvgElement extends
     static { this.styles = [
         css `
 			:host {
+				height: 100%;
 				min-height: 240px;
 				max-height: 400px;
+
 				width: fit-content;
+				min-width: 240px;
 				max-width: 100%;
 			}
 

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

@@ -24,14 +24,17 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
     getItems() {
         return this._progressItems;
     }
+    #dragCounter;
     constructor() {
         super();
         this.parentUnique = null;
+        this.#dragCounter = 0;
         this._manager = new UmbMediaDropzoneManager(this);
         this.progressItems = () => this._manager.progressItems;
         this.progress = () => this._manager.progress;
         document.addEventListener('dragenter', this.#handleDragEnter.bind(this));
         document.addEventListener('dragleave', this.#handleDragLeave.bind(this));
+        document.addEventListener('dragover', this.#handleDragOver.bind(this));
         document.addEventListener('drop', this.#handleDrop.bind(this));
         // TODO: Revisit this. I am not sure why it is needed to call these methods here when they are already called in the constructor of the parent class.
         // If we do not call them here, the observer will use the wrong instance of the dropzone manager (UmbDropZoneManager instead of UmbMediaDropzoneManager).
@@ -51,6 +54,7 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
         super.disconnectedCallback();
         document.removeEventListener('dragenter', this.#handleDragEnter.bind(this));
         document.removeEventListener('dragleave', this.#handleDragLeave.bind(this));
+        document.removeEventListener('dragover', this.#handleDragOver.bind(this));
         document.removeEventListener('drop', this.#handleDrop.bind(this));
     }
     async onUpload(event) {
@@ -64,21 +68,31 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
     #handleDragEnter(e) {
         if (this.disabled)
             return;
-        // Avoid collision with UmbSorterController
-        const types = e.dataTransfer?.types;
-        if (!types?.length || !types?.includes('Files'))
+        // Normalize types for Safari
+        const types = Array.from(e.dataTransfer?.types || []).map((t) => t.toLowerCase());
+        if (!types.includes('files'))
             return;
+        this.#dragCounter++;
         this.toggleAttribute('dragging', true);
+        e.preventDefault();
+    }
+    #handleDragOver(e) {
+        e.preventDefault();
     }
     #handleDragLeave() {
         if (this.disabled)
             return;
-        this.toggleAttribute('dragging', false);
+        this.#dragCounter--;
+        if (this.#dragCounter <= 0) {
+            this.toggleAttribute('dragging', false);
+            this.#dragCounter = 0;
+        }
     }
     #handleDrop(event) {
         event.preventDefault();
         if (this.disabled)
             return;
+        this.#dragCounter = 0;
         this.toggleAttribute('dragging', false);
     }
     static { this.styles = [

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.d.ts

@@ -1,5 +1,6 @@
 import type { UmbImageCropperEditorModalData, UmbImageCropperEditorModalValue } from './image-cropper-editor-modal.token.js';
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+import '../../components/input-upload-field/file-upload-preview.element.js';
 export declare class UmbImageCropperEditorModalElement extends UmbModalBaseElement<UmbImageCropperEditorModalData<any>, UmbImageCropperEditorModalValue> {
     #private;
     private _imageCropperValue?;

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.js

@@ -12,6 +12,7 @@ import { UmbTemporaryFileConfigRepository } from '../../../../core/temporary-fil
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '../../../../core/modal/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
+import '../../components/input-upload-field/file-upload-preview.element.js';
 let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement extends UmbModalBaseElement {
     #urlRepository;
     #config;

package/dist-cms/packages/performance-profiling/dashboard-performance-profiling.element.d.ts

@@ -3,10 +3,11 @@ export declare class UmbDashboardPerformanceProfilingElement extends UmbLitEleme
     #private;
     private _profilingStatus;
     private _isDebugMode;
+    private _isLoading;
     private _toggle;
-    firstUpdated(): void;
-    private _getProfilingStatus;
-    private _changeProfilingStatus;
+    private _notificationContext;
+    constructor();
+    firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/performance-profiling/dashboard-performance-profiling.element.js

@@ -5,56 +5,99 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbTextStyles } from '../core/style/index.js';
-import { css, html, customElement, state, query, unsafeHTML } from '../../external/lit/index.js';
+import { css, html, customElement, state, query, when } from '../../external/lit/index.js';
 import { UmbLitElement } from '../core/lit-element/index.js';
 import { ProfilingService } from '../core/backend-api/index.js';
 import { tryExecute } from '../core/resources/index.js';
+import { UMB_NOTIFICATION_CONTEXT } from '../core/notification/index.js';
 let UmbDashboardPerformanceProfilingElement = class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this._profilingStatus = true;
         // TODO: Get this from the management api configuration when available
         this._isDebugMode = true;
+        this._isLoading = true;
+        this.consumeContext(UMB_NOTIFICATION_CONTEXT, (notificationContext) => {
+            this._notificationContext = notificationContext;
+        });
     }
     #setToggle(value) {
         this._toggle.checked = value;
         this._profilingStatus = value;
+        this._isLoading = false;
     }
-    firstUpdated() {
-        this._getProfilingStatus();
+    async firstUpdated() {
+        const status = await this.#getProfilingStatus();
+        this.#setToggle(status);
     }
-    async _getProfilingStatus() {
+    async #getProfilingStatus() {
         const { data } = await tryExecute(this, ProfilingService.getProfilingStatus());
-        if (!data)
+        return data?.enabled ?? false;
+    }
+    async #disableProfilingStatus() {
+        this._isLoading = true;
+        const { error } = await tryExecute(this, ProfilingService.putProfilingStatus({ body: { enabled: false } }));
+        if (error) {
+            this.#setToggle(true);
             return;
-        this._profilingStatus = data.enabled ?? false;
+        }
+        // Test that it was actually disabled
+        const status = await this.#getProfilingStatus();
+        if (status) {
+            this.#setToggle(true);
+            this._notificationContext?.peek('warning', {
+                data: {
+                    headline: this.localize.term('profiling_errorDisablingProfilerTitle'),
+                    message: this.localize.term('profiling_errorDisablingProfilerDescription'),
+                },
+            });
+            return;
+        }
+        this.#setToggle(false);
     }
-    async _changeProfilingStatus() {
-        const { error } = await tryExecute(this, ProfilingService.putProfilingStatus({ body: { enabled: !this._profilingStatus } }));
+    async #enableProfilingStatus() {
+        this._isLoading = true;
+        const { error } = await tryExecute(this, ProfilingService.putProfilingStatus({ body: { enabled: true } }));
         if (error) {
-            this.#setToggle(this._profilingStatus);
+            this.#setToggle(false);
+            return;
         }
-        else {
-            this.#setToggle(!this._profilingStatus);
+        // Test that it was actually enabled
+        const status = await this.#getProfilingStatus();
+        if (!status) {
+            this.#setToggle(false);
+            this._notificationContext?.peek('warning', {
+                data: {
+                    headline: this.localize.term('profiling_errorEnablingProfilerTitle'),
+                    message: this.localize.term('profiling_errorEnablingProfilerDescription'),
+                },
+            });
+            return;
         }
+        this.#setToggle(true);
     }
     #renderProfilingStatus() {
         return this._isDebugMode
             ? html `
-					${unsafeHTML(this.localize.term('profiling_performanceProfilingDescription'))}
+					<umb-localize key="profiling_performanceProfilingDescription"></umb-localize>
 
 					<uui-toggle
 						id="toggle"
 						label=${this.localize.term('profiling_activateByDefault')}
 						label-position="left"
 						?checked="${this._profilingStatus}"
-						@change="${this._changeProfilingStatus}"></uui-toggle>
+						?disabled="${this._isLoading}"
+						@change="${() => this._profilingStatus ? this.#disableProfilingStatus() : this.#enableProfilingStatus()}"></uui-toggle>
+
+					${when(this._isLoading, () => html `<uui-loader-circle></uui-loader-circle>`)}
 
-					<h4>${this.localize.term('profiling_reminder')}</h4>
+					<h4>
+						<umb-localize key="profiling_reminder"></umb-localize>
+					</h4>
 
-					${unsafeHTML(this.localize.term('profiling_reminderDescription'))}
+					<umb-localize key="profiling_reminderDescription"></umb-localize>
 				`
-            : html ` ${unsafeHTML(this.localize.term('profiling_profilerEnabledDescription'))} `;
+            : html `<umb-localize key="profiling_profilerEnabledDescription"></umb-localize>`;
     }
     render() {
         return html `
@@ -93,6 +136,9 @@ __decorate([
 __decorate([
     state()
 ], UmbDashboardPerformanceProfilingElement.prototype, "_isDebugMode", void 0);
+__decorate([
+    state()
+], UmbDashboardPerformanceProfilingElement.prototype, "_isLoading", void 0);
 __decorate([
     query('#toggle')
 ], UmbDashboardPerformanceProfilingElement.prototype, "_toggle", void 0);

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

@@ -16,6 +16,12 @@ export const manifests = [
                         description: 'Icon name to show when no icon is selected',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
                     },
+                    {
+                        alias: 'hideColors',
+                        label: 'Hide colors',
+                        description: 'Hide color swatches from modal',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                    },
                 ],
             },
         },

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

@@ -12,6 +12,7 @@ export declare class UmbPropertyEditorUIIconPickerElement extends UmbPropertyEdi
     private _icon;
     private _color;
     private _placeholderIcon;
+    private _hideColors;
     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

@@ -21,6 +21,7 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
         this._icon = '';
         this._color = '';
         this._placeholderIcon = '';
+        this._hideColors = false;
     }
     firstUpdated() {
         this.addValidator('valueMissing', () => 'Icon is required', () => this.mandatory && !this._icon);
@@ -46,6 +47,7 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
             return;
         const placeholder = config.getValueByAlias('placeholder');
         this._placeholderIcon = typeof placeholder === 'string' ? placeholder : '';
+        this._hideColors = config.getValueByAlias('hideColors');
     }
     async _openModal() {
         const data = await umbOpenModal(this, UMB_ICON_PICKER_MODAL, {
@@ -53,7 +55,7 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
                 icon: this._icon,
                 color: this._color,
             },
-            data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory },
+            data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory, hideColors: this._hideColors },
         }).catch(() => undefined);
         if (!data)
             return;
@@ -102,6 +104,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIIconPickerElement.prototype, "_placeholderIcon", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIIconPickerElement.prototype, "_hideColors", void 0);
 UmbPropertyEditorUIIconPickerElement = __decorate([
     customElement('umb-property-editor-ui-icon-picker')
 ], UmbPropertyEditorUIIconPickerElement);