@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/core/entry-point.js

@@ -13,6 +13,7 @@ import './extension-registry/components/index.js';
 import './menu/components/index.js';
 import './property-action/components/index.js';
 import './property-editor-data-source/global-components.js';
+import './property-sort-mode/global-components/index.js';
 export const onInit = (host, extensionRegistry) => {
     new UmbExtensionsApiInitializer(host, extensionRegistry, 'globalContext', [host]);
     new UmbExtensionsApiInitializer(host, extensionRegistry, 'store', [host]);

package/dist-cms/packages/core/extension-registry/components/extension-slot/extension-slot.element.js

@@ -119,10 +119,10 @@ let UmbExtensionSlotElement = class UmbExtensionSlotElement extends UmbLitElemen
         return this._permitted
             ? this._permitted.length > 0
                 ? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension)
-                : this.#renderNoting()
+                : this.#renderNothing()
             : nothing;
     }
-    #renderNoting() {
+    #renderNothing() {
         return this.fallbackRenderMethod ? this.fallbackRenderMethod() : html `<slot></slot>`;
     }
     #renderExtension = (ext, i) => {

package/dist-cms/packages/core/icon-registry/icon-dictionary.json

@@ -1972,6 +1972,10 @@
             "name": "icon-snow",
             "file": "cloud-snow.svg"
         },
+        {
+            "name": "icon-sort",
+            "file": "arrow-down-up.svg"
+        },
         {
             "name": "icon-sound-low",
             "file": "volume-1.svg"
@@ -2593,6 +2597,7 @@
             "file": "land-plot.svg"
         }
     ],
