@node-projects/web-component-designer 0.0.65 → 0.0.69

package/dist/elements/controls/aa.d.ts

@@ -1,24 +0,0 @@
-/**
-   * Split View is an image comparison component
-   *
-   * <split-view>
-   *   <picture slot="top">[...]</picture>
-   *   <picture slot="bottom">[...]</picture>
-   * </split-view>
-   *
-   * Options are;
-   *
-   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
-   * mode (string) A CSS mix-blend-mode to use for comparison
-   */
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    static properties: {
-        start: NumberConstructor;
-    };
-    constructor();
-    start: number;
-    ready(): void;
-}

package/dist/elements/controls/aa.js

@@ -1,98 +0,0 @@
-/**
-   * Split View is an image comparison component
-   *
-   * <split-view>
-   *   <picture slot="top">[...]</picture>
-   *   <picture slot="bottom">[...]</picture>
-   * </split-view>
-   *
-   * Options are;
-   *
-   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
-   * mode (string) A CSS mix-blend-mode to use for comparison
-   */
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    :host {
-      display: block;
-    }
-    :host([hidden]) { display: none }
-    .split {
-      position: relative;
-      height: 100%;
-      display: grid;
-      align-items: center;
-      --split: 100;
-    }
-    .top,
-    .bottom {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-    .bottom {
-      background-color: red;
-    }
-    .top {
-      z-index: 2;
-      right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
-      overflow: hidden;
-      border-right: 1px solid white;
-    }
-    input {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      padding: 0;
-      z-index: 3;
-      background-color: transparent;
-      -webkit-appearance: none;
-    }
-    input[type="range"]:focus {
-      outline: var(--outline, -webkit-focus-ring-color auto 1px);
-    }`;
-    static template = html `
-    <div class="split" id="split" role="img" aria-label="Comparison of two images">
-      <div class="bottom" id="bottom" aria-label="First image to compare">
-        <slot name="bottom"></slot>
-      </div>
-      <div class="top" id="top" aria-label="Second image to compare">
-        <slot name="top"></slot>  
-      </div>
-      <label id="label" for="slider">Slide left and right to compare images</label>
-      <input type="range" role="slider" min="0" max="100" value="50" name="slider" id="slider" aria-labelledby="label" aria-valuemin="0" aria-valuemax="100">
-    </div>`;
-    static properties = {
-        start: Number
-    };
-    constructor() {
-        super();
-    }
-    start;
-    ready() {
-        this._parseAttributesToProperties();
-        const splitter = this._getDomElement("split");
-        const slider = this._getDomElement("slider");
-        const label = this._getDomElement("label");
-        const top = this._getDomElement("top");
-        const splitViewLabelText = this.getAttribute("split-view-label") || 'Comparison of two images';
-        const sliderLabelText = this.getAttribute("slider-label") || 'Press left and right to compare images';
-        const mode = this.getAttribute("mode") || "normal";
-        slider.addEventListener("input", (event) => {
-            const split = +event.target.value;
-            splitter.style.setProperty("--split", split);
-            slider.setAttribute('aria-valuenow', split);
-        });
-        splitter.style.setProperty("--split", this.start);
-        slider.setAttribute('aria-valuenow', this.start);
-        slider.value = this.start;
-        splitter.setAttribute('aria-label', splitViewLabelText);
-        label.innerText = sliderLabelText;
-        top.style.mixBlendMode = mode;
-    }
-}
-customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.d.ts

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

package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.js

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

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

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProviderConfigButtons {
-    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
-}

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

@@ -1,12 +0,0 @@
-import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
-export class GridExtensionProviderConfigButtons {
-    aaa(extensionManager, designerView) {
-        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
-        const btn = document.createElement('div');
-        btn.onclick = () => {
-            const val = extensionOptions[gridExtensionShowOverlayOptionName];
-            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
-        };
-        return [btn];
-    }
-}

package/dist/elements/widgets/designerView/extensions/GridExtensionProvider copy.d.ts

@@ -1,10 +0,0 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProvider 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/GridExtensionProvider copy.js

@@ -1,18 +0,0 @@
-import { GridExtension } from './GridExtension';
-import { css } from "@node-projects/base-custom-webcomponent";
-const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
-export class GridExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'grid')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GridExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
-    .svg-grid-area { font-size: 8px; }
-    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-  `;
-}

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

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProviderConfigButtons {
-    aaa(extensionManager: IExtensionManager, designerView: IDesignerCanvas): HTMLElement[];
-}

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

@@ -1,12 +0,0 @@
-import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
-export class GridExtensionProviderConfigButtons {
-    aaa(extensionManager, designerView) {
-        const extensionOptions = designerView.instanceServiceContainer.designContext.extensionOptions;
-        const btn = document.createElement('div');
-        btn.onclick = () => {
-            const val = extensionOptions[gridExtensionShowOverlayOptionName];
-            extensionOptions[gridExtensionShowOverlayOptionName] = val == true ? false : true;
-        };
-        return [btn];
-    }
-}

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

@@ -1,10 +0,0 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class GridExtensionProvider 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/GridExtensionProviderOptions.js

@@ -1,18 +0,0 @@
-import { GridExtension } from './GridExtension';
-import { css } from "@node-projects/base-custom-webcomponent";
-const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
-export class GridExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'grid')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GridExtension(extensionManager, designerView, designItem);
-    }
-    style = css `
-    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
-    .svg-grid-area { font-size: 8px; }
-    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-  `;
-}

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

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,3 +0,0 @@
-export interface IExtensionConfiguration {
-    designerViewButtons?: HTMLElement[];
-}