@node-projects/web-component-designer 0.1.3 → 0.1.5

package/dist/elements/helper/NpmPackageLoader.js

@@ -5,14 +5,7 @@ import { removeLeading, removeTrailing } from "./Helper.js";
 //TODO: remove this code when import asserts are supported
 let packageHacks;
 //@ts-ignore
-if (window.importShim) {
-    const packageHacksUrl = import.meta.resolve('./NpmPackageHacks.json');
-    //@ts-ignore
-    packageHacks = await importShim(packageHacksUrl, { assert: { type: 'json' } });
-}
-else
-    //@ts-ignore
-    packageHacks = await import("./NpmPackageHacks.json", { assert: { type: 'json' } });
+packageHacks = await import("./NpmPackageHacks.json", { assert: { type: 'json' } });
 if (packageHacks.default)
     packageHacks = packageHacks.default;
 export class NpmPackageLoader {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -65,7 +65,7 @@ import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerVi
 import { LineExtensionProvider } from '../widgets/designerView/extensions/svg/LineExtensionProvider.js';
 import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
 import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
-import { PropertyTabsService } from './propertiesService/PropertyTabsService.js';
+import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
 import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js';
@@ -96,7 +96,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("propertyService", new SVGElementsPropertiesService());
     serviceContainer.register("propertyService", new Lit2PropertiesService());
     serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService());
-    serviceContainer.register("propertyGroupsService", new PropertyTabsService());
+    serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
     serviceContainer.register("instanceService", new DefaultInstanceService());
     serviceContainer.register("editorTypesService", new DefaultEditorTypesService());
     serviceContainer.register("htmlWriterService", new HtmlWriterService());

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

@@ -32,7 +32,7 @@ import { IProperty } from "./propertiesService/IProperty.js";
 import { IDesignItem } from "../item/IDesignItem.js";
 import { IBinding } from '../item/IBinding.js';
 import { BindingTarget } from '../item/BindingTarget.js';
-import { IPropertyTabsService } from './propertiesService/IPropertyTabsService.js';
+import { IPropertyGroupsService } from './propertiesService/IPropertyGroupsService.js';
 import { IUndoService } from './undoService/IUndoService.js';
 import { ISelectionService } from './selectionService/ISelectionService.js';
 import { IContentService } from './contentService/IContentService.js';
