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

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

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

@@ -1,22 +0,0 @@
-"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/esm/Boolean.attribute.value.normalizer.js

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

@@ -1,311 +0,0 @@
-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>
-    `;
-    }
-}