@umbraco-cms/backoffice 17.7.0 → 17.8.0-rc

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

@@ -33,7 +33,13 @@ export declare class UmbInputMarkdownElement extends UmbInputMarkdownElement_bas
     requiredMessage?: string;
     private _codeEditor?;
     private _actionExtensions;
+    private _isSticky;
+    private _toolbarElement?;
     constructor();
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: Map<string, unknown>): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
     private _focusEditor;
     private _insertLine;
     private _insertBetweenSelection;

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

@@ -60,6 +60,9 @@ let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormContr
     }
     #readonly;
     #editor;
+    // Detects the toolbar sticking by watching it drop below full visibility,
+    // regardless of which ancestor is the one actually scrolling.
+    #scrollObserver;
     #mediaUrlRepository;
     constructor() {
         super();
@@ -72,9 +75,42 @@ let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormContr
         this.preview = false;
         this.#readonly = false;
         this._actionExtensions = [];
+        this._isSticky = false;
+        // Detects the toolbar sticking by watching it drop below full visibility,
+        // regardless of which ancestor is the one actually scrolling.
+        this.#scrollObserver = new IntersectionObserver(([entry]) => {
+            this._isSticky = entry.intersectionRatio < 1;
+        }, { threshold: 1 });
         this.#mediaUrlRepository = new UmbMediaUrlRepository(this);
         this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''));
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // Re-arm the observer if this element is reconnected after a DOM move (e.g. block reordering).
+        if (!this.readonly && this._toolbarElement) {
+            this.#scrollObserver.observe(this._toolbarElement);
+        }
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (this._toolbarElement)
+            this.#scrollObserver.observe(this._toolbarElement);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('readonly')) {
+            this.#scrollObserver.disconnect();
+            this._isSticky = false;
+            if (!this.readonly && this._toolbarElement) {
+                this.#scrollObserver.observe(this._toolbarElement);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#scrollObserver.disconnect();
+        this._isSticky = false;
+    }
     #onCodeEditorLoaded(event) {
         if (event.type !== UmbCodeEditorLoadedEvent.TYPE)
             return;
@@ -435,7 +471,7 @@ let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormContr
         if (this.readonly)
             return nothing;
         return html `
-			<div id="toolbar">
+			<div id="toolbar" ?data-sticky=${this._isSticky}>
 				<div id="buttons">
 					<uui-button-group>
 						<uui-button
@@ -569,12 +605,8 @@ let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormContr
 
 				border-radius: var(--uui-border-radius);
 				border: 1px solid var(--uui-color-border);
-				border-bottom: 0;
 				border-bottom-left-radius: 0;
 				border-bottom-right-radius: 0;
-				box-shadow:
-					0 2px 2px -2px rgba(34, 47, 62, 0.1),
-					0 8px 8px -4px rgba(34, 47, 62, 0.07);
 
 				background-color: var(--uui-color-surface);
 				color: var(--color-text);
@@ -591,6 +623,12 @@ let UmbInputMarkdownElement = class UmbInputMarkdownElement extends UmbFormContr
 				}
 			}
 
+			#toolbar[data-sticky] {
+				box-shadow:
+					0 2px 2px -2px rgba(34, 47, 62, 0.1),
+					0 8px 8px -4px rgba(34, 47, 62, 0.07);
+			}
+
 			#buttons {
 				flex: 1;
 				display: flex;
@@ -670,6 +708,12 @@ __decorate([
 __decorate([
     state()
 ], UmbInputMarkdownElement.prototype, "_actionExtensions", void 0);
+__decorate([
+    state()
+], UmbInputMarkdownElement.prototype, "_isSticky", void 0);
+__decorate([
+    query('#toolbar')
+], UmbInputMarkdownElement.prototype, "_toolbarElement", void 0);
 UmbInputMarkdownElement = __decorate([
     customElement('umb-input-markdown')
 ], UmbInputMarkdownElement);

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

@@ -14,6 +14,7 @@ export const manifests = [
         name: 'Markdown Editor Property Editor UI',
         element: () => import('./property-editor-ui-markdown-editor.element.js'),
         meta: {
+            supportsVariantChange: true,
             label: 'Markdown Editor',
             propertyEditorSchemaAlias: 'Umbraco.MarkdownEditor',
             icon: 'icon-code',

package/dist-cms/packages/markdown-editor/umbraco-package.d.ts

@@ -5,6 +5,6 @@ export declare const extensions: {
     alias: string;
     type: string;
     js: {
-        manifests: (import("../tiptap/index.js").ManifestTiptapToolbarExtensionButtonKind<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("../core/tree/index.js").ManifestTreeItem | import("../core/modal/index.js").ManifestModal | import("../core/collection/index.js").ManifestCollection | import("../core/collection/index.js").ManifestCollectionMenu | import("src/packages/core/collection/menu/menu-item/extension/collection-menu-item.extension.js").ManifestCollectionMenuItem | import("../core/tree/index.js").ManifestTree | import("../core/collection/index.js").ManifestCollectionView | import("../core/collection/index.js").ManifestCollectionViewTableKind | import("../tiptap/index.js").ManifestTiptapToolbarExtensionActionButtonKind<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("../tiptap/index.js").ManifestTiptapToolbarExtensionColorPickerButtonKind<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("src/packages/core/entity-item/entity-item-ref/entity-item-ref.extension.js").ManifestEntityItemRef<import("src/packages/core/entity-item/entity-item-ref/entity-item-ref.extension.js").MetaEntityItemRef> | import("../core/extension-registry/index.js").ManifestAppEntryPoint | import("../core/extension-registry/index.js").ManifestBackofficeEntryPoint | import("../core/extension-registry/index.js").ManifestEntryPoint | (import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | /*elided*/ any>>>>>>>>>>>) | import("../core/repository/index.js").ManifestDataSourceDataMapping<import("../core/repository/index.js").MetaDataSourceDataMapping> | import("../core/entity-action/index.js").ManifestEntityActionDeleteKind | import("../core/entity-action/index.js").ManifestEntityAction<import("../core/entity-action/index.js").MetaEntityAction> | import("../core/entity-action/index.js").ManifestEntityActionDefaultKind | import("../ufm/index.js").ManifestUfmFilter | import("../ufm/index.js").ManifestUfmComponent | import("../ufm/index.js").ManifestMarkedExtension | import("../core/property/index.js").ManifestPropertyContext<import("../core/property/index.js").MetaPropertyContext> | import("../core/property/index.js").ManifestPropertyValueCloner | (import("../core/property-editor/index.js").ManifestPropertyEditorSchema | import("../core/property-editor/index.js").ManifestPropertyEditorUi) | import("../core/property/index.js").ManifestPropertyValuePreset | import("../core/property/index.js").ManifestPropertyValueResolver | import("../core/tree/index.js").ManifestTreeAction | import("../core/tree/index.js").ManifestTreeActionCreateKind | import("../core/entity-create-option-action/index.js").ManifestEntityCreateOptionAction<import("../core/entity-create-option-action/index.js").MetaEntityCreateOptionAction> | import("../core/tree/index.js").ManifestEntityActionDuplicateToKind | import("../core/tree/index.js").ManifestEntityActionMoveToKind | import("../core/tree/index.js").ManifestEntityActionReloadTreeItemChildrenKind | import("../core/tree/index.js").ManifestEntityActionSortChildrenOfKind | import("../core/workspace/index.js").ManifestWorkspaceActionMenuItem<import("../core/workspace/index.js").MetaWorkspaceActionMenuItem> | import("../core/workspace/index.js").ManifestWorkspaceActionMenuItemDefaultKind<import("../core/workspace/index.js").MetaWorkspaceActionMenuItemDefaultKind> | import("../core/workspace/index.js").ManifestWorkspaceInfoApp<import("../core/workspace/index.js").MetaWorkspaceInfoApp> | import("../core/workspace/index.js").ManifestWorkspaceDefaultKind | import("../core/workspace/index.js").ManifestWorkspaceAction<import("../core/workspace/index.js").MetaWorkspaceAction, import("../core/workspace/index.js").UmbWorkspaceAction<import("../core/workspace/index.js").MetaWorkspaceAction>> | import("../core/workspace/index.js").ManifestWorkspaceActionDefaultKind | import("../core/workspace/index.js").ManifestWorkspaceFooterApp | import("../core/workspace/index.js").ManifestWorkspaceFooterAppMenuBreadcrumbKind | import("../core/workspace/index.js").ManifestWorkspaceFooterAppVariantMenuBreadcrumbKind | import("../core/workspace/index.js").ManifestWorkspaceView<import("../core/workspace/index.js").MetaWorkspaceView> | import("../core/workspace/index.js").ManifestWorkspaceViewContentTypeDesignEditorKind | import("../core/workspace/index.js").ManifestWorkspace<import("../core/workspace/index.js").MetaWorkspace, import("../../libs/controller-api/index.js").UmbControllerHostElement, import("../core/workspace/index.js").UmbWorkspaceContext> | import("../core/workspace/index.js").ManifestWorkspaceRoutableKind | import("../core/workspace/index.js").ManifestWorkspaceContext | import("../core/section/index.js").ManifestSectionContext<import("../core/section/index.js").MetaSectionContext> | (import("../core/section/index.js").ManifestSectionSidebarApp | import("../core/section/index.js").ManifestSection | import("../core/section/index.js").ManifestSectionRoute | import("../core/section/index.js").ManifestSectionView) | import("../core/dashboard/index.js").ManifestDashboard | import("../core/tree/index.js").ManifestEntityActionCreateFolderKind | import("../core/tree/index.js").ManifestEntityActionDeleteFolderKind | import("../core/tree/index.js").ManifestEntityActionUpdateFolderKind | import("../core/menu/index.js").ManifestMenu | import("../core/menu/index.js").ManifestMenuItem | import("../core/menu/index.js").ManifestMenuItemActionKind | import("../core/menu/index.js").ManifestMenuItemLinkKind | import("../core/menu/index.js").ManifestWorkspaceContextMenuStructureKind | import("../core/tree/index.js").ManifestMenuItemTreeKind | import("../core/tree/index.js").ManifestTreeItemCard | import("../core/tree/index.js").ManifestWorkspaceViewTreeKind | import("../core/tree/index.js").ManifestTreeView | import("../core/tree/index.js").ManifestTreeViewTableKind | import("../core/collection/index.js").ManifestCollectionAction | import("../core/collection/index.js").ManifestEntityCollectionItemCard<import("../core/collection/index.js").MetaEntityCollectionItemCard> | import("../core/collection/index.js").ManifestEntityCollectionItemRef<import("../core/collection/index.js").MetaEntityCollectionItemRef> | import("../core/collection/index.js").ManifestCollectionActionCreateKind | import("../core/collection/index.js").ManifestCollectionTextFilter | import("../core/collection/index.js").ManifestWorkspaceViewCollectionKind | import("../core/value-summary/index.js").ManifestValueSummary | import("../content/content/index.js").ManifestAuditLogAction<import("../content/content/index.js").MetaAuditLogAction> | import("../content/content/index.js").ManifestAuditLogActionDefaultKind | import("../content/content/index.js").ManifestEntityActionContentRollbackKind | import("../content/content/index.js").ManifestWorkspaceInfoAppAuditLogKind | import("../content/content/index.js").ManifestWorkspaceViewContentCollectionKind | import("../content/content/index.js").ManifestEntityActionSortChildrenOfContentKind | import("../content/content/index.js").ManifestEntityActionContentPublishKind | import("../user/current-user/index.js").ManifestUserProfileApp | import("../user/current-user/index.js").ManifestCurrentUserAction<import("../user/current-user/index.js").MetaCurrentUserAction> | import("../core/icon-registry/index.js").ManifestIcons | import("../user/user-permission/index.js").ManifestEntityUserPermission | import("../user/user-permission/index.js").ManifestGranularUserPermission | import("../core/localization/index.js").ManifestLocalization | import("../content/content/index.js").ManifestEntityActionContentUnpublishKind | import("../core/picker/index.js").ManifestPickerSearchResultItem | import("../core/property-editor-data-source/index.js").ManifestPropertyEditorDataSource | import("../core/validation/index.js").ManifestPropertyValidationPathTranslator<any> | import("src/packages/core/entity-action/common/create/types.js").ManifestEntityActionCreateKind | import("../core/entity-bulk-action/index.js").ManifestEntityBulkActionDeleteKind | import("../core/extension-registry/index.js").UmbEntityBulkActionExtensions | import("../core/extension-registry/index.js").ManifestExternalLoginProvider | import("../core/extension-registry/index.js").ManifestGlobalContext | import("../core/extension-registry/index.js").ManifestHeaderApp | import("../core/extension-registry/index.js").ManifestHeaderAppButtonKind | import("../core/extension-registry/index.js").ManifestMfaLoginProvider | import("../core/extension-registry/index.js").ManifestPreviewAppProvider | import("../core/extension-registry/index.js").ManifestRepository<import("../../libs/extension-api/index.js").UmbApi> | import("../core/extension-registry/index.js").UmbStoreExtensions | import("../core/extension-registry/index.js").ManifestUserEntryPoint | import("../core/search/index.js").ManifestSearchProvider | import("../core/search/index.js").ManifestSearchResultItem | import("../core/search/index.js").ManifestGlobalSearch | import("../core/auth/index.js").ManifestAuthProvider | import("../core/themes/index.js").ManifestTheme | import("../core/entity-sign/index.js").ManifestEntitySign<import("../core/entity-sign/index.js").MetaEntitySign> | import("src/packages/core/entity-sign/kinds/types.js").ManifestEntitySignIconKind | import("../core/property-action/index.js").UmbPropertyActionExtensions | import("../core/property-sort-mode/index.js").ManifestPropertyActionSortModeKind<import("../core/property-action/index.js").MetaPropertyActionDefaultKind> | import("../core/recycle-bin/index.js").ManifestEntityActionTrashKind | import("../core/recycle-bin/index.js").ManifestEntityActionRestoreFromRecycleBinKind | import("../core/recycle-bin/index.js").ManifestEntityActionEmptyRecycleBinKind | import("../core/recycle-bin/index.js").ManifestEntityBulkActionTrashKind | import("../core/recycle-bin/index.js").ManifestCollectionActionEmptyRecycleBinKind | import("src/packages/core/recycle-bin/tree/tree-item/types.js").ManifestTreeItemRecycleBinKind | import("../core/server-file-system/index.js").ManifestEntityActionRenameServerFileKind | import("src/packages/core/tree/folder/entity-create-option-action/types.js").ManifestEntityCreateOptionActionFolderKind | import("../core/property-sort-mode/index.js").ManifestPropertyContextSortModeKind | import("../block/block/index.js").ManifestBlockAction<import("../block/block/index.js").MetaBlockAction> | import("../block/block/index.js").ManifestBlockActionDefaultKind | import("../block/block-custom-view/index.js").ManifestBlockEditorCustomView | import("../clipboard/index.js").ManifestClipboardCopyPropertyValueTranslator | import("../clipboard/index.js").ManifestClipboardPastePropertyValueTranslator | import("../clipboard/index.js").ManifestPropertyActionPasteFromClipboardKind | import("../clipboard/index.js").ManifestPropertyActionCopyToClipboardKind | import("src/packages/relations/relations/entity-actions/bulk-delete/types.js").ManifestEntityBulkActionDeleteWithRelationKind | import("../relations/relations/index.js").ManifestEntityBulkActionTrashWithRelationKind | import("../relations/relations/index.js").ManifestEntityActionTrashWithRelationKind | import("../documents/documents/index.js").ManifestWorkspaceActionMenuItemPreviewOptionKind | import("../media/media/index.js").ManifestFileUploadPreview | import("../health-check/index.js").ManifestHealthCheck | import("../packages/package/index.js").ManifestPackageView | import("../property-editors/content-picker/index.js").ManifestDynamicRootOrigin | import("../property-editors/content-picker/index.js").ManifestDynamicRootQueryStep | import("src/packages/relations/relations/entity-actions/delete/types.js").ManifestEntityActionDeleteWithRelationKind | import("src/packages/relations/relations/reference/workspace-info-app/types.js").ManifestWorkspaceInfoAppEntityReferencesKind | import("../tiptap/index.js").ManifestTiptapExtension<import("../tiptap/index.js").MetaTiptapExtension> | import("../tiptap/index.js").ManifestTiptapToolbarExtension<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("../tiptap/index.js").ManifestTiptapToolbarExtensionMenuKind | import("../tiptap/index.js").ManifestTiptapToolbarExtensionStyleMenuKind | import("../tiptap/index.js").ManifestTiptapStatusbarExtension<import("../tiptap/index.js").MetaTiptapStatusbarExtension> | import("src/packages/clipboard/property/context/types.js").ManifestPropertyContextClipboardKind | import("src/packages/core/section/default/types.js").ManifestSectionDefaultKind | import("./monaco-markdown-editor-action.extension.js").ManifestMonacoMarkdownEditorAction)[];
+        manifests: (import("../tiptap/index.js").ManifestTiptapToolbarExtensionButtonKind<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("../core/tree/index.js").ManifestTreeItem | import("../core/modal/index.js").ManifestModal | import("../core/collection/index.js").ManifestCollection | import("../core/collection/index.js").ManifestCollectionMenu | import("src/packages/core/collection/menu/menu-item/extension/collection-menu-item.extension.js").ManifestCollectionMenuItem | import("../core/tree/index.js").ManifestTree | import("../core/collection/index.js").ManifestCollectionView | import("../core/collection/index.js").ManifestCollectionViewTableKind | import("../tiptap/index.js").ManifestTiptapToolbarExtensionActionButtonKind<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("../tiptap/index.js").ManifestTiptapToolbarExtensionColorPickerButtonKind<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("src/packages/core/entity-item/entity-item-ref/entity-item-ref.extension.js").ManifestEntityItemRef<import("src/packages/core/entity-item/entity-item-ref/entity-item-ref.extension.js").MetaEntityItemRef> | import("../core/extension-registry/index.js").ManifestAppEntryPoint | import("../core/extension-registry/index.js").ManifestBackofficeEntryPoint | import("../core/extension-registry/index.js").ManifestEntryPoint | (import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | import("../../libs/extension-api/index.js").ManifestBundle<import("../../libs/extension-api/index.js").ManifestBase | import("../../libs/extension-api/index.js").ManifestCondition | /*elided*/ any>>>>>>>>>>>) | import("../core/repository/index.js").ManifestDataSourceDataMapping<import("../core/repository/index.js").MetaDataSourceDataMapping> | import("../core/entity-action/index.js").ManifestEntityActionDeleteKind | import("../core/entity-action/index.js").ManifestEntityAction<import("../core/entity-action/index.js").MetaEntityAction> | import("../core/entity-action/index.js").ManifestEntityActionDefaultKind | import("../ufm/index.js").ManifestUfmFilter | import("../ufm/index.js").ManifestUfmComponent | import("../ufm/index.js").ManifestMarkedExtension | import("../core/property/index.js").ManifestPropertyContext<import("../core/property/index.js").MetaPropertyContext> | import("../core/property/index.js").ManifestPropertyValueCloner | (import("../core/property-editor/index.js").ManifestPropertyEditorSchema | import("../core/property-editor/index.js").ManifestPropertyEditorUi) | import("../core/property/index.js").ManifestPropertyValuePreset | import("../core/property/index.js").ManifestPropertyValueResolver | import("../core/tree/index.js").ManifestTreeAction | import("../core/tree/index.js").ManifestTreeActionCreateKind | import("../core/entity-create-option-action/index.js").ManifestEntityCreateOptionAction<import("../core/entity-create-option-action/index.js").MetaEntityCreateOptionAction> | import("../core/tree/index.js").ManifestEntityActionDuplicateToKind | import("../core/tree/index.js").ManifestEntityActionMoveToKind | import("../core/tree/index.js").ManifestEntityActionReloadTreeItemChildrenKind | import("../core/tree/index.js").ManifestEntityActionSortChildrenOfKind | import("../core/workspace/index.js").ManifestWorkspaceActionMenuItem<import("../core/workspace/index.js").MetaWorkspaceActionMenuItem> | import("../core/workspace/index.js").ManifestWorkspaceActionMenuItemDefaultKind<import("../core/workspace/index.js").MetaWorkspaceActionMenuItemDefaultKind> | import("../core/workspace/index.js").ManifestWorkspaceInfoApp<import("../core/workspace/index.js").MetaWorkspaceInfoApp> | import("../core/workspace/index.js").ManifestWorkspaceDefaultKind | import("../core/workspace/index.js").ManifestWorkspaceAction<import("../core/workspace/index.js").MetaWorkspaceAction, import("../core/workspace/index.js").UmbWorkspaceAction<import("../core/workspace/index.js").MetaWorkspaceAction>> | import("../core/workspace/index.js").ManifestWorkspaceActionDefaultKind | import("../core/workspace/index.js").ManifestWorkspaceFooterApp | import("../core/workspace/index.js").ManifestWorkspaceFooterAppMenuBreadcrumbKind | import("../core/workspace/index.js").ManifestWorkspaceFooterAppVariantMenuBreadcrumbKind | import("../core/workspace/index.js").ManifestWorkspaceView<import("../core/workspace/index.js").MetaWorkspaceView> | import("../core/workspace/index.js").ManifestWorkspaceViewContentTypeDesignEditorKind | import("../core/workspace/index.js").ManifestWorkspace<import("../core/workspace/index.js").MetaWorkspace, import("../../libs/controller-api/index.js").UmbControllerHostElement, import("../core/workspace/index.js").UmbWorkspaceContext> | import("../core/workspace/index.js").ManifestWorkspaceRoutableKind | import("../core/workspace/index.js").ManifestWorkspaceContext | import("../core/section/index.js").ManifestSectionContext<import("../core/section/index.js").MetaSectionContext> | (import("../core/section/index.js").ManifestSectionSidebarApp | import("../core/section/index.js").ManifestSection | import("../core/section/index.js").ManifestSectionRoute | import("../core/section/index.js").ManifestSectionView) | import("../core/dashboard/index.js").ManifestDashboard | import("../core/tree/index.js").ManifestEntityActionCreateFolderKind | import("../core/tree/index.js").ManifestEntityActionDeleteFolderKind | import("../core/tree/index.js").ManifestEntityActionUpdateFolderKind | import("../core/menu/index.js").ManifestMenu | import("../core/menu/index.js").ManifestMenuItem | import("../core/menu/index.js").ManifestMenuItemActionKind | import("../core/menu/index.js").ManifestMenuItemLinkKind | import("../core/menu/index.js").ManifestWorkspaceContextMenuStructureKind | import("../core/tree/index.js").ManifestMenuItemTreeKind | import("../core/tree/index.js").ManifestTreeItemCard | import("../core/tree/index.js").ManifestWorkspaceViewTreeKind | import("../core/tree/index.js").ManifestTreeView | import("../core/picker/index.js").ManifestPickerSearchResultItem | import("../core/tree/index.js").ManifestTreeViewTableKind | import("../core/collection/index.js").ManifestCollectionAction | import("../core/collection/index.js").ManifestEntityCollectionItemCard<import("../core/collection/index.js").MetaEntityCollectionItemCard> | import("../core/collection/index.js").ManifestEntityCollectionItemRef<import("../core/collection/index.js").MetaEntityCollectionItemRef> | import("../core/collection/index.js").ManifestCollectionActionCreateKind | import("../core/collection/index.js").ManifestCollectionTextFilter | import("../core/collection/index.js").ManifestWorkspaceViewCollectionKind | import("../core/value-summary/index.js").ManifestValueSummary | import("../core/property-editor-data-source/index.js").ManifestPropertyEditorDataSource | import("../core/icon-registry/index.js").ManifestIcons | import("../content/content/index.js").ManifestAuditLogAction<import("../content/content/index.js").MetaAuditLogAction> | import("../content/content/index.js").ManifestAuditLogActionDefaultKind | import("../content/content/index.js").ManifestEntityActionContentRollbackKind | import("../content/content/index.js").ManifestWorkspaceInfoAppAuditLogKind | import("../content/content/index.js").ManifestWorkspaceViewContentCollectionKind | import("../content/content/index.js").ManifestEntityActionSortChildrenOfContentKind | import("../content/content/index.js").ManifestEntityActionContentPublishKind | import("../user/current-user/index.js").ManifestUserProfileApp | import("../user/current-user/index.js").ManifestCurrentUserAction<import("../user/current-user/index.js").MetaCurrentUserAction> | import("../user/user-permission/index.js").ManifestEntityUserPermission | import("../user/user-permission/index.js").ManifestGranularUserPermission | import("../core/localization/index.js").ManifestLocalization | import("../content/content/index.js").ManifestEntityActionContentUnpublishKind | import("../core/validation/index.js").ManifestPropertyValidationPathTranslator<any> | import("src/packages/core/entity-action/common/create/types.js").ManifestEntityActionCreateKind | import("../core/entity-bulk-action/index.js").ManifestEntityBulkActionDeleteKind | import("../core/extension-registry/index.js").UmbEntityBulkActionExtensions | import("../core/extension-registry/index.js").ManifestExternalLoginProvider | import("../core/extension-registry/index.js").ManifestGlobalContext | import("../core/extension-registry/index.js").ManifestHeaderApp | import("../core/extension-registry/index.js").ManifestHeaderAppButtonKind | import("../core/extension-registry/index.js").ManifestMfaLoginProvider | import("../core/extension-registry/index.js").ManifestPreviewAppProvider | import("../core/extension-registry/index.js").ManifestRepository<import("../../libs/extension-api/index.js").UmbApi> | import("../core/extension-registry/index.js").UmbStoreExtensions | import("../core/extension-registry/index.js").ManifestUserEntryPoint | import("../core/search/index.js").ManifestSearchProvider | import("../core/search/index.js").ManifestSearchResultItem | import("../core/search/index.js").ManifestGlobalSearch | import("../core/auth/index.js").ManifestAuthProvider | import("../core/themes/index.js").ManifestTheme | import("../core/entity-sign/index.js").ManifestEntitySign<import("../core/entity-sign/index.js").MetaEntitySign> | import("src/packages/core/entity-sign/kinds/types.js").ManifestEntitySignIconKind | import("../core/property-action/index.js").UmbPropertyActionExtensions | import("../core/property-sort-mode/index.js").ManifestPropertyActionSortModeKind<import("../core/property-action/index.js").MetaPropertyActionDefaultKind> | import("../core/recycle-bin/index.js").ManifestEntityActionTrashKind | import("../core/recycle-bin/index.js").ManifestEntityActionRestoreFromRecycleBinKind | import("../core/recycle-bin/index.js").ManifestEntityActionEmptyRecycleBinKind | import("../core/recycle-bin/index.js").ManifestEntityBulkActionTrashKind | import("../core/recycle-bin/index.js").ManifestCollectionActionEmptyRecycleBinKind | import("src/packages/core/recycle-bin/tree/tree-item/types.js").ManifestTreeItemRecycleBinKind | import("../core/server-file-system/index.js").ManifestEntityActionRenameServerFileKind | import("src/packages/core/tree/folder/entity-create-option-action/types.js").ManifestEntityCreateOptionActionFolderKind | import("../core/property-sort-mode/index.js").ManifestPropertyContextSortModeKind | import("../block/block/index.js").ManifestBlockAction<import("../block/block/index.js").MetaBlockAction> | import("../block/block/index.js").ManifestBlockActionDefaultKind | import("../block/block-custom-view/index.js").ManifestBlockEditorCustomView | import("../clipboard/index.js").ManifestClipboardCopyPropertyValueTranslator | import("../clipboard/index.js").ManifestClipboardPastePropertyValueTranslator | import("../clipboard/index.js").ManifestPropertyActionPasteFromClipboardKind | import("../clipboard/index.js").ManifestPropertyActionCopyToClipboardKind | import("src/packages/relations/relations/entity-actions/bulk-delete/types.js").ManifestEntityBulkActionDeleteWithRelationKind | import("../relations/relations/index.js").ManifestEntityBulkActionTrashWithRelationKind | import("../relations/relations/index.js").ManifestEntityActionTrashWithRelationKind | import("../documents/documents/index.js").ManifestWorkspaceActionMenuItemPreviewOptionKind | import("../media/media/index.js").ManifestFileUploadPreview | import("../health-check/index.js").ManifestHealthCheck | import("../packages/package/index.js").ManifestPackageView | import("../property-editors/content-picker/index.js").ManifestDynamicRootOrigin | import("../property-editors/content-picker/index.js").ManifestDynamicRootQueryStep | import("src/packages/relations/relations/entity-actions/delete/types.js").ManifestEntityActionDeleteWithRelationKind | import("src/packages/relations/relations/reference/workspace-info-app/types.js").ManifestWorkspaceInfoAppEntityReferencesKind | import("../tiptap/index.js").ManifestTiptapExtension<import("../tiptap/index.js").MetaTiptapExtension> | import("../tiptap/index.js").ManifestTiptapToolbarExtension<import("../tiptap/index.js").MetaTiptapToolbarExtension> | import("../tiptap/index.js").ManifestTiptapToolbarExtensionMenuKind | import("../tiptap/index.js").ManifestTiptapToolbarExtensionStyleMenuKind | import("../tiptap/index.js").ManifestTiptapStatusbarExtension<import("../tiptap/index.js").MetaTiptapStatusbarExtension> | import("src/packages/clipboard/property/context/types.js").ManifestPropertyContextClipboardKind | import("src/packages/core/section/default/types.js").ManifestSectionDefaultKind | import("./monaco-markdown-editor-action.extension.js").ManifestMonacoMarkdownEditorAction)[];
     };
 }[];

package/dist-cms/packages/media/imaging/components/media-thumbnail.element.d.ts

@@ -4,7 +4,7 @@ import { UmbLitElement } from '../../../core/lit-element/index.js';
  * Displays a thumbnail for a media item, with optional server-side cropping and transparency support.
  * This is the recommended component for rendering media images in the backoffice.
  * @element umb-media-thumbnail
- * @cssprop [--umb-media-thumbnail-background] - Background shown behind the image. Defaults to a checkerboard
+ * @cssprop --umb-media-thumbnail-background - Background shown behind the image. Defaults to a checkerboard
  * pattern that reveals transparency; set to `none` for a transparent background.
  * @csspart img - The underlying `<img>` element.
  */
@@ -44,6 +44,11 @@ export declare class UmbMediaThumbnailElement extends UmbLitElement {
      * The fallback icon for the thumbnail.
      */
     icon: string;
+    /**
+     * The file extension to label the fallback icon with, without the leading dot.
+     * @description Rendered only when there is no preview image.
+     */
+    fileExt?: string;
     /**
      * The `loading` state of the thumbnail.
      * @enum {'lazy' | 'eager'}

package/dist-cms/packages/media/imaging/components/media-thumbnail.element.js

@@ -15,7 +15,7 @@ import { UmbEntityUpdatedEvent } from '../../../core/entity-action/index.js';
  * Displays a thumbnail for a media item, with optional server-side cropping and transparency support.
  * This is the recommended component for rendering media images in the backoffice.
  * @element umb-media-thumbnail
- * @cssprop [--umb-media-thumbnail-background] - Background shown behind the image. Defaults to a checkerboard
+ * @cssprop --umb-media-thumbnail-background - Background shown behind the image. Defaults to a checkerboard
  * pattern that reveals transparency; set to `none` for a transparent background.
  * @csspart img - The underlying `<img>` element.
  */
@@ -114,13 +114,13 @@ let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElem
     }
     #renderThumbnail() {
         return when(this._thumbnailUrl, (url) => html `<img
-					id="figure"
+					id="image"
 					part="img"
 					src=${url}
 					alt=${this.alt}
 					loading=${this.loading}
 					decoding="async"
-					draggable="false" />`, () => html `<umb-icon id="icon" name=${this.icon}></umb-icon>`);
+					draggable="false" />`, () => html `<umb-icon id="icon" name=${this.icon}></umb-icon> ${when(this.fileExt, (fileExt) => html `<small id="file-ext">${fileExt}</small>`)}`);
     }
     async #generateThumbnailUrl() {
         if (!this.unique)
@@ -143,6 +143,7 @@ let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElem
 				position: relative;
 				overflow: hidden;
 				display: flex;
+				flex-direction: column;
 				justify-content: center;
 				align-items: center;
 				width: 100%;
@@ -154,7 +155,7 @@ let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElem
 				margin-bottom: 1em;
 			}
 
-			#figure {
+			#image {
 				display: block;
 				width: 100%;
 				height: 100%;
@@ -174,6 +175,27 @@ let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElem
 				height: 100%;
 				font-size: var(--uui-size-8);
 			}
+
+			/* Filling the box is only right while the icon is alone in it. */
+			#icon:has(+ #file-ext) {
+				height: auto;
+			}
+
+			#file-ext {
+				flex: none;
+				max-width: 10ch;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				margin-top: var(--uui-size-space-2);
+				padding: 0 var(--uui-size-space-2);
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface-alt);
+				font-size: var(--uui-type-small-size);
+				font-weight: 700;
+				line-height: 1.5;
+				text-transform: uppercase;
+				white-space: nowrap;
+			}
 		`,
     ]; }
 };
@@ -198,6 +220,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbMediaThumbnailElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'file-ext' })
+], UmbMediaThumbnailElement.prototype, "fileExt", void 0);
 __decorate([
     property({ type: String })
 ], UmbMediaThumbnailElement.prototype, "loading", void 0);

package/dist-cms/packages/media/media/collection/action/create-media-collection-action.element.js

@@ -30,7 +30,7 @@ let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionAction
         this.#retrieveAllowedMediaTypesOf(this._mediaTypeUnique ?? '', this._mediaUnique || null);
     }
     async #retrieveAllowedMediaTypesOf(unique, parentContentUnique) {
-        const { data } = await this.#mediaTypeStructureRepository.requestAllowedChildrenOf(unique, parentContentUnique);
+        const { data } = await this.#mediaTypeStructureRepository.requestAllAllowedChildrenOf(unique, parentContentUnique);
         if (data && data.items) {
             this._allowedMediaTypes = data.items;
         }

package/dist-cms/packages/media/media/collection/item/media-collection-item-card.element.js

@@ -64,7 +64,8 @@ let UmbMediaCollectionItemCardElement = class UmbMediaCollectionItemCardElement
 				<umb-media-thumbnail
 					.unique=${this.item.unique}
 					alt=${ifDefined(this.item.name)}
-					icon=${ifDefined(this.item.icon)}></umb-media-thumbnail>
+					icon=${ifDefined(this.item.icon)}
+					.fileExt=${this.item.extension}></umb-media-thumbnail>
 				<slot name="actions" slot="actions"></slot>
 			</uui-card-media>
 		`;

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

@@ -1,16 +1,28 @@
 import type { UmbCollectionItemModel } from '../../../../core/collection/index.js';
 import type { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import type { UmbEntityWithFlags } from '../../../../core/entity-flag/index.js';
+import type { UmbReferenceByUnique } from '../../../../core/models/index.js';
 export interface UmbMediaCollectionItemModel extends UmbCollectionItemModel, UmbEntityWithFlags {
-    /** @deprecated Use `mediaType.alias` on `UmbMediaCollectionItemModel` instead. This field will be removed in v19 */
+    /** @deprecated Use `contentType.alias` on `UmbMediaCollectionItemModel` instead. This field will be removed in v19 */
     contentTypeAlias?: string;
+    contentType?: {
+        unique: string;
+        icon: string;
+        alias: string;
+        collection: UmbReferenceByUnique | null;
+    };
     createDate: Date;
     creator?: string | null;
+    /**
+     * @deprecated Use `contentType` instead. This field will be removed in v20.
+     */
     mediaType?: {
         unique: string;
         icon: string;
         alias: string;
     };
+    /** The file extension, without the leading dot and in lowercase. Undefined when the item holds no file. */
+    extension?: string;
     sortOrder?: number;
     updateDate: Date;
     updater?: string | null;

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../entity.js';
 import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../workspace/media-workspace.context-token.js';
+import { UMB_MEDIA_COLLECTION_CONTEXT } from './media-collection.context-token.js';
 import { customElement, html, ref, state, when, css, query } from '../../../../external/lit/index.js';
 import { UmbCollectionDefaultElement } from '../../../core/collection/index.js';
 import { UmbRequestReloadChildrenOfEntityEvent } from '../../../core/entity-action/index.js';
@@ -17,6 +18,9 @@ let UmbMediaCollectionElement = class UmbMediaCollectionElement extends UmbColle
         super();
         this._progress = -1;
         this._unique = null;
+        this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (context) => {
+            this.#collectionContext = context;
+        });
         this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (instance) => {
             this.observe(instance?.unique, (unique) => {
                 this._unique = unique ?? null;

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

@@ -21,18 +21,23 @@ export class UmbMediaCollectionServerDataSource {
             const items = data.items.map((item) => {
                 // TODO: [LK] Temp solution, review how to get the name from the corresponding variant.
                 const variant = item.variants[0];
+                const contentType = {
+                    unique: item.mediaType.id,
+                    icon: item.mediaType.icon,
+                    alias: item.mediaType.alias,
+                    collection: item.mediaType.collection ? { unique: item.mediaType.collection.id } : null,
+                };
                 const model = {
                     unique: item.id,
                     entityType: UMB_MEDIA_ENTITY_TYPE,
                     contentTypeAlias: item.mediaType.alias,
+                    contentType,
                     createDate: new Date(variant.createDate),
                     creator: item.creator,
                     icon: item.mediaType.icon,
-                    mediaType: {
-                        unique: item.mediaType.id,
-                        icon: item.mediaType.icon,
-                        alias: item.mediaType.alias,
-                    },
+                    extension: item.extension ?? undefined,
+                    // TODO (V20): remove when the deprecated `mediaType` field is removed.
+                    mediaType: { unique: contentType.unique, icon: contentType.icon, alias: contentType.alias },
                     name: variant.name,
                     sortOrder: item.sortOrder,
                     updateDate: new Date(variant.updateDate),

package/dist-cms/packages/media/media/collection/views/manifests.js

@@ -8,7 +8,7 @@ export const manifests = [
         element: () => import('./grid/media-grid-collection-view.element.js'),
         weight: 300,
         meta: {
-            label: 'Grid',
+            label: '#collection_gridViewLabel',
             icon: 'icon-grid',
             pathName: 'grid',
         },
@@ -26,7 +26,7 @@ export const manifests = [
         element: () => import('./table/media-table-collection-view.element.js'),
         weight: 200,
         meta: {
-            label: 'Table',
+            label: '#collection_tableViewLabel',
             icon: 'icon-table',
             pathName: 'table',
         },

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.d.ts

@@ -2,6 +2,22 @@ import type { UmbFocalPointModel } from '../../types.js';
 import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { PropertyValueMap } from '../../../../../external/lit/index.js';
+/**
+ * Displays an image with an interactive focal point, set by clicking, dragging,
+ * or using the arrow keys (hold Shift for finer steps) when focused.
+ *
+ * @element umb-image-cropper-focus-setter
+ * @fires focalpoint-change - Dispatched when the focal point changes.
+ *
+ * @attr {boolean} hidefocalpoint - Hides the focal point and disables
+ * interaction with it.
+ * @attr {boolean} disabled - Disables focal point interaction.
+ * @attr {string} src - The image source URL.
+ *
+ * @cssprop --umb-image-cropper-focus-setter-background - Background shown
+ * behind the image. Defaults to a checkerboard pattern that helps reveal
+ * transparent areas.
+ */
 export declare class UmbImageCropperFocusSetterElement extends UmbLitElement {
     #private;
     imageElement: HTMLImageElement;
@@ -9,6 +25,10 @@ export declare class UmbImageCropperFocusSetterElement extends UmbLitElement {
     focalPointElement: HTMLElement;
     private _isDraggingGridHandle;
     private _coords;
+    /**
+     * The current focal point as normalized coordinates between 0 and 1.
+     * Defaults to the center of the image when not set.
+     */
     set focalPoint(value: UmbFocalPointModel);
     get focalPoint(): UmbFocalPointModel;
     hideFocalPoint: boolean;

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -10,6 +10,22 @@ import { drag } from '../../../../../external/uui/index.js';
 import { clamp } from '../../../../core/utils/index.js';
 import { css, customElement, classMap, eventOptions, ifDefined, html, nothing, state, property, query, } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+/**
+ * Displays an image with an interactive focal point, set by clicking, dragging,
+ * or using the arrow keys (hold Shift for finer steps) when focused.
+ *
+ * @element umb-image-cropper-focus-setter
+ * @fires focalpoint-change - Dispatched when the focal point changes.
+ *
+ * @attr {boolean} hidefocalpoint - Hides the focal point and disables
+ * interaction with it.
+ * @attr {boolean} disabled - Disables focal point interaction.
+ * @attr {string} src - The image source URL.
+ *
+ * @cssprop --umb-image-cropper-focus-setter-background - Background shown
+ * behind the image. Defaults to a checkerboard pattern that helps reveal
+ * transparent areas.
+ */
 let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -20,6 +36,10 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         this.disabled = false;
         this.#DOT_RADIUS = 8;
     }
+    /**
+     * The current focal point as normalized coordinates between 0 and 1.
+     * Defaults to the center of the image when not set.
+     */
     set focalPoint(value) {
         this.#focalPoint = value;
         this.#setFocalPointStyle(this.#focalPoint.left, this.#focalPoint.top);
@@ -223,12 +243,20 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 		:host(:not([hidefocalpoint])) #wrapper {
 			cursor: crosshair;
 		}
+
 		#image {
 			margin: auto;
 			position: relative;
 			max-width: 100%;
 			max-height: 100%;
+			background-image: var(
+				--umb-image-cropper-focus-setter-background,
+				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-size: 10px 10px;
+			background-repeat: repeat;
 		}
+
 		#focal-point {
 			content: '';
 			display: block;

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

@@ -55,7 +55,8 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     get interactionMemories(): Array<UmbInteractionMemoryModel> | undefined;
     set interactionMemories(value: Array<UmbInteractionMemoryModel> | undefined);
     private _editMediaPath;
-    private _cards;
+    private _items;
+    private _statuses;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];