composite-select 1.0.2 → 1.0.4

package/README.md

@@ -1,3 +1,7 @@
+# npm
+
+https://www.npmjs.com/package/composite-select
+
 # DEV
 
 - [DEV.md](./DEV.md)

package/composition/list-up-down-navi/ListManager.css

@@ -0,0 +1,203 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.options {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+
+  .element {
+    cursor: pointer;
+    padding: 8px 12px;
+    border-left: 3px solid transparent;
+    transition: background-color 150ms;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #3c4043;
+    user-select: none;
+
+    & > * {
+      pointer-events: none;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    &.selected {
+      background: rgba(26, 115, 232, 0.08);
+      border-left-color: #1a73e8;
+      color: #1a73e8;
+    }
+
+    &.highlighted {
+      outline: 2px solid #1a73e8;
+      outline-offset: -2px;
+    }
+  }
+
+  .empty-msg {
+    padding: 24px;
+    text-align: center;
+    color: #5f6368;
+    font-style: italic;
+    font-size: 14px;
+  }
+}
+
+.filter {
+  flex-shrink: 0;
+  padding: 12px 12px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #ccc;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  background: #fff;
+}
+
+.input-wrapper {
+  position: relative;
+  display: grid;
+  flex: 1;
+
+  &::after {
+    content: "";
+    grid-area: 1 / 1;
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px #99999b;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &:focus-within::after {
+    box-shadow: 0 0 0 2px #1a73e8;
+  }
+
+  label {
+    grid-area: 1 / 1;
+    align-self: start;
+    justify-self: start;
+    margin-left: 7px;
+    margin-top: 9px;
+    font-size: 16px;
+    line-height: 1;
+    color: #5f6368;
+    pointer-events: none;
+    transition:
+      transform 150ms,
+      font-size 150ms,
+      color 150ms,
+      margin-top 150ms;
+    background: #fff;
+    padding: 0 4px;
+    z-index: 3;
+    transform: translateY(0);
+  }
+
+  input {
+    grid-area: 1 / 1;
+    width: 100%;
+    border: none;
+    background: transparent;
+    padding: 8px 12px;
+    padding-right: 36px;
+    font-size: 16px;
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+    z-index: 2;
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:not(:placeholder-shown) + label,
+    &:focus + label {
+      margin-top: 0;
+      transform: translateY(-50%);
+      font-size: 12px;
+    }
+
+    &:focus + label {
+      color: #1a73e8;
+    }
+  }
+}
+
+.spinner {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  margin-top: -11px;
+  width: 22px;
+  height: 22px;
+  background-image: url("data:image/svg+xml,%3Csvg fill='%231a73e8' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  animation: spin 0.75s linear infinite;
+  display: none;
+  flex-shrink: 0;
+  z-index: 4;
+
+  &.loading {
+    display: block;
+  }
+}
+
+.gcp-css {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background-color 150ms,
+    box-shadow 150ms;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  outline: none;
+  box-sizing: border-box;
+  background-color: #1a73e8;
+  color: #fff;
+  margin-right: 8px;
+  margin-bottom: 8px;
+
+  &:hover {
+    background-color: #1765cc;
+    box-shadow:
+      0 1px 2px 0 rgba(66, 133, 244, 0.3),
+      0 1px 3px 1px rgba(66, 133, 244, 0.15);
+  }
+
+  &.white {
+    background-color: transparent;
+    color: #1a73e8;
+    border-color: #ccc;
+
+    &:hover {
+      background-color: rgba(26, 115, 232, 0.04);
+      box-shadow: none;
+    }
+  }
+}

package/package.json

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

package/commitlint.config.js

@@ -1,3 +0,0 @@
-export default {
-  extends: ["@commitlint/config-conventional"],
-};

package/composition/composite-select/CompositeManager.js

@@ -1,43 +0,0 @@
-import { ContainerManager } from "../container/ContainerManager.js";
-import { OptionsSectionManager } from "../options-section/OptionsSectionManager.js";
-import { SelectedSectionManager } from "../selected-section/SelectedSectionManager.js";
-import { clickOutside } from "../unbind/clickOutside.js";
-export class CompositeManager {
-    container;
-    selected;
-    options;
-    _unbindClickOutside;
-    _parent;
-    constructor(parent, options = {}) {
-        this._parent = parent;
-        this.container = new ContainerManager(this._parent, options.container);
-        {
-            const target = this.container.getTarget();
-            const div = document.createElement("div");
-            target.appendChild(div);
-            this.selected = new SelectedSectionManager(div, options.select);
-            this.selected.getSubscriber().bind("onFocus", (e) => {
-                this.container.show();
-                this.options.setFocus();
-            });
-        }
-        {
-            const popover = this.container.getPopover();
-            const div = document.createElement("div");
-            popover.appendChild(div);
-            this.options = new OptionsSectionManager(div, options.options);
-        }
-        this._unbindClickOutside = clickOutside([this.container.getParent()], () => {
-            this.container.hide();
-        });
-    }
-    destroy() {
-        this._unbindClickOutside();
-        this.options.destroy();
-        if (typeof this.selected.destroy === "function") {
-            this.selected.destroy();
-        }
-        this.container.destroy();
-        this._parent.innerHTML = "";
-    }
-}

package/composition/composite-select/composite-select.js

@@ -1,199 +0,0 @@
-import { CompositeManager } from "./CompositeManager.js";
-/**
- * CompositeSelect web component — wraps CompositeManager.
- *
- * Does NOT use shadow DOM because ContainerManager creates a <div popover>
- * whose positioning CSS classes (cover-bottom, bottom, etc. from popover.css)
- * are global and cannot penetrate shadow DOM boundaries.
- * The host page must load the required CSS via <link> tags, exactly as ContainerManager.html does.
- *
- * Attribute prefixes:
- *   selected-*   →  SelectedSectionManager properties / events
- *   options-*    →  OptionsSectionManager properties / events
- *   container-*  →  ContainerManager properties / events
- */
-export class CompositeSelect extends HTMLElement {
-    _manager = null;
-    _mountPoint;
-    static get observedAttributes() {
-        return [
-            // selected-* attributes
-            "selected-selected",
-            "selected-show-input",
-            "selected-value",
-            "selected-label",
-            "selected-disabled",
-            "selected-error",
-            "selected-loading",
-            "selected-show-delete",
-            // options-* attributes
-            "options-options",
-            "options-loading",
-            "options-value",
-            "options-label",
-            "options-disabled",
-            "options-max-height",
-            "options-show-footer",
-            "options-show-filter",
-            // container-* attributes
-            "container-position",
-            "container-offset",
-        ];
-    }
-    constructor() {
-        super();
-        // Light DOM — no shadow DOM (popover CSS must be global)
-        this._mountPoint = document.createElement("div");
-    }
-    connectedCallback() {
-        if (!this._mountPoint.parentNode) {
-            this.appendChild(this._mountPoint);
-        }
-        if (this._manager)
-            return;
-        const hasBoolAttr = (name, defaultVal) => this.hasAttribute(name) ? this.getAttribute(name) !== "false" : defaultVal;
-        // ── DEBUG: dump all boolean attrs at init time ────────────────────────────
-        const _bools = {
-            "selected-disabled": { hasAttr: this.hasAttribute("selected-disabled"), attrVal: this.getAttribute("selected-disabled"), resolved: hasBoolAttr("selected-disabled", false) },
-            "selected-error": { hasAttr: this.hasAttribute("selected-error"), attrVal: this.getAttribute("selected-error"), resolved: hasBoolAttr("selected-error", false) },
-            "selected-loading": { hasAttr: this.hasAttribute("selected-loading"), attrVal: this.getAttribute("selected-loading"), resolved: hasBoolAttr("selected-loading", false) },
-            "selected-show-input": { hasAttr: this.hasAttribute("selected-show-input"), attrVal: this.getAttribute("selected-show-input"), resolved: hasBoolAttr("selected-show-input", true) },
-            "selected-show-delete": { hasAttr: this.hasAttribute("selected-show-delete"), attrVal: this.getAttribute("selected-show-delete"), resolved: hasBoolAttr("selected-show-delete", true) },
-            "options-loading": { hasAttr: this.hasAttribute("options-loading"), attrVal: this.getAttribute("options-loading"), resolved: hasBoolAttr("options-loading", false) },
-            "options-disabled": { hasAttr: this.hasAttribute("options-disabled"), attrVal: this.getAttribute("options-disabled"), resolved: hasBoolAttr("options-disabled", false) },
-            "options-show-footer": { hasAttr: this.hasAttribute("options-show-footer"), attrVal: this.getAttribute("options-show-footer"), resolved: hasBoolAttr("options-show-footer", true) },
-            "options-show-filter": { hasAttr: this.hasAttribute("options-show-filter"), attrVal: this.getAttribute("options-show-filter"), resolved: hasBoolAttr("options-show-filter", true) },
-        };
-        for (const [attr, info] of Object.entries(_bools)) {
-            console.log(`[composite-select][connectedCallback] ${attr}: hasAttr=type >${typeof info.hasAttr}< value >${info.hasAttr}<  attrVal=type >${typeof info.attrVal}< value >${info.attrVal}<  resolved=type >${typeof info.resolved}< value >${info.resolved}<`);
-        }
-        // ─────────────────────────────────────────────────────────────────────────
-        this._manager = new CompositeManager(this._mountPoint, {
-            select: {
-                selected: this._parseJSON(this.getAttribute("selected-selected")) ?? [],
-                showInput: hasBoolAttr("selected-show-input", true),
-                value: this.getAttribute("selected-value") || "",
-                label: this.getAttribute("selected-label") || "",
-                disabled: hasBoolAttr("selected-disabled", false),
-                error: hasBoolAttr("selected-error", false),
-                loading: hasBoolAttr("selected-loading", false),
-                showDelete: hasBoolAttr("selected-show-delete", true),
-            },
-            options: {
-                options: this._parseJSON(this.getAttribute("options-options")) ?? [],
-                loading: hasBoolAttr("options-loading", false),
-                value: this.getAttribute("options-value") || "",
-                label: this.getAttribute("options-label") || "",
-                disabled: hasBoolAttr("options-disabled", false),
-                maxHeight: this.getAttribute("options-max-height") || undefined,
-                showFooter: hasBoolAttr("options-show-footer", true),
-                showFilter: hasBoolAttr("options-show-filter", true),
-            },
-            container: {},
-        });
-        if (this.getAttribute("container-position")) {
-            this._manager.container.setPosition(this.getAttribute("container-position"));
-        }
-        if (this.getAttribute("container-offset")) {
-            this._manager.container.setOffset(this.getAttribute("container-offset"));
-        }
-    }
-    disconnectedCallback() {
-        this._manager?.destroy();
-        this._manager = null;
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (!this._manager)
-            return;
-        const isTrue = newValue !== null && newValue !== "false";
-        // ── DEBUG: dump bool attrs as they change ─────────────────────────────────
-        const _boolAttrs = new Set(["selected-disabled", "selected-error", "selected-loading", "selected-show-input", "selected-show-delete", "options-loading", "options-disabled", "options-show-footer", "options-show-filter"]);
-        if (_boolAttrs.has(name)) {
-            console.log(`[composite-select][attributeChangedCallback] ${name}: isTrue=type >${typeof isTrue}< value >${isTrue}<  newValue=type >${typeof newValue}< value >${newValue}<  oldValue=type >${typeof _oldValue}< value >${_oldValue}<`);
-        }
-        // ─────────────────────────────────────────────────────────────────────────
-        switch (name) {
-            // ── selected ─────────────────────────────────────────────────────────
-            case "selected-selected": {
-                const parsed = this._parseJSON(newValue);
-                if (parsed !== undefined) {
-                    this._manager.selected.setSelected(parsed);
-                }
-                break;
-            }
-            case "selected-show-input":
-                this._manager.selected.setShowInput(isTrue);
-                break;
-            case "selected-value":
-                this._manager.selected.setValue(newValue);
-                break;
-            case "selected-label":
-                this._manager.selected.setLabel(newValue);
-                break;
-            case "selected-disabled":
-                this._manager.selected.setDisabled(isTrue);
-                break;
-            case "selected-error":
-                this._manager.selected.setError(isTrue);
-                break;
-            case "selected-loading":
-                this._manager.selected.setLoading(isTrue);
-                break;
-            case "selected-show-delete":
-                this._manager.selected.setShowDelete(isTrue);
-                break;
-            // ── options ──────────────────────────────────────────────────────────
-            case "options-options": {
-                const parsed = this._parseJSON(newValue);
-                if (parsed !== undefined) {
-                    this._manager.options.setOptions(parsed);
-                }
-                break;
-            }
-            case "options-loading":
-                this._manager.options.setLoading(isTrue);
-                break;
-            case "options-value":
-                this._manager.options.setValue(newValue);
-                break;
-            case "options-label":
-                this._manager.options.setLabel(newValue);
-                break;
-            case "options-disabled":
-                this._manager.options.setDisabled(isTrue);
-                break;
-            case "options-max-height":
-                this._manager.options.setMaxHeight(newValue);
-                break;
-            case "options-show-footer":
-                this._manager.options.setShowFooter(isTrue);
-                break;
-            case "options-show-filter":
-                this._manager.options.setShowFilter(isTrue);
-                break;
-            // ── container ────────────────────────────────────────────────────────
-            case "container-position":
-                this._manager.container.setPosition(newValue);
-                break;
-            case "container-offset":
-                this._manager.container.setOffset(newValue);
-                break;
-        }
-    }
-    // ─── Accessor ─────────────────────────────────────────────────────────────
-    getManager() {
-        return this._manager;
-    }
-    _parseJSON(val) {
-        if (!val)
-            return undefined;
-        try {
-            return JSON.parse(val);
-        }
-        catch (e) {
-            console.error(`CompositeSelect: failed to parse JSON:`, val, e);
-            return undefined;
-        }
-    }
-}
-customElements.define("composite-select", CompositeSelect);

package/composition/composite-select/debounce.js

@@ -1,10 +0,0 @@
-export default function debounce(fn, delay) {
-    var timer = null;
-    return function (...args) {
-        var context = this;
-        clearTimeout(timer);
-        timer = setTimeout(function () {
-            fn.apply(context, args);
-        }, delay);
-    };
-}

package/composition/composite-select/helpers.js

@@ -1,96 +0,0 @@
-/**
- * Toggles an item in the selected list: adds if missing, removes if present.
- */
-export function togglePresenceOnTheList(selected, item) {
-    const tmp = [...selected];
-    const newList = tmp.filter((i) => String(i.id) !== String(item.id));
-    if (newList.length === tmp.length) {
-        tmp.push(item);
-        return tmp;
-    }
-    return newList;
-}
-/**
- * Resolves a list of IDs into full option objects and merges them into the current selected list (seed).
- * This function is designed to preserve any existing items in the selected list (including "extra" items
- * that might not exist in the current options array) while ensuring the final result is unique and deduplicated by ID.
- */
-export function selectedFindDeduplicatedInOptionsByIds(options, ids, seed) {
-    let tmp = [];
-    if (seed) {
-        tmp = [...seed];
-    }
-    ids.forEach((id) => {
-        const found = tmp.some((i) => String(i.id) === String(id));
-        if (!found) {
-            tmp.push(options.find((o) => String(o.id) === String(id)));
-        }
-    });
-    tmp = deduplicateArrayById(tmp);
-    return tmp;
-}
-/**
- * Updates the 'selected' flag on each option based on whether its ID exists in the provided selected list.
- */
-export function markSelectedByIds(options, selectedIds) {
-    if (selectedIds.length === 0) {
-        return [...options];
-    }
-    return options.map((option) => {
-        const opt = { ...option };
-        opt.selected = selectedIds.includes(option.id);
-        return opt;
-    });
-}
-/**
- * Returns a new array with duplicate items removed based on their 'id' property.
- * Interesting trick,
- * if you know you will have more than one instance of object by the same id then pass these which you want to keep first.
- * It is usefull in certain circumstances:
- * For example when onFocus is fired we can unselect objects from selected by placing
- * [...options, ...selected] in this order
- * then unselected options will win over selected
- * and then after that we can filter just these which are selected still and update manager.selected.setSelected()
- * this way we will unselect
- */
-export function deduplicateArrayById(arr) {
-    return arr.filter((item, index) => arr.findIndex((i) => String(i.id) === String(item.id)) === index);
-}
-/**
- * Sorts a list of elements by their ID string value.
- */
-export function sortById(list, asc = true) {
-    return [...list].sort((a, b) => {
-        const aId = String(a.id);
-        const bId = String(b.id);
-        if (aId < bId) {
-            return asc ? -1 : 1;
-        }
-        if (aId > bId) {
-            return asc ? 1 : -1;
-        }
-        return 0;
-    });
-}
-/**
- * Wraps matches of search terms in the provided text with a highlight span.
- * Supports multi-word search and case-insensitive matching.
- */
-export function markSearchWithSpan(text, search) {
-    if (!search || !search.trim()) {
-        return text;
-    }
-    // Split by whitespace, deduplicate, and remove empty strings
-    const words = Array.from(new Set(search.trim().split(/\s+/).filter(Boolean)));
-    if (words.length === 0) {
-        return text;
-    }
-    // Escape special regex characters in each word
-    const escapedWords = words.map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
-    // Sort by length descending to match longest words first (greedy matching)
-    escapedWords.sort((a, b) => b.length - a.length);
-    // Create a regex to match any of the words, case-insensitively, globally
-    const regex = new RegExp(`(${escapedWords.join("|")})`, "gi");
-    // Replace matches with the highlighted span
-    return text.replace(regex, '<span class="highlight">$1</span>');
-}