@carto/airship-components - npm Package Compare versions

Comparing version 1.0.0-alpha.26 to 1.0.0-alpha.28

dist/airship.js

 /*!
  * Built with http://stenciljs.com
- * 2018-06-18T09:09:54
+ * 2018-07-13T08:18:25
  */
-!function(e,t,r,n,i,s,o,c,a,u,p,l,d,h){for((p=e.airship=e.airship||{}).components=a,(d=a.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((l=t.createElement("style")).innerHTML=d.join()+"{visibility:hidden}.hydrated{visibility:inherit}",l.setAttribute("data-styles",""),t.head.insertBefore(l,t.head.firstChild)),function(e,t,r){(e["s-apps"]=e["s-apps"]||[]).push("airship"),r.componentOnReady||(r.componentOnReady=function(){var t=this;function r(r){if(t.nodeName.indexOf("-")>0){for(var n=e["s-apps"],i=0,s=0;s<n.length;s++)if(e[n[s]].componentOnReady){if(e[n[s]].componentOnReady(t,r))return;i++}if(i<n.length)return void(e["s-cr"]=e["s-cr"]||[]).push([t,r])}r(null)}return e.Promise?new e.Promise(r):{then:r}})}(e,0,u),i=i||p.resourcesUrl,l=(d=t.querySelectorAll("script")).length-1;l>=0&&!(h=d[l]).src&&!h.hasAttribute("data-resources-url");l--);d=h.getAttribute("data-resources-url"),!i&&d&&(i=d),!i&&h.src&&(i=(d=h.src.split("/").slice(0,-1)).join("/")+(d.length?"/":"")+"airship/"),l=t.createElement("script"),function(e,t,r,n){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in r)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,l)?l.src=i+"airship.d8azwrlo.js":(l.src=i+"airship.nomggejy.js",l.setAttribute("type","module"),l.setAttribute("crossorigin",!0)),l.setAttribute("data-resources-url",i),l.setAttribute("data-namespace","airship"),t.head.appendChild(l)}(window,document,0,0,0,0,0,0,[["as-switch","vwknbesq",1]],HTMLElement.prototype);
+(function(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components) {
+
+  function init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCorePolyfilled, hydratedCssClass, components, HTMLElementPrototype, App, x, y, scriptElm) {
+    // create global namespace if it doesn't already exist
+    App = win[namespace] = win[namespace] || {};
+    App.components = components;
+    y = components.filter(function (c) { return c[2]; }).map(function (c) { return c[0]; });
+    if (y.length) {
+        // auto hide components until they been fully hydrated
+        // reusing the "x" and "i" variables from the args for funzies
+        x = doc.createElement('style');
+        x.innerHTML = y.join() + '{visibility:hidden}.' + hydratedCssClass + '{visibility:inherit}';
+        x.setAttribute('data-styles', '');
+        doc.head.insertBefore(x, doc.head.firstChild);
+    }
+    createComponentOnReadyPrototype(win, namespace, HTMLElementPrototype);
+    resourcesUrl = resourcesUrl || App.resourcesUrl;
+    // figure out the script element for this current script
+    y = doc.querySelectorAll('script');
+    for (x = y.length - 1; x >= 0; x--) {
+        scriptElm = y[x];
+        if (scriptElm.src || scriptElm.hasAttribute('data-resources-url')) {
+            break;
+        }
+    }
+    // get the resource path attribute on this script element
+    y = scriptElm.getAttribute('data-resources-url');
+    if (!resourcesUrl && y) {
+        // the script element has a data-resources-url attribute, always use that
+        resourcesUrl = y;
+    }
+    if (!resourcesUrl && scriptElm.src) {
+        // we don't have an exact resourcesUrl, so let's
+        // figure it out relative to this script's src and app's filesystem namespace
+        y = scriptElm.src.split('/').slice(0, -1);
+        resourcesUrl = (y.join('/')) + (y.length ? '/' : '') + fsNamespace + '/';
+    }
+    // request the core this browser needs
+    // test for native support of custom elements and fetch
+    // if either of those are not supported, then use the core w/ polyfills
+    // also check if the page was build with ssr or not
+    x = doc.createElement('script');
+    if (usePolyfills(win, win.location, x, 'import("")')) {
+        // requires the es5/polyfilled core
+        x.src = resourcesUrl + appCorePolyfilled;
+    }
+    else {
+        // let's do this!
+        x.src = resourcesUrl + appCore;
+        x.setAttribute('type', 'module');
+        x.setAttribute('crossorigin', true);
+    }
+    x.setAttribute('data-resources-url', resourcesUrl);
+    x.setAttribute('data-namespace', fsNamespace);
+    doc.head.appendChild(x);
+}
+function usePolyfills(win, location, scriptElm, dynamicImportTest) {
+    // fyi, dev mode has verbose if/return statements
+    // but it minifies to a nice 'lil one-liner ;)
+    if (location.search.indexOf('core=esm') > 0) {
+        // force esm build
+        return false;
+    }
+    if ((location.search.indexOf('core=es5') > 0) ||
+        (location.protocol === 'file:') ||
+        (!(win.customElements && win.customElements.define)) ||
+        (!win.fetch) ||
+        (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) ||
+        (!('noModule' in scriptElm))) {
+        // es5 build w/ polyfills
+        return true;
+    }
+    // final test to see if this browser support dynamic imports
+    return doesNotSupportsDynamicImports(dynamicImportTest);
+}
+function doesNotSupportsDynamicImports(dynamicImportTest) {
+    try {
+        new Function(dynamicImportTest);
+        return false;
+    }
+    catch (e) { }
+    return true;
+}
+function createComponentOnReadyPrototype(win, namespace, HTMLElementPrototype) {
+    (win['s-apps'] = win['s-apps'] || []).push(namespace);
+    if (!HTMLElementPrototype.componentOnReady) {
+        HTMLElementPrototype.componentOnReady = function componentOnReady() {
+            /*tslint:disable*/
+            var elm = this;
+            function executor(resolve) {
+                if (elm.nodeName.indexOf('-') > 0) {
+                    // window hasn't loaded yet and there's a
+                    // good chance this is a custom element
+                    var apps = win['s-apps'];
+                    var appsReady = 0;
+                    // loop through all the app namespaces
+                    for (var i = 0; i < apps.length; i++) {
+                        // see if this app has "componentOnReady" setup
+                        if (win[apps[i]].componentOnReady) {
+                            // this app's core has loaded call its "componentOnReady"
+                            if (win[apps[i]].componentOnReady(elm, resolve)) {
+                                // this component does belong to this app and would
+                                // have fired off the resolve fn
+                                // let's stop here, we're good
+                                return;
+                            }
+                            appsReady++;
+                        }
+                    }
+                    if (appsReady < apps.length) {
+                        // not all apps are ready yet
+                        // add it to the queue to be figured out when they are
+                        (win['s-cr'] = win['s-cr'] || []).push([elm, resolve]);
+                        return;
+                    }
+                }
+                // not a recognized app component
+                resolve(null);
+            }
+            // callback wasn't provided, let's return a promise
+            if (win.Promise) {
+                // use native/polyfilled promise
+                return new win.Promise(executor);
+            }
+            // promise may not have been polyfilled yet
+            return { then: executor };
+        };
+    }
+}
+
+
+  init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components);
+
+  })(window, document, "airship","airship",0,"airship.core.js","es5-build-disabled.js","hydrated",[["as-category-widget","as-category-widget",1,[["categories",1],["clearSelection",6],["defaultBarColor",1,0,"default-bar-color",2],["description",1,0,1,2],["getSelectedCategories",6],["heading",1,0,1,2],["selectedCategories",5],["showClearButton",1,0,"show-clear-button",3],["showHeader",1,0,"show-header",3],["useTotalPercentage",1,0,"use-total-percentage",3],["visibleCategories",1,0,"visible-categories",4]]],["as-switch","as-switch",1],["as-toolbar","as-toolbar"],["as-toolbar-item","as-toolbar-item",0,[["src",1,0,1,2],["text",1,0,1,2]]]],HTMLElement.prototype);

