custom-elements-ts 0.0.16 → 0.1.0

package/esm2015/custom-elements-ts.js

@@ -1,260 +0,0 @@
-const toKebabCase = str => {
-    return str
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .replace(/[\s_]+/g, '-')
-        .toLowerCase();
-};
-const toCamelCase = str => {
-    return str
-        .toLowerCase()
-        .replace(/(\-\w)/g, (m) => m[1].toUpperCase());
-};
-const toDotCase = (str) => {
-    return str.replace(/(?!^)([A-Z])/g, ' $1')
-        .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
-        .toLowerCase();
-};
-const tryParseInt = (value) => {
-    return (parseInt(value) == value && parseFloat(value) !== NaN) ? parseInt(value) : value;
-};
-
-const Listen = (eventName, selector) => {
-    return (target, methodName) => {
-        if (!target.constructor.listeners) {
-            target.constructor.listeners = [];
-        }
-        target.constructor.listeners.push({ selector: selector, eventName: eventName, handler: target[methodName] });
-    };
-};
-const addEventListeners = (target) => {
-    if (target.constructor.listeners) {
-        const targetRoot = target.shadowRoot || target;
-        for (const listener of target.constructor.listeners) {
-            const eventTarget = (listener.selector)
-                ? targetRoot.querySelector(listener.selector)
-                    ? targetRoot.querySelector(listener.selector) : null
-                : target;
-            if (eventTarget) {
-                eventTarget.addEventListener(listener.eventName, (e) => {
-                    listener.handler.call(target, e);
-                });
-            }
-        }
-    }
-};
-const Dispatch = (eventName) => {
-    return (target, propertyName) => {
-        function get() {
-            const self = this;
-            return {
-                emit(options) {
-                    const evtName = (eventName) ? eventName : toDotCase(propertyName);
-                    self.dispatchEvent(new CustomEvent(evtName, options));
-                }
-            };
-        }
-        Object.defineProperty(target, propertyName, { get });
-    };
-};
-
-const Prop = () => {
-    return (target, propName) => {
-        const attrName = toKebabCase(propName);
-        function get() {
-            if (this.props[propName]) {
-                return this.props[propName];
-            }
-            return this.getAttribute(attrName);
-        }
-        function set(value) {
-            if (this.__connected) {
-                const oldValue = this.props[propName];
-                this.props[propName] = tryParseInt(value);
-                if (typeof value != 'object') {
-                    this.setAttribute(attrName, value);
-                }
-                else {
-                    this.onAttributeChange(attrName, oldValue, value, false);
-                }
-            }
-            else {
-                if (!this.hasAttribute(toKebabCase(propName))) {
-                    this.constructor.propsInit[propName] = value;
-                }
-            }
-        }
-        if (!target.constructor.propsInit) {
-            target.constructor.propsInit = {};
-        }
-        target.constructor.propsInit[propName] = null;
-        Object.defineProperty(target, propName, { get, set });
-    };
-};
-const getProps = (target) => {
-    const watchAttributes = target.constructor.watchAttributes;
-    const plainAttributes = Object.assign({}, watchAttributes);
-    Object.keys(plainAttributes).forEach(v => plainAttributes[v] = '');
-    const cycleProps = Object.assign({}, plainAttributes, target.constructor.propsInit);
-    return Object.keys(cycleProps);
-};
-const initializeProps = (target) => {
-    const watchAttributes = target.constructor.watchAttributes;
-    for (let prop of getProps(target)) {
-        if (watchAttributes) {
-            if (watchAttributes[toKebabCase(prop)] == null) {
-                watchAttributes[toKebabCase(prop)] = '';
-            }
-            else {
-                const attribValue = target.props[prop] || target.getAttribute(toKebabCase(prop));
-                if (typeof target[watchAttributes[prop]] == 'function') {
-                    target[watchAttributes[prop]]({ new: attribValue });
-                }
-            }
-        }
-        if (target.constructor.propsInit[prop]) {
-            if (!target.hasAttribute(toKebabCase(prop))) {
-                target[prop] = target.constructor.propsInit[prop];
-            }
-        }
-    }
-};
-
-const CustomElement = (args) => {
-    return (target) => {
-        var _a;
-        const tag = args.tag || toKebabCase(target.prototype.constructor.name);
-        const customElement = (_a = class extends target {
-                constructor() {
-                    super();
-                    this.props = {};
-                    this.showShadowRoot = args.shadow == null ? true : args.shadow;
-                    if (!this.shadowRoot && this.showShadowRoot) {
-                        this.attachShadow({ mode: 'open' });
-                    }
-                }
-                static get observedAttributes() {
-                    return Object.keys(this.propsInit || {}).map(x => toKebabCase(x));
-                }
-                attributeChangedCallback(name, oldValue, newValue) {
-                    this.onAttributeChange(name, oldValue, newValue);
-                }
-                onAttributeChange(name, oldValue, newValue, set = true) {
-                    if (oldValue != newValue) {
-                        if (set) {
-                            this[toCamelCase(name)] = newValue;
-                        }
-                        const watchAttributes = this.constructor.watchAttributes;
-                        if (watchAttributes && watchAttributes[name]) {
-                            const methodToCall = watchAttributes[name];
-                            if (this.__connected) {
-                                if (typeof this[methodToCall] == 'function') {
-                                    this[methodToCall]({ old: oldValue, new: newValue });
-                                }
-                            }
-                        }
-                    }
-                }
-                connectedCallback() {
-                    this.__render();
-                    super.connectedCallback && super.connectedCallback();
-                    this.__connected = true;
-                    addEventListeners(this);
-                    initializeProps(this);
-                }
-                __render() {
-                    if (this.__connected)
-                        return;
-                    const template = document.createElement('template');
-                    const style = `${args.style ? `<style>${args.style}</style>` : ''}`;
-                    template.innerHTML = `${style}${args.template ? args.template : ''}`;
-                    (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
-                }
-            },
-            _a.__connected = false,
-            _a);
-        if (!customElements.get(tag)) {
-            customElements.define(tag, customElement);
-        }
-        return customElement;
-    };
-};
-
-const Watch = (attrName) => {
-    return (target, propertyName) => {
-        if (!target.constructor.watchAttributes) {
-            target.constructor.watchAttributes = {};
-        }
-        target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
-        if (!target.constructor.propsInit) {
-            target.constructor.propsInit = {};
-        }
-        target.constructor.propsInit[attrName] = null;
-    };
-};
-
-const Toggle = () => {
-    return (target, propName) => {
-        function get() {
-            const getAttribute = (propName) => {
-                if (this.hasAttribute(propName)) {
-                    const attrValue = this.getAttribute(propName);
-                    if (/^(true|false|^$)$/.test(attrValue)) {
-                        return attrValue == 'true' || attrValue == '';
-                    }
-                    else {
-                        return false;
-                    }
-                }
-                return false;
-            };
-            return getAttribute(propName);
-        }
-        function set(value) {
-            const oldValue = value;
-            if (value != undefined) {
-                switch (typeof value) {
-                    case 'boolean':
-                        break;
-                    case 'string':
-                        if (/^(true|false|^$)$/.test(value)) {
-                            value = oldValue == 'true' || oldValue == '';
-                        }
-                        else {
-                            console.warn(`TypeError: Cannot set boolean toggle property '${propName}' to '${value}'`);
-                            value = false;
-                        }
-                        break;
-                    default:
-                        throw (`TypeError: Cannot set boolean toggle property '${propName}' to '${value}'`);
-                }
-            }
-            if (this.__connected) {
-                this.props[propName] = value || false;
-                if (oldValue !== '' && oldValue !== null) {
-                    this.setAttribute(propName, value);
-                }
-                else {
-                    if (value) {
-                        this.setAttribute(propName, '');
-                    }
-                    else {
-                        this.removeAttribute(propName);
-                    }
-                }
-            }
-            else {
-                if (!this.hasAttribute(toKebabCase(propName))) {
-                    this.constructor.propsInit[propName] = value;
-                }
-            }
-        }
-        if (!target.constructor.propsInit) {
-            target.constructor.propsInit = {};
-        }
-        target.constructor.propsInit[propName] = null;
-        Object.defineProperty(target, propName, { get, set });
-    };
-};
-
-export { CustomElement, Watch, Prop, initializeProps, Toggle, Listen, addEventListeners, Dispatch };
-//# sourceMappingURL=custom-elements-ts.js.map

package/esm2015/custom-elements-ts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-elements-ts.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm5/custom-elements-ts.js

@@ -1,298 +0,0 @@
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var toKebabCase = function (str) {
-    return str
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .replace(/[\s_]+/g, '-')
-        .toLowerCase();
-};
-var toCamelCase = function (str) {
-    return str
-        .toLowerCase()
-        .replace(/(\-\w)/g, function (m) { return m[1].toUpperCase(); });
-};
-var toDotCase = function (str) {
-    return str.replace(/(?!^)([A-Z])/g, ' $1')
-        .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
-        .toLowerCase();
-};
-var tryParseInt = function (value) {
-    return (parseInt(value) == value && parseFloat(value) !== NaN) ? parseInt(value) : value;
-};
-
-var Listen = function (eventName, selector) {
-    return function (target, methodName) {
-        if (!target.constructor.listeners) {
-            target.constructor.listeners = [];
-        }
-        target.constructor.listeners.push({ selector: selector, eventName: eventName, handler: target[methodName] });
-    };
-};
-var addEventListeners = function (target) {
-    if (target.constructor.listeners) {
-        var targetRoot = target.shadowRoot || target;
-        var _loop_1 = function (listener) {
-            var eventTarget = (listener.selector)
-                ? targetRoot.querySelector(listener.selector)
-                    ? targetRoot.querySelector(listener.selector) : null
-                : target;
-            if (eventTarget) {
-                eventTarget.addEventListener(listener.eventName, function (e) {
-                    listener.handler.call(target, e);
-                });
-            }
-        };
-        for (var _i = 0, _a = target.constructor.listeners; _i < _a.length; _i++) {
-            var listener = _a[_i];
-            _loop_1(listener);
-        }
-    }
-};
-var Dispatch = function (eventName) {
-    return function (target, propertyName) {
-        function get() {
-            var self = this;
-            return {
-                emit: function (options) {
-                    var evtName = (eventName) ? eventName : toDotCase(propertyName);
-                    self.dispatchEvent(new CustomEvent(evtName, options));
-                }
-            };
-        }
-        Object.defineProperty(target, propertyName, { get: get });
-    };
-};
-
-var Prop = function () {
-    return function (target, propName) {
-        var attrName = toKebabCase(propName);
-        function get() {
-            if (this.props[propName]) {
-                return this.props[propName];
-            }
-            return this.getAttribute(attrName);
-        }
-        function set(value) {
-            if (this.__connected) {
-                var oldValue = this.props[propName];
-                this.props[propName] = tryParseInt(value);
-                if (typeof value != 'object') {
-                    this.setAttribute(attrName, value);
-                }
-                else {
-                    this.onAttributeChange(attrName, oldValue, value, false);
-                }
-            }
-            else {
-                if (!this.hasAttribute(toKebabCase(propName))) {
-                    this.constructor.propsInit[propName] = value;
-                }
-            }
-        }
-        if (!target.constructor.propsInit) {
-            target.constructor.propsInit = {};
-        }
-        target.constructor.propsInit[propName] = null;
-        Object.defineProperty(target, propName, { get: get, set: set });
-    };
-};
-var getProps = function (target) {
-    var watchAttributes = target.constructor.watchAttributes;
-    var plainAttributes = __assign({}, watchAttributes);
-    Object.keys(plainAttributes).forEach(function (v) { return plainAttributes[v] = ''; });
-    var cycleProps = __assign({}, plainAttributes, target.constructor.propsInit);
-    return Object.keys(cycleProps);
-};
-var initializeProps = function (target) {
-    var watchAttributes = target.constructor.watchAttributes;
-    for (var _i = 0, _a = getProps(target); _i < _a.length; _i++) {
-        var prop = _a[_i];
-        if (watchAttributes) {
-            if (watchAttributes[toKebabCase(prop)] == null) {
-                watchAttributes[toKebabCase(prop)] = '';
-            }
-            else {
-                var attribValue = target.props[prop] || target.getAttribute(toKebabCase(prop));
-                if (typeof target[watchAttributes[prop]] == 'function') {
-                    target[watchAttributes[prop]]({ new: attribValue });
-                }
-            }
-        }
-        if (target.constructor.propsInit[prop]) {
-            if (!target.hasAttribute(toKebabCase(prop))) {
-                target[prop] = target.constructor.propsInit[prop];
-            }
-        }
-    }
-};
-
-var CustomElement = function (args) {
-    return function (target) {
-        var _a;
-        var tag = args.tag || toKebabCase(target.prototype.constructor.name);
-        var customElement = (_a = (function (_super) {
-                __extends(class_1, _super);
-                function class_1() {
-                    var _this = _super.call(this) || this;
-                    _this.props = {};
-                    _this.showShadowRoot = args.shadow == null ? true : args.shadow;
-                    if (!_this.shadowRoot && _this.showShadowRoot) {
-                        _this.attachShadow({ mode: 'open' });
-                    }
-                    return _this;
-                }
-                Object.defineProperty(class_1, "observedAttributes", {
-                    get: function () {
-                        return Object.keys(this.propsInit || {}).map(function (x) { return toKebabCase(x); });
-                    },
-                    enumerable: true,
-                    configurable: true
-                });
-                class_1.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
-                    this.onAttributeChange(name, oldValue, newValue);
-                };
-                class_1.prototype.onAttributeChange = function (name, oldValue, newValue, set) {
-                    if (set === void 0) { set = true; }
-                    if (oldValue != newValue) {
-                        if (set) {
-                            this[toCamelCase(name)] = newValue;
-                        }
-                        var watchAttributes = this.constructor.watchAttributes;
-                        if (watchAttributes && watchAttributes[name]) {
-                            var methodToCall = watchAttributes[name];
-                            if (this.__connected) {
-                                if (typeof this[methodToCall] == 'function') {
-                                    this[methodToCall]({ old: oldValue, new: newValue });
-                                }
-                            }
-                        }
-                    }
-                };
-                class_1.prototype.connectedCallback = function () {
-                    this.__render();
-                    _super.prototype.connectedCallback && _super.prototype.connectedCallback.call(this);
-                    this.__connected = true;
-                    addEventListeners(this);
-                    initializeProps(this);
-                };
-                class_1.prototype.__render = function () {
-                    if (this.__connected)
-                        return;
-                    var template = document.createElement('template');
-                    var style = "" + (args.style ? "<style>" + args.style + "</style>" : '');
-                    template.innerHTML = "" + style + (args.template ? args.template : '');
-                    (this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
-                };
-                return class_1;
-            }(target)),
-            _a.__connected = false,
-            _a);
-        if (!customElements.get(tag)) {
-            customElements.define(tag, customElement);
-        }
-        return customElement;
-    };
-};
-
-var Watch = function (attrName) {
-    return function (target, propertyName) {
-        if (!target.constructor.watchAttributes) {
-            target.constructor.watchAttributes = {};
-        }
-        target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
-        if (!target.constructor.propsInit) {
-            target.constructor.propsInit = {};
-        }
-        target.constructor.propsInit[attrName] = null;
-    };
-};
-
-var Toggle = function () {
-    return function (target, propName) {
-        function get() {
-            var _this = this;
-            var getAttribute = function (propName) {
-                if (_this.hasAttribute(propName)) {
-                    var attrValue = _this.getAttribute(propName);
-                    if (/^(true|false|^$)$/.test(attrValue)) {
-                        return attrValue == 'true' || attrValue == '';
-                    }
-                    else {
-                        return false;
-                    }
-                }
-                return false;
-            };
-            return getAttribute(propName);
-        }
-        function set(value) {
-            var oldValue = value;
-            if (value != undefined) {
-                switch (typeof value) {
-                    case 'boolean':
-                        break;
-                    case 'string':
-                        if (/^(true|false|^$)$/.test(value)) {
-                            value = oldValue == 'true' || oldValue == '';
-                        }
-                        else {
-                            console.warn("TypeError: Cannot set boolean toggle property '" + propName + "' to '" + value + "'");
-                            value = false;
-                        }
-                        break;
-                    default:
-                        throw ("TypeError: Cannot set boolean toggle property '" + propName + "' to '" + value + "'");
-                }
-            }
-            if (this.__connected) {
-                this.props[propName] = value || false;
-                if (oldValue !== '' && oldValue !== null) {
-                    this.setAttribute(propName, value);
-                }
-                else {
-                    if (value) {
-                        this.setAttribute(propName, '');
-                    }
-                    else {
-                        this.removeAttribute(propName);
-                    }
-                }
-            }
-            else {
-                if (!this.hasAttribute(toKebabCase(propName))) {
-                    this.constructor.propsInit[propName] = value;
-                }
-            }
-        }
-        if (!target.constructor.propsInit) {
-            target.constructor.propsInit = {};
-        }
-        target.constructor.propsInit[propName] = null;
-        Object.defineProperty(target, propName, { get: get, set: set });
-    };
-};
-
-export { CustomElement, Watch, Prop, initializeProps, Toggle, Listen, addEventListeners, Dispatch };
-//# sourceMappingURL=custom-elements-ts.js.map

package/esm5/custom-elements-ts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-elements-ts.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/listen.d.ts

@@ -1,17 +0,0 @@
-interface ListenerMetadata {
-    eventName: string;
-    handler: Function;
-    selector?: string;
-}
-interface CustomEventOptions {
-    bubbles?: boolean;
-    composed?: boolean;
-    detail?: any;
-}
-interface DispatchEmitter {
-    emit(options?: CustomEventOptions): void;
-}
-declare const Listen: (eventName: string, selector?: string) => (target: any, methodName: string) => void;
-declare const addEventListeners: (target: any) => void;
-declare const Dispatch: (eventName?: string) => (target: HTMLElement, propertyName: string) => void;
-export { Listen, addEventListeners, DispatchEmitter, Dispatch, CustomEventOptions, ListenerMetadata };

package/prop.d.ts

@@ -1,2 +0,0 @@
-export declare const Prop: () => any;
-export declare const initializeProps: (target: any) => void;

package/toggle.d.ts

@@ -1 +0,0 @@
-export declare const Toggle: () => any;

package/util.d.ts

@@ -1,4 +0,0 @@
-export declare const toKebabCase: (str: any) => any;
-export declare const toCamelCase: (str: any) => any;
-export declare const toDotCase: (str: string) => string;
-export declare const tryParseInt: (value: any) => any;

package/watch.d.ts

@@ -1 +0,0 @@
-export declare const Watch: (attrName: string) => (target: any, propertyName: string) => void;