@node-projects/web-component-designer 0.1.108 → 0.1.110

package/dist/elements/widgets/designerView/extensions/BasicStackedToolbarExtension.js

@@ -0,0 +1,81 @@
+import { assetsPath } from "../../../../Constants.js";
+import { AbstractExtension } from "./AbstractExtension.js";
+export class BasicStackedToolbarExtension extends AbstractExtension {
+    static basicTemplate = `
+      <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
+        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
+        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
+      </node-projects-image-button-list-selector>
+      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
+        <option>block</option>
+        <option>flex</option>
+        <option>grid</option>
+      </select>
+  `;
+    static toolBars = [];
+    _toolbar;
+    _size = { width: 200, height: 30 };
+    _display;
+    _inline;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        const cs = getComputedStyle(this.extendedItem.element);
+        this._display = cs.display.replace('inline-', '').replace('inline', 'block');
+        this._inline = cs.display.startsWith('inline') ? 'inline' : 'block';
+        //@ts-ignore
+        this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height);
+        BasicStackedToolbarExtension.toolBars.push(this._toolbar);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        if (displayTypeEl) {
+            displayTypeEl.value = this._display;
+            displayTypeEl.onchange = async () => {
+                this._display = displayTypeEl.value;
+                await this.updateDisplayValue();
+                this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+            };
+        }
+        const inlineEl = this._toolbar.getById('inline');
+        if (inlineEl) {
+            inlineEl.value = this._inline;
+            inlineEl.addEventListener('value-changed', async () => {
+                this._inline = inlineEl.value;
+                if (this._inline && cs.position === 'absolute')
+                    this.extendedItem.setStyle('position', 'static');
+                await this.updateDisplayValue();
+                this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+            });
+        }
+    }
+    async updateDisplayValue() {
+        let v = (this._inline == 'inline' ? 'inline ' : '') + this._display;
+        if (v === 'inline block')
+            v = 'inline';
+        await this.extendedItem.updateStyleInSheetOrLocalAsync('display', v);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            let tbOffset = 0;
+            for (let i = 0; i < BasicStackedToolbarExtension.toolBars.length - 1; i++) {
+                if (BasicStackedToolbarExtension.toolBars[i] === this._toolbar)
+                    break;
+                tbOffset += this._toolbar.children[0].getBoundingClientRect().height + 4;
+            }
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - tbOffset - ((this._size.height + 14) / this.designerCanvas.zoomFactor)) });
+        }
+    }
+    _addStyleButton(styleAndControlName) {
+        const cs = getComputedStyle(this.extendedItem.element);
+        const ctl = this._toolbar.getById(styleAndControlName);
+        ctl.addEventListener('value-changed', async () => {
+            await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value);
+        });
+        ctl.value = cs[styleAndControlName];
+    }
+    dispose() {
+        BasicStackedToolbarExtension.toolBars.splice(BasicStackedToolbarExtension.toolBars.indexOf(this._toolbar), 1);
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class BlockToolbarExtension extends AbstractExtension {
+    private static template;
+    private _toolbar;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/BlockToolbarExtension.js

@@ -0,0 +1,40 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { assetsPath } from "../../../../../Constants.js";
+export class BlockToolbarExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 100%; width: 100%;">
+      <node-projects-image-button-list-selector>
+        <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
+        <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
+      </node-projects-image-button-list-selector>
+      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
+        <option selected>block</option>
+        <option>flex</option>
+        <option>grid</option>
+      </select>
+    </div>
+  `;
+    _toolbar;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(cache, event) {
+        this._toolbar = this.createToolbar(BlockToolbarExtension.template, 200, 30);
+        const displayTypeEl = this._toolbar.getById('displayType');
+        displayTypeEl.onchange = () => {
+            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
+            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+        };
+        this.refresh(cache, event);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/ExtensionManager.js

@@ -24,6 +24,7 @@ export class ExtensionManager {
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
         designerCanvas.serviceContainer.globalContext.onToolChanged.on(() => {
             this.removeExtension(designerCanvas.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed);
+            this._lastPrimarySelectionRefreshItem = null;
         });
     }
     connected() {

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.d.ts

@@ -1,12 +1,9 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from '../IExtensionManger.js';
-export declare class BlockToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+export declare class BlockToolbarExtension extends BasicStackedToolbarExtension {
+    protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
 }

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.js

@@ -1,35 +1,16 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class BlockToolbarExtension extends AbstractExtension {
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export class BlockToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
-    <div style="height: 100%; width: 100%;">
-      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option selected>block</option>
-        <option>flex</option>
-        <option>grid</option>
-      </select>
-    </div>
-  `;
-    _toolbar;
+      <div style="height: 100%; width: 100%;">
+        ${BasicStackedToolbarExtension.basicTemplate}
+      </div>
+    `;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend(cache, event) {
-        this._toolbar = this.createToolbar(BlockToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
+        super.extend(cache, event);
         this.refresh(cache, event);
     }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
 }

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js

@@ -2,8 +2,10 @@ import { BlockToolbarExtension } from './BlockToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
 export class BlockToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'block')
-            return true;
+        if (designItem.nodeType === NodeType.Element) {
+            const d = getComputedStyle(designItem.element).display;
+            return d === 'block' || d === 'inline';
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.d.ts

@@ -1,12 +1,11 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from '../IExtensionManger.js';
-export declare class FlexToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export declare class FlexToolbarExtension extends BasicStackedToolbarExtension {
+    protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
+    protected _addFlexDirectionButton(): void;
+    rotateImagesAcordingFlexDirection(direction: string): void;
 }

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js

@@ -1,35 +1,77 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class FlexToolbarExtension extends AbstractExtension {
+import { assetsPath } from "../../../../../Constants.js";
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export class FlexToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
     <div style="height: 100%; width: 100%;">
-      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option>block</option>
-        <option selected>flex</option>
-        <option>grid</option>
-      </select>
+      ${BasicStackedToolbarExtension.basicTemplate}
+      <node-projects-image-button-list-selector property="direction" no-value-in-header id="flex-direction">
+        <img data-value="row" src="${assetsPath}images/chromeDevtools/flex-direction-row-icon.svg">
+        <img data-value="column" src="${assetsPath}images/chromeDevtools/flex-direction-column-icon.svg">
+        <img data-value="row-reverse" style="transform: scaleX(-1);" src="${assetsPath}images/chromeDevtools/flex-direction-row-icon.svg">
+        <img data-value="column-reverse" style="transform: scaleY(-1);" src="${assetsPath}images/chromeDevtools/flex-direction-column-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="wrap" no-value-in-header id="flex-wrap">
+        <img data-value="nowrap" src="${assetsPath}images/chromeDevtools/flex-wrap-nowrap-icon.svg">
+        <img data-value="wrap" src="${assetsPath}images/chromeDevtools/flex-wrap-wrap-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="align-content" no-value-in-header id="align-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-content-flex-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-content-flex-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/align-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/align-content-space-between-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-content-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-content" no-value-in-header id="justify-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-content-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-content-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/justify-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/justify-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/justify-content-space-between-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="align-items" no-value-in-header id="align-items">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-items-stretch-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-items-baseline-icon.svg">
+      </node-projects-image-button-list-selector>
     </div>
   `;
-    _toolbar;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
+        this._size.width = 515;
     }
     extend(cache, event) {
-        this._toolbar = this.createToolbar(FlexToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
+        super.extend(cache, event);
+        this._addFlexDirectionButton();
+        this._addStyleButton('flex-wrap');
+        this._addStyleButton('align-content');
+        this._addStyleButton('justify-content');
+        this._addStyleButton('align-items');
         this.refresh(cache, event);
     }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
+    _addFlexDirectionButton() {
+        const cs = getComputedStyle(this.extendedItem.element);
+        const ctl = this._toolbar.getById('flex-direction');
+        ctl.addEventListener('value-changed', async () => {
+            await this.extendedItem.updateStyleInSheetOrLocalAsync('flex-direction', ctl.value);
+            this.rotateImagesAcordingFlexDirection(ctl.value);
+        });
+        ctl.value = cs['flex-direction'];
+        this.rotateImagesAcordingFlexDirection(ctl.value);
     }
-    dispose() {
-        this._removeAllOverlays();
+    rotateImagesAcordingFlexDirection(direction) {
+        let angle = 0;
+        if (direction == 'column' || direction == 'column-reverse')
+            angle = -90;
+        this._toolbar.getById('flex-wrap').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg');
+        this._toolbar.getById('align-content').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg');
+        this._toolbar.getById('justify-content').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg');
+        //@ts-ignore
+        this._toolbar.getById('align-items').querySelectorAll('img:nth-child(-n+4)').forEach(x => x.style.rotate = angle + 'deg');
     }
 }

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js

@@ -2,8 +2,10 @@ import { FlexToolbarExtension } from './FlexToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
 export class FlexToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'flex')
-            return true;
+        if (designItem.nodeType === NodeType.Element) {
+            const d = getComputedStyle(designItem.element).display;
+            return d === 'flex' || d === 'inline-flex';
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.d.ts

@@ -1,12 +1,9 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from '../IExtensionManger.js';
-export declare class GridChildToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export declare class GridChildToolbarExtension extends BasicStackedToolbarExtension {
+    protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.js

@@ -1,66 +1,55 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class GridChildToolbarExtension extends AbstractExtension {
+import { assetsPath } from "../../../../../Constants.js";
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export class GridChildToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
     <div style="height: 100%; width: 100%;">
-      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option>block</option>
-        <option>flex</option>
-        <option selected>grid</option>
-      </select>
-      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
-        <option>1x1</option>
-        <option>1x16</option>
-        <option>2x8</option>
-        <option>4x4</option>
-        <option>8x2</option>
-        <option>16x1</option>
-        <option>custom</option>
-      </select>
-    </div>
-  `;
-    _toolbar;
+      <div style="display: flex; flex-direction: column;">
+        <span style="font-size: 10px; color: #00aff0;">column:</span>
+        <input type="text" title="column" id="gridColumn" style="pointer-events: all; height: 12px; width: 45px; padding: 0; margin-right: 5px">
+      </div>
+       <div style="display: flex; flex-direction: column;">
+        <span style="font-size: 10px; color: #00aff0;">row:</span>
+        <input type="text" title="column" id="gridRow" style="pointer-events: all; height: 12px; width: 45px; padding: 0; margin-right: 10px">
+      </div>
+      <node-projects-image-button-list-selector property="align-self" no-value-in-header id="align-self">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-items-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-self" no-value-in-header id="justify-self">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/justify-items-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+    </div>`;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
+        this._size.width = 250;
     }
     extend(cache, event) {
-        const style = getComputedStyle(this.extendedItem.element);
-        this._toolbar = this.createToolbar(GridChildToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-        };
-        const gridTypeEl = this._toolbar.getById('gridType');
-        let op = document.createElement('option');
-        op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
-        gridTypeEl.insertAdjacentElement('afterbegin', op);
-        gridTypeEl.selectedIndex = 0;
-        gridTypeEl.onchange = () => {
-            if (gridTypeEl.value == 'custom') {
-                const columns = prompt("Number of columns?", '4');
-                if (!columns)
-                    return;
-                const rows = prompt("Number of rows?", '4');
-                if (!rows)
-                    return;
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
-            }
-            else {
-                const parts = gridTypeEl.value.split('x');
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
-            }
-        };
-        this.refresh(cache, event);
-    }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+        super.extend(cache, event);
+        const cs = getComputedStyle(this.extendedItem.element);
+        const gridColumnEl = this._toolbar.getById('gridColumn');
+        if (gridColumnEl) {
+            gridColumnEl.value = cs.gridColumn;
+            gridColumnEl.onkeyup = async (e) => {
+                if (e.key === 'Enter')
+                    await this.extendedItem.updateStyleInSheetOrLocalAsync('gridColumn', gridColumnEl.value);
+            };
         }
-    }
-    dispose() {
-        this._removeAllOverlays();
+        const gridRowEl = this._toolbar.getById('gridRow');
+        if (gridRowEl) {
+            gridRowEl.value = cs.gridColumn;
+            gridRowEl.onkeyup = async (e) => {
+                if (e.key === 'Enter')
+                    await this.extendedItem.updateStyleInSheetOrLocalAsync('gridRow', gridRowEl.value);
+            };
+        }
+        this._addStyleButton('align-self');
+        this._addStyleButton('justify-self');
+        this.refresh(cache, event);
     }
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.d.ts

@@ -6,5 +6,4 @@ import { IExtensionManager } from '../IExtensionManger.js';
 export declare class GridChildToolbarExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js

@@ -1,17 +1,15 @@
-import { css } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../../../item/NodeType.js';
 import { GridChildToolbarExtension } from './GridChildToolbarExtension.js';
 export class GridChildToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.parent.element).display === 'grid')
-            return true;
+        if (designItem.nodeType === NodeType.Element && designItem.parent) {
+            const cs = designItem.parent?.getComputedStyle();
+            if (cs != null && (cs.display === 'grid' || cs.display === 'inline-grid'))
+                return true;
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new GridChildToolbarExtension(extensionManager, designerView, designItem);
     }
-    style = css `
-    .svg-toolbar-container { overflow: visible }
-    .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
-  `;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.d.ts

@@ -1,12 +1,9 @@
 import { IDesignItem } from '../../../../item/IDesignItem.js';
 import { IDesignerCanvas } from '../../IDesignerCanvas.js';
-import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from '../IExtensionManger.js';
-export declare class GridToolbarExtension extends AbstractExtension {
-    private static template;
-    private _toolbar;
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+export declare class GridToolbarExtension extends BasicStackedToolbarExtension {
+    protected static template: HTMLTemplateElement;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
-    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
-    dispose(): void;
 }