@@ -64,7 +64,7 @@ interface ServiceNameMap {
     "modelCommandService": IModelCommandService;
     "demoProviderService": IDemoProviderService;
     "elementInteractionService": IElementInteractionService;
-    "propertyGroupsService": IPropertyTabsService;
+    "propertyGroupsService": IPropertyGroupsService;
     "dragDropService": IDragDropService;
     "designItemService": IDesignItemService;
     "eventsService": IEventsService;
@@ -101,7 +101,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get elementInteractionServices(): IElementInteractionService[];
     get propertiesServices(): IPropertiesService[];
     get attachedPropertyServices(): IPropertiesService[];
-    get propertyGroupService(): IPropertyTabsService;
+    get propertyGroupService(): IPropertyGroupsService;
     get containerServices(): IPlacementService[];
     get snaplinesProviderService(): ISnaplinesProviderService;
     get elementsServices(): IElementsService[];

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

@@ -0,0 +1,8 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from './IPropertiesService.js';
+export interface IPropertyGroupsService {
+    getPropertygroups(designItems: IDesignItem[]): {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+}

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

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

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

@@ -0,0 +1,27 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from './IPropertiesService.js';
+import { IPropertyGroupsService } from './IPropertyGroupsService.js';
+import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
+export declare class PropertyGroupsService implements IPropertyGroupsService {
+    protected _attachedPropertiesService: AttachedPropertiesService;
+    protected _pgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _svgPgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _gridChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _flexChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    getPropertygroups(designItems: IDesignItem[]): {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+}

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

@@ -0,0 +1,53 @@
+import { NodeType } from '../../item/NodeType.js';
+import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
+import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
+import { CommonPropertiesService } from './services/CommonPropertiesService.js';
+import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js';
+import { CssCustomPropertiesService } from './services/CssCustomPropertiesService.js';
+import { CssPropertiesService } from './services/CssPropertiesService.js';
+export class PropertyGroupsService {
+    _attachedPropertiesService = new AttachedPropertiesService();
+    _pgList = [
+        { name: 'properties', propertiesService: null },
+        { name: 'attached', propertiesService: this._attachedPropertiesService },
+        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
+        { name: 'common', propertiesService: new CommonPropertiesService() },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
+        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
+        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
+    ];
+    _svgPgList = [
+        { name: 'properties', propertiesService: null },
+        { name: 'attached', propertiesService: this._attachedPropertiesService },
+        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
+        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'svg', propertiesService: new CssPropertiesService("svg") },
+    ];
+    _gridChild = [
+        { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
+    ];
+    _flexChild = [
+        { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
+    ];
+    getPropertygroups(designItems) {
+        if (designItems == null || designItems.length == 0)
+            return [];
+        if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
+            return [];
+        this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        let lst = this._pgList;
+        if (designItems[0].element instanceof SVGElement)
+            lst = this._svgPgList;
+        const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+        if (parentStyle.display.includes('grid'))
+            lst = [...lst, this._gridChild[0]];
+        else if (parentStyle.display.includes('flex'))
+            lst = [...lst, this._flexChild[0]];
+        return lst;
+    }
+}

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

@@ -6,14 +6,7 @@ import { NodeType } from '../../../item/NodeType.js';
 //TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
-if (window.importShim) {
-    const cssPropertiesUrl = import.meta.resolve('./CssProperties.json');
-    //@ts-ignore
-    cssProperties = await importShim(cssPropertiesUrl, { assert: { type: 'json' } });
-}
-else
-    //@ts-ignore
-    cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
 if (cssProperties.default)
     cssProperties = cssProperties.default;
 const localName = '<local>';

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

@@ -8,14 +8,7 @@ import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropert
 //TODO: remove this code when import asserts are supported
 let cssProperties;
 //@ts-ignore
-if (window.importShim) {
-    const cssPropertiesUrl = import.meta.resolve('./CssProperties.json');
-    //@ts-ignore
-    cssProperties = await importShim(cssPropertiesUrl, { assert: { type: 'json' } });
-}
-else
-    //@ts-ignore
-    cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
+cssProperties = await import("./CssProperties.json", { assert: { type: 'json' } });
 if (cssProperties.default)
     cssProperties = cssProperties.default;
 export class CssPropertiesService extends CommonPropertiesService {

package/dist/index.d.ts

@@ -85,7 +85,8 @@ export type { IPropertiesService } from "./elements/services/propertiesService/I
 export type { IProperty } from "./elements/services/propertiesService/IProperty.js";
 export type { IPropertyEditor } from "./elements/services/propertiesService/IPropertyEditor.js";
 export type { IPropertyGroup } from "./elements/services/propertiesService/IPropertyGroup.js";
-export type { IPropertyTabsService as IPropertyGroupsService } from './elements/services/propertiesService/IPropertyTabsService.js';
+export type { IPropertyGroupsService } from './elements/services/propertiesService/IPropertyGroupsService.js';
+export * from "./elements/services/propertiesService/PropertyGroupsService.js";
 export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js";
@@ -118,7 +119,6 @@ export * from "./elements/services/propertiesService/services/CssCustomPropertie
 export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
-export * from "./elements/services/propertiesService/PropertyTabsService.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";
 export * from "./elements/services/selectionService/SelectionService.js";

package/dist/index.js

@@ -46,6 +46,7 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
+export * from "./elements/services/propertiesService/PropertyGroupsService.js";
 export * from "./elements/services/propertiesService/propertyEditors/BasePropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.js";
 export * from "./elements/services/propertiesService/propertyEditors/ColorPropertyEditor.js";
@@ -78,7 +79,6 @@ export * from "./elements/services/propertiesService/services/CssCustomPropertie
 export * from "./elements/services/propertiesService/services/UnkownElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
-export * from "./elements/services/propertiesService/PropertyTabsService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/stylesheetService/AbstractStylesheetService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",