kr-elements 0.0.1-alpha.2 → 0.0.1-alpha.21

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.21",
   "description": "Custom elements",
   "type": "module",
   "scripts": {
     "prepare": "husky",
     "clean": "rm -rf dist",
-    "build:combobox": "tsc -b configs/combobox.tsconfig.cjs.json configs/combobox.tsconfig.esm.json configs/combobox.tsconfig.types.json",
+    "build:combobox": "tsc -b configs/tsconfig.cjs.json configs/tsconfig.esm.json configs/tsconfig.types.json",
     "generate": "node --import tsx ./scripts/genPackageFiles.ts",
     "build": "npm-run-all clean build:combobox generate",
     "check-types": "tsc --noEmit"
@@ -20,25 +20,24 @@
   "devDependencies": {
     "@espcom/eslint-config": "latest",
     "@types/node": "22.8.6",
+    "@types/react": "^19.2.14",
     "c8": "10.1.2",
     "esbuild": "0.25.5",
     "husky": "9.1.5",
     "lint-staged": "15.2.9",
     "npm-run-all": "^4.1.5",
+    "preact": "^10.28.4",
+    "react": "^19.2.4",
+    "solid-js": "^1.9.11",
     "tsx": "^4.19.2",
-    "typescript": "latest",
+    "typescript": "5.9.3",
     "xml-splitter": "1.2.1"
   },
   "sideEffect": false,
-  "exports": {
-    "./combobox": {
-      "types": "./dist/types/combobox/index.d.ts",
-      "require": "./dist/cjs/combobox/index.js",
-      "import": "./dist/esm/combobox/index.js"
-    }
-  },
-  "main": "dist/cjs/combobox/index.js",
-  "module": "dist/esm/combobox/index.js",
-  "types": "dist/types/combobox/index.d.ts",
-  "combobox": "dist/cjs/combobox/index.js"
+  "files": [
+    "dist"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts"
 }

package/dist/cjs/Boolean.attribute.value.normalizer.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toBoolean = void 0;
-function toBoolean(value) {
-    if (value == null || value === 'false' || value === false)
-        value = false;
-    if (value === true || value === 'true' || value === '')
-        value = true;
-    return Boolean(value);
-}
-exports.toBoolean = toBoolean;

package/dist/cjs/Combobox.markup.js

@@ -1,315 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboboxMarkup = void 0;
-const HTML_combobox_tag_element_js_1 = require("./HTML.combobox.tag.element.js");
-class ComboboxMarkup {
-    #shadowRoot;
-    #internals;
-    tagsContainer = null;
-    optionsContainer = null;
-    clearAllButton = null;
-    dropdown = null;
-    placeholder = null;
-    searchInput = null;
-    constructor(shadowRoot, internals) {
-        this.#shadowRoot = shadowRoot;
-        this.#internals = internals;
-        this.#shadowRoot.host.addEventListener('focus', this.showDropdown);
-        this.#shadowRoot.host.addEventListener('blur', this.hideDropdown);
-        this.#shadowRoot.host.addEventListener('click', this.showDropdown);
-        document.addEventListener('click', this.hideDropdown);
-        document.addEventListener('scroll', this.onPageScroll);
-    }
-    connect() {
-        this.tagsContainer = this.#shadowRoot.querySelector('#tags');
-        this.optionsContainer = this.#shadowRoot.querySelector('[part="options"]');
-        this.clearAllButton = this.#shadowRoot.querySelector('[part="clear-all-button"]');
-        this.dropdown = this.#shadowRoot.querySelector('#dropdown');
-        this.placeholder = this.#shadowRoot.querySelector('#placeholder');
-        this.searchInput = this.#shadowRoot.querySelector('[part="search-input"]');
-    }
-    sort(query) {
-        const regex = new RegExp(query, 'i');
-        this.optionsContainer.querySelectorAll('box-option')
-            .forEach(option => {
-            if (query === '') {
-                option.style.display = "initial";
-            }
-            else if (!regex.test(option.label)) {
-                option.style.display = "none";
-            }
-            else {
-                option.style.order = "initial";
-            }
-        });
-    }
-    disconnect() {
-        this.#shadowRoot.host.removeEventListener('focus', this.showDropdown);
-        this.#shadowRoot.host.removeEventListener('blur', this.hideDropdown);
-        this.#shadowRoot.host.removeEventListener('click', this.showDropdown);
-        document.removeEventListener('click', this.hideDropdown);
-        document.removeEventListener('scroll', this.onPageScroll);
-    }
-    onPageScroll = () => {
-        if (this.dropdown.matches(':popover-open')) {
-            this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
-        }
-    };
-    setDropdownPosition(rect) {
-        const dropdown = this.dropdown;
-        const vh = window.innerHeight;
-        const sh = rect.height;
-        const sy = rect.top;
-        if (sy < (vh - vh / 3)) {
-            dropdown.style.top = sh + sy + 'px';
-            dropdown.style.bottom = 'unset';
-            dropdown.style.transform = `unset`;
-        }
-        else {
-            dropdown.style.top = sh + sy + 'px';
-            dropdown.style.bottom = 'unset';
-            dropdown.style.transform = `translateY(calc(-1 * calc(100% + ${sh}px)))`;
-        }
-        dropdown.style.left = rect.left + 'px';
-        dropdown.style.width = rect.width + 'px';
-        dropdown.style.maxHeight = '50vh';
-    }
-    showDropdown = () => {
-        try {
-            this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
-            this.dropdown.style.display = 'flex';
-            this.dropdown.showPopover();
-            this.#internals.ariaExpanded = "true";
-        }
-        catch {
-            this.#internals.ariaExpanded = "false";
-        }
-    };
-    hideDropdown = (event) => {
-        if (event.composedPath().includes(this.#shadowRoot.host))
-            return;
-        try {
-            this.dropdown.hidePopover();
-            this.dropdown.style.display = 'none';
-            this.#internals.ariaExpanded = "false";
-        }
-        catch {
-            this.#internals.ariaExpanded = "true";
-        }
-    };
-    createAndAppendTag(option) {
-        const template = this.tagTemplate;
-        const tag = template.cloneNode(true);
-        const label = tag.querySelector('[part="tag-label"]');
-        label.textContent = option.label;
-        const clearButton = tag.querySelector('[part="tag-clear-button"]');
-        clearButton.setAttribute('value', option.value);
-        tag.setAttribute('value', option.value);
-        option.querySelectorAll('[part]')
-            .forEach(node => {
-            const relatedPart = tag.querySelector(`[part=${node.getAttribute('part')}]`);
-            if (relatedPart) {
-                tag.replaceChild(node.cloneNode(true), relatedPart);
-            }
-        });
-        this.tagsContainer.appendChild(tag);
-        return clearButton;
-    }
-    getTagByValue(value) {
-        return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
-    }
-    getOptionByValue(value) {
-        return this.optionsContainer.querySelector(`box-option[value="${value}"]`);
-    }
-    get tagTemplate() {
-        let template = this.#shadowRoot.host.firstElementChild;
-        if (!template || !(template instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement)) {
-            const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
-            const doc = document.importNode(innerTemplate.content, true);
-            template = doc.querySelector('box-tag');
-        }
-        return template;
-    }
-    get selectedOptions() {
-        return this.optionsContainer
-            .querySelectorAll('box-option[selected]');
-    }
-    static get template() {
-        return `
-<style>
-  :host {
-    font-size: inherit;
-    font-family: inherit;
-    display: grid;
-    grid-template-columns: minmax(0, max-content) 1fr;
-    align-items: center;
-    gap: 1px;
-    position: relative;
-  }
-  
-  :host([multiple]) {
-    grid-template-columns: minmax(0, max-content) 1fr auto;
-  }
-
-  #dropdown {
-    inset: unset;
-    margin: 0;
-    box-sizing: border-box;
-    overflow-y: scroll;
-    flex-direction: column;
-    border-radius: inherit;
-  }
-  
-  [part="options"] {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding-block: .5rem;
-    border-radius: inherit;
-  }
-  
-  [part="options"] box-option {
-    border-radius: inherit;
-    content-visibility: auto;
-    border: 1px solid cornflowerblue;
-  }
-  
-  [part="options"] box-option[selected] {
-    background-color: Highlight;
-  }
-  
-  [part="search-input"] { 
-    display: none;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    border-radius: inherit;
-    border-style: inherit;
-    border-width: inherit;
-    padding: inherit;
-  }
-  
-  :host([searchable]) [part="search-input"],
-  :host([filterable]) [part="search-input"] {
-    display: flex;
-  }
-  
-  #placeholder {
-    overflow: hidden;
-  }
-
-  #tags:not(:empty) + #placeholder {
-    display: none;
-  }
-
-  #tags:not(:empty) {
-    grid-column: 1 / span 2;
-    width: 100%;
-  }
-
-  #tags {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-    gap: 2px;
-    border-radius: inherit;
-  }
-
-  [part="tag"] {
-    width: 100%;
-    justify-self: start;
-    font-size: inherit;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    border-radius: inherit;
-    padding-inline-start: 0.2lh;
-    padding-inline-end: .2rem;
-    background-color: transparent;
-    gap: 5px;
-  }
-  
-  :host([multiple]) [part="tag"] {
-    background-color: Highlight;
-    width: fit-content;
-    max-width: 100%;
-  }
-
-  [part="tag-label"] {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    user-select: none;
-    font-size: 95%;
-    flex-grow: 1;
-  }
-  
-  :host([multiple]) [part="tag-label"] {
-    flex-grow: unset;
-  }
-  
-  [part="tag-clear-button"], [part="clear-all-button"] {
-    border-radius: 100%;
-    border: none;
-    aspect-ratio: 1;
-    line-height: 0;
-    padding: 0!important;
-    user-select: none;
-    background-color: transparent;
-  }
-  
-  [part="tag-clear-button"] {
-    inline-size: 1em;
-    block-size: 1em;
-    font-size: 80%;
-    display: none;
-  }
-
-  :host([multiple]) [part="tag-clear-button"],
-  :host([clearable]) [part="tag-clear-button"] {
-    display: block;
-  }
-
-  [part="clear-all-button"] {
-    font-size: inherit;
-    inline-size: 1.2em;
-    block-size: 1.2em;
-    display: none;
-  }
-  
-  :host([multiple]) [part="clear-all-button"] {
-    display: block;
-  }
-
-  [part="clear-all-button"]:hover, 
-  [part="tag-clear-button"]:hover {
-    color: ActiveText;
-  }
-
-  [part="clear-all-button"]:hover {
-    background-color: ButtonFace;
-  }
-  
-  :host:has(#tags:empty) [part="clear-all-button"] {
-    /*display: none;*/
-  }
-
-</style>
-
-<div id="tags"></div>
-<div id="placeholder" ></div>
-<button part="clear-all-button">✕</button>
-<div id="dropdown" popover="manual">
-  <input name="search-input" part="search-input" />
-  <div part="options"></div>
-</div>
-<template id='tag-template'>
-  <box-tag>
-    <span part="tag-label"></span>
-    <button part="tag-clear-button">✕</button>
-  </box-tag>
-</template>
-    `;
-    }
-}
-exports.ComboboxMarkup = ComboboxMarkup;

package/dist/cjs/HTML.combobox.element.js

@@ -1,317 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HTMLComboboxElement = void 0;
-const Combobox_markup_js_1 = require("./Combobox.markup.js");
-const HTML_combobox_option_element_js_1 = require("./HTML.combobox.option.element.js");
-const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
-class HTMLComboboxElement extends HTMLElement {
-    static stringAttributes = new Set(['value', 'placeholder', 'query']);
-    static booleanAttributes = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
-    static observerOptions = { childList: true, attributes: false, subtree: false };
-    static styleSheet = [new CSSStyleSheet];
-    static formAssociated = true;
-    internals;
-    shadowRoot;
-    #observer;
-    #markup;
-    #values = new Set;
-    constructor() {
-        super();
-        this.internals = this.attachInternals();
-        this.internals.role = "combobox";
-        this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
-        this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.internals);
-        this.shadowRoot.innerHTML = Combobox_markup_js_1.ComboboxMarkup.template;
-        this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
-        this.#observer = new MutationObserver(this.#onOptionsChanges);
-    }
-    connectedCallback() {
-        this.#markup.connect();
-        this.#initialAttributesSynchronization();
-        this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
-        this.#observer.observe(this, HTMLComboboxElement.observerOptions);
-        this.#markup.clearAllButton.addEventListener('click', this.#onClickClearAllButton);
-        this.#markup.searchInput.addEventListener('input', this.#onInput);
-    }
-    disconnectedCallback() {
-        this.#observer.disconnect();
-        this.#markup.disconnect();
-    }
-    formResetCallback() {
-        this.#values = new Set;
-        this.selectedOptions.forEach(option => option.removeAttribute('selected'));
-        this.#markup.tagsContainer.replaceChildren();
-        this.#setValidityAndFormValue();
-        this.dispatchEvent(new Event('change'));
-    }
-    formDisabledCallback(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    get valueAsArray() {
-        return Array.from(this.#values);
-    }
-    get selectedOptions() {
-        return this.#markup.selectedOptions;
-    }
-    get validity() {
-        return this.internals.validity;
-    }
-    get willValidate() {
-        return this.internals.willValidate;
-    }
-    get value() {
-        return this.valueAsArray.join(',');
-    }
-    set value(value) {
-        if (this.value === value || typeof value !== 'string')
-            return;
-        const prevValue = new Set(this.#values);
-        this.#values = new Set;
-        const values = value.split(',').filter(Boolean);
-        Promise.resolve(values)
-            .then(values => {
-            if (values.length) {
-                if (!this.multiple) {
-                    if (this.#values.size === 0) {
-                        values.length = 1;
-                    }
-                    else {
-                        values.length = 0;
-                    }
-                }
-                for (const key of values) {
-                    const option = this.#markup.getOptionByValue(key);
-                    if (option)
-                        this.#selectOption(option);
-                }
-            }
-            for (const key of prevValue) {
-                if (this.#values.has(key))
-                    continue;
-                const option = this.#markup.getOptionByValue(key);
-                const tag = this.#markup.getTagByValue(key);
-                tag?.remove();
-                option?.toggleAttribute('selected', false);
-            }
-        });
-    }
-    get query() {
-        return this.#markup.searchInput.value;
-    }
-    set query(value) {
-        if (value === this.query)
-            return;
-        this.#markup.searchInput.value = value;
-        super.setAttribute('query', value);
-    }
-    get clearable() {
-        return this.hasAttribute('clearable');
-    }
-    set clearable(value) {
-        super.toggleAttribute('clearable', value);
-    }
-    get multiple() {
-        return this.hasAttribute('multiple');
-    }
-    set multiple(value) {
-        super.toggleAttribute('multiple', value);
-    }
-    get filterable() {
-        return this.hasAttribute('filterable');
-    }
-    set filterable(value) {
-        super.toggleAttribute('filterable', value);
-    }
-    get searchable() {
-        return this.hasAttribute('searchable');
-    }
-    set searchable(value) {
-        super.toggleAttribute('searchable', value);
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', value);
-    }
-    get required() {
-        return this.hasAttribute('required');
-    }
-    set required(value) {
-        this.internals.ariaRequired = String(value);
-        super.toggleAttribute('required', value);
-    }
-    get placeholder() {
-        return this.#markup.searchInput.placeholder;
-    }
-    set placeholder(value) {
-        this.#markup.placeholder.innerText = value;
-        this.#markup.searchInput.placeholder = value;
-        super.setAttribute('placeholder', value);
-    }
-    setAttribute(name, value) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
-            Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
-            return;
-        }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
-            Reflect.set(this, name, value);
-            return;
-        }
-        super.setAttribute(name, value);
-    }
-    removeAttribute(name) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
-            Reflect.set(this, name, false);
-            return;
-        }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
-            return;
-        }
-        super.removeAttribute(name);
-    }
-    reportValidity() {
-        this.internals.reportValidity();
-    }
-    checkValidity() {
-        this.internals.checkValidity();
-    }
-    setCustomValidity(message) {
-        if (message === '') {
-            this.internals.setValidity({});
-        }
-        else {
-            this.internals.setValidity({ customError: true }, message);
-        }
-    }
-    #onInput = (event) => {
-        if (this.filterable) {
-            if (event.target && event.target instanceof HTMLInputElement) {
-                this.#markup.sort(event.target.value);
-            }
-        }
-    };
-    #onOptionsChanges = (records) => {
-        records.forEach(record => {
-            record.addedNodes.forEach(node => {
-                if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
-                    node.addEventListener('click', this.#onSelectOption);
-                    if (node.selected) {
-                        if (this.multiple) {
-                            this.#selectOption(node);
-                        }
-                        else if (this.#values.size === 0) {
-                            this.#selectOption(node);
-                        }
-                    }
-                }
-                if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
-                    this.#markup.optionsContainer.append(node);
-                }
-            });
-        });
-        this.#setValidityAndFormValue();
-    };
-    #selectOption(option) {
-        if (this.#values.has(option.value))
-            return;
-        const value = option.value;
-        this.#values.add(value);
-        option.toggleAttribute('selected', true);
-        const control = this.#markup.createAndAppendTag(option);
-        control.addEventListener('click', this.#onClickTagClearButton);
-    }
-    #onSelectOption = (event) => {
-        let option;
-        if (event.target instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
-            option = event.target;
-        }
-        else {
-            option = event.composedPath()
-                .find(el => el instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement);
-        }
-        if (option) {
-            if (this.#values.has(option.value))
-                return;
-            if (!this.multiple) {
-                this.#values.forEach(value => {
-                    this.#markup.getTagByValue(value)?.remove();
-                    this.#markup.getOptionByValue(value)?.toggleAttribute('selected', false);
-                });
-                this.#values.clear();
-                this.#markup.tagsContainer.replaceChildren();
-            }
-            this.#selectOption(option);
-            this.#setValidityAndFormValue();
-            this.dispatchEvent(new Event('change'));
-        }
-    };
-    #onClickTagClearButton = (event) => {
-        if (event.target && event.target instanceof HTMLButtonElement) {
-            const value = event.target.value;
-            const option = this.#markup.getOptionByValue(value);
-            const tag = this.#markup.getTagByValue(value);
-            option.removeAttribute('selected');
-            this.#values.delete(event.target.value);
-            tag.remove();
-            this.#setValidityAndFormValue();
-            this.dispatchEvent(new Event('change'));
-        }
-    };
-    #onClickClearAllButton = () => {
-        this.formResetCallback();
-    };
-    #setValidityAndFormValue() {
-        this.internals.setFormValue(this.value);
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true });
-        }
-        else {
-            this.internals.setValidity({});
-        }
-    }
-    #initialAttributesSynchronization() {
-        for (const key of HTMLComboboxElement.booleanAttributes) {
-            const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
-            Reflect.set(this, key, value);
-        }
-        for (const key of HTMLComboboxElement.stringAttributes) {
-            if (this.hasAttribute(key)) {
-                Reflect.set(this, key, this.getAttribute(key));
-            }
-        }
-    }
-    static staticLoadCssByUrls(urls) {
-    }
-    static loadCssFromDocumentStyleSheets() {
-        if (document.readyState === 'complete') {
-            HTMLComboboxElement.#loadDocumentStyleSheets();
-        }
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', HTMLComboboxElement.#loadDocumentStyleSheets);
-        }
-        if (document.readyState === 'interactive') {
-            queueMicrotask(HTMLComboboxElement.#loadDocumentStyleSheets);
-        }
-    }
-    static #loadDocumentStyleSheets() {
-        const [innerSheet] = HTMLComboboxElement.styleSheet;
-        for (const outerSheet of document.styleSheets) {
-            for (const rule of outerSheet.cssRules) {
-                innerSheet.insertRule(rule.cssText, innerSheet.cssRules.length);
-            }
-        }
-    }
-}
-exports.HTMLComboboxElement = HTMLComboboxElement;
-document.addEventListener('keypress', (event) => {
-    if (document.activeElement instanceof HTMLComboboxElement) {
-        if (document.activeElement.shadowRoot.activeElement instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
-            document.activeElement.shadowRoot.activeElement.click();
-        }
-    }
-});
-if (!window.customElements.get('combo-box')) {
-    window.customElements.define('combo-box', HTMLComboboxElement);
-}