+    "custom": [],
     "simpleIcons": [
         {
             "name": "icon-facebook",
@@ -2626,277 +2631,282 @@
     "umbraco": [
         {
             "name": "icon-art-easel",
-            "file": "icon-art-easel.svg",
+            "file": "legacy/icon-art-easel.svg",
             "legacy": true
         },
         {
             "name": "icon-article",
-            "file": "icon-article.svg",
+            "file": "legacy/icon-article.svg",
             "legacy": true
         },
         {
             "name": "icon-auction-hammer",
-            "file": "icon-auction-hammer.svg",
+            "file": "legacy/icon-auction-hammer.svg",
             "legacy": true
         },
         {
             "name": "icon-badge-count",
-            "file": "icon-badge-count.svg",
+            "file": "legacy/icon-badge-count.svg",
             "legacy": true
         },
         {
             "name": "icon-band-aid",
-            "file": "icon-band-aid.svg",
+            "file": "legacy/icon-band-aid.svg",
             "legacy": true
         },
         {
             "name": "icon-baby-stroller",
-            "file": "icon-baby-stroller.svg",
+            "file": "legacy/icon-baby-stroller.svg",
             "legacy": true
         },
         {
             "name": "icon-bill-dollar",
-            "file": "icon-bill-dollar.svg",
+            "file": "legacy/icon-bill-dollar.svg",
             "legacy": true
         },
         {
             "name": "icon-bill-euro",
-            "file": "icon-bill-euro.svg",
+            "file": "legacy/icon-bill-euro.svg",
             "legacy": true
         },
         {
             "name": "icon-bill-pound",
-            "file": "icon-bill-pound.svg",
+            "file": "legacy/icon-bill-pound.svg",
             "legacy": true
         },
         {
             "name": "icon-bill-yen",
-            "file": "icon-bill-yen.svg",
+            "file": "legacy/icon-bill-yen.svg",
             "legacy": true
         },
         {
             "name": "icon-bill",
-            "file": "icon-bill.svg",
+            "file": "legacy/icon-bill.svg",
             "legacy": true
         },
         {
             "name": "icon-billboard",
-            "file": "icon-billboard.svg",
+            "file": "legacy/icon-billboard.svg",
             "legacy": true
         },
         {
             "name": "icon-bills-dollar",
-            "file": "icon-bills-dollar.svg",
+            "file": "legacy/icon-bills-dollar.svg",
             "legacy": true
         },
         {
             "name": "icon-bills-euro",
-            "file": "icon-bills-euro.svg",
+            "file": "legacy/icon-bills-euro.svg",
             "legacy": true
         },
         {
             "name": "icon-bills-pound",
-            "file": "icon-bills-pound.svg",
+            "file": "legacy/icon-bills-pound.svg",
             "legacy": true
         },
         {
             "name": "icon-bills-yen",
-            "file": "icon-bills-yen.svg",
+            "file": "legacy/icon-bills-yen.svg",
             "legacy": true
         },
         {
             "name": "icon-bills",
-            "file": "icon-bills.svg",
+            "file": "legacy/icon-bills.svg",
             "legacy": true
         },
         {
             "name": "icon-blueprint",
-            "file": "icon-blueprint.svg",
+            "file": "legacy/icon-blueprint.svg",
             "legacy": true
         },
         {
             "name": "icon-bomb",
-            "file": "icon-bomb.svg",
+            "file": "legacy/icon-bomb.svg",
             "legacy": true
         },
         {
             "name": "icon-cash-register",
-            "file": "icon-cash-register.svg",
+            "file": "legacy/icon-cash-register.svg",
             "legacy": true
         },
         {
             "name": "icon-checkbox-dotted-active",
-            "file": "icon-checkbox-dotted-active.svg",
+            "file": "legacy/icon-checkbox-dotted-active.svg",
             "legacy": true
         },
         {
             "name": "icon-chess",
-            "file": "icon-chess.svg",
+            "file": "legacy/icon-chess.svg",
             "legacy": true
         },
         {
             "name": "icon-circus",
-            "file": "icon-circus.svg",
+            "file": "legacy/icon-circus.svg",
             "legacy": true
         },
         {
             "name": "icon-clothes-hanger",
-            "file": "icon-clothes-hanger.svg",
+            "file": "legacy/icon-clothes-hanger.svg",
             "legacy": true
         },
         {
             "name": "icon-coin",
-            "file": "icon-coin.svg",
+            "file": "legacy/icon-coin.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-dollar-alt",
-            "file": "icon-coins-dollar-alt.svg",
+            "file": "legacy/icon-coins-dollar-alt.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-dollar",
-            "file": "icon-coins-dollar.svg",
+            "file": "legacy/icon-coins-dollar.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-euro-alt",
-            "file": "icon-coins-euro-alt.svg",
+            "file": "legacy/icon-coins-euro-alt.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-euro",
-            "file": "icon-coins-euro.svg",
+            "file": "legacy/icon-coins-euro.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-pound-alt",
-            "file": "icon-coins-pound-alt.svg",
+            "file": "legacy/icon-coins-pound-alt.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-pound",
-            "file": "icon-coins-pound.svg",
+            "file": "legacy/icon-coins-pound.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-yen-alt",
-            "file": "icon-coins-yen-alt.svg",
+            "file": "legacy/icon-coins-yen-alt.svg",
             "legacy": true
         },
         {
             "name": "icon-coins-yen",
-            "file": "icon-coins-yen.svg",
+            "file": "legacy/icon-coins-yen.svg",
             "legacy": true
         },
         {
             "name": "icon-comb",
-            "file": "icon-comb.svg",
+            "file": "legacy/icon-comb.svg",
             "legacy": true
         },
         {
             "name": "icon-desk",
-            "file": "icon-desk.svg",
+            "file": "legacy/icon-desk.svg",
             "legacy": true
         },
         {
             "name": "icon-dollar-bag",
-            "file": "icon-dollar-bag.svg",
+            "file": "legacy/icon-dollar-bag.svg",
             "legacy": true
         },
         {
             "name": "icon-eject",
-            "file": "icon-eject.svg",
+            "file": "legacy/icon-eject.svg",
             "legacy": true
         },
         {
             "name": "icon-euro-bag",
-            "file": "icon-euro-bag.svg",
+            "file": "legacy/icon-euro-bag.svg",
             "legacy": true
         },
         {
             "name": "icon-female-symbol",
-            "file": "icon-female-symbol.svg",
+            "file": "legacy/icon-female-symbol.svg",
             "legacy": true
         },
         {
             "name": "icon-firewall",
-            "file": "icon-firewall.svg",
+            "file": "legacy/icon-firewall.svg",
             "legacy": true
         },
         {
             "name": "icon-folder-open",
-            "file": "icon-folder-open.svg",
+            "file": "legacy/icon-folder-open.svg",
             "legacy": true
         },
         {
             "name": "icon-folder-outline",
-            "file": "icon-folder-outline.svg",
+            "file": "legacy/icon-folder-outline.svg",
             "legacy": true
         },
         {
             "name": "icon-handprint",
-            "file": "icon-handprint.svg",
+            "file": "legacy/icon-handprint.svg",
             "legacy": true
         },
         {
             "name": "icon-hat",
-            "file": "icon-hat.svg",
+            "file": "legacy/icon-hat.svg",
             "legacy": true
         },
         {
             "name": "icon-hd",
-            "file": "icon-hd.svg",
+            "file": "legacy/icon-hd.svg",
             "legacy": true
         },
         {
             "name": "icon-inactive-line",
-            "file": "icon-inactive-line.svg",
+            "file": "legacy/icon-inactive-line.svg",
             "legacy": true
         },
         {
             "name": "icon-keychain",
-            "file": "icon-keychain.svg",
+            "file": "legacy/icon-keychain.svg",
             "legacy": true
         },
         {
             "name": "icon-keyhole",
-            "file": "icon-keyhole.svg",
+            "file": "legacy/icon-keyhole.svg",
             "legacy": true
         },
         {
             "name": "icon-linkedin",
-            "file": "icon-linkedin.svg",
+            "file": "legacy/icon-linkedin.svg",
             "legacy": true
         },
         {
             "name": "icon-linux-tux",
-            "file": "icon-linux-tux.svg",
+            "file": "legacy/icon-linux-tux.svg",
             "legacy": true
         },
         {
             "name": "icon-male-and-female",
-            "file": "icon-users.svg",
+            "file": "legacy/icon-users.svg",
             "legacy": true
         },
         {
             "name": "icon-male-symbol",
-            "file": "icon-male-symbol.svg",
+            "file": "legacy/icon-male-symbol.svg",
             "legacy": true
         },
         {
             "name": "icon-molecular-network",
-            "file": "icon-molecular-network.svg",
+            "file": "legacy/icon-molecular-network.svg",
             "legacy": true
         },
         {
             "name": "icon-molecular",
-            "file": "icon-molecular.svg",
+            "file": "legacy/icon-molecular.svg",
             "legacy": true
         },
+        {
+            "name": "icon-trash-empty",
+            "file": "legacy/icon-trash-empty.svg",
+            "internal": true
+        },
         {
             "name": "icon-umbraco",
-            "file": "icon-umbraco.svg"
+            "file": "legacy/icon-umbraco.svg"
         }
     ]
 }

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

@@ -1,13 +1,16 @@
 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;
     private _searchInput?;
     private _iconsFiltered?;
     private _colorList;
+    private _isSearching;
     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

@@ -10,11 +10,13 @@ import { extractUmbColorVariable, umbracoColors } from '../../resources/index.js
 import { umbFocus } from '../../lit-element/index.js';
 import { UmbModalBaseElement } from '../../modal/index.js';
 import { UmbTextStyles } from '../../style/index.js';
+import { toCamelCase } from '../../utils/index.js';
 let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModalBaseElement {
     #icons;
     constructor() {
         super();
         this._colorList = umbracoColors.filter((color) => !color.legacy);
+        this._isSearching = false;
         this.#clearIcon = () => {
             this.modalContext?.updateValue({ icon: '' });
         };
@@ -30,9 +32,11 @@ let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModal
             return;
         const value = this._searchInput?.value;
         if (value) {
+            this._isSearching = value.length > 0;
             this._iconsFiltered = this.#icons.filter((icon) => icon.name.toLowerCase().includes(value.toLowerCase()));
         }
         else {
+            this._isSearching = false;
             this._iconsFiltered = this.#icons;
         }
     }
@@ -40,8 +44,13 @@ let UmbIconPickerModalElement = class UmbIconPickerModalElement extends UmbModal
         const isActivate = e.type === 'click' || (e.type === 'keyup' && e.key === 'Enter');
         if (!isActivate)
             return;
-        const nextIcon = this.value.icon === iconName ? '' : iconName;
-        this.modalContext?.updateValue({ icon: nextIcon });
+        if (this.data?.showEmptyOption) {
+            const nextIcon = this.value.icon === iconName ? '' : iconName;
+            this.modalContext?.updateValue({ icon: nextIcon });
+        }
+        else {
+            this.modalContext?.updateValue({ icon: iconName });
+        }
     }
     #onColorChange(e) {
         const colorAlias = e.target.value;
