@node-projects/web-component-designer 0.0.172 → 0.0.173

package/dist/elements/item/DesignItem.d.ts

@@ -76,7 +76,9 @@ export declare class DesignItem implements IDesignItem {
     setStyle(name: string, value?: string | null, important?: boolean): void;
     removeStyle(name: string): void;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): void;
-    getStyleFromSheetOrLocal(name: string): string;
+    getStyleFromSheetOrLocal(name: string, fallback?: string): string;
+    getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): string;
+    getComputedStyle(name: string, fallback?: string): string;
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;

package/dist/elements/item/DesignItem.js

@@ -7,6 +7,7 @@ import { PropertiesHelper } from '../services/propertiesService/services/Propert
 import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js';
 import { DomConverter } from '../widgets/designerView/DomConverter.js';
 import { DeleteAction } from '../services/undoService/transactionItems/DeleteAction.js';
+import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
@@ -306,7 +307,7 @@ export class DesignItem {
         let nm = PropertiesHelper.camelToDashCase(name);
         // Pre-sorted by specificity
         let declerations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
-        if (this.hasStyle(name) || !declerations) {
+        if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declerations) {
             // Set style locally
             if (this.getStyle(nm) != value) {
                 this.setStyle(nm, value);
@@ -320,7 +321,7 @@ export class DesignItem {
             this.instanceServiceContainer.stylesheetService.updateDeclarationWithDeclaration(declerations[0], value, important);
         }
     }
-    getStyleFromSheetOrLocal(name) {
+    getStyleFromSheetOrLocal(name, fallback = null) {
         let nm = PropertiesHelper.camelToDashCase(name);
         if (this.hasStyle(name))
             // Get style locally
@@ -331,6 +332,20 @@ export class DesignItem {
             return decls[0].value;
         return null;
     }
+    getStyleFromSheetOrLocalOrComputed(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
+    getComputedStyle(name, fallback = null) {
+        let value = this.getStyleFromSheetOrLocal(name);
+        if (!value) {
+            value = getComputedStyle(this.element).getPropertyValue(name);
+        }
+        return value ?? fallback;
+    }
     getAllStyles() {
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false }));
         if (this.instanceServiceContainer.stylesheetService) {

package/dist/elements/item/IDesignItem.d.ts

@@ -55,7 +55,8 @@ export interface IDesignItem {
     setStyle(name: string, value?: string | null, important?: boolean): any;
     removeStyle(name: string): any;
     updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): any;
-    getStyleFromSheetOrLocal(name: string): any;
+    getStyleFromSheetOrLocal(name: string, fallback?: string): any;
+    getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): any;
     getAllStyles(): IStyleRule[];
     attributes(): Iterable<[name: string, value: string]>;
     getAttribute(name: string): any;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -44,8 +44,8 @@ import { DragDropService } from './dragDropService/DragDropService.js';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
-import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider.js';
-import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons.js';
+import { ButtonSeperatorProvider } from '../widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js';
 import { DemoProviderService } from './demoProviderService/DemoProviderService.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
@@ -70,11 +70,12 @@ import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/sv
 import { PropertyTabsService } from './propertiesService/PropertyTabsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
-import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
-import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js';
+import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js';
+import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js';
 import { UndoService } from './undoService/UndoService.js';
 import { SelectionService } from './selectionService/SelectionService.js';
 import { ContentService } from './contentService/ContentService.js';
+import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -161,7 +162,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

package/dist/elements/services/ServiceContainer.d.ts

@@ -22,7 +22,7 @@ import { IDragDropService } from './dragDropService/IDragDropService.js';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
-import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesignViewConfigButtonsProvider.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js";
 import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js";
 import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js";

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.d.ts

@@ -4,6 +4,7 @@ import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { ValueType } from '../ValueType.js';
 export declare class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem: IDesignItem): RefreshMode;
     constructor();
@@ -18,4 +19,12 @@ export declare class CssCurrentPropertiesService extends CommonPropertiesService
         styleRule: IStyleRule;
         styleDeclaration: IStyleDeclaration;
     }): void;
+    getValue(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): any;
+    isSet(designItems: IDesignItem[], property: IProperty & {
+        styleRule: IStyleRule;
+        styleDeclaration: IStyleDeclaration;
+    }): ValueType;
 }

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -2,6 +2,8 @@ import { PropertyType } from '../PropertyType.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { CommonPropertiesService } from './CommonPropertiesService.js';
 import cssProperties from './CssProperties.json' assert { type: 'json' };
+import { ValueType } from '../ValueType.js';
+const localName = '<local>';
 export class CssCurrentPropertiesService extends CommonPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.fullOnValueChange;
