@umbraco-cms/backoffice 14.0.0-8d2a75e2 → 14.0.0-8f7cbf82

package/dist-cms/packages/templating/stylesheets/workspace/manifests.js

@@ -1,3 +1,4 @@
+import { UmbSaveWorkspaceAction } from '../../../core/workspace/index.js';
 const workspace = {
     type: 'workspace',
     alias: 'Umb.Workspace.StyleSheet',
@@ -7,6 +8,70 @@ const workspace = {
         entityType: 'stylesheet',
     },
 };
-const workspaceViews = [];
-const workspaceActions = [];
-export const manifests = [workspace, ...workspaceViews, ...workspaceActions];
+const workspaceEditorViews = [
+    {
+        type: 'workspaceEditorView',
+        alias: 'Umb.WorkspaceView.Stylesheet.CodeEditor',
+        name: 'Stylesheet Workspace Code Editor View',
+        loader: () => import('./views/code-editor/stylesheet-workspace-view-code-editor.element.js'),
+        weight: 700,
+        meta: {
+            label: 'Code',
+            pathname: 'code',
+            icon: 'umb:brackets',
+        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
+    },
+    {
+        type: 'workspaceEditorView',
+        alias: 'Umb.WorkspaceView.Stylesheet.RichTextEditor',
+        name: 'Stylesheet Workspace Rich Text Editor View',
+        loader: () => import('./views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.js'),
+        weight: 800,
+        meta: {
+            label: 'Rich Text Editor',
+            pathname: 'rich-text-editor',
+            icon: 'umb:font',
+        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
+    },
+];
+const workspaceActions = [
+    {
+        type: 'workspaceAction',
+        alias: 'Umb.WorkspaceAction.Stylesheet.Save',
+        name: 'Save Stylesheet Workspace Action',
+        meta: {
+            label: 'Save',
+            look: 'primary',
+            color: 'positive',
+            api: UmbSaveWorkspaceAction,
+        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
+    },
+];
+export const UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR = 'Umb.Modal.Templating.Stylesheet.RichTextEditorStyle.Sidebar';
+const modals = [
+    {
+        type: 'modal',
+        alias: UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR,
+        name: 'Rich text editor style modal',
+        loader: () => import('./views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-style-sidebar.element.js'),
+    },
+];
+export const manifests = [workspace, ...workspaceEditorViews, ...workspaceActions, ...modals];

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.d.ts

@@ -0,0 +1,17 @@
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+export declare class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
+    #private;
+    private get _name();
+    private set _name(value);
+    private _path?;
+    private inputQuery$;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbStylesheetWorkspaceEditorElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-stylesheet-workspace-editor': UmbStylesheetWorkspaceEditorElement;
+    }
+}

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.js

@@ -0,0 +1,107 @@
+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 { UUITextStyles } from '../../../../external/uui/index.js';
+import { css, html, customElement, state } from '../../../../external/lit/index.js';
+import { UMB_WORKSPACE_CONTEXT } from '../../../core/workspace/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { Subject, debounceTime } from '../../../../external/rxjs/index.js';
+export let UmbStylesheetWorkspaceEditorElement = class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
+    #workspaceContext;
+    #name;
+    get _name() {
+        return this.#name;
+    }
+    set _name(value) {
+        this.#name = value?.replace('.css', '');
+        this.requestUpdate();
+    }
+    constructor() {
+        super();
+        this.#name = '';
+        this.inputQuery$ = new Subject();
+        this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => {
+            this.#workspaceContext = instance;
+            this.#observeNameAndPath();
+            this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
+                this.#workspaceContext?.setName(`${nameInputValue}.css`);
+            });
+        });
+    }
+    #observeNameAndPath() {
+        if (!this.#workspaceContext)
+            return;
+        this.observe(this.#workspaceContext.name, (name) => (this._name = name ?? ''), '_observeName');
+        this.observe(this.#workspaceContext.path, (path) => (this._path = path ?? ''), '_observePath');
+    }
+    #onNameChange(event) {
+        const target = event.target;
+        const value = target.value;
+        this.inputQuery$.next(value);
+    }
+    render() {
+        return html `
+			<umb-workspace-editor alias="Umb.Workspace.StyleSheet">
+				<div id="header" slot="header">
+					<uui-input
+						placeholder="Enter stylesheet name..."
+						label="stylesheet name"
+						id="name"
+						.value=${this._name}
+						@input="${this.#onNameChange}">
+					</uui-input>
+					<small>/css/${this._path}</small>
+				</div>
+
+				<div slot="footer-info">
+					<!-- TODO: Shortcuts Modal? -->
+					<uui-button label="Show keyboard shortcuts">
+						Keyboard Shortcuts
+						<uui-keyboard-shortcut>
+							<uui-key>ALT</uui-key>
+							+
+							<uui-key>shift</uui-key>
+							+
+							<uui-key>k</uui-key>
+						</uui-keyboard-shortcut>
+					</uui-button>
+				</div>
+			</umb-workspace-editor>
+		`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				display: flex;
+				flex: 1 1 auto;
+				flex-direction: column;
+			}
+
+			#name {
+				width: 100%;
+				flex: 1 1 auto;
+				align-items: center;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbStylesheetWorkspaceEditorElement.prototype, "_name", null);
+__decorate([
+    state()
+], UmbStylesheetWorkspaceEditorElement.prototype, "_path", void 0);
+UmbStylesheetWorkspaceEditorElement = __decorate([
+    customElement('umb-stylesheet-workspace-editor')
+], UmbStylesheetWorkspaceEditorElement);
+export default UmbStylesheetWorkspaceEditorElement;

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace.context.d.ts

@@ -1,15 +1,35 @@
 import { UmbStylesheetRepository } from '../repository/stylesheet.repository.js';
 import { StylesheetDetails } from '../index.js';
-import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
+import { UmbSaveableWorkspaceContextInterface, UmbWorkspaceContext } from '../../../core/workspace/index.js';
 import { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
-export declare class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStylesheetRepository, StylesheetDetails> {
+import { RichTextRuleModel } from '../../../../external/backend-api/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export type RichTextRuleModelSortable = RichTextRuleModel & {
+    sortOrder?: number;
+};
+export declare class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStylesheetRepository, StylesheetDetails> implements UmbSaveableWorkspaceContextInterface {
     #private;
-    data: import("rxjs").Observable<StylesheetDetails | undefined>;
+    data: import("rxjs").Observable<import("../../../../external/backend-api/index.js").TextFileResponseModelBaseModel | undefined>;
+    rules: import("rxjs").Observable<RichTextRuleModelSortable[]>;
+    name: import("rxjs").Observable<string | undefined>;
+    content: import("rxjs").Observable<string | undefined>;
+    path: import("rxjs").Observable<string | undefined>;
+    isCodeEditorReady: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHostElement);
     getEntityType(): string;
-    getData(): StylesheetDetails | undefined;
     getEntityId(): string;
+    getData(): import("../../../../external/backend-api/index.js").TextFileResponseModelBaseModel | undefined;
+    getRules(): RichTextRuleModelSortable[];
+    updateRule(unique: string, rule: RichTextRuleModelSortable): void;
+    setRules(rules: RichTextRuleModelSortable[]): void;
+    setName(value: string): void;
+    setContent(value: string): void;
     load(path: string): Promise<void>;
+    sendRulesGetContent(): Promise<void>;
+    sendContentGetRules(): Promise<void>;
+    findNewSortOrder(rule: RichTextRuleModel, newIndex: number): boolean;
     save(): Promise<void>;
+    create(parentKey: string | null): Promise<void>;
     destroy(): void;
 }
+export declare const UMB_STYLESHEET_WORKSPACE_CONTEXT: UmbContextToken<UmbSaveableWorkspaceContextInterface<unknown>, UmbStylesheetWorkspaceContext>;

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace.context.js

@@ -1,33 +1,144 @@
 import { UmbStylesheetRepository } from '../repository/stylesheet.repository.js';
 import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
-import { UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbArrayState, UmbBooleanState, UmbObjectState, createObservablePart } from '../../../../libs/observable-api/index.js';
+import { loadCodeEditor } from '../../code-editor/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
 export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext {
     #data;
+    #rules;
+    #isCodeEditorReady;
     constructor(host) {
-        super(host, 'Umb.Workspace.Stylesheet', new UmbStylesheetRepository(host));
+        super(host, 'Umb.Workspace.StyleSheet', new UmbStylesheetRepository(host));
         this.#data = new UmbObjectState(undefined);
+        this.#rules = new UmbArrayState([], (rule) => rule.name);
         this.data = this.#data.asObservable();
+        this.rules = this.#rules.asObservable();
+        this.name = createObservablePart(this.#data, (data) => data?.name);
+        this.content = createObservablePart(this.#data, (data) => data?.content);
+        this.path = createObservablePart(this.#data, (data) => data?.path);
+        this.#isCodeEditorReady = new UmbBooleanState(false);
+        this.isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+        this.#rules.sortBy((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+        this.#loadCodeEditor();
+    }
+    async #loadCodeEditor() {
+        try {
+            await loadCodeEditor();
+            this.#isCodeEditorReady.next(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
     }
     getEntityType() {
         return 'stylesheet';
     }
+    getEntityId() {
+        return this.getData()?.path || '';
+    }
     getData() {
         return this.#data.getValue();
     }
-    getEntityId() {
-        return this.getData()?.path || '';
+    getRules() {
+        return this.#rules.getValue();
+    }
+    updateRule(unique, rule) {
+        this.#rules.updateOne(unique, rule);
+        this.sendRulesGetContent();
+    }
+    setRules(rules) {
+        const newRules = rules.map((r, i) => ({ ...r, sortOrder: i }));
+        this.#rules.next(newRules);
+        this.sendRulesGetContent();
+    }
+    setName(value) {
+        this.#data.next({ ...this.#data.value, name: value });
+    }
+    setContent(value) {
+        this.#data.next({ ...this.#data.value, content: value });
     }
     async load(path) {
-        const { data } = await this.repository.requestByPath(path);
+        const [{ data }, rules] = await Promise.all([
+            this.repository.requestById(path),
+            this.repository.getStylesheetRules(path),
+        ]);
         if (data) {
             this.setIsNew(false);
             this.#data.update(data);
         }
+        else {
+            this.#data.update(undefined);
+        }
+        if (rules.data) {
+            const x = rules.data.rules?.map((r, i) => ({ ...r, sortOrder: i })) ?? [];
+            this.#rules.next(x);
+        }
+        else {
+            this.#rules.next([]);
+        }
+    }
+    async sendRulesGetContent() {
+        const requestBody = {
+            content: this.getData()?.content,
+            rules: this.getRules(),
+        };
+        const { data } = await this.repository.interpolateStylesheetRules(requestBody);
+        this.setContent(data?.content ?? '');
+    }
+    async sendContentGetRules() {
+        if (!this.getData()?.content)
+            return;
+        const requestBody = {
+            content: this.getData()?.content,
+        };
+        const { data } = await this.repository.extractStylesheetRules(requestBody);
+        this.setRules(data?.rules ?? []);
+    }
+    findNewSortOrder(rule, newIndex) {
+        const rules = [...this.getRules()].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+        const oldIndex = rules.findIndex((r) => r.name === rule.name);
+        if (oldIndex === -1)
+            return false;
+        rules.splice(oldIndex, 1);
+        rules.splice(newIndex, 0, rule);
+        this.setRules(rules.map((r, i) => ({ ...r, sortOrder: i })));
+        return true;
     }
     async save() {
-        throw new Error('Save method not implemented.');
+        const stylesheet = this.getData();
+        if (!stylesheet) {
+            return Promise.reject('Something went wrong, there is no data for partial view you want to save...');
+        }
+        if (this.getIsNew()) {
+            const createRequestBody = {
+                name: stylesheet.name,
+                content: stylesheet.content,
+                parentPath: stylesheet.path === 'null' ? '' : stylesheet.path + '/',
+            };
+            this.repository.create(createRequestBody);
+            return Promise.resolve();
+        }
+        if (!stylesheet.path)
+            return Promise.reject('There is no path');
+        const updateRequestBody = {
+            name: stylesheet.name,
+            existingPath: stylesheet.path,
+            content: stylesheet.content,
+        };
+        this.repository.save(stylesheet.path, updateRequestBody);
+        return Promise.resolve();
+    }
+    async create(parentKey) {
+        const newStylesheet = {
+            name: '',
+            path: parentKey ?? '',
+            content: '',
+        };
+        this.#data.next(newStylesheet);
+        this.setIsNew(true);
     }
     destroy() {
         this.#data.complete();
     }
 }
+export const UMB_STYLESHEET_WORKSPACE_CONTEXT = new UmbContextToken('UmbWorkspaceContext', (context) => context.getEntityType?.() === 'stylesheet');

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace.element.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { serverFilePathFromUrlFriendlyPath } from '../../utils.js';
-import { UmbStylesheetWorkspaceEditElement } from './stylesheet-workspace-edit.element.js';
+import { UmbStylesheetWorkspaceEditorElement } from './stylesheet-workspace-editor.element.js';
 import { UmbStylesheetWorkspaceContext } from './stylesheet-workspace.context.js';
-import { UUITextStyles } from '../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../shared/style/index.js";
 import { css, html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/index.js';
@@ -15,16 +15,26 @@ export let UmbStylesheetWorkspaceElement = class UmbStylesheetWorkspaceElement e
     constructor() {
         super(...arguments);
         this.#workspaceContext = new UmbStylesheetWorkspaceContext(this);
-        this.#element = new UmbStylesheetWorkspaceEditElement();
+        this.#element = new UmbStylesheetWorkspaceEditorElement();
         this._routes = [
+            {
+                path: 'create/:path',
+                component: import('./stylesheet-workspace-editor.element.js'),
+                setup: async (_component, info) => {
+                    const path = info.match.params.path === 'null' ? null : info.match.params.path;
+                    const serverPath = path === null ? null : serverFilePathFromUrlFriendlyPath(path);
+                    await this.#workspaceContext.create(serverPath);
+                    new UmbWorkspaceIsNewRedirectController(this, this.#workspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
+                },
+            },
             {
                 path: 'edit/:path',
-                component: () => this.#element,
+                component: import('./stylesheet-workspace-editor.element.js'),
                 setup: (_component, info) => {
+                    this.removeControllerByAlias('_observeIsNew');
                     const path = info.match.params.path;
                     const serverPath = serverFilePathFromUrlFriendlyPath(path);
                     this.#workspaceContext.load(serverPath);
-                    new UmbWorkspaceIsNewRedirectController(this, this.#workspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
                 },
             },
         ];
@@ -35,7 +45,7 @@ export let UmbStylesheetWorkspaceElement = class UmbStylesheetWorkspaceElement e
         return html ` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: block;

package/dist-cms/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-workspace-view-code-editor.element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+export declare class UmbStylesheetWorkspaceViewCodeEditorElement extends UmbLitElement {
+    #private;
+    private _content?;
+    private _ready?;
+    constructor();
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbStylesheetWorkspaceViewCodeEditorElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-stylesheet-workspace-view-code-editor': UmbStylesheetWorkspaceViewCodeEditorElement;
+    }
+}

package/dist-cms/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-workspace-view-code-editor.element.js

@@ -0,0 +1,95 @@
+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 { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UMB_STYLESHEET_WORKSPACE_CONTEXT } from '../../stylesheet-workspace.context.js';
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+export let UmbStylesheetWorkspaceViewCodeEditorElement = class UmbStylesheetWorkspaceViewCodeEditorElement extends UmbLitElement {
+    #stylesheetWorkspaceContext;
+    constructor() {
+        super();
+        this._content = '';
+        this._ready = false;
+        this.consumeContext(UMB_STYLESHEET_WORKSPACE_CONTEXT, (workspaceContext) => {
+            this.#stylesheetWorkspaceContext = workspaceContext;
+            this.observe(this.#stylesheetWorkspaceContext.content, (content) => {
+                this._content = content;
+            });
+            this.observe(this.#stylesheetWorkspaceContext.isCodeEditorReady, (isReady) => {
+                this._ready = isReady;
+            });
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#stylesheetWorkspaceContext?.sendContentGetRules();
+    }
+    #onCodeEditorInput(event) {
+        const target = event.target;
+        const value = target.code;
+        this.#stylesheetWorkspaceContext?.setContent(value);
+    }
+    #renderCodeEditor() {
+        return html `<umb-code-editor
+			language="css"
+			id="content"
+			.code=${this._content ?? ''}
+			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+    }
+    render() {
+        return html ` <uui-box>
+			<div slot="header" id="code-editor-menu-container"></div>
+			${this._ready
+            ? this.#renderCodeEditor()
+            : html `<div id="loader-container">
+						<uui-loader></uui-loader>
+				  </div>`}
+		</uui-box>`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: block;
+				width: 100%;
+			}
+
+			#loader-container {
+				display: grid;
+				place-items: center;
+				min-height: calc(100dvh - 300px);
+			}
+
+			umb-code-editor {
+				--editor-height: calc(100dvh - 300px);
+			}
+
+			uui-box {
+				min-height: calc(100dvh - 360px);
+				margin: var(--uui-size-layout-1);
+				--uui-box-default-padding: 0;
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
+			}
+
+			#workspace-header {
+				width: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbStylesheetWorkspaceViewCodeEditorElement.prototype, "_content", void 0);
+__decorate([
+    state()
+], UmbStylesheetWorkspaceViewCodeEditorElement.prototype, "_ready", void 0);
+UmbStylesheetWorkspaceViewCodeEditorElement = __decorate([
+    customElement('umb-stylesheet-workspace-view-code-editor')
+], UmbStylesheetWorkspaceViewCodeEditorElement);
+export default UmbStylesheetWorkspaceViewCodeEditorElement;

package/dist-cms/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+export default class UmbStylesheetRichTextEditorRuleElement extends UmbLitElement {
+    #private;
+    private rule;
+    private _modalContext?;
+    constructor();
+    openModal: () => void;
+    removeRule: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-stylesheet-rich-text-editor-rule': UmbStylesheetRichTextEditorRuleElement;
+    }
+}

package/dist-cms/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor-rule.element.js

@@ -0,0 +1,82 @@
+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 { UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL } from './stylesheet-workspace-view-rich-text-editor.element.js';
+import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { css, html, customElement, property } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '../../../../../core/modal/index.js';
+let UmbStylesheetRichTextEditorRuleElement = class UmbStylesheetRichTextEditorRuleElement extends UmbLitElement {
+    #context;
+    constructor() {
+        super();
+        this.rule = null;
+        this.openModal = () => {
+            if (!this._modalContext)
+                throw new Error('Modal context not found');
+            const modal = this._modalContext.open(UMB_MODAL_TEMPLATING_STYLESHEET_RTF_STYLE_SIDEBAR_MODAL, {
+                rule: this.rule,
+            });
+            modal?.onSubmit().then((result) => {
+                if (result.rule && this.rule?.name) {
+                    this.#context?.updateRule(this.rule?.name, result.rule);
+                }
+            });
+        };
+        this.removeRule = () => {
+            //TODO: SPORTER BREAKS THAT - rules are removed from the data but not from the DOM
+            if (!this.#context)
+                throw new Error('Context not found');
+            this.#context.setRules(this.#context.getRules().filter((r) => r.name !== this.rule?.name));
+        };
+        this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
+            this.#context = workspaceContext;
+        });
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+            this._modalContext = instance;
+        });
+    }
+    render() {
+        return html `
+			<div class="rule-name"><uui-icon name="umb:navigation"></uui-icon>${this.rule?.name}</div>
+			<div class="rule-actions">
+				<uui-button label="Edit" look="secondary" @click=${this.openModal}>Edit</uui-button
+				><uui-button label="Remove" look="secondary" color="danger" @click=${this.removeRule}>Remove</uui-button>
+			</div>
+		`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: flex;
+				width: 100%;
+				justify-content: space-between;
+				padding: var(--uui-size-2);
+				align-items: center;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface-alt);
+				margin-bottom: var(--uui-size-space-4);
+			}
+
+			.rule-name {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-2);
+				padding-left: var(--uui-size-2);
+				font-weight: bold;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbStylesheetRichTextEditorRuleElement.prototype, "rule", void 0);
+UmbStylesheetRichTextEditorRuleElement = __decorate([
+    customElement('umb-stylesheet-rich-text-editor-rule')
+], UmbStylesheetRichTextEditorRuleElement);
+export default UmbStylesheetRichTextEditorRuleElement;