@@ -53,35 +62,24 @@ 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">
-						<uui-button
-							class=${!this.value.icon ? 'selected' : ''}
-							label=${this.localize.term('defaultdialogs_noIcon')}
-							title=${this.localize.term('defaultdialogs_noIcon')}
-							@click=${this.#clearIcon}
-							@keyup=${(e) => {
-            if (e.key === 'Enter' || e.key === ' ')
-                this.#clearIcon();
-        }}>
-							<uui-icon style="opacity:.35" name=${ifDefined(this.data?.placeholder)}></uui-icon> </uui-button
-						>${this.renderIcons()}</uui-scroll-container
+						${this.data?.showEmptyOption && !this._isSearching
+            ? html `
+									<uui-button
+										class=${!this.value.icon ? 'selected' : ''}
+										label=${this.localize.term('defaultdialogs_noIcon')}
+										title=${this.localize.term('defaultdialogs_noIcon')}
+										@click=${this.#clearIcon}
+										@keyup=${(e) => {
+                if (e.key === 'Enter' || e.key === ' ')
+                    this.#clearIcon();
+            }}>
+										<uui-icon style="opacity:.35" name=${ifDefined(this.data?.placeholder)}></uui-icon>
+									</uui-button>
+								`
+            : nothing}
+						${this.renderIcons()}</uui-scroll-container
 					>
 				</div>
 				<uui-button
@@ -108,8 +106,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=${this.localize.term('colors_' + toCamelCase(color.alias))}
+										title=${this.localize.term('colors_' + toCamelCase(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 `
@@ -201,6 +219,9 @@ __decorate([
 __decorate([
     state()
 ], UmbIconPickerModalElement.prototype, "_colorList", void 0);
+__decorate([
+    state()
+], UmbIconPickerModalElement.prototype, "_isSearching", void 0);
 UmbIconPickerModalElement = __decorate([
     customElement('umb-icon-picker-modal')
 ], UmbIconPickerModalElement);

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

@@ -1,6 +1,8 @@
 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/core/icon-registry/icons/icon-company.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" class=\"lucide lucide-building-2\" viewBox=\"0 0 24 24\"><path d=\"M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18ZM6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4\"/></svg>";
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" class=\"lucide lucide-building-2\" viewBox=\"0 0 24 24\"><path d=\"M10 12h4M10 8h4M14 21v-3a2 2 0 0 0-4 0v3\"/><path d=\"M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2\"/><path d=\"M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16\"/></svg>";
 export default _default;

package/dist-cms/packages/core/icon-registry/icons/icon-company.js

@@ -1 +1 @@
-export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-building-2" viewBox="0 0 24 24"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18ZM6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4"/></svg>`;
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-building-2" viewBox="0 0 24 24"><path d="M10 12h4M10 8h4M14 21v-3a2 2 0 0 0-4 0v3"/><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"/><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/></svg>`;

package/dist-cms/packages/core/icon-registry/icons/icon-sort.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" class=\"lucide lucide-arrow-down-up\" viewBox=\"0 0 24 24\"><path d=\"m3 16 4 4 4-4M7 20V4M21 8l-4-4-4 4M17 4v16\"/></svg>";
+export default _default;

package/dist-cms/packages/core/icon-registry/icons/icon-sort.js

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-arrow-down-up" viewBox="0 0 24 24"><path d="m3 16 4 4 4-4M7 20V4M21 8l-4-4-4 4M17 4v16"/></svg>`;

package/dist-cms/packages/core/icon-registry/icons/icon-trash-empty.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" class=\"lucide lucide-trash-2\" viewBox=\"0 0 24 24\"><path d=\"m14.6 11.4-5.2 5.2m0-5.2 5.2 5.2M19 6v14c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V6M3 6h18M8 6V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2\" class=\"cls-1\"/></svg>";
+export default _default;

package/dist-cms/packages/core/icon-registry/icons/icon-trash-empty.js

@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" class="lucide lucide-trash-2" viewBox="0 0 24 24"><path d="m14.6 11.4-5.2 5.2m0-5.2 5.2 5.2M19 6v14c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V6M3 6h18M8 6V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2" class="cls-1"/></svg>`;

package/dist-cms/packages/core/icon-registry/icons.d.ts

@@ -1706,6 +1706,10 @@ declare const _default: ({
     name: string;
     path: () => Promise<typeof import("./icons/icon-snow.js")>;
     hidden?: undefined;
+} | {
+    name: string;
+    path: () => Promise<typeof import("./icons/icon-sort.js")>;
+    hidden?: undefined;
 } | {
     name: string;
     path: () => Promise<typeof import("./icons/icon-sound-low.js")>;
@@ -2418,6 +2422,10 @@ declare const _default: ({
     name: string;
     hidden: boolean;
     path: () => Promise<typeof import("./icons/icon-molecular.js")>;
+} | {
+    name: string;
+    path: () => Promise<typeof import("./icons/icon-trash-empty.js")>;
+    hidden?: undefined;
 } | {
     name: string;
     path: () => Promise<typeof import("./icons/icon-umbraco.js")>;

package/dist-cms/packages/core/icon-registry/icons.js

@@ -1499,6 +1499,9 @@ export default [{
     }, {
         name: "icon-snow",
         path: () => import("./icons/icon-snow.js"),
+    }, {
+        name: "icon-sort",
+        path: () => import("./icons/icon-sort.js"),
     }, {
         name: "icon-sound-low",
         path: () => import("./icons/icon-sound-low.js"),
@@ -2208,6 +2211,9 @@ export default [{
         name: "icon-molecular",
         hidden: true,
         path: () => import("./icons/icon-molecular.js"),
+    }, {
+        name: "icon-trash-empty",
+        path: () => import("./icons/icon-trash-empty.js"),
     }, {
         name: "icon-umbraco",
         path: () => import("./icons/icon-umbraco.js"),

package/dist-cms/packages/core/localization/localize-number.element.d.ts

@@ -17,8 +17,8 @@ export declare class UmbLocalizeNumberElement extends UmbLitElement {
      * @example options={ style: 'currency', currency: 'EUR' }
      */
     options?: Intl.NumberFormatOptions;
-    protected get text(): string;
-    render(): import("lit-html").TemplateResult<1>;
+    protected get text(): string | null;
+    render(): import("lit-html").TemplateResult<1> | import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist-cms/packages/core/localization/localize-number.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 { css, customElement, html, property, state, unsafeHTML } from '../../../external/lit/index.js';
+import { css, customElement, html, property, state, unsafeHTML, when } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../lit-element/index.js';
 /**
  * This element allows you to localize a number
@@ -16,7 +16,7 @@ let UmbLocalizeNumberElement = class UmbLocalizeNumberElement extends UmbLitElem
         return this.localize.number(this.number, this.options);
     }
     render() {
-        return this.number ? html `${unsafeHTML(this.text)}` : html `<slot></slot>`;
+        return when(this.text, (text) => unsafeHTML(text), () => html `<slot></slot>`);
     }
     static { this.styles = [
         css `
@@ -30,7 +30,7 @@ __decorate([
     property()
 ], UmbLocalizeNumberElement.prototype, "number", void 0);
 __decorate([
-    property()
+    property({ type: Object })
 ], UmbLocalizeNumberElement.prototype, "options", void 0);
 __decorate([
     state()