@umbraco-cms/backoffice 14.0.0--preview004-3ccd7a3d → 14.0.0--preview004-c83185ce

package/dist-cms/custom-elements.json

@@ -1147,6 +1147,38 @@
         }
       ]
     },
+    {
+      "name": "umb-input-markdown",
+      "path": "./../src/packages/core/components/input-markdown-editor/input-markdown.element.ts",
+      "attributes": [
+        {
+          "name": "preview",
+          "type": "boolean | undefined"
+        }
+      ],
+      "properties": [
+        {
+          "name": "preview",
+          "attribute": "preview",
+          "type": "boolean | undefined"
+        },
+        {
+          "name": "isCodeEditorReady",
+          "default": "\"this.#isCodeEditorReady.asObservable()\""
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "when the value of the input changes"
+        }
+      ]
+    },
     {
       "name": "umb-input-multi-url",
       "path": "./../src/packages/core/components/input-multi-url/input-multi-url.element.ts",
@@ -3207,6 +3239,11 @@
           "type": "array",
           "default": "[\"UmbTextStyles\"]"
         }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
+        }
       ]
     },
     {

package/dist-cms/packages/core/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './input-checkbox-list/index.js';
 export * from './input-color/index.js';
 export * from './input-eye-dropper/index.js';
 export * from './input-list-base/index.js';
+export * from './input-markdown-editor/index.js';
 export * from './input-multi-url/index.js';
 export * from './input-tiny-mce/index.js';
 export * from './input-number-range/index.js';

package/dist-cms/packages/core/components/index.js

@@ -17,6 +17,7 @@ export * from './input-checkbox-list/index.js';
 export * from './input-color/index.js';
 export * from './input-eye-dropper/index.js';
 export * from './input-list-base/index.js';
+export * from './input-markdown-editor/index.js';
 export * from './input-multi-url/index.js';
 export * from './input-tiny-mce/index.js';
 export * from './input-number-range/index.js';

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

@@ -0,0 +1 @@
+export * from './input-markdown.element.js';

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

@@ -0,0 +1 @@
+export * from './input-markdown.element.js';

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

@@ -0,0 +1,24 @@
+import { UmbCodeEditorElement } from '../../../templating/code-editor/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+declare const UmbInputMarkdownElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+/**
+ * @element umb-input-markdown
+ * @fires change - when the value of the input changes
+ */
+export declare class UmbInputMarkdownElement extends UmbInputMarkdownElement_base {
+    #private;
+    protected getFormElement(): undefined;
+    preview?: boolean;
+    isCodeEditorReady: import("rxjs").Observable<boolean>;
+    _codeEditor?: UmbCodeEditorElement;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    renderPreview(): import("lit-html").TemplateResult<1> | undefined;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-markdown': UmbInputMarkdownElement;
+    }
+}
+export {};

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

@@ -0,0 +1,78 @@
+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 { loadCodeEditor } from '../../../templating/code-editor/index.js';
+import { css, html, customElement, query, property } from '../../../../external/lit/index.js';
+import { FormControlMixin } from '../../../../external/uui/index.js';
+import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+/**
+ * @element umb-input-markdown
+ * @fires change - when the value of the input changes
+ */
+export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
+    getFormElement() {
+        return undefined;
+    }
+    #isCodeEditorReady;
+    constructor() {
+        super();
+        this.#isCodeEditorReady = new UmbBooleanState(false);
+        this.isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+        this.#loadCodeEditor();
+    }
+    async #loadCodeEditor() {
+        try {
+            await loadCodeEditor();
+            this._codeEditor?.editor?.updateOptions({
+                lineNumbers: false,
+                minimap: false,
+                folding: false,
+            });
+            this.#isCodeEditorReady.next(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    render() {
+        return html ` <div id="actions"></div>
+			<umb-code-editor language="markdown" .code=${this.value}></umb-code-editor>
+			${this.renderPreview()}`;
+    }
+    renderPreview() {
+        if (!this.preview)
+            return;
+        return html `<div>TODO Preview</div>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+			#actions {
+				background-color: var(--uui-color-background-alt);
+				display: flex;
+			}
+
+			umb-code-editor {
+				height: 200px;
+				border-radius: var(--uui-border-radius);
+				border: 1px solid var(--uui-color-divider-emphasis);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean })
+], UmbInputMarkdownElement.prototype, "preview", void 0);
+__decorate([
+    query('umb-code-editor')
+], UmbInputMarkdownElement.prototype, "_codeEditor", void 0);
+UmbInputMarkdownElement = __decorate([
+    customElement('umb-input-markdown')
+], UmbInputMarkdownElement);

package/dist-cms/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.element.d.ts

@@ -5,8 +5,10 @@ import { UmbPropertyEditorConfigCollection } from '../../index.js';
  * @element umb-property-editor-ui-markdown-editor
  */
 export declare class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
+    #private;
     value: string;
-    config?: UmbPropertyEditorConfigCollection;
+    private _preview?;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { html, customElement, property, state } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-markdown-editor
@@ -15,17 +15,30 @@ export let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIM
         super(...arguments);
         this.value = '';
     }
+    set config(config) {
+        this._preview = config?.getValueByAlias('preview');
+    }
+    #onChange(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('property-value-change'));
+    }
     render() {
-        return html `<div>umb-property-editor-ui-markdown-editor</div>`;
+        return html `<umb-input-markdown
+			?preview=${this._preview}
+			@change=${this.#onChange}
+			.value=${this.value}></umb-input-markdown>`;
     }
     static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property()
 ], UmbPropertyEditorUIMarkdownEditorElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIMarkdownEditorElement.prototype, "_preview", void 0);
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUIMarkdownEditorElement.prototype, "config", void 0);
+], UmbPropertyEditorUIMarkdownEditorElement.prototype, "config", null);
 UmbPropertyEditorUIMarkdownEditorElement = __decorate([
     customElement('umb-property-editor-ui-markdown-editor')
 ], UmbPropertyEditorUIMarkdownEditorElement);

package/dist-cms/packages/core/sorter/stories/test-sorter-controller.element.d.ts

@@ -5,7 +5,9 @@ type SortEntryType = {
     value: string;
 };
 export default class UmbTestSorterControllerElement extends UmbLitElement {
+    #private;
     sorter: UmbSorterController<SortEntryType>;
+    private vertical;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/core/sorter/stories/test-sorter-controller.element.js

@@ -6,13 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbSorterController } from '../sorter.controller.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import { css, customElement, html } from '../../../../external/lit/index.js';
-const sorterConfig = {
+import { css, customElement, html, state } from '../../../../external/lit/index.js';
+const SORTER_CONFIG = {
     compareElementToModel: (element, model) => {
         return element.getAttribute('data-sort-entry-id') === model.id;
     },
     querySelectModelToElement: (container, modelEntry) => {
-        return container.querySelector('data-sort-entry-id[' + modelEntry.id + ']');
+        return container.querySelector('data-sort-entry-id=[' + modelEntry.id + ']');
     },
     identifier: 'test-sorter',
     itemSelector: 'li',
@@ -35,13 +35,27 @@ const model = [
 let UmbTestSorterControllerElement = class UmbTestSorterControllerElement extends UmbLitElement {
     constructor() {
         super();
-        this.sorter = new UmbSorterController(this, sorterConfig);
+        this.vertical = true;
+        this.sorter = new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            resolveVerticalDirection: () => {
+                this.vertical ? true : false;
+            },
+        });
         this.sorter.setModel(model);
     }
+    #toggle() {
+        this.vertical = !this.vertical;
+    }
     render() {
         return html `
-			<ul>
-				${model.map((entry) => html `<li id="${'sort' + entry.id}" data-sort-entry-id="${entry.id}">${entry.value}</li>`)}
+			<uui-button label="Change direction" look="outline" color="positive" @click=${this.#toggle}>
+				Horizontal/Vertical
+			</uui-button>
+			<ul class="${this.vertical ? 'vertical' : 'horizontal'}">
+				${model.map((entry) => html `<li class="item" data-sort-entry-id="${entry.id}">
+							<span><uui-icon name="umb:wand"></uui-icon>${entry.value}</span>
+						</li>`)}
 			</ul>
 		`;
     }
@@ -49,43 +63,54 @@ let UmbTestSorterControllerElement = class UmbTestSorterControllerElement extend
         css `
 			:host {
 				display: block;
+				box-sizing: border-box;
 			}
 
 			ul {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
 				list-style: none;
 				padding: 0;
-				margin: 0;
+				margin: 10px 0;
 			}
 
-			li {
-				padding: 10px;
-				margin: 5px;
-				background: #eee;
+			ul.horizontal {
+				flex-direction: row;
 			}
 
-			li:hover {
-				background: #ddd !important;
-				cursor: move;
-			}
-
-			li:active {
-				background: #ccc;
+			li {
+				cursor: grab;
+				position: relative;
+				flex: 1;
+				border-radius: var(--uui-border-radius);
 			}
 
-			#sort0 {
-				background: #f00;
+			li span {
+				display: flex;
+				align-items: center;
+				gap: 5px;
+				padding: 10px;
+				background-color: rgba(0, 255, 0, 0.3);
 			}
 
-			#sort1 {
-				background: #0f0;
+			li.--umb-sorter-placeholder span {
+				visibility: hidden;
 			}
 
-			#sort2 {
-				background: #c9da10;
+			li.--umb-sorter-placeholder::after {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				border-radius: var(--uui-border-radius);
+				border: 1px dashed var(--uui-color-divider-emphasis);
 			}
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbTestSorterControllerElement.prototype, "vertical", void 0);
 UmbTestSorterControllerElement = __decorate([
     customElement('test-my-sorter-controller')
 ], UmbTestSorterControllerElement);