dist/collection/collection-manifest.json

 {
   "components": [
     {
+      "tag": "as-category-widget",
+      "dependencies": [],
+      "componentClass": "CategoryWidget",
+      "componentPath": "components/as-category-widget/as-category-widget.js",
+      "styles": {
+        "$": {
+          "stylePaths": [
+            "components/as-category-widget/as-category-widget.scss"
+          ]
+        }
+      },
+      "props": [
+        {
+          "name": "categories",
+          "attr": "categories"
+        },
+        {
+          "name": "defaultBarColor",
+          "type": "String",
+          "attr": "default-bar-color"
+        },
+        {
+          "name": "description",
+          "type": "String",
+          "attr": "description"
+        },
+        {
+          "name": "heading",
+          "type": "String",
+          "attr": "heading"
+        },
+        {
+          "name": "showClearButton",
+          "type": "Boolean",
+          "attr": "show-clear-button"
+        },
+        {
+          "name": "showHeader",
+          "type": "Boolean",
+          "attr": "show-header"
+        },
+        {
+          "name": "useTotalPercentage",
+          "type": "Boolean",
+          "attr": "use-total-percentage"
+        },
+        {
+          "name": "visibleCategories",
+          "type": "Number",
+          "attr": "visible-categories"
+        }
+      ],
+      "states": [
+        {
+          "name": "selectedCategories"
+        }
+      ],
+      "methods": [
+        {
+          "name": "clearSelection"
+        },
+        {
+          "name": "getSelectedCategories"
+        }
+      ],
+      "events": [
+        {
+          "event": "categoriesSelected"
+        }
+      ]
+    },
+    {
       "tag": "as-switch",
@@ -14,3 +86,34 @@ "dependencies": [],
         }
-      }
+      },
+      "events": [
+        {
+          "event": "onToggle"
+        }
+      ]
+    },
+    {
+      "tag": "as-toolbar",
+      "dependencies": [],
+      "componentClass": "Toolbar",
+      "componentPath": "components/as-toolbar/as-toolbar.js",
+      "styles": {}
+    },
+    {
+      "tag": "as-toolbar-item",
+      "dependencies": [],
+      "componentClass": "ToolbarItem",
+      "componentPath": "components/as-toolbar-action/as-toolbar-item.js",
+      "styles": {},
+      "props": [
+        {
+          "name": "src",
+          "type": "String",
+          "attr": "src"
+        },
+        {
+          "name": "text",
+          "type": "String",
+          "attr": "text"
+        }
+      ]
     }
