@umbraco-cms/backoffice 17.3.3 → 17.4.0-rc

package/dist-cms/packages/packages/package-section/views/installed/installed-packages-section-view-item.element.js

@@ -68,7 +68,7 @@ let UmbInstalledPackagesSectionViewItemElement = class UmbInstalledPackagesSecti
         await umbConfirmModal(this, {
             color: 'positive',
             headline: this.name,
-            content: this.localize.term('packager_packageMigrationsConfirmText'),
+            content: '#packager_packageMigrationsConfirmText',
         });
         this._migrationButtonState = 'waiting';
         const { error } = await tryExecute(this, PackageService.postPackageByNameRunMigration({ path: { name: this.name } }));

package/dist-cms/packages/property-editors/date-time/property-editor-ui-date-time-picker-base.js

@@ -232,7 +232,7 @@ export class UmbPropertyEditorUiDateTimePickerElementBase extends UmbFormControl
         }
         const previousDate = this._selectedDate;
         this._selectedDate = newDate;
-        let timeZoneToStore = null;
+        let timeZoneToStore;
         if (!this._displayTimeZone || !this._timeZoneMode) {
             timeZoneToStore = null;
         }

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

@@ -117,7 +117,7 @@ let UmbPropertyEditorUIDropdownElement = class UmbPropertyEditorUIDropdownElemen
             return html `<div>${this.value?.join(', ')}</div>`;
         }
         return html `
-			<select id="native" multiple ?required=${this.mandatory} @change=${this.#onChangeMultiple}>
+			<select id="native" aria-label="${this.name ?? this.localize.term('general_choose')}" multiple ?required=${this.mandatory} @change=${this.#onChangeMultiple}>
 				${map(this._options, (item) => html `<option value=${item.value} ?selected=${item.selected}>${item.name}</option>`)}
 			</select>
 		`;

package/dist-cms/packages/property-editors/entity-data-picker/input/input-entity-data.context.js

@@ -83,7 +83,7 @@ export class UmbEntityDataPickerInputContext extends UmbPickerInputContext {
         this.modalAlias = this.getModalAlias();
         await super.openPicker(pickerData);
     }
-    #setModalToken() {
+    async #setModalToken() {
         if (!this.#dataSourceApi)
             return;
         const dataSourceApi = this.#dataSourceApi;
@@ -91,7 +91,7 @@ export class UmbEntityDataPickerInputContext extends UmbPickerInputContext {
         const isCollectionDataSource = isPickerCollectionDataSource(dataSourceApi);
         // Choose the picker type based on what the data source supports
         if (isTreeDataSource) {
-            const token = this.#createTreeItemPickerModalToken(dataSourceApi);
+            const token = await this.#createTreeItemPickerModalToken(dataSourceApi);
             this.setModalAlias(token);
         }
         else if (isCollectionDataSource) {
@@ -102,8 +102,9 @@ export class UmbEntityDataPickerInputContext extends UmbPickerInputContext {
             throw new Error('The data source API is not a supported type of picker data source.');
         }
     }
-    #createTreeItemPickerModalToken(api) {
+    async #createTreeItemPickerModalToken(api) {
         const supportsSearch = isPickerSearchableDataSource(api);
+        const startNode = api.requestTreeStartNode ? await api.requestTreeStartNode() : undefined;
         return new UmbModalToken(UMB_TREE_PICKER_MODAL_ALIAS, {
             modal: {
                 type: 'sidebar',
@@ -120,6 +121,7 @@ export class UmbEntityDataPickerInputContext extends UmbPickerInputContext {
                         pickableFilter: api.searchPickableFilter,
                     }
                     : undefined,
+                startNode,
             },
         });
     }

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

@@ -12,7 +12,7 @@ export const manifests = [
         type: 'propertyEditorUi',
         alias: 'Umb.PropertyEditorUi.Decimal',
         name: 'Decimal Property Editor UI',
-        element: () => import('./property-editor-ui-number.element.js'),
+        element: () => import('./property-editor-ui-decimal.element.js'),
         meta: {
             label: 'Decimal',
             propertyEditorSchemaAlias: 'Umbraco.Decimal',

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

@@ -0,0 +1,16 @@
+import { UmbPropertyEditorUINumberElement } from './property-editor-ui-number.element.js';
+/**
+ * Decimal variant of the number property editor UI. Overrides the default
+ * step to 0.000001 — matching the six decimal places supported by the
+ * underlying `DECIMAL(38,6)` database column — so values with fractional
+ * parts are accepted by the input when no step is configured.
+ */
+export declare class UmbPropertyEditorUIDecimalElement extends UmbPropertyEditorUINumberElement {
+    protected defaultStep: number;
+}
+export default UmbPropertyEditorUIDecimalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-decimal': UmbPropertyEditorUIDecimalElement;
+    }
+}

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

@@ -0,0 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UmbPropertyEditorUINumberElement } from './property-editor-ui-number.element.js';
+import { customElement } from '../../../external/lit/index.js';
+/**
+ * Decimal variant of the number property editor UI. Overrides the default
+ * step to 0.000001 — matching the six decimal places supported by the
+ * underlying `DECIMAL(38,6)` database column — so values with fractional
+ * parts are accepted by the input when no step is configured.
+ */
+let UmbPropertyEditorUIDecimalElement = class UmbPropertyEditorUIDecimalElement extends UmbPropertyEditorUINumberElement {
+    constructor() {
+        super(...arguments);
+        this.defaultStep = 0.000001;
+    }
+};
+UmbPropertyEditorUIDecimalElement = __decorate([
+    customElement('umb-property-editor-ui-decimal')
+], UmbPropertyEditorUIDecimalElement);
+export { UmbPropertyEditorUIDecimalElement };
+export default UmbPropertyEditorUIDecimalElement;

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

@@ -21,6 +21,11 @@ export declare class UmbPropertyEditorUINumberElement extends UmbPropertyEditorU
     private _min?;
     private _step?;
     private _placeholder?;
+    /**
+     * Default step value used when one is not configured on the data type.
+     * Subclasses can override to change the default (e.g. decimal uses a sub-integer step).
+     */
+    protected defaultStep: number;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     constructor();
     protected firstUpdated(): void;

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

@@ -28,6 +28,11 @@ let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement ex
          */
         this.readonly = false;
         this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+        /**
+         * Default step value used when one is not configured on the data type.
+         * Subclasses can override to change the default (e.g. decimal uses a sub-integer step).
+         */
+        this.defaultStep = 1;
         this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this._label = context?.getLabel();
         });
@@ -59,7 +64,7 @@ let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement ex
 				label=${ifDefined(this._label)}
 				min=${ifDefined(this._min)}
 				max=${ifDefined(this._max)}
-				step=${ifDefined(this._step)}
+				step=${this._step ?? this.defaultStep}
 				value=${this.value?.toString() ?? ''}
 				.placeholder=${this._placeholder ?? ''}
 				.requiredMessage=${this.mandatoryMessage}

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

@@ -8,7 +8,7 @@ export declare class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement
     #private;
     value: UUIModalSidebarSize | string;
     private _list;
-    config?: UmbPropertyEditorConfigCollection;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -14,7 +14,6 @@ let UmbPropertyEditorUIOverlaySizeElement = class UmbPropertyEditorUIOverlaySize
     constructor() {
         super(...arguments);
         this.value = '';
-        // TODO: Stop having global type of the UUI-SELECT element. And make it possible to have undefined as an option.
         this._list = [
             { value: undefined, name: 'Default', selected: true },
             { value: 'small', name: 'Small' },
@@ -23,6 +22,10 @@ let UmbPropertyEditorUIOverlaySizeElement = class UmbPropertyEditorUIOverlaySize
             { value: 'full', name: 'Full' },
         ];
     }
+    set config(config) {
+        const defaultOptionLabel = config?.getValueByAlias('defaultOptionLabel') ?? 'Default';
+        this._list = this._list.map((option) => option.value === undefined ? { ...option, name: defaultOptionLabel } : option);
+    }
     firstUpdated() {
         if (!this.value)
             return;
@@ -53,7 +56,7 @@ __decorate([
 ], UmbPropertyEditorUIOverlaySizeElement.prototype, "_list", void 0);
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUIOverlaySizeElement.prototype, "config", void 0);
+], UmbPropertyEditorUIOverlaySizeElement.prototype, "config", null);
 UmbPropertyEditorUIOverlaySizeElement = __decorate([
     customElement('umb-property-editor-ui-overlay-size')
 ], UmbPropertyEditorUIOverlaySizeElement);

package/dist-cms/packages/property-editors/slider/Umbraco.Slider.js

@@ -20,10 +20,18 @@ export const manifest = {
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
                     config: [{ alias: 'step', value: '0.00001' }],
                 },
+                {
+                    alias: 'minimumRange',
+                    label: 'Minimum range',
+                    description: '',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                    config: [{ alias: 'step', value: '0.00001' }],
+                },
             ],
             defaultData: [
                 { alias: 'minVal', value: 0.0 },
                 { alias: 'maxVal', value: 100.0 },
+                { alias: 'minimumRange', value: 0.0 },
             ],
         },
     },

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

