npm - @node-projects/web-component-designer - Versions diffs - 0.1.141 → 0.1.143 - Mend

@node-projects/web-component-designer 0.1.141 → 0.1.143

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/elements/services/DefaultServiceBootstrap.js CHANGED Viewed

@@ -94,12 +94,14 @@ import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerVie
 import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
 import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js';
 import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js';
+import { BasicWebcomponentPropertiesService } from './propertiesService/services/BasicWebcomponentPropertiesService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
     serviceContainer.register("containerService", defaultPlacementService);
     serviceContainer.register("containerService", new GridPlacementService(defaultPlacementService));
     serviceContainer.register("containerService", new FlexBoxPlacementService(defaultPlacementService));
+    serviceContainer.register("propertyService", new BasicWebcomponentPropertiesService());
     serviceContainer.register("propertyService", new PolymerPropertiesService());
     serviceContainer.register("propertyService", new LitElementPropertiesService());
     serviceContainer.register("propertyService", new NativeElementsPropertiesService());

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js CHANGED Viewed

@@ -38,7 +38,7 @@ export class BaseCustomWebcomponentBindingsService {
                     bnd.expression = value.substring(2, value.length - 2);
                 }
                 else if (a[0].startsWith('.')) {
-                    bnd.targetName = name.substring(1);
+                    bnd.targetName = PropertiesHelper.dashToCamelCase(name.substring(1));
                     bnd.target = BindingTarget.explicitProperty;
                     bnd.expression = value.substring(2, value.length - 2);
                 }

package/dist/elements/services/propertiesService/services/BasicWebcomponentPropertiesService copy.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class NativeElementsPropertiesService extends CommonPropertiesService {
+    private inputProperties;
+    private textareaProperties;
+    private selectProperties;
+    private buttonProperties;
+    private anchorProperties;
+    private divProperties;
+    private imgProperties;
+    private iframeProperties;
+    private formElementProperties;
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

package/dist/elements/services/propertiesService/services/BasicWebcomponentPropertiesService copy.js ADDED Viewed

@@ -0,0 +1,243 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class NativeElementsPropertiesService extends CommonPropertiesService {
+    inputProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
+            service: this,
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "min",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "max",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "valueAsDate",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "valueAsNumber",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        }
+    ];
+    textareaProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "maxlength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "cols",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "rows",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "resize",
+            type: "list",
+            values: ["both", "none", "horizontal", "vertical"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    selectProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "size",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "multiple",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    formElementProperties = [
+        {
+            name: "autofocus",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "required",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "native";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'input':
+            case 'textarea':
+            case 'select':
+            case 'button':
+            case 'a':
+            case 'div':
+            case 'span':
+            case 'br':
+            case 'img':
+            case 'iframe':
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return true;
+        }
+        return false;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        switch (designItem.element.localName) {
+            case 'input':
+                return [...this.inputProperties, ...this.formElementProperties];
+            case 'textarea':
+                return [...this.textareaProperties, ...this.formElementProperties];
+            case 'select':
+                return [...this.selectProperties, ...this.formElementProperties];
+            case 'button':
+                return [...this.buttonProperties, ...this.formElementProperties];
+            case 'a':
+                return this.anchorProperties;
+            case 'div':
+                return this.divProperties;
+            case 'img':
+                return this.imgProperties;
+            case 'iframe':
+                return this.iframeProperties;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return [];
+        }
+        return null;
+    }
+}

package/dist/elements/services/propertiesService/services/BasicWebcomponentPropertiesService.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+export declare class BasicWebcomponentPropertiesService extends AbstractPropertiesService {
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

package/dist/elements/services/propertiesService/services/BasicWebcomponentPropertiesService.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { PropertiesHelper } from './PropertiesHelper.js';
+export class BasicWebcomponentPropertiesService extends AbstractPropertiesService {
+    name = "webcomponent";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        //@ts-ignore
+        const attr = designItem.element.constructor?.observedAttributes;
+        if (attr && attr.length > 0) {
+            return true;
+        }
+        return false;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        //@ts-ignore
+        const attr = designItem.element.constructor?.observedAttributes;
+        return attr.map(x => ({
+            name: PropertiesHelper.dashToCamelCase(x),
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }));
+    }
+}

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare class NativeElementsPropertiesService extends CommonPropertiesService {
+    private inputProperties;
+    private textareaProperties;
+    private selectProperties;
+    private buttonProperties;
+    private anchorProperties;
+    private divProperties;
+    private imgProperties;
+    private iframeProperties;
+    private formElementProperties;
+    name: string;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+}

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService copy.js ADDED Viewed