@@ -21,3 +124,3 @@ ],
     "name": "@stencil/core",
-    "version": "0.10.7",
+    "version": "0.10.10",
     "typescriptVersion": "2.9.2"
@@ -24,0 +127,0 @@ },

dist/collection/components/as-switch/as-switch.js

 export class Switch {
     render() {
-        return (h("label", { class: "switch" },
-            h("input", { type: "checkbox" }),
-            h("span", { class: "slider" })));
+        return (h("label", { class: 'switch' },
+            h("input", { type: 'checkbox', onChange: (event) => this.onInputChanged(event) }),
+            h("span", { class: 'slider' })));
     }
+    onInputChanged(event) {
+        const currentState = event.target.checked;
+        this.onToggle.emit(currentState);
+    }
     static get is() { return "as-switch"; }
+    static get events() { return [{
+            "name": "onToggle",
+            "method": "onToggle",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true
+        }]; }
     static get style() { return "/**style-placeholder:as-switch:**/"; }
 }

dist/esm/es5/airship.components.js

 // airship: Host Data, ES Module/ES5 Target
 
-export var Switch = ["as-switch",function(){return(import("./vwknbesq.js")).then(function(m){return m.AsSwitch})},1];
+export var CategoryWidget = ["as-category-widget",function(){return(import("./as-category-widget.js")).then(function(m){return m.AsCategoryWidget})},1,[["categories",1],["clearSelection",6],["defaultBarColor",1,0,"default-bar-color",2],["description",1,0,1,2],["getSelectedCategories",6],["heading",1,0,1,2],["selectedCategories",5],["showClearButton",1,0,"show-clear-button",3],["showHeader",1,0,"show-header",3],["useTotalPercentage",1,0,"use-total-percentage",3],["visibleCategories",1,0,"visible-categories",4]]];
+
+export var Switch = ["as-switch",function(){return(import("./as-switch.js")).then(function(m){return m.AsSwitch})},1];
+
+export var Toolbar = ["as-toolbar",function(){return(import("./as-toolbar.js")).then(function(m){return m.AsToolbar})}];
+
+export var ToolbarItem = ["as-toolbar-item",function(){return(import("./as-toolbar-item.js")).then(function(m){return m.AsToolbarItem})},0,[["src",1,0,1,2],["text",1,0,1,2]]];

