tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/base/ty-component.js

@@ -1,201 +1,201 @@
 import { PropertyManager } from '../utils/property-manager.js';
 export class TyComponent extends HTMLElement {
-    constructor() {
-        super();
-        this._connected = false;
-        this._rendered = false;
-        this._handlingActivationClick = false;
-        this._resetDefaults = null;
-        const ctor = this.constructor;
-        this.props = new PropertyManager(ctor.properties);
-        this._internals = this.attachInternals();
-        if (!this.shadowRoot) {
-            this.attachShadow({ mode: 'open' });
-        }
-    }
-    static get observedAttributes() {
-        const attrs = [];
-        for (const [name, config] of Object.entries(this.properties)) {
-            attrs.push(name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
-            if (config.aliases) {
-                for (const alias of Object.keys(config.aliases)) {
-                    attrs.push(alias);
-                }
-            }
-        }
-        return attrs;
-    }
-    setProperty(name, value) {
-        const change = this.props.updateProperty(name, value, 'property');
-        if (change) {
-            this._syncPropertyToAttribute(change);
-            this._handlePropertyChanges([change]);
-        }
-    }
-    getProperty(name) {
-        return this.props.get(name);
-    }
-    _syncPropertyToAttribute(change) {
-        const { name, newValue } = change;
-        const config = this.props.getConfig(name);
-        if (!config)
-            return;
-        const attrName = this._toKebabCase(name);
-        if (config.type === 'boolean') {
-            if (newValue) {
-                this.setAttribute(attrName, '');
-            }
-            else {
-                this.removeAttribute(attrName);
-            }
-        }
-        else if (newValue === null || newValue === undefined) {
-            this.removeAttribute(attrName);
-        }
-        else if (typeof newValue === 'object') {
-            this.setAttribute(attrName, JSON.stringify(newValue));
-        }
-        else {
-            this.setAttribute(attrName, String(newValue));
-        }
-    }
-    _toKebabCase(str) {
-        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-    }
-    _toCamelCase(str) {
-        return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        let change = this.props.handleAlias(name, newValue);
-        if (!change) {
-            const camelName = this._toCamelCase(name);
-            const propName = this.props.hasConfig(name) ? name : camelName;
-            change = this.props.updateProperty(propName, newValue, 'attribute');
-        }
-        if (change) {
-            this._handlePropertyChanges([change]);
-        }
-    }
-    connectedCallback() {
-        this._connected = true;
-        if (!this._resetDefaults) {
-            this._resetDefaults = new Map();
-            const ctor = this.constructor;
-            for (const [name, config] of Object.entries(ctor.properties)) {
-                if (!config.formValue)
-                    continue;
-                const attr = this.getAttribute(this._toKebabCase(name));
-                this._resetDefaults.set(name, attr ?? config.default ?? null);
-            }
-        }
-        const preSetProps = this._capturePreSetProperties();
-        if (preSetProps.length > 0) {
-            this._handlePropertyChanges(preSetProps);
-        }
-        this.onConnect();
-        if (!this._rendered) {
-            this.render();
-            this._rendered = true;
-        }
-    }
-    disconnectedCallback() {
-        this._connected = false;
-        this.onDisconnect();
-    }
-    _capturePreSetProperties() {
-        const changes = [];
-        const ctor = this.constructor;
-        for (const propName of Object.keys(ctor.properties)) {
-            const descriptor = Object.getOwnPropertyDescriptor(this, propName);
-            if (descriptor && descriptor.value !== undefined) {
-                const change = this.props.updateProperty(propName, descriptor.value, 'property');
-                if (change) {
-                    changes.push(change);
-                }
-            }
-        }
-        return changes;
-    }
-    _handlePropertyChanges(changes) {
-        if (changes.length === 0)
-            return;
-        this.onPropertiesChanged(changes);
-        const formValueChanged = changes.some(c => this.props.isFormValue(c.name));
-        if (formValueChanged) {
-            this.updateFormValue();
-        }
-        const visualChanged = changes.some(c => this.props.isVisual(c.name));
-        if (visualChanged && this._connected) {
-            this.render();
-        }
-        this._emitChangeEvents(changes);
-    }
-    _emitChangeEvents(changes) {
-        for (const change of changes) {
-            if (this.props.shouldEmitChange(change.name)) {
-                this.dispatchEvent(new CustomEvent('prop:change', {
-                    detail: {
-                        property: change.name,
-                        oldValue: change.oldValue,
-                        newValue: change.newValue
-                    },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-        }
-    }
-    updateFormValue() {
-        const formValue = this.getFormValue();
-        this._internals.setFormValue(formValue);
-    }
-    getFormValue() {
-        return this.props.get('value') ?? null;
-    }
-    onPropertiesChanged(changes) {
-    }
-    onConnect() {
-    }
-    onDisconnect() {
-    }
-    get form() {
-        return this._internals.form;
-    }
-    applyLabelName(roleEl) {
-        let text = Array.from(this._internals.labels ?? [])
-            .map((l) => l.textContent?.trim())
-            .filter(Boolean)
-            .join(' ');
-        if (!text) {
-            const lbl = this.closest('label');
-            if (lbl) {
-                const clone = lbl.cloneNode(true);
-                clone.querySelectorAll(this.tagName.toLowerCase()).forEach((n) => n.remove());
-                text = clone.textContent?.trim() ?? '';
-            }
-        }
-        if (text)
-            roleEl.setAttribute('aria-label', text);
-        else
-            roleEl.removeAttribute('aria-label');
-    }
-    isDuplicateActivationClick() {
-        if (this._handlingActivationClick)
-            return true;
-        this._handlingActivationClick = true;
-        queueMicrotask(() => { this._handlingActivationClick = false; });
-        return false;
-    }
-    formResetCallback() {
-        for (const [name, def] of this._resetDefaults ?? []) {
-            this.setProperty(name, def);
-        }
-        this.onFormReset();
-    }
-    onFormReset() {
-    }
+constructor() {
+super();
+this._connected = false;
+this._rendered = false;
+this._handlingActivationClick = false;
+this._resetDefaults = null;
+const ctor = this.constructor;
+this.props = new PropertyManager(ctor.properties);
+this._internals = this.attachInternals();
+if (!this.shadowRoot) {
+this.attachShadow({ mode: 'open' });
+}
+}
+static get observedAttributes() {
+const attrs = [];
+for (const [name, config] of Object.entries(this.properties)) {
+attrs.push(name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
+if (config.aliases) {
+for (const alias of Object.keys(config.aliases)) {
+attrs.push(alias);
+}
+}
+}
+return attrs;
+}
+setProperty(name, value) {
+const change = this.props.updateProperty(name, value, 'property');
+if (change) {
+this._syncPropertyToAttribute(change);
+this._handlePropertyChanges([change]);
+}
+}
+getProperty(name) {
+return this.props.get(name);
+}
+_syncPropertyToAttribute(change) {
+const { name, newValue } = change;
+const config = this.props.getConfig(name);
+if (!config)
+return;
+const attrName = this._toKebabCase(name);
+if (config.type === 'boolean') {
+if (newValue) {
+this.setAttribute(attrName, '');
+}
+else {
+this.removeAttribute(attrName);
+}
+}
+else if (newValue === null || newValue === undefined) {
+this.removeAttribute(attrName);
+}
+else if (typeof newValue === 'object') {
+this.setAttribute(attrName, JSON.stringify(newValue));
+}
+else {
+this.setAttribute(attrName, String(newValue));
+}
+}
+_toKebabCase(str) {
+return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+_toCamelCase(str) {
+return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (oldValue === newValue)
+return;
+let change = this.props.handleAlias(name, newValue);
+if (!change) {
+const camelName = this._toCamelCase(name);
+const propName = this.props.hasConfig(name) ? name : camelName;
+change = this.props.updateProperty(propName, newValue, 'attribute');
+}
+if (change) {
+this._handlePropertyChanges([change]);
+}
+}
+connectedCallback() {
+this._connected = true;
+if (!this._resetDefaults) {
+this._resetDefaults = new Map();
+const ctor = this.constructor;
+for (const [name, config] of Object.entries(ctor.properties)) {
+if (!config.formValue)
+continue;
+const attr = this.getAttribute(this._toKebabCase(name));
+this._resetDefaults.set(name, attr ?? config.default ?? null);
+}
+}
+const preSetProps = this._capturePreSetProperties();
+if (preSetProps.length > 0) {
+this._handlePropertyChanges(preSetProps);
+}
+this.onConnect();
+if (!this._rendered) {
+this.render();
+this._rendered = true;
+}
+}
+disconnectedCallback() {
+this._connected = false;
+this.onDisconnect();
+}
+_capturePreSetProperties() {
+const changes = [];
+const ctor = this.constructor;
+for (const propName of Object.keys(ctor.properties)) {
+const descriptor = Object.getOwnPropertyDescriptor(this, propName);
+if (descriptor && descriptor.value !== undefined) {
+const change = this.props.updateProperty(propName, descriptor.value, 'property');
+if (change) {
+changes.push(change);
+}
+}
+}
+return changes;
+}
+_handlePropertyChanges(changes) {
+if (changes.length === 0)
+return;
+this.onPropertiesChanged(changes);
+const formValueChanged = changes.some(c => this.props.isFormValue(c.name));
+if (formValueChanged) {
+this.updateFormValue();
+}
+const visualChanged = changes.some(c => this.props.isVisual(c.name));
+if (visualChanged && this._connected) {
+this.render();
+}
+this._emitChangeEvents(changes);
+}
+_emitChangeEvents(changes) {
+for (const change of changes) {
+if (this.props.shouldEmitChange(change.name)) {
+this.dispatchEvent(new CustomEvent('prop:change', {
+detail: {
+property: change.name,
+oldValue: change.oldValue,
+newValue: change.newValue
+},
+bubbles: true,
+composed: true
+}));
+}
+}
+}
+updateFormValue() {
+const formValue = this.getFormValue();
+this._internals.setFormValue(formValue);
+}
+getFormValue() {
+return this.props.get('value') ?? null;
+}
+onPropertiesChanged(changes) {
+}
+onConnect() {
+}
+onDisconnect() {
+}
+get form() {
+return this._internals.form;
+}
+applyLabelName(roleEl) {
+let text = Array.from(this._internals.labels ?? [])
+.map((l) => l.textContent?.trim())
+.filter(Boolean)
+.join(' ');
+if (!text) {
+const lbl = this.closest('label');
+if (lbl) {
+const clone = lbl.cloneNode(true);
+clone.querySelectorAll(this.tagName.toLowerCase()).forEach((n) => n.remove());
+text = clone.textContent?.trim() ?? '';
+}
+}
+if (text)
+roleEl.setAttribute('aria-label', text);
+else
+roleEl.removeAttribute('aria-label');
+}
+isDuplicateActivationClick() {
+if (this._handlingActivationClick)
+return true;
+this._handlingActivationClick = true;
+queueMicrotask(() => { this._handlingActivationClick = false; });
+return false;
+}
+formResetCallback() {
+for (const [name, def] of this._resetDefaults ?? []) {
+this.setProperty(name, def);
+}
+this.onFormReset();
+}
+onFormReset() {
+}
 }
 TyComponent.formAssociated = true;
 TyComponent.properties = {};

package/lib/components/button.d.ts

@@ -33,7 +33,7 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };