kr-elements 0.0.1-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Roman Konstantin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,11 @@
+"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

@@ -0,0 +1,315 @@
+"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

@@ -0,0 +1,317 @@
+"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);
+}