@@ -47,6 +47,13 @@ export const manifests = [
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
                         config: [{ alias: 'step', value: '0.00001' }],
                     },
+                    {
+                        alias: 'minimumRange',
+                        label: 'Minimum range',
+                        description: 'Minimum difference between the low and high values when range is enabled. Set to 0 to allow equal values.',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                        config: [{ alias: 'step', value: '0.00001' }],
+                    },
                 ],
                 defaultData: [
                     {
@@ -61,6 +68,10 @@ export const manifests = [
                         alias: 'step',
                         value: 1.0,
                     },
+                    {
+                        alias: 'minimumRange',
+                        value: 0.0,
+                    },
                 ],
             },
         },

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

@@ -27,6 +27,7 @@ export declare class UmbPropertyEditorUISliderElement extends UmbPropertyEditorU
     private _step;
     private _min;
     private _max;
+    private _minimumRange;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     constructor();
     protected firstUpdated(): void;

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

@@ -58,6 +58,7 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
         this._initVal2 = isNaN(initVal2) ? this._initVal1 + this._step : initVal2;
         this._min = this.#parseNumber(config.getValueByAlias('minVal')) || 0;
         this._max = this.#parseNumber(config.getValueByAlias('maxVal')) || 100;
+        this._minimumRange = Math.max(this.#parseNumber(config.getValueByAlias('minimumRange')) || 0, 0);
         if (this._min === this._max) {
             this._max = this._min + 100;
             console.warn(`Property Editor (Slider) has been misconfigured, 'min' and 'max' are equal values. Please correct your data type configuration. To render the slider correctly, we changed this slider to: min = ${this._min}, max = ${this._max}`, this);
@@ -79,6 +80,7 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
         this._step = 1;
         this._min = 0;
         this._max = 100;
+        this._minimumRange = 0;
         this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this._label = context?.getLabel();
         });
@@ -111,6 +113,7 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
 				.step=${this._step}
 				.min=${this._min}
 				.max=${this._max}
+				.minGap=${this._minimumRange}
 				?enable-range=${this._enableRange}
 				@change=${this.#onChange}
 				?readonly=${this.readonly}
@@ -150,6 +153,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUISliderElement.prototype, "_max", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUISliderElement.prototype, "_minimumRange", void 0);
 UmbPropertyEditorUISliderElement = __decorate([
     customElement('umb-property-editor-ui-slider')
 ], UmbPropertyEditorUISliderElement);

package/dist-cms/packages/relations/relation-types/repository/detail/relation-type-detail.store.js

@@ -12,7 +12,7 @@ export class UmbRelationTypeDetailStore extends UmbDetailStoreBase {
      * @memberof UmbRelationTypeDetailStore
      */
     constructor(host) {
-        super(host, UMB_RELATION_TYPE_DETAIL_STORE_CONTEXT.toString());
+        super(host, UMB_RELATION_TYPE_DETAIL_STORE_CONTEXT);
     }
 }
 export default UmbRelationTypeDetailStore;

package/dist-cms/packages/relations/relations/entity-actions/bulk-delete/modal/bulk-delete-with-relation-modal.element.js

@@ -33,7 +33,7 @@ let UmbBulkDeleteWithRelationConfirmModalElement = class UmbBulkDeleteWithRelati
 							.config=${this._referencesConfig}></umb-confirm-bulk-action-modal-entity-references>`
             : nothing}
 
-				<uui-button slot="actions" id="cancel" label="Cancel" @click=${this._rejectModal}></uui-button>
+				<uui-button slot="actions" id="cancel" label=${this.localize.term('general_cancel')} @click=${this._rejectModal}></uui-button>
 
 				<uui-button
 					slot="actions"

package/dist-cms/packages/relations/relations/entity-actions/bulk-trash/modal/bulk-trash-with-relation-modal.element.js

@@ -66,7 +66,7 @@ let UmbBulkTrashWithRelationConfirmModalElement = class UmbBulkTrashWithRelation
 							@change=${this.#onReferencesChange}></umb-confirm-bulk-action-modal-entity-references>`
             : nothing}
 
-				<uui-button slot="actions" id="cancel" label="Cancel" @click=${this._rejectModal}></uui-button>
+				<uui-button slot="actions" id="cancel" label=${this.localize.term('general_cancel')} @click=${this._rejectModal}></uui-button>
 
 				<uui-button
 					slot="actions"

package/dist-cms/packages/relations/relations/entity-actions/trash/modal/trash-with-relation-modal.element.js

@@ -76,7 +76,7 @@ let UmbTrashWithRelationConfirmModalElement = class UmbTrashWithRelationConfirmM
 							@change=${this.#onReferencesChange}></umb-confirm-action-modal-entity-references>`
             : nothing}
 
-				<uui-button slot="actions" id="cancel" label="Cancel" @click=${this._rejectModal}></uui-button>
+				<uui-button slot="actions" id="cancel" label=${this.localize.term('general_cancel')} @click=${this._rejectModal}></uui-button>
 
 				<uui-button
 					slot="actions"

package/dist-cms/packages/rte/Umbraco.RichText.js

@@ -21,6 +21,13 @@ export const manifest = {
                     config: [{ alias: 'validationLimit', value: { min: 0, max: 1 } }],
                     weight: 90,
                 },
+                {
+                    alias: 'allowedMediaTypes',
+                    label: '#rte_config_allowedMediaTypes',
+                    description: '{#rte_config_allowedMediaTypes_description}',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.MediaTypePicker',
+                    weight: 91,
+                },
                 {
                     alias: 'ignoreUserStartNodes',
                     label: '#rte_config_ignoreUserStartNodes',

package/dist-cms/packages/static-file/repository/item/static-file-item.store.js

@@ -12,7 +12,7 @@ export class UmbStaticFileItemStore extends UmbItemStoreBase {
      * @memberof UmbStaticFileItemStore
      */
     constructor(host) {
-        super(host, UMB_STATIC_FILE_ITEM_STORE_CONTEXT.toString());
+        super(host, UMB_STATIC_FILE_ITEM_STORE_CONTEXT);
     }
 }
 export default UmbStaticFileItemStore;

package/dist-cms/packages/static-file/tree/static-file-tree.store.js

@@ -13,7 +13,7 @@ export class UmbStaticFileTreeStore extends UmbUniqueTreeStore {
      * @memberof UmbStaticFileTreeStore
      */
     constructor(host) {
-        super(host, UMB_STATIC_FILE_TREE_STORE_CONTEXT.toString());
+        super(host, UMB_STATIC_FILE_TREE_STORE_CONTEXT);
     }
 }
 export default UmbStaticFileTreeStore;

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

@@ -47,7 +47,9 @@ let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extend
         this.addFormControlElement(this.shadowRoot.querySelector('umb-tags-input'));
     }
     #onChange(event) {
