p-elements-core 1.2.0-rc7 → 1.2.0

package/src/commonjs.js

@@ -1,182 +0,0 @@
-/**
- * Sample
- * <script src="./common-js.js" id="common-js" data-main-path="/demo/" defer></script>
- * Promise.all([
- *   module.import("jquery"), // main file from the latest module version from unpkg cdn
- *   module.import("./sample-module"), // file from data-module location
- *   module.import("@pggm/p-age-picker@=1.0.11/dist/p-age-picker.js"), // a file from a specific module version from pggmlab
- *   module.import("@pggm/p-ajax-form/dist/p-ajax-form") // a file from the latest module version from pggmlab
- * ]);
- *
- * */
-(function CommonJS(info, el) {
-  var mainPath = document.querySelector("script[data-main-path]");
-  if (!mainPath) {
-    return;
-  }
-
-  var protoPath = /^(?:[a-z]+:)?\/\//;
-  var npmPath = /^[@a-zA-Z_-]/;
-  var __filename = info._ || el && el.getAttribute('data-main-path');
-
-  var normalize = function (url) {
-    if (protoPath.test(url)) {
-      return url;
-    }
-    if (npmPath.test(url)) {
-      var ret =  gModule._path(url);
-      return ret;
-    }
-
-    var path = __filename.slice(0, __filename.lastIndexOf('/'));
-    var length = url.length;
-    var c;
-    var i = 0;
-
-    for (var p = 0; i < length; p = i + 1) {
-      i = url.indexOf('/', p);
-      if (i < 0) {
-        i = length;
-        path += '/' + url.slice(p);
-        if (!/\.js$/i.test(path)) {
-          path += '.js';
-        }
-      } else if (i === 0) {
-        path = '';
-      } else {
-        c = p;
-        p = i;
-        while (p && url.charAt(p - 1) === '.') --p;
-        switch (i - p) {
-          case 0:
-            path += '/' + url.slice(c, i);
-            break;
-          case 1:
-            break;
-          case 2:
-            path = path.slice(0, path.lastIndexOf('/'));
-            break;
-        }
-      }
-    }
-    return path;
-  };
-
-  var onload = function (xhr, path, resolve) {
-    var html = document.documentElement;
-    var script = document.createElement('script');
-    script.setAttribute('nonce', gModule._nonce);
-    script.textContent = 'module.$(function(){' +
-      'var module=' + gModule._cjs + '(arguments[0]),' +
-      '__filename=module.filename,' +
-      '__dirname=__filename.slice(0,__filename.lastIndexOf("/")),' +
-      'require=module.require,' +
-      'exports=module.exports;(function(){"use strict";\n' +
-      xhr.responseText +
-      ';\n}.call(exports));return module.exports;' +
-      '}(module));';
-    gModule._ = path;
-    gModule.$ = function (exports) {
-      resolve(gModule._cache[path] = exports);
-    };
-    setTimeout(function () {
-      html.removeChild(script);
-    }, 1);
-    html.appendChild(script);
-  };
-
-  var error = function (path, xhr) {
-    throw (gModule._cache[path] = new Error(xhr.statusText));
-  };
-
-  var load = function (path) {
-    var remote = path;
-    var m = /^((?:[a-z]+?:\/\/)?[^/]+)\/([^@]+)@latest(\/.*)?$/.exec(path);
-
-    var resolve = function (exports) {
-      module = exports;
-    };
-    var xhr;
-    var module;
-    if (m || path.indexOf('@') === 0) {
-      xhr = new XMLHttpRequest();
-      //todo: implement this in pggmlab
-      var npmurl = 'https://pggmlab.azurewebsites.net/latest/' + m[2];
-      xhr.open('GET', npmurl, false);
-      xhr.send(null);
-      if (xhr.status < 400) {
-        module = JSON.parse(xhr.responseText);
-      } else {
-        return error(path, xhr);
-      }
-      remote = m[1] + '/' + m[2] + '@' + module.version + (m[3] || '');
-    }
-    xhr = new XMLHttpRequest();
-    xhr.open('GET', remote, false);
-    xhr.send(module = null);
-    if (xhr.status < 400) {
-      onload(xhr, path, resolve);
-    } else {
-      error(path, xhr);
-    }
-    return module;
-  };
-
-  var exports = {};
-  var module = {
-    filename: __filename,
-    exports: exports,
-    require: function (url) {
-      var path = normalize(url);
-      return gModule._cache[path] || load(path);
-    },
-    import: function (url) {
-      var path = normalize(url);
-      return Promise.resolve(
-        gModule._cache[path] ||
-        (gModule._cache[path] = new Promise(
-          function (resolve, reject) {
-            var xhr = new XMLHttpRequest();
-            xhr.open('GET', path, true);
-            xhr.onreadystatechange = function () {
-              if (xhr.readyState == 4) {
-                if (xhr.status < 400) onload(xhr, path, resolve);
-                else reject(new Error(xhr.statusText));
-              }
-            };
-            xhr.send(null);
-          }
-        ))
-      );
-    }
-  };
-
-  var gModule = window.module || module;
-  if (gModule === module) {
-    window.global = window;
-    window.module = module;
-    window.process = {
-      browser: true
-    };
-    module._cache = Object.create(null);
-    module._nonce = el ? el.getAttribute('nonce') : null;
-    module._cjs = '' + CommonJS;
-    module._path = function (url) {
-      var i = url.indexOf('/');
-      if(url[0] === "@") {
-        i = url.split('/', 2).join('/').length;
-      }
-      var npmCdn = 'https://unpkg.com/';
-      if(url.indexOf('@pggm/') === 0) {
-        npmCdn = 'https://pggmlab.azurewebsites.net/unpkg/';
-      }
-      var length = url.length;
-      var u = url.slice(0, i < 0 ? length : i).substring(1).split('@');
-      var version =  u.length > 1   ? '' : "@latest";
-      return  npmCdn + url.slice(0, i < 0 ? length : i) + version + (i < 0 ? '' : url.slice(i));
-    };
-  }
-  return module;
-}({
-  _: ''
-}, document.querySelector("script[data-main-path]")));

package/src/custom-event-polyfill.js

@@ -1,78 +0,0 @@
-// defaultPrevented is broken in IE.
-// https://connect.microsoft.com/IE/feedback/details/790389/event-defaultprevented-returns-false-after-preventdefault-was-called
-
-var workingDefaultPrevented = (function() {
-  var e = document.createEvent('Event');
-  e.initEvent('foo', true, true);
-  e.preventDefault();
-  return e.defaultPrevented;
-})();
-
-if (!workingDefaultPrevented) {
-  var origPreventDefault = Event.prototype.preventDefault;
-  Event.prototype.preventDefault = function() {
-    if (!this.cancelable) {
-      return;
-    }
-
-    origPreventDefault.call(this);
-
-    Object.defineProperty(this, 'defaultPrevented', {
-      get: function() {
-        return true;
-      },
-      configurable: true
-    });
-  };
-}
-
-var isIE = /Trident/.test(navigator.userAgent);
-
-// CustomEvent constructor shim
-if (!window.CustomEvent || isIE && (typeof window.CustomEvent !== 'function')) {
-  window.CustomEvent = function(inType, params) {
-    params = params || {};
-    var e = document.createEvent('CustomEvent');
-    e.initCustomEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable), params.detail);
-    return e;
-  };
-  window.CustomEvent.prototype = window.Event.prototype;
-}
-
-// Event constructor shim
-if (!window.Event || isIE && (typeof window.Event !== 'function')) {
-  var origEvent = window.Event;
-  window.Event = function(inType, params) {
-    params = params || {};
-    var e = document.createEvent('Event');
-    e.initEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable));
-    return e;
-  };
-  if (origEvent) {
-    for (var i in origEvent) {
-      window.Event[i] = origEvent[i];
-    }
-  }
-  window.Event.prototype = origEvent.prototype;
-}
-
-if (!window.MouseEvent || isIE && (typeof window.MouseEvent !== 'function')) {
-  var origMouseEvent = window.MouseEvent;
-  window.MouseEvent = function(inType, params) {
-    params = params || {};
-    var e = document.createEvent('MouseEvent');
-    e.initMouseEvent(inType,
-      Boolean(params.bubbles), Boolean(params.cancelable),
-      params.view || window, params.detail,
-      params.screenX, params.screenY, params.clientX, params.clientY,
-      params.ctrlKey, params.altKey, params.shiftKey, params.metaKey,
-      params.button, params.relatedTarget);
-    return e;
-  };
-  if (origMouseEvent) {
-    for (var i in origMouseEvent) {
-      window.MouseEvent[i] = origMouseEvent[i];
-    }
-  }
-  window.MouseEvent.prototype = origMouseEvent.prototype;
-}

package/src/index.tsx

@@ -1,23 +0,0 @@
-import {Bind, CustomElement, CustomElementConfig, PropertyRenderOnSet} from "./utils/custom-element";
-import {CustomStyleElement} from "./custom-style-element"
-
-import * as _ from "underscore";
-import * as anime from "animejs";
-import * as Maquette  from "./utils/maquette";
-
-((window) => {
-
-  window._ = _;
-  (window as any).Maquette = Maquette;
-  (window as any).h = Maquette.h;
-  (window as any).anime = anime;
-  window.customElements.whenDefined("custom-style").then(() => {
-    document.body.parentElement.classList.add("custom-style-defined")
-  });
-  window.CustomElement = CustomElement;
-  window.CustomElementConfig = CustomElementConfig;
-  window.CustomStyleElement = CustomStyleElement;
-  window.PropertyRenderOnSet = PropertyRenderOnSet;
-  window.RenderOnSet = PropertyRenderOnSet;
-  window.Bind = Bind;
-})(window as any);

package/src/sample.css

@@ -1,20 +0,0 @@
-:host{
-  /* display: none; */
-}
-
-.root {
-  display: flex;
-  padding: 10px;
-  flex-direction: row;
-}
-
-#Foo {
-  @apply --mixin-sample;
-  text-decoration: underline;
-}
-
-#SlotContainer ::slotted(*) {
-  font-weight: bold;
-  color: green;
-  font-size: 1.5em;
-}

package/src/sample.spec.ts

@@ -1,112 +0,0 @@
-describe("my-greetings custom element", () => {
-
-  it("Should be defined", (done) => {
-    let elementIsDefined = false;
-    customElements.whenDefined("my-greetings").then(() => {
-      elementIsDefined = true;
-      expect(elementIsDefined).toBe(true);
-      done();
-    });
-  });
-
-  it("Should have shadow root", (done) => {
-    const element = document.createElement("my-greetings");
-    document.body.appendChild(element);
-    expect(typeof element.shadowRoot).toBe("object");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should have shadow root child element with text 'Hello!!'", (done) => {
-    const element = document.createElement("my-greetings");
-    document.body.appendChild(element);
-    expect( (element.shadowRoot.querySelector(".sample") as HTMLElement).innerText).toBe("Hello!!");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with text typed in input", (done) => {
-    const element = document.createElement("my-greetings");
-    document.body.appendChild(element);
-    const inputElement = element.shadowRoot.querySelector("input");
-
-    inputElement.value = "Lorem ipsum Dolar sit";
-    inputElement.dispatchEvent(new Event("input"));
-
-    setTimeout(() => {
-      expect( element.shadowRoot.querySelector(".title").innerHTML).toBe(inputElement.value);
-      element.parentNode.removeChild(element);
-      done();
-    }, 100)
-  });
-
-  it("Should display heading with the same text as element attribute name", (done) => {
-    const element = document.createElement("my-greetings");
-    element.setAttribute("name", "Arnold");
-    document.body.appendChild(element);
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Arnold");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with the same text as element attribute name after changing the attribute", (done) => {
-    const element = document.createElement("my-greetings");
-    element.setAttribute("name", "Arnold");
-    document.body.appendChild(element);
-    element.setAttribute("name", "Kees");
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Kees");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with the same text as element propery", (done) => {
-    const element = document.createElement("my-greetings") as any;
-    element.name = "Arie";
-    document.body.appendChild(element);
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Arie");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  it("Should display heading with the same text as element property name after changing the property", (done) => {
-    const element = document.createElement("my-greetings") as any;
-    element.name = "Jeffreyd";
-    document.body.appendChild(element);
-    element.name = "Martijn";
-    expect( element.shadowRoot.querySelector(".title").innerHTML).toBe("Martijn");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-  // betty BOOP => Brilliant Online Objects Programmers
-  it("Should display BB when property name is 'Peter'", (done) => {
-    const element = document.createElement("my-greetings") as any;
-    element.name = "Peter";
-    document.body.appendChild(element);
-    expect( typeof element.shadowRoot.querySelector(".is-peter--image")).toBe("object");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-});
-
-describe("super-a custom element extends a", () => {
-
-  it("Should be defined", (done) => {
-    let elementIsDefined = false;
-    customElements.whenDefined("super-a").then(() => {
-      elementIsDefined = true;
-      expect(elementIsDefined).toBe(true);
-      done();
-    });
-  });
-
-  it("Should be red", (done) => {
-    const element = (document as any).createElement("a", {is: "super-a"});
-    document.body.appendChild(element);
-    expect(element.style.color).toBe("red");
-    element.parentNode.removeChild(element);
-    done();
-  });
-
-});

package/src/utils/custom-element.ts

@@ -1,241 +0,0 @@
-import { Projector, VNode } from "./maquette";
-
-declare var HTMLElement: {
-  prototype: HTMLElement;
-  new(param?): HTMLElement;
-};
-
-export interface IElementConfig {
-  tagName: string;
-  options?: {
-    extends: string;
-  };
-}
-
-const cssMap = new Map();
-
-export const Bind = (target, key, descriptor) => {
-  let fn = descriptor.value;
-
-  if (typeof fn !== 'function') {
-    throw new Error(`@Bind decorator can only be applied to methods not: ${typeof fn}`);
-  }
-
-  // In IE11 calling Object.defineProperty has a side-effect of evaluating the
-  // getter for the property which is being replaced. This causes infinite
-  // recursion and an "Out of stack space" error.
-  let definingProperty = false;
-
-  return {
-    configurable: true,
-    get() {
-      if (definingProperty || this === target.prototype || this.hasOwnProperty(key)
-        || typeof fn !== 'function') {
-        return fn;
-      }
-
-      let boundFn = fn.bind(this);
-      definingProperty = true;
-      Object.defineProperty(this, key, {
-        configurable: true,
-        get() {
-          return boundFn;
-        },
-        set(value) {
-          fn = value;
-          delete this[key];
-        }
-      });
-      definingProperty = false;
-      return boundFn;
-    },
-    set(value) {
-      fn = value;
-    }
-  };
-};
-
-export const CustomElementConfig = (config: IElementConfig) => {
-  return (Element) => {
-    setTimeout(() => {
-      customElements.define(config.tagName, Element, config.options);
-    }, 10);
-    const camelCased = config.tagName.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-    (<any>window)[camelCased.charAt(0).toUpperCase() + camelCased.slice(1)] = Element;
-  };
-};
-
-export function PropertyRenderOnSet(target, key) {
-
-  if (!Reflect.get(target, "_dp_" + key)) {
-    Reflect.defineProperty(target, "_dp_" + key, {
-      configurable: true,
-      enumerable: true,
-      get: function() {
-        return this["_" + key + "_value"];
-      },
-      set: function(value) {
-        this["_" + key + "_value"] = value;
-      },
-    });
-  }
-
-  if (!target["_dp_setters_" + key]) {
-    target["_dp_setters_" + key] = [];
-  }
-
-  const propertyRenderOnSetFunction = (o, v) => {
-    if (o && o.renderNow) {
-      o.renderNow();
-    }
-  };
-
-  target["_dp_setters_" + key].push(propertyRenderOnSetFunction);
-
-  const getter = function() {
-    return this["_" + key + "_value"];
-  };
-
-  const setter = function(newVal) {
-    this["_dp_" + key] = newVal;
-    if (target["_dp_setters_" + key]) {
-      target["_dp_setters_" + key].forEach((fn) => {
-        fn(this, newVal);
-      });
-    }
-  };
-
-  Object.defineProperty(target, key, {
-    configurable: true,
-    enumerable: true,
-    get: getter,
-    set: setter,
-  });
-}
-
-declare var HTMLElement: {
-  prototype: HTMLElement;
-  new(arg?: any): HTMLElement;
-};
-
-const installCE = require("document-register-element/pony");
-const isNative = (fn) => {
-  return (/\{\s*\[native code\]\s*\}/).test("" + fn);
-};
-if (!isNative((document as any).registerElement)) {
-  installCE(window, "auto");
-}
-
-export abstract class CustomElement extends HTMLElement {
-
-  constructor(self) {
-    self = super(self);
-    if (typeof (this as any).init === "function") {
-      (this as any).init();
-    }
-    return self;
-  }
-
-  private _projector: Projector;
-
-  protected templateFromString(html: string): any {
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-    }
-    this.shadowRoot.innerHTML = "";
-
-    let style = "<style></style>";
-    const styleMatch = html.match(/<style[^>]*>([\s\S]*?)<\/style>/);
-    if (styleMatch) {
-      style = styleMatch[0];
-      if (cssMap.has(this.tagName)){
-        html = html.replace(styleMatch[0], `<link rel="stylesheet" href="${cssMap.get(this.tagName)}">`);
-      } else {
-        const blob = new Blob([styleMatch[1]], {type: 'text/css'});
-        html = html.replace(styleMatch[0], `<link rel="stylesheet" href="${URL.createObjectURL(blob)}" data-tmp="true">`);
-      }
-
-    }
-
-    let myElementTemplate = document.createElement('template');
-    myElementTemplate.innerHTML = html;
-    let template = document.importNode(myElementTemplate.content, true);
-
-    const creatObjectUrlForShadyStyle = () => {
-      if (cssMap.has(this.tagName)){
-        return cssMap.get(this.tagName);
-      }
-      const t = document.createElement("template");
-      t.innerHTML =  style;
-      const p = (window as any).ShadyCSS.prepareTemplate(t,  "x-tmp");
-      const c = t.content.cloneNode(true);
-      const cssTxt = (c as any).querySelector("style").textContent;
-      const blob = new Blob([cssTxt], {type: 'text/css'});
-      const url = URL.createObjectURL(blob);
-      cssMap.set(this.tagName, url);
-      return url;
-    }
-
-    window.addEventListener('customStyleConnected', () => {
-      setTimeout(() => {
-        const link = this.shadowRoot.querySelector("link");
-        if (link) {
-          if (link.hasAttribute("data-tmp")) {
-            URL.revokeObjectURL(link.href);
-            link.removeAttribute("data-tmp")
-          }
-          link.href = creatObjectUrlForShadyStyle();
-        }
-      }, 1)
-    });
-
-    setTimeout(() => {
-      const link = this.shadowRoot.querySelector("link");
-      if (link) {
-        if (link.hasAttribute("data-tmp")) {
-          URL.revokeObjectURL(link.href);
-          link.removeAttribute("data-tmp")
-        }
-        link.href = creatObjectUrlForShadyStyle();
-      }
-    }, 1)
-    return template;
-  }
-
-
-  protected createProjector(element: Element, render: () => VNode): Promise<Projector> {
-
-    return new Promise<Projector>((resolve, reject) => {
-      let projector: Projector;
-      let time = 1;
-      const isIE = (navigator.userAgent.indexOf("Trident") != -1);
-      if(isIE) {
-        time = 400;
-      } else {
-        const iOS = parseFloat(
-          ('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
-          .replace('undefined', '3_2').replace('_', '.').replace('_', '')
-        ) || false;
-        time = (iOS !== false && iOS < 10.4) ? 1500 : time;
-        time = (iOS !== false && iOS < 10) ? 2000 : time;
-      }
-
-      setTimeout(() => {
-        projector = (window as any).Maquette.createProjector();
-        projector.append(element, render);
-        this._projector = projector;
-        resolve(projector);
-        this.dispatchEvent(new CustomEvent("firstRender", {}));
-      }, time);
-
-
-    });
-  }
-
-  protected renderNow() {
-    if (this._projector) {
-      this._projector.renderNow();
-    }
-  }
-
-}