kr-elements 0.0.1-alpha.1

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLComboboxOptionElement = void 0;
+const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
+class HTMLComboboxOptionElement extends HTMLElement {
+    static booleanAttributes = new Set(['selected']);
+    static stringAttributes = new Set(['value', 'label']);
+    connectedCallback() {
+        this.#initialAttributesSynchronization();
+        super.setAttribute('part', 'box-option');
+        super.setAttribute('tabindex', "0");
+        super.setAttribute('role', "option");
+        if (this.children.length === 0) {
+            this.textContent = this.label;
+        }
+    }
+    get value() {
+        return this.getAttribute('value');
+    }
+    set value(value) {
+        value = this.#getOrExtractValue(value, 'value');
+        super.setAttribute('value', value);
+    }
+    get label() {
+        return this.getAttribute('value');
+    }
+    set label(value) {
+        value = this.#getOrExtractValue(value, 'label');
+        super.setAttribute('label', value);
+    }
+    get selected() {
+        return this.hasAttribute('selected');
+    }
+    set selected(value) {
+        super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    #initialAttributesSynchronization() {
+        for (const key of HTMLComboboxOptionElement.booleanAttributes) {
+            const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
+            Reflect.set(this, key, value);
+        }
+        for (const key of HTMLComboboxOptionElement.stringAttributes) {
+            Reflect.set(this, key, this.getAttribute(key));
+        }
+    }
+    get #optionHasOnlyTextNode() {
+        return this.children.length === 0 && this.textContent.length > 0;
+    }
+    #getOrExtractValue(value, name) {
+        if (typeof value === 'string')
+            return value;
+        if (value == null) {
+            const opposite = name === 'label' ? 'value' : 'label';
+            const oppositeValue = this.getAttribute(opposite);
+            if (oppositeValue) {
+                value = oppositeValue;
+            }
+            else {
+                if (this.#optionHasOnlyTextNode) {
+                    value = this.textContent;
+                }
+                else {
+                    throw new TypeError('No value, or label or textContent found');
+                }
+            }
+            return value;
+        }
+        throw new TypeError('Invalid value');
+    }
+    setAttribute(name, value) {
+        if (HTMLComboboxOptionElement.booleanAttributes.has(name)) {
+            Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+            return;
+        }
+        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+            Reflect.set(this, name, value);
+            return;
+        }
+        super.setAttribute(name, value);
+    }
+    removeAttribute(name) {
+        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+            Reflect.set(this, name, false);
+            return;
+        }
+        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+            return;
+        }
+        super.removeAttribute(name);
+    }
+}
+exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
+if (!window.customElements.get('box-option')) {
+    window.customElements.define('box-option', HTMLComboboxOptionElement);
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLComboboxTagElement = void 0;
+class HTMLComboboxTagElement extends HTMLElement {
+    connectedCallback() {
+        this.part.add('box-tag');
+        if (this.parentElement) {
+            if (this.parentElement.hasAttribute('multiple')) {
+                if (!this.querySelector('[part="tag-clear-button"]')) {
+                    throw new Error(`A <button> with part="tag-clear-button" is required for <combo-box> with multiple attribute`);
+                }
+            }
+            if (!this.querySelector('[part="tag-label"]')) {
+                throw new Error(`Invalid <box-tag-template>, an element with part="tag-label" is required as a descendant`);
+            }
+        }
+    }
+}
+exports.HTMLComboboxTagElement = HTMLComboboxTagElement;
+if (!window.customElements.get('box-tag')) {
+    window.customElements.define('box-tag', HTMLComboboxTagElement);
+}

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HTML.combobox.element.js"), exports);

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

@@ -0,0 +1,7 @@
+export function toBoolean(value) {
+    if (value == null || value === 'false' || value === false)
+        value = false;
+    if (value === true || value === 'true' || value === '')
+        value = true;
+    return Boolean(value);
+}

package/dist/esm/Combobox.markup.js

@@ -0,0 +1,311 @@
+import { HTMLComboboxTagElement } from './HTML.combobox.tag.element.js';
+export 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 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>
+    `;
+    }
+}