composite-select 1.0.9 → 1.0.10

package/dist/esm/CenterAndHeightResizer.js

@@ -0,0 +1,268 @@
+/**
+ *   <center-and-height-resizer
+ *      left="50px"
+ *      center="350px"
+ *      height="200px"
+ *      style="padding: 12px;"
+ *      data-test="idfortest"
+ *   >
+ *      <div>Content</div>
+ *   </center-and-height-resizer>
+ *
+ *   const resizer = document.querySelector('center-and-height-resizer');
+ *   resizer.addEventListener('onLeft', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onCenter', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onHeight', e => console.log(e.detail.height));
+ */
+const SKIP_ATTRIBUTES = ["id", "class", "left", "center", "height", "style"];
+export class CenterAndHeightResizer extends HTMLElement {
+    leftDiv;
+    rightDiv;
+    centerDiv;
+    resizerLeft;
+    resizerRight;
+    resizerBottom;
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 !important;
+        }
+        .flex {
+          display: flex;
+          width: 100%;
+          align-items: stretch;
+        }
+        .center-column {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+        }
+        .center-div {
+          flex-grow: 1;
+          min-width: 0;
+          box-sizing: border-box;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
+          background: #fff;
+          border-radius: 6px;
+          overflow: auto;
+          min-height: 50px;
+          border: 1px solid #eaeaea;
+        }
+        .side-div {
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+        #right-div {
+          flex-grow: 1;
+        }
+        .resizer {
+          flex-shrink: 0;
+          transition: background 0.2s;
+          user-select: none;
+          position: relative;
+        }
+        .resizer.horizontal {
+          width: 8px;
+          cursor: col-resize;
+        }
+        .resizer.vertical {
+          height: 8px;
+          cursor: row-resize;
+          width: 100%;
+        }
+        .resizer:hover,
+        .resizer.active {
+          background: rgba(26, 115, 232, 0.12);
+        }
+        .resizer::after {
+          content: "";
+          position: absolute;
+          background: #ccc;
+          transition: background 0.2s;
+        }
+        .resizer.horizontal::after {
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          width: 14px;
+          transform: translateX(-50%);
+        }
+        .resizer.vertical::after {
+          top: 50%;
+          left: 0;
+          right: 0;
+          height: 14px;
+          transform: translateY(-50%);
+        }
+        .resizer:hover::after,
+        .resizer.active::after {
+          background: #1a73e8;
+        }
+        
+        #resizer-left {
+          margin-right: 5px;
+        }
+        #resizer-right {
+          margin-left: 5px;
+        }
+        #resizer-bottom {
+          margin-top: 5px;
+        }
+      </style>
+      <div class="flex">
+        <div class="side-div" id="left-div"></div>
+        <div class="resizer horizontal" id="resizer-left"></div>
+        <div class="center-column">
+          <div class="center-div" id="center-div">
+            <slot></slot>
+          </div>
+          <div class="resizer vertical" id="resizer-bottom"></div>
+        </div>
+        <div class="resizer horizontal" id="resizer-right"></div>
+        <div class="side-div" id="right-div"></div>
+      </div>
+    `;
+    }
+    static get observedAttributes() {
+        return SKIP_ATTRIBUTES.filter((attr) => !["id", "class"].includes(attr));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (!this.leftDiv)
+            return; // Not connected yet
+        switch (name) {
+            case "left":
+                this.leftDiv.style.width = newValue;
+                break;
+            case "center":
+                this.centerDiv.style.width = newValue;
+                break;
+            case "height":
+                this.centerDiv.style.height = newValue;
+                break;
+            case "style":
+                this.centerDiv.style.cssText = newValue;
+                this._applyInternalStylesToCenterDiv();
+                break;
+        }
+    }
+    connectedCallback() {
+        this.leftDiv = this.shadowRoot.getElementById("left-div");
+        this.rightDiv = this.shadowRoot.getElementById("right-div");
+        this.centerDiv = this.shadowRoot.getElementById("center-div");
+        this.resizerLeft = this.shadowRoot.getElementById("resizer-left");
+        this.resizerRight = this.shadowRoot.getElementById("resizer-right");
+        this.resizerBottom = this.shadowRoot.getElementById("resizer-bottom");
+        const attrLeft = this.getAttribute("left");
+        const attrCenter = this.getAttribute("center");
+        const attrHeight = this.getAttribute("height");
+        if (attrLeft) {
+            this.leftDiv.style.width = attrLeft;
+        }
+        if (attrCenter) {
+            this.centerDiv.style.width = attrCenter;
+        }
+        if (attrHeight) {
+            this.centerDiv.style.height = attrHeight;
+        }
+        this.setupResizer(this.resizerLeft, this.leftDiv, "left", false);
+        this.setupResizer(this.resizerRight, this.centerDiv, "center", false);
+        this.setupHeightResizer(this.resizerBottom, this.centerDiv);
+        this._initForwarding();
+    }
+    _applyInternalStylesToCenterDiv() {
+        const center = this.getAttribute("center");
+        if (center)
+            this.centerDiv.style.width = center;
+        const height = this.getAttribute("height");
+        if (height)
+            this.centerDiv.style.height = height;
+    }
+    _initForwarding() {
+        const observer = new MutationObserver((mutations) => {
+            let syncNeeded = false;
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes") {
+                    if (!SKIP_ATTRIBUTES.includes(mutation.attributeName)) {
+                        syncNeeded = true;
+                        break;
+                    }
+                }
+            }
+            if (syncNeeded)
+                this._syncAttributes();
+        });
+        observer.observe(this, { attributes: true });
+        this._syncAttributes();
+    }
+    _syncAttributes() {
+        for (const attr of Array.from(this.attributes)) {
+            if (SKIP_ATTRIBUTES.includes(attr.name))
+                continue;
+            this.centerDiv.setAttribute(attr.name, attr.value);
+        }
+        if (this.hasAttribute("style")) {
+            this.centerDiv.style.cssText = this.getAttribute("style") || "";
+            this._applyInternalStylesToCenterDiv();
+        }
+    }
+    getContentRoot() {
+        return this.centerDiv || this.shadowRoot.getElementById("center-div");
+    }
+    setupResizer(handle, target, attrName, invert) {
+        handle.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            handle.classList.add("active");
+            const startX = e.clientX;
+            const startWidth = target.offsetWidth;
+            const onMouseMove = (moveEvent) => {
+                let diff = moveEvent.clientX - startX;
+                if (invert)
+                    diff = -diff;
+                let newWidth = startWidth + diff;
+                newWidth = Math.max(0, newWidth);
+                target.style.width = newWidth + "px";
+                this.setAttribute(attrName, newWidth + "px");
+                const eventName = attrName === "left" ? "onLeft" : "onCenter";
+                this.dispatchEvent(new CustomEvent(eventName, { detail: { width: newWidth } }));
+            };
+            const onMouseUp = () => {
+                handle.classList.remove("active");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+    setupHeightResizer(handle, target) {
+        handle.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            handle.classList.add("active");
+            const startY = e.clientY;
+            const startHeight = target.offsetHeight;
+            const onMouseMove = (moveEvent) => {
+                const diff = moveEvent.clientY - startY;
+                let newHeight = startHeight + diff;
+                newHeight = Math.max(0, newHeight);
+                target.style.height = newHeight + "px";
+                this.setAttribute("height", newHeight + "px");
+                this.dispatchEvent(new CustomEvent("onHeight", { detail: { height: newHeight } }));
+            };
+            const onMouseUp = () => {
+                handle.classList.remove("active");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+}
+customElements.define("center-and-height-resizer", CenterAndHeightResizer);

package/dist/esm/CenterResizer.js

@@ -0,0 +1,195 @@
+/**
+ *   <center-resizer
+ *      left="50px"
+ *      center="350px"
+ *      style="padding: 12px;"
+ *      data-test="idfortest"
+ *   >
+ *      <div>Content</div>
+ *   </center-resizer>
+ *
+ *   const resizer = document.querySelector('center-resizer');
+ *   resizer.addEventListener('onLeft', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onCenter', e => console.log(e.detail.width));
+ */
+const SKIP_ATTRIBUTES = ["id", "class", "left", "center", "style"];
+export class CenterResizer extends HTMLElement {
+    leftDiv;
+    centerDiv;
+    rightDiv;
+    resizerLeft;
+    resizerRight;
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 !important;
+        }
+        .flex {
+          display: flex;
+          width: 100%;
+          align-items: stretch;
+        }
+        .center-div {
+          flex-shrink: 0;
+          min-width: 0;
+          padding-left: 15px;
+          padding-right: 15px;
+          box-sizing: border-box;
+        }
+        .side-div {
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+        #right-div {
+          flex-grow: 1;
+        }
+        .resizer {
+          width: 8px;
+          cursor: col-resize;
+          flex-shrink: 0;
+          transition: background 0.2s;
+          user-select: none;
+          margin: 0 -4px;
+          position: relative;
+        }
+        .resizer:hover,
+        .resizer.active {
+          background: rgba(26, 115, 232, 0.2);
+        }
+        .resizer::after {
+          content: "";
+          position: absolute;
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background: #ccc;
+          transform: translateX(-50%);
+        }
+        .resizer:hover::after,
+        .resizer.active::after {
+          background: #1a73e8;
+        }
+      </style>
+      <div class="flex">
+        <div class="side-div" id="left-div"></div>
+        <div class="resizer" id="resizer-left"></div>
+        <div class="center-div" id="center-div">
+          <slot></slot>
+        </div>
+        <div class="resizer" id="resizer-right"></div>
+        <div class="side-div" id="right-div"></div>
+      </div>
+    `;
+    }
+    static get observedAttributes() {
+        return SKIP_ATTRIBUTES.filter((attr) => !["id", "class"].includes(attr));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (!this.centerDiv)
+            return;
+        switch (name) {
+            case "left":
+                this.leftDiv.style.width = newValue;
+                break;
+            case "center":
+                this.centerDiv.style.width = newValue;
+                break;
+            case "style":
+                this.centerDiv.style.cssText = newValue;
+                this._applyInternalStylesToCenterDiv();
+                break;
+        }
+    }
+    connectedCallback() {
+        this.leftDiv = this.shadowRoot.getElementById("left-div");
+        this.centerDiv = this.shadowRoot.getElementById("center-div");
+        this.rightDiv = this.shadowRoot.getElementById("right-div");
+        this.resizerLeft = this.shadowRoot.getElementById("resizer-left");
+        this.resizerRight = this.shadowRoot.getElementById("resizer-right");
+        const attrLeft = this.getAttribute("left");
+        const attrCenter = this.getAttribute("center");
+        if (attrLeft) {
+            this.leftDiv.style.width = attrLeft;
+        }
+        if (attrCenter) {
+            this.centerDiv.style.width = attrCenter;
+        }
+        this.setupResizer(this.resizerLeft, this.leftDiv, "left");
+        this.setupResizer(this.resizerRight, this.centerDiv, "center");
+        this._initForwarding();
+    }
+    _applyInternalStylesToCenterDiv() {
+        const center = this.getAttribute("center");
+        if (center)
+            this.centerDiv.style.width = center;
+    }
+    _initForwarding() {
+        const observer = new MutationObserver((mutations) => {
+            let syncNeeded = false;
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes") {
+                    if (!SKIP_ATTRIBUTES.includes(mutation.attributeName)) {
+                        syncNeeded = true;
+                        break;
+                    }
+                }
+            }
+            if (syncNeeded)
+                this._syncAttributes();
+        });
+        observer.observe(this, { attributes: true });
+        this._syncAttributes();
+    }
+    _syncAttributes() {
+        for (const attr of Array.from(this.attributes)) {
+            if (SKIP_ATTRIBUTES.includes(attr.name))
+                continue;
+            this.centerDiv.setAttribute(attr.name, attr.value);
+        }
+        if (this.hasAttribute("style")) {
+            this.centerDiv.style.cssText = this.getAttribute("style") || "";
+            this._applyInternalStylesToCenterDiv();
+        }
+    }
+    getContentRoot() {
+        return this.centerDiv || this.shadowRoot.getElementById("center-div");
+    }
+    setupResizer(handle, target, attributeName) {
+        handle.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            handle.classList.add("active");
+            const startX = e.clientX;
+            const startWidth = target.offsetWidth;
+            const onMouseMove = (moveEvent) => {
+                let diff = moveEvent.clientX - startX;
+                let newWidth = startWidth + diff;
+                newWidth = Math.max(0, newWidth);
+                target.style.width = newWidth + "px";
+                if (attributeName === "center") {
+                    this.setAttribute("center", newWidth + "px");
+                    this.dispatchEvent(new CustomEvent("onCenter", { detail: { width: newWidth } }));
+                }
+                else {
+                    this.setAttribute("left", newWidth + "px");
+                    this.dispatchEvent(new CustomEvent("onLeft", { detail: { width: newWidth } }));
+                }
+            };
+            const onMouseUp = () => {
+                handle.classList.remove("active");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+}
+customElements.define("center-resizer", CenterResizer);

package/dist/types/CenterAndHeightResizer.d.ts

@@ -0,0 +1,18 @@
+export declare class CenterAndHeightResizer extends HTMLElement {
+    leftDiv: HTMLElement;
+    rightDiv: HTMLElement;
+    centerDiv: HTMLElement;
+    resizerLeft: HTMLElement;
+    resizerRight: HTMLElement;
+    resizerBottom: HTMLElement;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    _applyInternalStylesToCenterDiv(): void;
+    _initForwarding(): void;
+    _syncAttributes(): void;
+    getContentRoot(): HTMLElement;
+    setupResizer(handle: HTMLElement, target: HTMLElement, attrName: string, invert: boolean): void;
+    setupHeightResizer(handle: HTMLElement, target: HTMLElement): void;
+}

package/dist/types/CenterResizer.d.ts

@@ -0,0 +1,16 @@
+export declare class CenterResizer extends HTMLElement {
+    leftDiv: HTMLElement;
+    centerDiv: HTMLElement;
+    rightDiv: HTMLElement;
+    resizerLeft: HTMLElement;
+    resizerRight: HTMLElement;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    _applyInternalStylesToCenterDiv(): void;
+    _initForwarding(): void;
+    _syncAttributes(): void;
+    getContentRoot(): HTMLElement;
+    setupResizer(handle: HTMLElement, target: HTMLElement, attributeName: "left" | "center"): void;
+}

package/dist/types/composite-select/ContainerManager.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterAndHeightResizer.js";
+import "../CenterAndHeightResizer.js";

package/dist/types/composite-select/composite-select.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterAndHeightResizer.js";
+import "../CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManager.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterAndHeightResizer.js";
+import "../CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManagerWebComponent.attributes.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterAndHeightResizer.js";
+import "../CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManagerWebComponent.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterAndHeightResizer.js";
+import "../CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManagerWebComponent.nocssrequest.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterAndHeightResizer.js";
+import "../CenterAndHeightResizer.js";

package/dist/types/selected-section/SelectedSectionManager.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterResizer.js";
+import "../CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManager.templates.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterResizer.js";
+import "../CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManagerWebComponent.attributes.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterResizer.js";
+import "../CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManagerWebComponent.html.d.ts

@@ -1 +1 @@
-import "../../../js/CenterResizer.js";
+import "../CenterResizer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "composite-select",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "author": "Szymon Działowski",
   "description": "Select dropdown component, vanilla, web components and react",
   "license": "MIT",