@umbraco-cms/backoffice 14.0.0-d335c2c2 → 14.0.0-d87d656d

package/dist-cms/mocks/data/template.data.js

@@ -1,9 +1,9 @@
 import { UmbEntityData } from './entity.data.js';
 import { createEntityTreeItem } from './utils.js';
 import { UmbId } from '../../packages/core/id/index.js';
+import { TemplateQueryPropertyTypeModel, OperatorModel, } from '../../external/backend-api/index.js';
 const createTemplate = (dbItem) => {
     return {
-        $type: '',
         id: dbItem.id,
         name: dbItem.name,
         alias: dbItem.alias,
@@ -18,13 +18,11 @@ const createTemplateItem = (dbItem) => ({
 });
 export const data = [
     {
-        $type: '',
         id: '2bf464b6-3aca-4388-b043-4eb439cc2643',
         isContainer: false,
         parentId: null,
         name: 'Doc 1',
         type: 'template',
-        icon: 'umb:layout',
         hasChildren: false,
         alias: 'Doc1',
         content: `@using Umbraco.Extensions
@@ -42,39 +40,33 @@ export const data = [
 		</div>`,
     },
     {
-        $type: '',
         id: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
         isContainer: false,
         parentId: null,
         name: 'Test',
         type: 'template',
-        icon: 'umb:layout',
         hasChildren: true,
         alias: 'Test',
         content: '@using Umbraco.Cms.Web.Common.PublishedModels;\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Test>\r\n@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;\r\n@{\r\n\tLayout = null;\r\n}',
     },
     {
-        $type: '',
         id: '9a84c0b3-03b4-4dd4-84ac-706740ac0f72',
         isContainer: false,
         parentId: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
         masterTemplateId: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
         name: 'Child',
         type: 'template',
-        icon: 'umb:layout',
         hasChildren: false,
         alias: 'Test',
         content: '@using Umbraco.Cms.Web.Common.PublishedModels;\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Test>\r\n@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;\r\n@{\r\n\tLayout = "Test.cshtml";\r\n}',
     },
     {
-        $type: '',
         id: '9a84c0b3-03b4-4dd4-84ac-706740acwerer0f72',
         isContainer: false,
         parentId: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
         name: 'Has Master Template',
         masterTemplateId: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
         type: 'template',
-        icon: 'umb:layout',
         hasChildren: false,
         alias: 'hasMasterTemplate',
         content: '@using Umbraco.Cms.Web.Common.PublishedModels;\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Test>\r\n@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;\r\n@{\r\n\tLayout = "Test.cshtml";\r\n}',
@@ -87,58 +79,79 @@ export const createTemplateScaffold = (masterTemplateAlias) => {
 	Layout = ${masterTemplateAlias};
 }`;
 };
+//prettier-ignore
+const templateQueryExpressions = [
+    `Umbraco.ContentAtRoot().FirstOrDefault()
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => x.IsVisible())`,
+    `Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544"))
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => x.IsVisible())`,
+    `Umbraco.ContentAtRoot().FirstOrDefault()
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => (x.Id != -6))
+.Where(x => x.IsVisible())
+.OrderBy(x => x.UpdateDate)`,
+];
+const randomIndex = () => Math.floor(Math.random() * 3);
+export const templateQueryResult = {
+    queryExpression: templateQueryExpressions[randomIndex()],
+    sampleResults: [],
+    resultCount: 0,
+    executionTime: 0,
+};
 export const templateQuerySettings = {
-    contentTypeAliases: [],
+    contentTypeAliases: ['docTypeWithTemplate', 'propertyTypeWithTemplate', 'somethingElse'],
     properties: [
         {
             alias: 'Id',
-            type: 'Integer',
+            type: TemplateQueryPropertyTypeModel.INTEGER,
         },
         {
             alias: 'Name',
-            type: 'String',
+            type: TemplateQueryPropertyTypeModel.STRING,
         },
         {
             alias: 'CreateDate',
-            type: 'DateTime',
+            type: TemplateQueryPropertyTypeModel.DATE_TIME,
         },
         {
             alias: 'UpdateDate',
-            type: 'DateTime',
+            type: TemplateQueryPropertyTypeModel.DATE_TIME,
         },
     ],
     operators: [
         {
-            operator: 'Equals',
-            applicableTypes: ['Integer', 'String'],
+            operator: OperatorModel.EQUALS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.STRING],
         },
         {
-            operator: 'NotEquals',
-            applicableTypes: ['Integer', 'String'],
+            operator: OperatorModel.NOT_EQUALS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.STRING],
         },
         {
-            operator: 'LessThan',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.LESS_THAN,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'LessThanEqualTo',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.GREATER_THAN_EQUAL_TO,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'GreaterThan',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.GREATER_THAN,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'GreaterThanEqualTo',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.GREATER_THAN_EQUAL_TO,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'Contains',
-            applicableTypes: ['String'],
+            operator: OperatorModel.CONTAINS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.STRING],
         },
         {
-            operator: 'NotContains',
-            applicableTypes: ['String'],
+            operator: OperatorModel.NOT_CONTAINS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.STRING],
         },
     ],
 };
@@ -147,6 +160,7 @@ class UmbTemplateData extends UmbEntityData {
     constructor() {
         super(data);
         this.getTemplateQuerySettings = () => templateQuerySettings;
+        this.getTemplateQueryResult = () => templateQueryResult;
     }
     getById(id) {
         const item = this.data.find((item) => item.id === id);
@@ -168,7 +182,6 @@ class UmbTemplateData extends UmbEntityData {
     }
     create(templateData) {
         const template = {
-            $type: '',
             id: UmbId.new(),
             ...templateData,
         };

package/dist-cms/mocks/data/user-groups.data.js

@@ -13,7 +13,6 @@ class UmbUserGroupsData extends UmbEntityData {
 }
 export const data = [
     {
-        $type: 'UserGroupResponseModel',
         id: 'c630d49e-4e7b-42ea-b2bc-edc0edacb6b1',
         name: 'Administrators',
         icon: 'umb:medal',

package/dist-cms/mocks/data/users.data.js

@@ -17,7 +17,6 @@ class UmbUsersData extends UmbData {
     getCurrentUser() {
         const firstUser = this.data[0];
         return {
-            $type: 'CurrentUserResponseModel',
             id: firstUser.id,
             name: firstUser.name,
             email: firstUser.email,
@@ -69,7 +68,6 @@ export const data = [
     {
         id: 'bca6c733-a63d-4353-a271-9a8b6bcca8bd',
         type: 'user',
-        $type: 'UserResponseModel',
         contentStartNodeIds: [],
         mediaStartNodeIds: [],
         name: 'Umbraco User',
@@ -87,7 +85,6 @@ export const data = [
     {
         id: '82e11d3d-b91d-43c9-9071-34d28e62e81d',
         type: 'user',
-        $type: 'UserResponseModel',
         contentStartNodeIds: [],
         mediaStartNodeIds: [],
         name: 'Amelie Walker',
@@ -105,7 +102,6 @@ export const data = [
     {
         id: 'aa1d83a9-bc7f-47d2-b288-58d8a31f5017',
         type: 'user',
-        $type: 'UserResponseModel',
         contentStartNodeIds: [],
         mediaStartNodeIds: [],
         name: 'Oliver Kim',
@@ -123,7 +119,6 @@ export const data = [
     {
         id: 'ff2f4a50-d3d4-4bc4-869d-c7948c160e54',
         type: 'user',
-        $type: 'UserResponseModel',
         contentStartNodeIds: [],
         mediaStartNodeIds: [],
         name: 'Eliana Nieves',
@@ -141,7 +136,6 @@ export const data = [
     {
         id: 'c290c6d9-9f12-4838-8567-621b52a178de',
         type: 'user',
-        $type: 'UserResponseModel',
         contentStartNodeIds: [],
         mediaStartNodeIds: [],
         name: 'Jasmine Patel',

package/dist-cms/mocks/data/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ContentTreeItemResponseModel, DocumentTreeItemResponseModel, DocumentTypeTreeItemResponseModel, EntityTreeItemResponseModel, FolderTreeItemResponseModel, DocumentTypeResponseModel, FileSystemTreeItemPresentationModel, DocumentResponseModel } from '../../external/backend-api/index.js';
+import type { ContentTreeItemResponseModel, DocumentTreeItemResponseModel, DocumentTypeTreeItemResponseModel, EntityTreeItemResponseModel, FolderTreeItemResponseModel, DocumentTypeResponseModel, FileSystemTreeItemPresentationModel, DocumentResponseModel, TextFileResponseModelBaseModel } from '../../external/backend-api/index.js';
 export declare const createEntityTreeItem: (item: any) => EntityTreeItemResponseModel;
 export declare const createFolderTreeItem: (item: any) => FolderTreeItemResponseModel;
 export declare const createContentTreeItem: (item: any) => ContentTreeItemResponseModel & {
@@ -9,3 +9,4 @@ export declare const createDocumentTreeItem: (item: DocumentResponseModel) => Do
 };
 export declare const createDocumentTypeTreeItem: (item: DocumentTypeResponseModel) => DocumentTypeTreeItemResponseModel;
 export declare const createFileSystemTreeItem: (item: any) => FileSystemTreeItemPresentationModel;
+export declare const createTextFileItem: (item: any) => TextFileResponseModelBaseModel;

package/dist-cms/mocks/data/utils.js

@@ -1,9 +1,7 @@
 export const createEntityTreeItem = (item) => {
     return {
-        $type: '',
         name: item.name,
         type: item.type,
-        icon: item.icon,
         hasChildren: item.hasChildren,
         id: item.id,
         isContainer: item.isContainer,
@@ -13,7 +11,6 @@ export const createEntityTreeItem = (item) => {
 export const createFolderTreeItem = (item) => {
     return {
         ...createEntityTreeItem(item),
-        $type: 'FolderTreeItemResponseModel',
         isFolder: item.isFolder,
     };
 };
@@ -30,7 +27,6 @@ export const createContentTreeItem = (item) => {
 export const createDocumentTreeItem = (item) => {
     return {
         ...createContentTreeItem(item),
-        $type: 'DocumentTreeItemViewModel',
         type: 'document',
         icon: 'document',
         name: item.variants?.[0].name ?? '',
@@ -54,9 +50,13 @@ export const createFileSystemTreeItem = (item) => {
     return {
         name: item.name,
         type: item.type,
-        icon: item.icon,
         hasChildren: item.hasChildren,
         path: item.path,
         isFolder: item.isFolder,
     };
 };
+export const createTextFileItem = (item) => ({
+    path: item.path,
+    name: item.name,
+    content: item.content,
+});

package/dist-cms/mocks/handlers/dictionary.handlers.js

@@ -6,14 +6,12 @@ const uploadResponse = {
 };
 /// TODO: get correct type
 const importResponse = {
-    $type: '',
     parentId: null,
     name: 'Uploaded dictionary',
     id: 'b7e7d0ab-53ba-485d-dddd-12537f9925cb',
     hasChildren: false,
     type: 'dictionary-item',
     isContainer: false,
-    icon: 'umb:book-alt',
     translations: [
         {
             isoCode: 'en',

package/dist-cms/mocks/handlers/document.handlers.js

@@ -3,24 +3,24 @@ import { umbDocumentData } from '../data/document.data.js';
 import { umbracoPath } from '../../shared/utils/index.js';
 // TODO: add schema
 export const handlers = [
-    rest.post('/umbraco/management/api/v1/document/trash', async (req, res, ctx) => {
+    rest.post(umbracoPath('/document/trash'), async (req, res, ctx) => {
         console.warn('Please move to schema');
         const ids = await req.json();
         const trashed = umbDocumentData.trash(ids);
         return res(ctx.status(200), ctx.json(trashed));
     }),
-    rest.get('/umbraco/management/api/v1/tree/document/root', (req, res, ctx) => {
+    rest.get(umbracoPath('/tree/document/root'), (req, res, ctx) => {
         const response = umbDocumentData.getTreeRoot();
         return res(ctx.status(200), ctx.json(response));
     }),
-    rest.get('/umbraco/management/api/v1/tree/document/children', (req, res, ctx) => {
+    rest.get(umbracoPath('/tree/document/children'), (req, res, ctx) => {
         const parentId = req.url.searchParams.get('parentId');
         if (!parentId)
             return;
         const response = umbDocumentData.getTreeItemChildren(parentId);
         return res(ctx.status(200), ctx.json(response));
     }),
-    rest.get('/umbraco/management/api/v1/tree/document/item', (req, res, ctx) => {
+    rest.get(umbracoPath('/tree/document/item'), (req, res, ctx) => {
         const ids = req.url.searchParams.getAll('id');
         if (!ids)
             return;
@@ -44,6 +44,17 @@ export const handlers = [
         const saved = umbDocumentData.save(id, data);
         return res(ctx.status(200), ctx.json(saved));
     }),
+    rest.get(umbracoPath('/document/root/allowed-document-types'), (req, res, ctx) => {
+        const response = umbDocumentData.getAllowedDocumentTypesAtRoot();
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.get(umbracoPath('/document/:id/allowed-document-types'), (req, res, ctx) => {
+        const id = req.params.id;
+        if (!id)
+            return;
+        const response = umbDocumentData.getDocumentByIdAllowedDocumentTypes(id);
+        return res(ctx.status(200), ctx.json(response));
+    }),
     rest.get(umbracoPath('/document/:id'), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)

package/dist-cms/mocks/handlers/partial-views.handlers.d.ts

@@ -1 +1,2 @@
-export declare const handlers: import("msw").RestHandler<import("msw/lib/glossary-de6278a9.js").M<import("msw/lib/glossary-de6278a9.js").h>>[];
+import { RestHandler, MockedRequest, DefaultBodyType } from 'msw';
+export declare const handlers: RestHandler<MockedRequest<DefaultBodyType>>[];

package/dist-cms/mocks/handlers/partial-views.handlers.js

@@ -1,23 +1,55 @@
 const { rest } = window.MockServiceWorker;
-import { umbPartialViewsData } from '../data/partial-views.data.js';
+import { umbPartialViewsData, umbPartialViewsTreeData } from '../data/partial-views.data.js';
 import { umbracoPath } from '../../shared/utils/index.js';
-export const handlers = [
+const treeHandlers = [
     rest.get(umbracoPath('/tree/partial-view/root'), (req, res, ctx) => {
-        const response = umbPartialViewsData.getTreeRoot();
+        const response = umbPartialViewsTreeData.getTreeRoot();
         return res(ctx.status(200), ctx.json(response));
     }),
     rest.get(umbracoPath('/tree/partial-view/children'), (req, res, ctx) => {
         const path = req.url.searchParams.get('path');
         if (!path)
             return;
-        const response = umbPartialViewsData.getTreeItemChildren(path);
+        const response = umbPartialViewsTreeData.getTreeItemChildren(path);
         return res(ctx.status(200), ctx.json(response));
     }),
     rest.get(umbracoPath('/tree/partial-view/item'), (req, res, ctx) => {
         const paths = req.url.searchParams.getAll('paths');
         if (!paths)
             return;
-        const items = umbPartialViewsData.getTreeItem(paths);
+        const items = umbPartialViewsTreeData.getTreeItem(paths);
         return res(ctx.status(200), ctx.json(items));
     }),
 ];
+const detailHandlers = [
+    rest.get(umbracoPath('/partial-view'), (req, res, ctx) => {
+        const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-cshtml', '.cshtml');
+        if (!path)
+            return res(ctx.status(400));
+        const response = umbPartialViewsData.getPartialView(path);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.post(umbracoPath('/partial-view'), (req, res, ctx) => {
+        const requestBody = req.json();
+        if (!requestBody)
+            return res(ctx.status(400, 'no body found'));
+        const response = umbPartialViewsData.insertPartialView(requestBody);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.delete(umbracoPath('/partial-view'), (req, res, ctx) => {
+        const path = req.url.searchParams.get('path');
+        if (!path)
+            return res(ctx.status(400));
+        const response = umbPartialViewsData.delete([path]);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.put(umbracoPath('/partial-view'), (req, res, ctx) => {
+        const requestBody = req.json();
+        if (!requestBody)
+            return res(ctx.status(400, 'no body found'));
+        const response = umbPartialViewsData.updateData(requestBody);
+        return res(ctx.status(200));
+    }),
+];
+const folderHandlers = [];
+export const handlers = [...treeHandlers, ...detailHandlers, ...folderHandlers];

package/dist-cms/mocks/handlers/performance-profiling.handlers.js

@@ -6,4 +6,9 @@ export const handlers = [
         // Respond with a 200 status code
         ctx.status(200), ctx.json({ enabled: true }));
     }),
+    rest.put(umbracoPath('/profiling/status'), (_req, res, ctx) => {
+        return res(
+        // Respond with a 200 status code
+        ctx.status(200));
+    }),
 ];

package/dist-cms/mocks/handlers/template.handlers.js

@@ -39,6 +39,10 @@ export const handlers = [
         const response = umbTemplateData.getTemplateQuerySettings();
         return res(ctx.status(200), ctx.json(response));
     }),
+    rest.post(umbracoPath('/template/query/execute'), (req, res, ctx) => {
+        const response = umbTemplateData.getTemplateQueryResult();
+        return res(ctx.status(200), ctx.json(response));
+    }),
     rest.get(umbracoPath('/template/:id'), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)

package/dist-cms/packages/core/collection/collection-selection-actions.element.d.ts

@@ -12,7 +12,7 @@ export declare class UmbCollectionSelectionActionsElement extends UmbLitElement
     private _handleClearSelection;
     private _observeCollectionContext;
     private _renderSelectionCount;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }
 declare global {

package/dist-cms/packages/core/components/button-with-dropdown/button-with-dropdown.element.d.ts

@@ -10,6 +10,8 @@ export declare class UmbButtonWithDropdownElement extends LitElement {
     compact: boolean;
     symbolExpand: UUISymbolExpandElement;
     popover: UUIPopoverElement;
+    openPopover(): void;
+    closePopover(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/components/button-with-dropdown/button-with-dropdown.element.js

@@ -18,22 +18,22 @@ export let UmbButtonWithDropdownElement = class UmbButtonWithDropdownElement ext
         this.placement = 'bottom-start';
         this.compact = false;
     }
-    #openPopover() {
+    openPopover() {
         this.open = true;
         this.popover.open = true;
         this.symbolExpand.open = true;
     }
-    #closePopover() {
+    closePopover() {
         this.open = false;
         this.popover.open = false;
         this.symbolExpand.open = false;
     }
     #togglePopover() {
-        this.open ? this.#closePopover() : this.#openPopover();
+        this.open ? this.closePopover() : this.openPopover();
     }
     render() {
         return html `
-			<uui-popover placement=${this.placement} id="popover" @close=${this.#closePopover}>
+			<uui-popover placement=${this.placement} id="popover" @close=${this.closePopover}>
 				<uui-button
 					slot="trigger"
 					.look=${this.look}

package/dist-cms/packages/core/components/code-block/code-block.element.d.ts

@@ -1,10 +1,15 @@
 import { LitElement } from '../../../../external/lit/index.js';
 /**
- *  A simple styled box for showing code-based error messages.
+ *  A simple styled box for showing code-based error messages or blocks od code.
  *  @slot the full message
  *
  */
 export declare class UmbCodeBlockElement extends LitElement {
+    language: string;
+    copy: boolean;
+    nodes: NodeListOf<ChildNode>;
+    copyState: 'idle' | 'success';
+    copyCode(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/components/code-block/code-block.element.js

@@ -5,54 +5,128 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UUITextStyles } from '../../../../external/uui/index.js';
-import { css, html, LitElement, customElement } from '../../../../external/lit/index.js';
+import { css, html, LitElement, customElement, property, queryAssignedNodes, state, } from '../../../../external/lit/index.js';
+//TODO consider adding a highlight prop to the code block, that could spin up/access monaco instance and highlight the code
 /**
- *  A simple styled box for showing code-based error messages.
+ *  A simple styled box for showing code-based error messages or blocks od code.
  *  @slot the full message
  *
  */
 export let UmbCodeBlockElement = class UmbCodeBlockElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.language = '';
+        this.copy = false;
+        this.copyState = 'idle';
+    }
+    async copyCode() {
+        const text = this.textContent;
+        if (text) {
+            await navigator.clipboard.writeText(text);
+            this.copyState = 'success';
+            setTimeout(() => {
+                this.copyState = 'idle';
+            }, 2000);
+        }
+    }
     render() {
-        return html `<div id="container">
-			<uui-scroll-container>
-				<pre>
+        return html `
+			${this.language
+            ? html `<div id="header">
+						<span id="lang">${this.language}</span> ${this.copy
+                ? html `<button @click=${this.copyCode}>
+									${this.copyState === 'idle'
+                    ? html `<uui-icon name="copy"></uui-icon>Copy`
+                    : html `<uui-icon name="check"></uui-icon>Copied!`}
+							  </button>`
+                : ''}
+				  </div>`
+            : ''}
+			<pre style="${this.language ? 'border-top: 1px solid var(--uui-color-divider-emphasis);' : ''}">
+				<uui-scroll-container>
 					<code>
 						<slot></slot>
 					</code>
+					</uui-scroll-container>
 				</pre>
-			</uui-scroll-container>
-		</div> `;
+		`;
     }
     static { this.styles = [
         UUITextStyles,
         css `
 			:host {
 				display: block;
-				font-family: monospace;
-			}
-
-			#container {
 				border: 1px solid var(--uui-color-divider-emphasis);
-				color: var(--uui-color-text-alt);
-				background-color: var(--uui-color-divider-standalone);
-				padding: var(--uui-size-space-2);
 				border-radius: var(--uui-border-radius);
-				line-height: var(--uui-size-10);
 			}
-			:host uui-scroll-container {
+
+			uui-scroll-container {
 				max-height: 500px;
 				overflow-y: auto;
 				overflow-wrap: anywhere;
 			}
+
 			pre {
-				max-width: 100%;
+				font-family: monospace;
+				background-color: var(--uui-color-surface-alt);
+				color: #303033;
+				display: block;
+				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+				margin: 0;
+				overflow-x: auto;
+				padding: 9.5px;
+			}
+
+			pre,
+			code {
+				word-wrap: normal;
 				white-space: pre-line;
-				word-break: break-word;
-				overflow-wrap: break-word;
+			}
+
+			#header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				background-color: var(--uui-color-surface-alt);
+			}
+
+			#lang {
+				margin-left: 16px;
+				font-weight: bold;
+				text-transform: uppercase;
+			}
+
+			button {
+				font-family: inherit;
+				padding: 6px 16px;
+				background-color: transparent;
+				border: none;
+				border-left: 1px solid var(--uui-color-divider-emphasis);
+				border-radius: 0;
+				color: #000;
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			button:hover {
+				background-color: var(--uui-color-surface-emphasis);
 			}
 		`,
     ]; }
 };
+__decorate([
+    property()
+], UmbCodeBlockElement.prototype, "language", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbCodeBlockElement.prototype, "copy", void 0);
+__decorate([
+    queryAssignedNodes()
+], UmbCodeBlockElement.prototype, "nodes", void 0);
+__decorate([
+    state()
+], UmbCodeBlockElement.prototype, "copyState", void 0);
 UmbCodeBlockElement = __decorate([
     customElement('umb-code-block')
 ], UmbCodeBlockElement);

package/dist-cms/packages/core/components/data-type/data-type-property-collection.class.d.ts

@@ -1,4 +1,4 @@
-import { type UmbDataTypeConfigProperty, type UmbDataTypeConfig } from '../../property-editors/index.js';
+import { type UmbDataTypeConfigProperty, type UmbDataTypeConfig } from '../../property-editor/index.js';
 import { DataTypePropertyPresentationModel } from '../../../../external/backend-api/index.js';
 /**
  * Extends Array to add utility functions for accessing data type properties