tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/option.js

@@ -1,175 +1,175 @@
 import { ensureStyles } from '../utils/styles.js';
 import { optionStyles } from '../styles/option.js';
 const CHECK_SVG = `
-  <svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <path d="M20 6 9 17l-5-5" />
-  </svg>
+<svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+<path d="M20 6 9 17l-5-5" />
+</svg>
 `;
 export class TyOption extends HTMLElement {
-    constructor() {
-        super();
-        this._value = undefined;
-        this._selected = false;
-        this._disabled = false;
-        this._highlighted = false;
-        this._hidden = false;
-        const shadow = this.attachShadow({ mode: 'open' });
-        ensureStyles(shadow, { css: optionStyles, id: 'ty-option' });
-        this.render();
-    }
-    static get observedAttributes() {
-        return ['value', 'disabled', 'selected', 'highlighted', 'hidden'];
-    }
-    connectedCallback() {
-        const instanceValue = Object.getOwnPropertyDescriptor(this, 'value');
-        if (instanceValue && instanceValue.value !== undefined) {
-            this._value = instanceValue.value;
-            delete this.value;
-        }
-        this.render();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        switch (name) {
-            case 'value':
-                this._value = newValue || undefined;
-                break;
-            case 'selected':
-                this._selected = newValue !== null;
-                break;
-            case 'disabled':
-                this._disabled = newValue !== null;
-                break;
-            case 'highlighted':
-                this._highlighted = newValue !== null;
-                break;
-            case 'hidden':
-                this._hidden = newValue !== null;
-                break;
-        }
-        this.render();
-    }
-    getOptionValue() {
-        if (this._value !== undefined) {
-            return this._value;
-        }
-        const attrValue = this.getAttribute('value');
-        if (attrValue !== null) {
-            return attrValue;
-        }
-        return this.textContent?.trim() || '';
-    }
-    get value() {
-        return this.getOptionValue();
-    }
-    set value(val) {
-        if (this._value !== val) {
-            this._value = val;
-            if (val !== undefined) {
-                this.setAttribute('value', val);
-            }
-            else {
-                this.removeAttribute('value');
-            }
-            this.render();
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        if (this._selected !== value) {
-            this._selected = value;
-            if (value) {
-                this.setAttribute('selected', '');
-            }
-            else {
-                this.removeAttribute('selected');
-            }
-            this.render();
-        }
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            if (value) {
-                this.setAttribute('disabled', '');
-            }
-            else {
-                this.removeAttribute('disabled');
-            }
-            this.render();
-        }
-    }
-    get highlighted() {
-        return this._highlighted;
-    }
-    set highlighted(value) {
-        if (this._highlighted !== value) {
-            this._highlighted = value;
-            if (value) {
-                this.setAttribute('highlighted', '');
-            }
-            else {
-                this.removeAttribute('highlighted');
-            }
-            this.render();
-        }
-    }
-    get hidden() {
-        return this._hidden;
-    }
-    set hidden(value) {
-        if (this._hidden !== value) {
-            this._hidden = value;
-            if (value) {
-                this.setAttribute('hidden', '');
-            }
-            else {
-                this.removeAttribute('hidden');
-            }
-            this.render();
-        }
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        if (!shadow.querySelector('.option-content')) {
-            shadow.innerHTML = `<div class="option-content"><slot></slot>${CHECK_SVG}</div>`;
-        }
-        const content = shadow.querySelector('.option-content');
-        if (content) {
-            if (this._disabled) {
-                content.setAttribute('disabled', '');
-            }
-            else {
-                content.removeAttribute('disabled');
-            }
-            if (this._selected) {
-                content.setAttribute('selected', '');
-            }
-            else {
-                content.removeAttribute('selected');
-            }
-            if (this._highlighted) {
-                content.setAttribute('highlighted', '');
-            }
-            else {
-                content.removeAttribute('highlighted');
-            }
-            if (this._hidden) {
-                content.setAttribute('hidden', '');
-            }
-            else {
-                content.removeAttribute('hidden');
-            }
-        }
-    }
+constructor() {
+super();
+this._value = undefined;
+this._selected = false;
+this._disabled = false;
+this._highlighted = false;
+this._hidden = false;
+const shadow = this.attachShadow({ mode: 'open' });
+ensureStyles(shadow, { css: optionStyles, id: 'ty-option' });
+this.render();
+}
+static get observedAttributes() {
+return ['value', 'disabled', 'selected', 'highlighted', 'hidden'];
+}
+connectedCallback() {
+const instanceValue = Object.getOwnPropertyDescriptor(this, 'value');
+if (instanceValue && instanceValue.value !== undefined) {
+this._value = instanceValue.value;
+delete this.value;
+}
+this.render();
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (oldValue === newValue)
+return;
+switch (name) {
+case 'value':
+this._value = newValue || undefined;
+break;
+case 'selected':
+this._selected = newValue !== null;
+break;
+case 'disabled':
+this._disabled = newValue !== null;
+break;
+case 'highlighted':
+this._highlighted = newValue !== null;
+break;
+case 'hidden':
+this._hidden = newValue !== null;
+break;
+}
+this.render();
+}
+getOptionValue() {
+if (this._value !== undefined) {
+return this._value;
+}
+const attrValue = this.getAttribute('value');
+if (attrValue !== null) {
+return attrValue;
+}
+return this.textContent?.trim() || '';
+}
+get value() {
+return this.getOptionValue();
+}
+set value(val) {
+if (this._value !== val) {
+this._value = val;
+if (val !== undefined) {
+this.setAttribute('value', val);
+}
+else {
+this.removeAttribute('value');
+}
+this.render();
+}
+}
+get selected() {
+return this._selected;
+}
+set selected(value) {
+if (this._selected !== value) {
+this._selected = value;
+if (value) {
+this.setAttribute('selected', '');
+}
+else {
+this.removeAttribute('selected');
+}
+this.render();
+}
+}
+get disabled() {
+return this._disabled;
+}
+set disabled(value) {
+if (this._disabled !== value) {
+this._disabled = value;
+if (value) {
+this.setAttribute('disabled', '');
+}
+else {
+this.removeAttribute('disabled');
+}
+this.render();
+}
+}
+get highlighted() {
+return this._highlighted;
+}
+set highlighted(value) {
+if (this._highlighted !== value) {
+this._highlighted = value;
+if (value) {
+this.setAttribute('highlighted', '');
+}
+else {
+this.removeAttribute('highlighted');
+}
+this.render();
+}
+}
+get hidden() {
+return this._hidden;
+}
+set hidden(value) {
+if (this._hidden !== value) {
+this._hidden = value;
+if (value) {
+this.setAttribute('hidden', '');
+}
+else {
+this.removeAttribute('hidden');
+}
+this.render();
+}
+}
+render() {
+const shadow = this.shadowRoot;
+if (!shadow.querySelector('.option-content')) {
+shadow.innerHTML = `<div class="option-content"><slot></slot>${CHECK_SVG}</div>`;
+}
+const content = shadow.querySelector('.option-content');
+if (content) {
+if (this._disabled) {
+content.setAttribute('disabled', '');
+}
+else {
+content.removeAttribute('disabled');
+}
+if (this._selected) {
+content.setAttribute('selected', '');
+}
+else {
+content.removeAttribute('selected');
+}
+if (this._highlighted) {
+content.setAttribute('highlighted', '');
+}
+else {
+content.removeAttribute('highlighted');
+}
+if (this._hidden) {
+content.setAttribute('hidden', '');
+}
+else {
+content.removeAttribute('hidden');
+}
+}
+}
 }
 if (!customElements.get('ty-option')) {
-    customElements.define('ty-option', TyOption);
+customElements.define('ty-option', TyOption);
 }