@@ -21,7 +23,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
             return [];
         let styles = designItem.getAllStyles();
         let arr = styles.map(x => ({
-            name: x.selector ?? '<local>', description: x.stylesheetName ?? '', properties: [
+            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
                 ...x.declarations.map(y => ({
                     name: y.name,
                     renamable: true,
@@ -57,4 +59,18 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
         }
         super.clearValue(designItems, property);
     }
+    getValue(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration)
+            return property.styleDeclaration.value;
+        return super.getValue(designItems, property);
+    }
+    isSet(designItems, property) {
+        if (property.styleRule?.selector && property.styleDeclaration) {
+            if (designItems[0].hasStyle(property.name))
+                return ValueType.none;
+            //TODO: we need to check if this is the dec. with the highest specifity
+            return ValueType.all;
+        }
+        return super.isSet(designItems, property);
+    }
 }

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

@@ -310,7 +310,7 @@ export class GridExtension extends AbstractExtension {
     _convertCssUnit(cssValue, target, percentTarget, unit) {
         if (unit == "fr") {
             let containerSize = convertCssUnitToPixel(target.style.width, target, percentTarget);
-            let amountGaps = percentTarget == "width" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
+            let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
             let gapSize = convertCssUnitToPixel(percentTarget == "width" ? target.style.columnGap : target.style.rowGap, target, percentTarget);
             let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
             let amountFrSizes = 0;

package/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.d.ts

@@ -0,0 +1,12 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem.js";
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class AbstractDesignViewConfigButton implements IDesignViewConfigButtonsProvider {
+    protected settingName: any;
+    private content;
+    private tooltp;
+    private contextmenu;
+    constructor(settingName: string, content: string | HTMLElement, tooltip: string, contextmenu?: IContextMenuItem[]);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js

@@ -0,0 +1,40 @@
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js";
+export class AbstractDesignViewConfigButton {
+    settingName;
+    content;
+    tooltp;
+    contextmenu;
+    constructor(settingName, content, tooltip, contextmenu) {
+        this.settingName = settingName;
+        this.content = content;
+        this.tooltp = tooltip;
+        this.contextmenu = contextmenu;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        if (typeof this.content == 'string')
+            btn.innerHTML = this.content;
+        else
+            btn.appendChild(this.content);
+        btn.title = this.tooltp;
+        btn.className = 'toolbar-control';
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        if (extensionOptions[this.settingName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[this.settingName];
+            extensionOptions[this.settingName] = val === false ? true : false;
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            if (this.contextmenu) {
+                ContextMenu.show(this.contextmenu, e);
+            }
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.d.ts

@@ -0,0 +1,8 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class FlexboxExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js

@@ -0,0 +1,22 @@
+import { flexboxExtensionShowOverlayOptionName } from "../FlexboxExtensionProvider.js";
+export class FlexboxExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'F';
+        btn.title = 'show flexbox overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[flexboxExtensionShowOverlayOptionName];
+            extensionOptions[flexboxExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[flexboxExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js

@@ -0,0 +1,22 @@
+import { gridExtensionShowOverlayOptionName } from "../GridExtensionProvider.js";
+export class GridExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.d.ts

@@ -0,0 +1,5 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+export interface IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,6 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class InvisibleElementExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js

@@ -0,0 +1,22 @@
+import { invisibleElementExtensionShowOverlayOptionName } from "../InvisibleElementExtensionProvider.js";
+export class InvisibleElementExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'I';
+        btn.title = 'show invisible div overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[invisibleElementExtensionShowOverlayOptionName];
+            extensionOptions[invisibleElementExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+            designerCanvas.extensionManager.reapplyAllAppliedExtentions();
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts

@@ -0,0 +1,7 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "../../IDesignViewConfigButtonsProvider.js";
+export declare const disableStylesheetService = "disableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js

@@ -0,0 +1,21 @@
+export const disableStylesheetService = 'disableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[disableStylesheetService] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[disableStylesheetService];
+            extensionOptions[disableStylesheetService] = val === false ? true : false;
+            if (extensionOptions[disableStylesheetService] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.d.ts

@@ -0,0 +1,5 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare const enableStylesheetService = "enableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export const enableStylesheetService = 'enableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(enableStylesheetService, "ss", "modify Stylesheet");
+    }
+}

package/dist/index.d.ts

@@ -167,7 +167,6 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
@@ -176,7 +175,6 @@ export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
@@ -193,6 +191,13 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js";
+export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
+export type { IDesignViewConfigButtonsProvider } from "./elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";

package/dist/index.js

@@ -122,7 +122,6 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
@@ -131,7 +130,6 @@ export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
@@ -148,6 +146,12 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js";
+export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
+export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.172",
+  "version": "0.0.173",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",