@@ -0,0 +1,243 @@
+import { CommonPropertiesService } from './CommonPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class NativeElementsPropertiesService extends CommonPropertiesService {
+    inputProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"],
+            service: this,
+            defaultValue: "text",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "checked",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "min",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "max",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "valueAsDate",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "valueAsNumber",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        }
+    ];
+    textareaProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "maxlength",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "cols",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "rows",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "readonly",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "resize",
+            type: "list",
+            values: ["both", "none", "horizontal", "vertical"],
+            service: this,
+            propertyType: PropertyType.cssValue
+        }
+    ];
+    selectProperties = [
+        {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.property
+        },
+        {
+            name: "size",
+            type: "number",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "multiple",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    buttonProperties = [
+        {
+            name: "type",
+            type: "list",
+            values: ["button", "submit", "reset"],
+            service: this,
+            defaultValue: "button",
+            propertyType: PropertyType.propertyAndAttribute
+        }, {
+            name: "value",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    anchorProperties = [
+        {
+            name: "href",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    divProperties = [
+        {
+            name: "title",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    imgProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    iframeProperties = [
+        {
+            name: "src",
+            type: "string",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    formElementProperties = [
+        {
+            name: "autofocus",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        },
+        {
+            name: "required",
+            type: "boolean",
+            service: this,
+            propertyType: PropertyType.propertyAndAttribute
+        }
+    ];
+    name = "native";
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    isHandledElement(designItem) {
+        switch (designItem.element.localName) {
+            case 'input':
+            case 'textarea':
+            case 'select':
+            case 'button':
+            case 'a':
+            case 'div':
+            case 'span':
+            case 'br':
+            case 'img':
+            case 'iframe':
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return true;
+        }
+        return false;
+    }
+    getProperty(designItem, name) {
+        return this.getProperties(designItem).find(x => x.name == name);
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        switch (designItem.element.localName) {
+            case 'input':
+                return [...this.inputProperties, ...this.formElementProperties];
+            case 'textarea':
+                return [...this.textareaProperties, ...this.formElementProperties];
+            case 'select':
+                return [...this.selectProperties, ...this.formElementProperties];
+            case 'button':
+                return [...this.buttonProperties, ...this.formElementProperties];
+            case 'a':
+                return this.anchorProperties;
+            case 'div':
+                return this.divProperties;
+            case 'img':
+                return this.imgProperties;
+            case 'iframe':
+                return this.iframeProperties;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return [];
+        }
+        return null;
+    }
+}

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { RefreshMode } from '../IPropertiesService.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
-export declare class NativeElementsPropertiesService extends CommonPropertiesService {
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+export declare class NativeElementsPropertiesService extends AbstractPropertiesService {
     private inputProperties;
     private textareaProperties;
     private selectProperties;

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { CommonPropertiesService } from './CommonPropertiesService.js';
 import { PropertyType } from '../PropertyType.js';
 import { RefreshMode } from '../IPropertiesService.js';
-export class NativeElementsPropertiesService extends CommonPropertiesService {
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+export class NativeElementsPropertiesService extends AbstractPropertiesService {
     inputProperties = [
         {
             name: "type",

package/dist/index.d.ts CHANGED Viewed

@@ -110,6 +110,7 @@ export * from "./elements/services/propertiesService/propertyEditors/special/Gri
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/AttachedPropertiesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
+export * from "./elements/services/propertiesService/services/BasicWebcomponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ContentAndIdPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssCurrentPropertiesService.js";

package/dist/index.js CHANGED Viewed

@@ -69,6 +69,7 @@ export * from "./elements/services/propertiesService/propertyEditors/special/Gri
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
 export * from "./elements/services/propertiesService/services/AttachedPropertiesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
+export * from "./elements/services/propertiesService/services/BasicWebcomponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ContentAndIdPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CssCurrentPropertiesService.js";

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.141",
+  "version": "0.1.143",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",