-        this.value = event.target.value.split(',');
+        event.stopPropagation();
+        const tagsInput = event.currentTarget;
+        this.value = this._storageType?.toLowerCase() === 'csv' ? tagsInput.value.split(',') : tagsInput.items;
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {

package/dist-cms/packages/templating/manifests.d.ts

@@ -1 +1,2 @@
-export declare const manifests: Array<UmbExtensionManifest>;
+import type { UmbExtensionManifestKind } from '../core/extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/templating/modals/templating-item-picker/templating-item-picker-modal.element.d.ts

@@ -2,8 +2,9 @@ import type { UmbTemplatingItemPickerModalData, UmbTemplatingItemPickerModalValu
 import { UmbModalBaseElement } from '../../../core/modal/index.js';
 export declare class UmbTemplatingItemPickerModalElement extends UmbModalBaseElement<UmbTemplatingItemPickerModalData, UmbTemplatingItemPickerModalValue> {
     #private;
-    private _close;
+    private _pickedItem?;
     constructor();
+    private _close;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/templating/modals/templating-item-picker/templating-item-picker-modal.element.js

@@ -8,13 +8,10 @@ import { CodeSnippetType } from '../../types.js';
 import { UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL } from '../templating-page-field-builder/templating-page-field-builder-modal.token.js';
 import { UMB_PARTIAL_VIEW_PICKER_MODAL } from '../../partial-views/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
-import { css, html, customElement } from '../../../../external/lit/index.js';
+import { css, html, customElement, state } from '../../../../external/lit/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '../../../core/modal/index.js';
 import { UMB_DICTIONARY_PICKER_MODAL } from '../../../dictionary/index.js';
 let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElement extends UmbModalBaseElement {
-    _close() {
-        this.modalContext?.reject();
-    }
     #modalContext;
     constructor() {
         super();
@@ -22,6 +19,22 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
             this.#modalContext = instance;
         });
     }
+    _close() {
+        this.modalContext?.reject();
+    }
+    async #submit() {
+        switch (this._pickedItem) {
+            case CodeSnippetType.pageField:
+                await this.#openTemplatingPageFieldModal();
+                break;
+            case CodeSnippetType.partialView:
+                await this.#openPartialViewPickerModal();
+                break;
+            case CodeSnippetType.dictionaryItem:
+                await this.#openDictionaryItemPickerModal();
+                break;
+        }
+    }
     async #openTemplatingPageFieldModal() {
         const pageFieldBuilderContext = this.#modalContext?.open(this, UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL);
         const result = await pageFieldBuilderContext?.onSubmit().catch(() => undefined);
@@ -66,19 +79,30 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
         return html `
 			<umb-body-layout headline=${this.localize.term('template_insert')}>
 				<uui-box> ${this.#renderItems()} </uui-box>
-				<uui-button
-					slot="actions"
-					@click=${this._close}
-					look="secondary"
-					label=${this.localize.term('general_close')}></uui-button>
+				
+				<div slot="actions">
+					<uui-button
+						@click=${this._close}
+						look="secondary"
+						label=${this.localize.term('general_close')}></uui-button>
+					<uui-button
+						@click=${this.#submit}
+						look="primary"
+						color="positive"
+						?disabled=${this._pickedItem === undefined}
+						label=${this.localize.term('general_submit')}></uui-button>
+				</div>
 			</umb-body-layout>
 		`;
     }
     #renderItems() {
         return html `<div id="main">
-			<uui-button
-				@click=${this.#openTemplatingPageFieldModal}
-				look="placeholder"
+			<uui-card
+				selectable
+				selectOnly
+				.selected=${this._pickedItem === CodeSnippetType.pageField}
+				@selected=${() => this._pickedItem = CodeSnippetType.pageField}
+				@deselected=${() => this._pickedItem = undefined}
 				label=${this.localize.term('template_insert')}>
 				<h3><umb-localize key="template_insertPageField">Value</umb-localize></h3>
 				<p>
@@ -87,11 +111,14 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
 						alternative values.
 					</umb-localize>
 				</p>
-			</uui-button>
+			</uui-card>
 			${!this.data?.hidePartialViews
-            ? html `<uui-button
-						@click=${this.#openPartialViewPickerModal}
-						look="placeholder"
+            ? html `<uui-card
+						selectable
+						selectOnly
+						.selected=${this._pickedItem === CodeSnippetType.partialView}
+						@selected=${() => this._pickedItem = CodeSnippetType.partialView}
+						@deselected=${() => this._pickedItem = undefined}
 						label=${this.localize.term('template_insert')}>
 						<h3><umb-localize key="template_insertPartialView">Partial view</umb-localize></h3>
 						<p>
@@ -100,11 +127,14 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
 								reusing markup or for separating complex templates into separate files.
 							</umb-localize>
 						</p>
-					</uui-button>`
+					</uui-card>`
             : ''}
-			<uui-button
-				@click=${this.#openDictionaryItemPickerModal}
-				look="placeholder"
+			<uui-card
+				selectable
+				selectOnly
+				.selected=${this._pickedItem === CodeSnippetType.dictionaryItem}
+				@selected=${() => this._pickedItem = CodeSnippetType.dictionaryItem}
+				@deselected=${() => this._pickedItem = undefined}
 				label=${this.localize.term('template_insertDictionaryItem')}>
 				<h3><umb-localize key="template_insertDictionaryItem">Dictionary Item</umb-localize></h3>
 				<p>
@@ -113,24 +143,27 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
 						for multilingual websites.
 					</umb-localize>
 				</p>
-			</uui-button>
+			</uui-card>
 		</div>`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
-			#main uui-button:not(:last-of-type) {
-				display: block;
-				margin-bottom: var(--uui-size-space-5);
+			#main {
+				display: grid;
+				grid-gap: var(--uui-size-space-5);
 			}
-
-			h3,
-			p {
+			uui-card {
 				text-align: left;
+				display: block;
+				padding: var(--uui-size-space-4);
 			}
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbTemplatingItemPickerModalElement.prototype, "_pickedItem", void 0);
 UmbTemplatingItemPickerModalElement = __decorate([
     customElement('umb-templating-item-picker-modal')
 ], UmbTemplatingItemPickerModalElement);

package/dist-cms/packages/templating/modals/templating-section-picker/templating-section-picker-modal.element.d.ts

@@ -5,7 +5,7 @@ export declare class UmbTemplatingSectionPickerModalElement extends UmbModalBase
     private _renderNamedSectionNameInput?;
     private _defineNamedSectionNameInput?;
     private _renderNamedSectionIsMandatoryCheckbox?;
-    private _pickedSection;
+    private _pickedSection?;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }