tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/icon.js

@@ -4,153 +4,153 @@ import { iconStyles } from '../styles/icon.js';
 import * as IconRegistry from '../utils/icon-registry.js';
 let _iconIdCounter = 0;
 const NOT_FOUND_ICON = `<svg xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-      fill="currentColor"
-      opacity="0.2">
-   <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
+viewBox="0 0 512 512"
+fill="currentColor"
+opacity="0.2">
+<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
 </svg>`;
 export class TyIcon extends TyComponent {
-    constructor() {
-        super();
-        this._watchId = null;
-        this._currentSvg = '';
-        this._slot = null;
-        ensureStyles(this.shadowRoot, { css: iconStyles, id: 'ty-icon' });
-        this._slot = document.createElement('slot');
-        this._slot.innerHTML = NOT_FOUND_ICON;
-        this._currentSvg = NOT_FOUND_ICON;
-        this.shadowRoot.appendChild(this._slot);
-    }
-    onConnect() {
-        this._watchId = `ty-icon-${++_iconIdCounter}`;
-        if (this.name) {
-            IconRegistry.addWatcher(this._watchId, this.name, (changedIcons) => {
-                if (this.name && changedIcons.has(this.name)) {
-                    this.render();
-                }
-            });
-        }
-        this.updateClasses();
-    }
-    onDisconnect() {
-        if (this._watchId) {
-            IconRegistry.removeWatcher(this._watchId);
-            this._watchId = null;
-        }
-    }
-    onPropertiesChanged(changes) {
-        for (const change of changes) {
-            if (change.name === 'name') {
-                if (this._watchId) {
-                    IconRegistry.removeWatcher(this._watchId);
-                }
-                const newName = change.newValue || '';
-                if (newName && this.isConnected) {
-                    this._watchId = `ty-icon-${++_iconIdCounter}`;
-                    IconRegistry.addWatcher(this._watchId, newName, (changedIcons) => {
-                        if (this.name && changedIcons.has(this.name)) {
-                            this.render();
-                        }
-                    });
-                }
-            }
-        }
-        this.updateClasses();
-    }
-    get name() {
-        return this.getProperty('name');
-    }
-    set name(value) {
-        this.setProperty('name', value);
-    }
-    get size() {
-        const val = this.getProperty('size');
-        return val || undefined;
-    }
-    set size(value) {
-        this.setProperty('size', value || '');
-    }
-    get spin() {
-        return this.getProperty('spin');
-    }
-    set spin(value) {
-        this.setProperty('spin', value);
-    }
-    get pulse() {
-        return this.getProperty('pulse');
-    }
-    set pulse(value) {
-        this.setProperty('pulse', value);
-    }
-    get tempo() {
-        const val = this.getProperty('tempo');
-        return val || undefined;
-    }
-    set tempo(value) {
-        this.setProperty('tempo', value || '');
-    }
-    buildClasses() {
-        const classes = [];
-        const size = this.getProperty('size');
-        if (size) {
-            classes.push(`icon-${size}`);
-        }
-        if (this.getProperty('spin')) {
-            classes.push('icon-spin');
-        }
-        if (this.getProperty('pulse')) {
-            classes.push('icon-pulse');
-        }
-        const tempo = this.getProperty('tempo');
-        if (tempo && (this.getProperty('spin') || this.getProperty('pulse'))) {
-            classes.push(`icon-tempo-${tempo}`);
-        }
-        const currentClasses = this.className.split(/\s+/).filter(cls => {
-            return cls &&
-                !cls.startsWith('icon-') &&
-                cls !== 'icon-spin' &&
-                cls !== 'icon-pulse';
-        });
-        return [...classes, ...currentClasses];
-    }
-    updateClasses() {
-        const newClasses = this.buildClasses().join(' ');
-        if (this.className !== newClasses) {
-            this.className = newClasses;
-        }
-    }
-    render() {
-        const name = this.getProperty('name');
-        if (!name) {
-            this.renderSvg(NOT_FOUND_ICON);
-            return;
-        }
-        const memorySvg = IconRegistry.getIcon(name);
-        if (memorySvg) {
-            this.renderSvg(memorySvg);
-            return;
-        }
-        this.renderSvg(NOT_FOUND_ICON);
-    }
-    renderSvg(svg) {
-        if (this._currentSvg === svg) {
-            return;
-        }
-        if (this._slot) {
-            this._slot.innerHTML = svg;
-            this._currentSvg = svg;
-        }
-    }
+constructor() {
+super();
+this._watchId = null;
+this._currentSvg = '';
+this._slot = null;
+ensureStyles(this.shadowRoot, { css: iconStyles, id: 'ty-icon' });
+this._slot = document.createElement('slot');
+this._slot.innerHTML = NOT_FOUND_ICON;
+this._currentSvg = NOT_FOUND_ICON;
+this.shadowRoot.appendChild(this._slot);
+}
+onConnect() {
+this._watchId = `ty-icon-${++_iconIdCounter}`;
+if (this.name) {
+IconRegistry.addWatcher(this._watchId, this.name, (changedIcons) => {
+if (this.name && changedIcons.has(this.name)) {
+this.render();
+}
+});
+}
+this.updateClasses();
+}
+onDisconnect() {
+if (this._watchId) {
+IconRegistry.removeWatcher(this._watchId);
+this._watchId = null;
+}
+}
+onPropertiesChanged(changes) {
+for (const change of changes) {
+if (change.name === 'name') {
+if (this._watchId) {
+IconRegistry.removeWatcher(this._watchId);
+}
+const newName = change.newValue || '';
+if (newName && this.isConnected) {
+this._watchId = `ty-icon-${++_iconIdCounter}`;
+IconRegistry.addWatcher(this._watchId, newName, (changedIcons) => {
+if (this.name && changedIcons.has(this.name)) {
+this.render();
+}
+});
+}
+}
+}
+this.updateClasses();
+}
+get name() {
+return this.getProperty('name');
+}
+set name(value) {
+this.setProperty('name', value);
+}
+get size() {
+const val = this.getProperty('size');
+return val || undefined;
+}
+set size(value) {
+this.setProperty('size', value || '');
+}
+get spin() {
+return this.getProperty('spin');
+}
+set spin(value) {
+this.setProperty('spin', value);
+}
+get pulse() {
+return this.getProperty('pulse');
+}
+set pulse(value) {
+this.setProperty('pulse', value);
+}
+get tempo() {
+const val = this.getProperty('tempo');
+return val || undefined;
+}
+set tempo(value) {
+this.setProperty('tempo', value || '');
+}
+buildClasses() {
+const classes = [];
+const size = this.getProperty('size');
+if (size) {
+classes.push(`icon-${size}`);
+}
+if (this.getProperty('spin')) {
+classes.push('icon-spin');
+}
+if (this.getProperty('pulse')) {
+classes.push('icon-pulse');
+}
+const tempo = this.getProperty('tempo');
+if (tempo && (this.getProperty('spin') || this.getProperty('pulse'))) {
+classes.push(`icon-tempo-${tempo}`);
+}
+const currentClasses = this.className.split(/\s+/).filter(cls => {
+return cls &&
+!cls.startsWith('icon-') &&
+cls !== 'icon-spin' &&
+cls !== 'icon-pulse';
+});
+return [...classes, ...currentClasses];
+}
+updateClasses() {
+const newClasses = this.buildClasses().join(' ');
+if (this.className !== newClasses) {
+this.className = newClasses;
+}
+}
+render() {
+const name = this.getProperty('name');
+if (!name) {
+this.renderSvg(NOT_FOUND_ICON);
+return;
+}
+const memorySvg = IconRegistry.getIcon(name);
+if (memorySvg) {
+this.renderSvg(memorySvg);
+return;
+}
+this.renderSvg(NOT_FOUND_ICON);
+}
+renderSvg(svg) {
+if (this._currentSvg === svg) {
+return;
+}
+if (this._slot) {
+this._slot.innerHTML = svg;
+this._currentSvg = svg;
+}
+}
 }
 TyIcon.formAssociated = false;
 TyIcon.properties = {
-    name: { type: 'string', visual: true, default: '' },
-    size: { type: 'string', visual: true, default: '' },
-    spin: { type: 'boolean', visual: true, default: false },
-    pulse: { type: 'boolean', visual: true, default: false },
-    tempo: { type: 'string', visual: true, default: '' },
+name: { type: 'string', visual: true, default: '' },
+size: { type: 'string', visual: true, default: '' },
+spin: { type: 'boolean', visual: true, default: false },
+pulse: { type: 'boolean', visual: true, default: false },
+tempo: { type: 'string', visual: true, default: '' },
 };
 if (!customElements.get('ty-icon')) {
-    customElements.define('ty-icon', TyIcon);
+customElements.define('ty-icon', TyIcon);
 }
 export { IconRegistry };

package/lib/components/input.d.ts

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