@node-projects/web-component-designer 0.0.292 → 0.1.0

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

@@ -1,34 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-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();
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    setValue(designItems: IDesignItem[], property: (IProperty & {
-        styleRule: IStyleRule;
-        styleDeclaration: IStyleDeclaration;
-    }), value: any): void;
-    clearValue(designItems: IDesignItem[], property: IProperty & {
-        styleRule: IStyleRule;
-        styleDeclaration: IStyleDeclaration;
-    }, clearType: 'all' | 'binding' | 'value'): void;
-    getValue(designItems: IDesignItem[], property: IProperty & {
-        styleRule: IStyleRule;
-        styleDeclaration: IStyleDeclaration;
-    }): string | boolean;
-    getUnsetValue(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 copy.js

@@ -1,105 +0,0 @@
-import { PropertyType } from '../PropertyType.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { ValueType } from '../ValueType.js';
-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' } });
-if (cssProperties.default)
-    cssProperties = cssProperties.default;
-const localName = '<local>';
-export class CssCurrentPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem) {
-        return RefreshMode.fullOnValueChange;
-    }
-    constructor() {
-        super();
-        this.name = 'styles';
-    }
-    isHandledElement(designItem) {
-        return true;
-    }
-    getProperty(designItem, name) {
-        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
-    }
-    getProperties(designItem) {
-        if (!designItem || designItem.nodeType != NodeType.Element)
-            return [];
-        let styles = designItem.getAllStyles();
-        let arr = styles.map(x => ({
-            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
-                ...x.declarations.map(y => ({
-                    name: y.name,
-                    renamable: true,
-                    type: cssProperties[y.name]?.type ?? 'string',
-                    values: cssProperties[y.name]?.values ? [...cssProperties[y.name]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
-                    service: this,
-                    propertyType: PropertyType.cssValue,
-                    styleRule: x,
-                    styleDeclaration: y
-                })),
-                { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex, styleRule: x }
-            ]
-        }));
-        return arr;
-    }
-    setValue(designItems, property, value) {
-        // No selector means local style, styleDeclaration is null means new property
-        if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            // styleDeclaration stored Propertygrid is not refreshed after entering a new value, so we need to reload
-            // TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
-            const decls = designItems[0].instanceServiceContainer.stylesheetService?.getDeclarations(designItems[0], property.styleDeclaration.name);
-            const currentDecl = decls.find(x => x.parent.selector == property.styleDeclaration.parent.selector && x.parent.stylesheetName == property.styleDeclaration.parent.stylesheetName);
-            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(currentDecl, value, false);
-            this._notifyChangedProperty(designItems[0], property, value);
-            return;
-        }
-        if (property.styleRule?.selector !== null && !property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, property.name, value, false);
-            this._notifyChangedProperty(designItems[0], property, value);
-            return;
-        }
-        for (const d of designItems) {
-            // Local style
-            d.setStyle(property.name, value);
-            //unkown css property names do not trigger the mutation observer of property grid, 
-            //fixed by assinging stle again to the attribute
-            d.element.setAttribute('style', d.element.getAttribute('style'));
-        }
-    }
-    clearValue(designItems, property, clearType) {
-        if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration.name);
-            return;
-        }
-        super.clearValue(designItems, property, clearType);
-    }
-    getValue(designItems, property) {
-        if (property.styleRule?.selector && property.styleDeclaration)
-            return property.styleDeclaration.value;
-        return super.getValue(designItems, property);
-    }
-    getUnsetValue(designItems, property) {
-        if (property.styleRule?.selector && property.styleDeclaration)
-            return property.styleDeclaration.value;
-        return super.getUnsetValue(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/services/propertiesService/services/CssCurrentPropertiesService.d.ts

@@ -1,34 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-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();
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    setValue(designItems: IDesignItem[], property: (IProperty & {
-        styleRule: IStyleRule;
-        styleDeclaration: IStyleDeclaration;
-    }), value: any): void;
-    clearValue(designItems: IDesignItem[], property: IProperty & {
-        styleRule: IStyleRule;
-        styleDeclaration: IStyleDeclaration;
-    }, clearType: 'all' | 'binding' | 'value'): void;
-    getValue(designItems: IDesignItem[], property: IProperty & {
-        styleRule: IStyleRule;
-        styleDeclaration: IStyleDeclaration;
-    }): string | boolean;
-    getUnsetValue(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

@@ -1,105 +0,0 @@
-import { PropertyType } from '../PropertyType.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { ValueType } from '../ValueType.js';
-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' } });
-if (cssProperties.default)
-    cssProperties = cssProperties.default;
-const localName = '<local>';
-export class CssCurrentPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem) {
-        return RefreshMode.fullOnValueChange;
-    }
-    constructor() {
-        super();
-        this.name = 'styles';
-    }
-    isHandledElement(designItem) {
-        return true;
-    }
-    getProperty(designItem, name) {
-        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
-    }
-    getProperties(designItem) {
-        if (!designItem || designItem.nodeType != NodeType.Element)
-            return [];
-        let styles = designItem.getAllStyles();
-        let arr = styles.map(x => ({
-            name: x.selector ?? localName, description: x.stylesheetName ?? '', properties: [
-                ...x.declarations.map(y => ({
-                    name: y.name,
-                    renamable: true,
-                    type: cssProperties[y.name]?.type ?? 'string',
-                    values: cssProperties[y.name]?.values ? [...cssProperties[y.name]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
-                    service: this,
-                    propertyType: PropertyType.cssValue,
-                    styleRule: x,
-                    styleDeclaration: y
-                })),
-                { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex, styleRule: x }
-            ]
-        }));
-        return arr;
-    }
-    setValue(designItems, property, value) {
-        // No selector means local style, styleDeclaration is null means new property
-        if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            // styleDeclaration stored Propertygrid is not refreshed after entering a new value, so we need to reload
-            // TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
-            const decls = designItems[0].instanceServiceContainer.stylesheetService?.getDeclarations(designItems[0], property.styleDeclaration.name);
-            const currentDecl = decls.find(x => x.parent.selector == property.styleDeclaration.parent.selector && x.parent.stylesheetName == property.styleDeclaration.parent.stylesheetName);
-            designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(currentDecl, value, false);
-            this._notifyChangedProperty(designItems[0], property, value);
-            return;
-        }
-        if (property.styleRule?.selector !== null && !property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, property.name, value, false);
-            this._notifyChangedProperty(designItems[0], property, value);
-            return;
-        }
-        for (const d of designItems) {
-            // Local style
-            d.setStyle(property.name, value);
-            //unkown css property names do not trigger the mutation observer of property grid, 
-            //fixed by assinging stle again to the attribute
-            d.element.setAttribute('style', d.element.getAttribute('style'));
-        }
-    }
-    clearValue(designItems, property, clearType) {
-        if (property.styleRule?.selector !== null && property.styleDeclaration) {
-            designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration.name);
-            return;
-        }
-        super.clearValue(designItems, property, clearType);
-    }
-    getValue(designItems, property) {
-        if (property.styleRule?.selector && property.styleDeclaration)
-            return property.styleDeclaration.value;
-        return super.getValue(designItems, property);
-    }
-    getUnsetValue(designItems, property) {
-        if (property.styleRule?.selector && property.styleDeclaration)
-            return property.styleDeclaration.value;
-        return super.getUnsetValue(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/services/propertiesService/services/CssCustomPropertiesService.d.ts

@@ -1,17 +0,0 @@
-import { IProperty } from '../IProperty.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { IPropertyGroup } from '../IPropertyGroup.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { ValueType } from '../ValueType.js';
-export declare class CssCustomPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem: IDesignItem): RefreshMode;
-    constructor();
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
-    clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
-    getValue(designItems: IDesignItem[], property: IProperty): string;
-    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
-    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-}

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

@@ -1,43 +0,0 @@
-import { PropertyType } from '../PropertyType.js';
-import { RefreshMode } from '../IPropertiesService.js';
-import { CommonPropertiesService } from './CommonPropertiesService.js';
-import { ValueType } from '../ValueType.js';
-export class CssCustomPropertiesService extends CommonPropertiesService {
-    getRefreshMode(designItem) {
-        return RefreshMode.fullOnValueChange;
-    }
-    constructor() {
-        super();
-        this.name = 'customProperties';
-    }
-    isHandledElement(designItem) {
-        return true;
-    }
-    getProperty(designItem, name) {
-        return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
-    }
-    getProperties(designItem) {
-        if (!designItem?.element?.computedStyleMap)
-            return null;
-        let rootMap = Array.from(designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
-        let props = Array.from(designItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--"));
-        let arr = props.filter(x => !rootMap.includes(x)).map(x => ({
-            name: x,
-            service: this,
-            propertyType: PropertyType.cssValue
-        }));
-        return arr;
-    }
-    clearValue(designItems, property, clearType) {
-        super.clearValue(designItems, property, clearType);
-    }
-    getValue(designItems, property) {
-        return getComputedStyle(designItems[0].element).getPropertyValue(property.name);
-    }
-    getUnsetValue(designItems, property) {
-        return super.getUnsetValue(designItems, property);
-    }
-    isSet(designItems, property) {
-        return designItems[0].hasStyle(property.name) ? ValueType.all : ValueType.none;
-    }
-}