dist/esm/es5/airship.define.js

 // airship: Custom Elements Define Library, ES Module/ES5 Target
 import { defineCustomElement } from './airship.core.js';
 import {
-  Switch
+  CategoryWidget,
+  Switch,
+  Toolbar,
+  ToolbarItem
 } from './airship.components.js';
@@ -9,4 +12,7 @@
   defineCustomElement(window, [
-    Switch
+    CategoryWidget,
+    Switch,
+    Toolbar,
+    ToolbarItem
   ], opts);
 }

dist/types/components.d.ts

@@ -33,2 +33,109 @@ import './stencil.core';
   namespace StencilComponents {
+    interface AsCategoryWidget {
+      /**
+       * Array of categories to display in the widget. Each category should include a `name` and a `value`. You can also override the bar color for each category with `color`.
+       */
+      'categories': object[];
+      /**
+       * Clear current selected categories
+       */
+      'clearSelection': () => void;
+      /**
+       * Default color to draw the bars. Default value is `#47DB99`.
+       */
+      'defaultBarColor': string;
+      /**
+       * Description text of the widget
+       */
+      'description': string;
+      /**
+       * Get current selected categories
+       */
+      'getSelectedCategories': () => string[];
+      /**
+       * Heading text of the widget
+       */
+      'heading': string;
+      /**
+       * If truthy, it'll show a button to clear selected categories when there are any. Default value is `false`.
+       */
+      'showClearButton': boolean;
+      /**
+       * If truthy, it'll render the heading and component's description. Default value is `true`.
+       */
+      'showHeader': boolean;
+      /**
+       * If truthy, we'll use the sum of all categories' value to render the bar percentage. By default, we use the maximum category value to render the bar percentage.
+       */
+      'useTotalPercentage': boolean;
+      /**
+       * The number of visible categories without aggregation.
+       */
+      'visibleCategories': number;
+    }
+  }
+
+  interface HTMLAsCategoryWidgetElement extends StencilComponents.AsCategoryWidget, HTMLStencilElement {}
+
+  var HTMLAsCategoryWidgetElement: {
+    prototype: HTMLAsCategoryWidgetElement;
+    new (): HTMLAsCategoryWidgetElement;
+  };
+  interface HTMLElementTagNameMap {
+    'as-category-widget': HTMLAsCategoryWidgetElement;
+  }
+  interface ElementTagNameMap {
+    'as-category-widget': HTMLAsCategoryWidgetElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'as-category-widget': JSXElements.AsCategoryWidgetAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface AsCategoryWidgetAttributes extends HTMLAttributes {
+      /**
+       * Array of categories to display in the widget. Each category should include a `name` and a `value`. You can also override the bar color for each category with `color`.
+       */
+      'categories'?: object[];
+      /**
+       * Default color to draw the bars. Default value is `#47DB99`.
+       */
+      'defaultBarColor'?: string;
+      /**
+       * Description text of the widget
+       */
+      'description'?: string;
+      /**
+       * Heading text of the widget
+       */
+      'heading'?: string;
+      /**
+       * Fired when selected categories changed or selected categories are cleared.
+       */
+      'onCategoriesSelected'?: (event: CustomEvent<string[]>) => void;
+      /**
+       * If truthy, it'll show a button to clear selected categories when there are any. Default value is `false`.
+       */
+      'showClearButton'?: boolean;
+      /**
+       * If truthy, it'll render the heading and component's description. Default value is `true`.
+       */
+      'showHeader'?: boolean;
+      /**
+       * If truthy, we'll use the sum of all categories' value to render the bar percentage. By default, we use the maximum category value to render the bar percentage.
+       */
+      'useTotalPercentage'?: boolean;
+      /**
+       * The number of visible categories without aggregation.
+       */
+      'visibleCategories'?: number;
+    }
+  }
+}
+
+
+declare global {
+
+  namespace StencilComponents {
     interface AsSwitch {
@@ -58,9 +165,77 @@
     export interface AsSwitchAttributes extends HTMLAttributes {
+      'onOnToggle'?: (event: CustomEvent) => void;
+    }
+  }
+}
 
+
+declare global {
+
+  namespace StencilComponents {
+    interface AsToolbarItem {
+      'src': string;
+      'text': string;
     }
   }
+
+  interface HTMLAsToolbarItemElement extends StencilComponents.AsToolbarItem, HTMLStencilElement {}
+
+  var HTMLAsToolbarItemElement: {
+    prototype: HTMLAsToolbarItemElement;
+    new (): HTMLAsToolbarItemElement;
+  };
+  interface HTMLElementTagNameMap {
+    'as-toolbar-item': HTMLAsToolbarItemElement;
+  }
+  interface ElementTagNameMap {
+    'as-toolbar-item': HTMLAsToolbarItemElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'as-toolbar-item': JSXElements.AsToolbarItemAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface AsToolbarItemAttributes extends HTMLAttributes {
+      'src'?: string;
+      'text'?: string;
+    }
+  }
 }
 
+
+declare global {
+
+  namespace StencilComponents {
+    interface AsToolbar {
+
+    }
+  }
+
+  interface HTMLAsToolbarElement extends StencilComponents.AsToolbar, HTMLStencilElement {}
+
+  var HTMLAsToolbarElement: {
+    prototype: HTMLAsToolbarElement;
+    new (): HTMLAsToolbarElement;
+  };
+  interface HTMLElementTagNameMap {
+    'as-toolbar': HTMLAsToolbarElement;
+  }
+  interface ElementTagNameMap {
+    'as-toolbar': HTMLAsToolbarElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'as-toolbar': JSXElements.AsToolbarAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface AsToolbarAttributes extends HTMLAttributes {
+
+    }
+  }
+}
+
 declare global { namespace JSX { interface StencilJSX {} } }
 
 export declare function defineCustomElements(window: any): void;

dist/types/components/as-switch/as-switch.d.ts

 import '../../stencil.core';
+import { EventEmitter } from '../../stencil.core';
 export declare class Switch {
+    onToggle: EventEmitter;
     render(): JSX.Element;
+    onInputChanged(event: any): void;
 }

package.json

 {
   "name": "@carto/airship-components",
-  "version": "1.0.0-alpha.26",
+  "version": "1.0.0-alpha.28",
   "description": "CARTO Airship components",
@@ -15,7 +15,7 @@ "module": "dist/esm/index.js",
     "dev": "stencil build --dev --watch --serve",
-    "lint:css-fix": "stylelint 'src/components/**/*.scss' --fix",
+    "lint:css:fix": "stylelint 'src/components/**/*.scss' --fix",
     "lint:css": "stylelint 'src/components/**/*.scss'",
-    "lint:fix": "npm run lint:css-fix",
-    "lint:ts": "tslint -c tslint.json 'src/**/*.ts'",
-    "lint": "npm run lint:ts & npm run lint:css",
+    "lint:fix": "npm run lint:css:fix",
+    "lint:ts": "tslint -c tslint.json src/components/**/*.{ts,tsx}",
+    "lint": "npm run lint:ts && npm run lint:css",
     "serve": "serve -p 5001",
@@ -26,5 +26,6 @@ "test:watch": "jest --watch",
   "devDependencies": {
-    "@stencil/core": "^0.10.0",
+    "@stencil/core": "0.11.0",
     "@stencil/sass": "0.0.5",
     "@types/jest": "^21.1.1",
+    "conventional-changelog-cli": "^2.0.1",
     "jest": "^21.2.1",
@@ -50,3 +51,3 @@ "lerna": "^2.11.0",
     "transform": {
-      "^.+\\.(ts|tsx)$": "../../node_modules/@stencil/core/testing/jest.preprocessor.js"
+      "^.+\\.(ts|tsx|js)$": "../../node_modules/@stencil/core/testing/jest.preprocessor.js"
     },
@@ -53,0 +54,0 @@ "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

350692

increased by123.98%

Number of package files

49

increased by75%

Lines of code

7336

increased by878.13%

Worsened metrics

Dev dependency count

11

increased by10%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes