@umbraco-cms/backoffice 14.1.0-rc2 → 14.1.1

package/dist-cms/custom-elements.json

@@ -2810,7 +2810,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t\\t--umb-split-panel-initial-position: 50%;\\n\\t\\t\\t--umb-split-panel-start-min-width: 0;\\n\\t\\t\\t--umb-split-panel-end-min-width: 0;\\n\\t\\t\\t--umb-split-panel-divider-touch-area-width: 20px;\\n\\t\\t\\t--umb-split-panel-divider-width: 1px;\\n\\t\\t\\t--umb-split-panel-divider-color: transparent;\\n\\t\\t\\t--umb-split-panel-slot-overflow: hidden;\\n\\t\\t}\\n\\t\\tslot {\\n\\t\\t\\toverflow: var(--umb-split-panel-slot-overflow);\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tmin-height: 0;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t#divider {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 999999;\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t#divider-touch-area {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-touch-area-width);\\n\\t\\t\\ttransform: translateX(-50%);\\n\\t\\t\\tcursor: col-resize;\\n\\t\\t}\\n\\t\\t/* Do we want a line that shows the divider? */\\n\\t\\t#divider::after {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 50%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-width);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\ttransform: round(translateX(-50%));\\n\\t\\t\\tbackground-color: var(--umb-split-panel-divider-color);\\n\\t\\t\\tz-index: -1;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t\\t--umb-split-panel-initial-position: 50%;\\n\\t\\t\\t--umb-split-panel-start-min-width: 0;\\n\\t\\t\\t--umb-split-panel-end-min-width: 0;\\n\\t\\t\\t--umb-split-panel-divider-touch-area-width: 20px;\\n\\t\\t\\t--umb-split-panel-divider-width: 1px;\\n\\t\\t\\t--umb-split-panel-divider-color: transparent;\\n\\t\\t\\t--umb-split-panel-slot-overflow: hidden;\\n\\t\\t}\\n\\t\\tslot {\\n\\t\\t\\toverflow: var(--umb-split-panel-slot-overflow);\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tmin-height: 0;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t#divider {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 999999;\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t#divider-touch-area {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 5px;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-touch-area-width);\\n\\t\\t\\ttransform: translateX(-50%);\\n\\t\\t\\tcursor: col-resize;\\n\\t\\t}\\n\\t\\t/* Do we want a line that shows the divider? */\\n\\t\\t#divider::after {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 50%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-width);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\ttransform: round(translateX(-50%));\\n\\t\\t\\tbackground-color: var(--umb-split-panel-divider-color);\\n\\t\\t\\tz-index: -1;\\n\\t\\t}\\n\\t`\""
         }
       ],
       "events": [

package/dist-cms/packages/block/block/workspace/block-workspace.context.js

@@ -112,6 +112,52 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             this.#initialLayout ??= layoutData;
             this.removeUmbControllerByAlias('observeLayoutInitially');
         }, 'observeLayoutInitially');
+        this.#observeBlockData(unique);
+        if (this.#liveEditingMode) {
+            this.#establishLiveSync();
+        }
+    }
+    async create(contentElementTypeId) {
+        await this.#retrieveBlockEntries;
+        await this.#retrieveModalContext;
+        if (!this.#blockEntries) {
+            throw new Error('Block Entries not found');
+            return;
+        }
+        if (!this.#modalContext) {
+            throw new Error('Modal Context not found');
+            return;
+        }
+        // TODO: Missing some way to append more layout data... this could be part of modal data, (or context api?)
+        this.setIsNew(true);
+        const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#modalContext.data);
+        if (!blockCreated) {
+            throw new Error('Block Entries could not create block');
+        }
+        // TODO: We should investigate if it makes sense to gather
+        if (!this.#liveEditingMode) {
+            this.#layout.setValue(blockCreated.layout);
+            this.content.setData(blockCreated.content);
+            if (blockCreated.settings) {
+                this.settings.setData(blockCreated.settings);
+            }
+        }
+        else {
+            // Insert already, cause we are in live editing mode:
+            const blockInserted = await this.#blockEntries.insert(blockCreated.layout, blockCreated.content, blockCreated.settings, this.#modalContext.data);
+            if (!blockInserted) {
+                throw new Error('Block Entries could not insert block');
+            }
+            const unique = blockCreated.layout.contentUdi;
+            this.#observeBlockData(unique);
+            this.#establishLiveSync();
+        }
+    }
+    #observeBlockData(unique) {
+        if (!this.#blockEntries) {
+            throw new Error('Block Entries not found');
+            return;
+        }
         this.observe(this.#blockEntries.layoutOf(unique), (layoutData) => {
             this.#layout.setValue(layoutData);
             // Content:
@@ -142,40 +188,6 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
                 }
             }
         }, 'observeLayout');
-        if (this.#liveEditingMode) {
-            this.#establishLiveSync();
-        }
-    }
-    async create(contentElementTypeId) {
-        await this.#retrieveBlockEntries;
-        await this.#retrieveModalContext;
-        if (!this.#blockEntries) {
-            throw new Error('Block Entries not found');
-            return;
-        }
-        if (!this.#modalContext) {
-            throw new Error('Modal Context not found');
-            return;
-        }
-        // TODO: Missing some way to append more layout data... this could be part of modal data, (or context api?)
-        this.setIsNew(true);
-        const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#modalContext.data);
-        if (!blockCreated) {
-            throw new Error('Block Entries could not create block');
-        }
-        this.#layout.setValue(blockCreated.layout);
-        this.content.setData(blockCreated.content);
-        if (blockCreated.settings) {
-            this.settings.setData(blockCreated.settings);
-        }
-        if (this.#liveEditingMode) {
-            // Insert already, cause we are in live editing mode:
-            const blockInserted = await this.#blockEntries.insert(blockCreated.layout, blockCreated.content, blockCreated.settings, this.#modalContext.data);
-            if (!blockInserted) {
-                throw new Error('Block Entries could not insert block');
-            }
-            this.#establishLiveSync();
-        }
     }
     #establishLiveSync() {
         this.observe(this.layout, (layoutData) => {

package/dist-cms/packages/core/components/split-panel/split-panel.element.js

@@ -242,7 +242,7 @@ let UmbSplitPanelElement = class UmbSplitPanelElement extends LitElement {
 		#divider-touch-area {
 			position: absolute;
 			top: 0;
-			left: 0;
+			left: 5px;
 			height: 100%;
 			width: var(--umb-split-panel-divider-touch-area-width);
 			transform: translateX(-50%);

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

@@ -28,6 +28,7 @@ export declare class UmbPropertyEditorUIDatePickerElement extends UmbLitElement
     private _max?;
     private _step?;
     value?: string;
+    private _inputValue?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbPropertyValueChangeEvent } from '../../core/property-editor/index.js';
-import { html, customElement, property, state, ifDefined } from '../../../external/lit/index.js';
+import { html, customElement, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 /**
  * This property editor allows the user to pick a date, datetime-local, or time.
@@ -37,8 +37,8 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
             return;
         // Format string prevalue/config
         const format = config.getValueByAlias('format');
-        const hasTime = format?.includes('H') || format?.includes('m');
-        const hasSeconds = format?.includes('s');
+        const hasTime = (format?.includes('H') || format?.includes('m')) ?? false;
+        const hasSeconds = format?.includes('s') ?? false;
         this._inputType = hasTime ? 'datetime-local' : 'date';
         // Based on the type of format string change the UUI-input type
         // Note: The format string is not validated, so it's possible to have an invalid format string,
@@ -56,28 +56,47 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
         }
     }
     #onChange(event) {
-        this.#formatValue(event.target.value.toString());
+        let value = event.target.value.toString();
+        switch (this._inputType) {
+            case 'time':
+                value = `0001-01-01 ${value}`;
+                break;
+            case 'date':
+                value = `${value} 00:00:00`;
+                break;
+            case 'datetime-local':
+                value = value.replace('T', ' ');
+                break;
+        }
+        this.#syncValue(value);
     }
     /**
      * Formats the value depending on the input type.
      */
     #formatValue(value) {
-        // Check that the value is a valid date
-        const valueToDate = new Date(value);
-        if (isNaN(valueToDate.getTime())) {
-            console.warn('[Umbraco.DatePicker] The value is not a valid date.', value);
+        this._inputValue = undefined;
+        if (isNaN(new Date(value).getTime())) {
+            console.warn(`[UmbDatePicker] Invalid date: ${value}`);
             return;
         }
-        // Replace the potential time demoninator 'T' with a whitespace for backwards compatibility
-        value = value.replace('T', ' ');
-        // If the inputType is 'date', we need to make sure the value doesn't have a time
-        if (this._inputType === 'date' && value.includes(' ')) {
-            value = value.split(' ')[0];
+        const dateSplit = value.split(' ');
+        if (dateSplit.length !== 2) {
+            console.warn(`[UmbDatePicker] Invalid date: ${value}`);
+            return;
         }
-        // If the inputType is 'time', we need to remove the date part of the value
-        if (this._inputType === 'time' && value.includes(' ')) {
-            value = value.split(' ')[1];
+        switch (this._inputType) {
+            case 'time':
+                this._inputValue = dateSplit[1];
+                break;
+            case 'date':
+                this._inputValue = dateSplit[0];
+                break;
+            default:
+                this._inputValue = dateSplit.join('T');
+                break;
         }
+    }
+    #syncValue(value) {
         const valueHasChanged = this.value !== value;
         if (valueHasChanged) {
             this.value = value;
@@ -87,7 +106,7 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
     render() {
         return html `
 			<umb-input-date
-				value="${ifDefined(this.value)}"
+				.value=${this._inputValue}
 				.min=${this._min}
 				.max=${this._max}
 				.step=${this._step}
@@ -112,6 +131,9 @@ __decorate([
 __decorate([
     property()
 ], UmbPropertyEditorUIDatePickerElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIDatePickerElement.prototype, "_inputValue", void 0);
 UmbPropertyEditorUIDatePickerElement = __decorate([
     customElement('umb-property-editor-ui-date-picker')
 ], UmbPropertyEditorUIDatePickerElement);

package/dist-cms/packages/ufm/components/ufm-render/ufm-render.element.js

@@ -82,6 +82,7 @@ let UmbUfmRenderElement = class UmbUfmRenderElement extends UmbLitElement {
         css `
 			* {
 				max-width: 100%;
+				word-wrap: break-word;
 			}
 
 			pre {