@domoinc/domo-ui - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/collection/collection-manifest.json

@@ -89,3 +89,3 @@ {
         {
-          "event": "changed"
+          "event": "clicked"
         }
@@ -92,0 +92,0 @@ ],

dist/collection/components/button/button.js

@@ -31,5 +31,7 @@ export class Button {
         if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
             return;
         }
-        this.changed.emit(event);
+        this.clicked.emit(event);
     }
@@ -57,4 +59,4 @@ static get is() { return "domo-button"; }
     static get events() { return [{
-            "name": "changed",
-            "method": "changed",
+            "name": "clicked",
+            "method": "clicked",
             "bubbles": true,
@@ -61,0 +63,0 @@ "cancelable": true,

dist/collection/components/inline-alert/inline-alert.js

@@ -77,3 +77,3 @@ export class InlineAlert {
             this.message && h("div", { class: messageClassMap }, this.message),
-            this.actionName && (h("domo-button", { type: "quiet", color: "primary", onChanged: () => this.action() }, this.actionName)),
+            this.actionName && (h("domo-button", { type: "quiet", color: "primary", onClick: this.action.bind(this) }, this.actionName)),
             h("div", { class: "flex-spacer" }),
@@ -80,0 +80,0 @@ this.dismissable && (h("div", { class: "close", onClick: () => this.close() },

dist/domo-ui.js

 /*!
  * Built with http://stenciljs.com
- * 2018-06-02T22:10:38
+ * 2018-06-10T18:23:44
  */
-!function(e,t,o,i,n,s,a,r,c,d,l,u,m,p){for((l=e.DomoUi=e.DomoUi||{}).components=c,(m=c.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((u=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles",""),t.head.insertBefore(u,t.head.firstChild)),function(e,t,o){(e["s-apps"]=e["s-apps"]||[]).push("DomoUi"),o.componentOnReady||(o.componentOnReady=function(){var t=this;function o(o){if(t.nodeName.indexOf("-")>0){for(var i=e["s-apps"],n=0,s=0;s<i.length;s++)if(e[i[s]].componentOnReady){if(e[i[s]].componentOnReady(t,o))return;n++}if(n<i.length)return void(e["s-cr"]=e["s-cr"]||[]).push([t,o])}o(null)}return e.Promise?new e.Promise(o):{then:o}})}(e,0,d),n=n||l.resourcesUrl,u=(m=t.querySelectorAll("script")).length-1;u>=0&&!(p=m[u]).src&&!p.hasAttribute("data-resources-url");u--);m=p.getAttribute("data-resources-url"),!n&&m&&(n=m),!n&&p.src&&(n=(m=p.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"domo-ui/"),u=t.createElement("script"),function(e,t,o,i){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 o)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,u)?u.src=n+"domo-ui.crcebuej.js":(u.src=n+"domo-ui.vxb99cub.js",u.setAttribute("type","module"),u.setAttribute("crossorigin",!0)),u.setAttribute("data-resources-url",n),u.setAttribute("data-namespace","domo-ui"),t.head.appendChild(u)}(window,document,0,0,0,0,0,0,[["domo-badge","i0icmq8x",1,[["number",1,0,1,4],["short",1,0,1,3],["text",1,0,1,2],["type",1,0,1,2]],1],["domo-beta-badge","emz5e1b7",1,0,1],["domo-button","biec0fwy",1,[["color",1,0,1,2],["disabled",1,0,1,3],["iconButton",1,0,"icon-button",3],["type",1,0,1,2]],1],["domo-card","k8l1wlmj",1,[["type",1,0,1,2]],1],["domo-checkbox","frnbxufg",1,[["checked",2,0,1,3],["disabled",1,0,1,3],["el",7],["keyFocus",5],["name",1,0,1,2],["type",1,0,1,2],["value",1,0,1,2]]],["domo-file-picker","dwga1rdo",1,[["el",7],["fileName",2,0,"file-name",2],["fileTypes",1,0,"file-types",2],["useCustomHandler",1,0,"use-custom-handler",3]],1],["domo-inline-alert","biec0fwy",1,[["actionName",1,0,"action-name",2],["dismissable",1,0,1,3],["message",1,0,1,2],["type",1,0,1,2]],1],["domo-input","1ay0ncm0",1,[["disabled",1,0,1,3],["hasIcon",1,0,"has-icon",3],["placeholder",1,0,1,2],["state",1,0,1,2],["value",2,0,1,2]],1],["domo-loading-blocks","p7hkttym",1,[["size",1,0,1,2]],1],["domo-pagination","2vj3cnts",1,[["selectedPage",2,0,"selected-page",4],["totalPages",1,0,"total-pages",4],["viewCount",1,0,"view-count",4]],1],["domo-pill","vu9izbvu",1,[["disabled",1,0,1,3],["hasLeftIcon",1,0,"has-left-icon",3],["hasRightIcon",1,0,"has-right-icon",3],["removable",1,0,1,3],["type",1,0,1,2]],1],["domo-progress-bar","vaak9z4w",1,[["progress",1,0,1,4],["size",1,0,1,2]],1],["domo-radio","5jv2tqrj",1,[["checked",2,0,1,3],["disabled",1,0,1,3],["el",7],["keyFocus",5],["name",1,0,1,2],["value",1,0,1,2]],1],["domo-tab","2iy8dhyg",1,[["active",2,0,1,3],["btnId",1,0,"btn-id",2],["disabled",1,0,1,3],["el",7],["getTabId",6],["position",1,0,1,2],["setActive",6],["vertical",1,0,1,3]],1,[["click","onClick"]]],["domo-tabs","h6kh13ne",1,[["el",7],["getTab",6],["select",6],["selectedTab",5],["tabStyle",1,0,"tab-style",2],["tabs",5]],1,[["domoTabClick","tabChange"]]]],HTMLElement.prototype);
+!function(e,t,o,i,n,s,a,r,c,d,l,u,m,p){for((l=e.DomoUi=e.DomoUi||{}).components=c,(m=c.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((u=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles",""),t.head.insertBefore(u,t.head.firstChild)),function(e,t,o){(e["s-apps"]=e["s-apps"]||[]).push("DomoUi"),o.componentOnReady||(o.componentOnReady=function(){var t=this;function o(o){if(t.nodeName.indexOf("-")>0){for(var i=e["s-apps"],n=0,s=0;s<i.length;s++)if(e[i[s]].componentOnReady){if(e[i[s]].componentOnReady(t,o))return;n++}if(n<i.length)return void(e["s-cr"]=e["s-cr"]||[]).push([t,o])}o(null)}return e.Promise?new e.Promise(o):{then:o}})}(e,0,d),n=n||l.resourcesUrl,u=(m=t.querySelectorAll("script")).length-1;u>=0&&!(p=m[u]).src&&!p.hasAttribute("data-resources-url");u--);m=p.getAttribute("data-resources-url"),!n&&m&&(n=m),!n&&p.src&&(n=(m=p.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"domo-ui/"),u=t.createElement("script"),function(e,t,o,i){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 o)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,u)?u.src=n+"domo-ui.crcebuej.js":(u.src=n+"domo-ui.vxb99cub.js",u.setAttribute("type","module"),u.setAttribute("crossorigin",!0)),u.setAttribute("data-resources-url",n),u.setAttribute("data-namespace","domo-ui"),t.head.appendChild(u)}(window,document,0,0,0,0,0,0,[["domo-badge","i0icmq8x",1,[["number",1,0,1,4],["short",1,0,1,3],["text",1,0,1,2],["type",1,0,1,2]],1],["domo-beta-badge","emz5e1b7",1,0,1],["domo-button","81d7ecnj",1,[["color",1,0,1,2],["disabled",1,0,1,3],["iconButton",1,0,"icon-button",3],["type",1,0,1,2]],1],["domo-card","k8l1wlmj",1,[["type",1,0,1,2]],1],["domo-checkbox","frnbxufg",1,[["checked",2,0,1,3],["disabled",1,0,1,3],["el",7],["keyFocus",5],["name",1,0,1,2],["type",1,0,1,2],["value",1,0,1,2]]],["domo-file-picker","dwga1rdo",1,[["el",7],["fileName",2,0,"file-name",2],["fileTypes",1,0,"file-types",2],["useCustomHandler",1,0,"use-custom-handler",3]],1],["domo-inline-alert","81d7ecnj",1,[["actionName",1,0,"action-name",2],["dismissable",1,0,1,3],["message",1,0,1,2],["type",1,0,1,2]],1],["domo-input","1ay0ncm0",1,[["disabled",1,0,1,3],["hasIcon",1,0,"has-icon",3],["placeholder",1,0,1,2],["state",1,0,1,2],["value",2,0,1,2]],1],["domo-loading-blocks","p7hkttym",1,[["size",1,0,1,2]],1],["domo-pagination","2vj3cnts",1,[["selectedPage",2,0,"selected-page",4],["totalPages",1,0,"total-pages",4],["viewCount",1,0,"view-count",4]],1],["domo-pill","vu9izbvu",1,[["disabled",1,0,1,3],["hasLeftIcon",1,0,"has-left-icon",3],["hasRightIcon",1,0,"has-right-icon",3],["removable",1,0,1,3],["type",1,0,1,2]],1],["domo-progress-bar","vaak9z4w",1,[["progress",1,0,1,4],["size",1,0,1,2]],1],["domo-radio","5jv2tqrj",1,[["checked",2,0,1,3],["disabled",1,0,1,3],["el",7],["keyFocus",5],["name",1,0,1,2],["value",1,0,1,2]],1],["domo-tab","2iy8dhyg",1,[["active",2,0,1,3],["btnId",1,0,"btn-id",2],["disabled",1,0,1,3],["el",7],["getTabId",6],["position",1,0,1,2],["setActive",6],["vertical",1,0,1,3]],1,[["click","onClick"]]],["domo-tabs","h6kh13ne",1,[["el",7],["getTab",6],["select",6],["selectedTab",5],["tabStyle",1,0,"tab-style",2],["tabs",5]],1,[["domoTabClick","tabChange"]]]],HTMLElement.prototype);

dist/esm/es5/domo-ui.components.js

@@ -7,3 +7,3 @@ // DomoUi: Host Data, ES Module/ES5 Target
 
-export var Button = ["domo-button",function(){return(import("./biec0fwy.js")).then(function(m){return m.DomoButton})},1,[["color",1,0,1,2],["disabled",1,0,1,3],["iconButton",1,0,"icon-button",3],["type",1,0,1,2]],1];
+export var Button = ["domo-button",function(){return(import("./81d7ecnj.js")).then(function(m){return m.DomoButton})},1,[["color",1,0,1,2],["disabled",1,0,1,3],["iconButton",1,0,"icon-button",3],["type",1,0,1,2]],1];
 
@@ -16,3 +16,3 @@ export var Card = ["domo-card",function(){return(import("./k8l1wlmj.js")).then(function(m){return m.DomoCard})},1,[["type",1,0,1,2]],1];
 
-export var InlineAlert = ["domo-inline-alert",function(){return(import("./biec0fwy.js")).then(function(m){return m.DomoInlineAlert})},1,[["actionName",1,0,"action-name",2],["dismissable",1,0,1,3],["message",1,0,1,2],["type",1,0,1,2]],1];
+export var InlineAlert = ["domo-inline-alert",function(){return(import("./81d7ecnj.js")).then(function(m){return m.DomoInlineAlert})},1,[["actionName",1,0,"action-name",2],["dismissable",1,0,1,3],["message",1,0,1,2],["type",1,0,1,2]],1];
 
@@ -19,0 +19,0 @@ export var Input = ["domo-input",function(){return(import("./1ay0ncm0.js")).then(function(m){return m.DomoInput})},1,[["disabled",1,0,1,3],["hasIcon",1,0,"has-icon",3],["placeholder",1,0,1,2],["state",1,0,1,2],["value",2,0,1,2]],1];

dist/types/components.d.ts

@@ -165,3 +165,3 @@ import './stencil.core';
        */
-      'onChanged'?: (event: CustomEvent<UIEvent>) => void;
+      'onClicked'?: (event: CustomEvent<UIEvent>) => void;
       /**
@@ -168,0 +168,0 @@ * A string of the button type, Can be 'default', 'quiet', or 'link' (i.e. no background by default)

dist/types/components/button/button.d.ts

@@ -23,5 +23,5 @@ import '../../stencil.core';
      */
-    changed: EventEmitter<UIEvent>;
+    clicked: EventEmitter<UIEvent>;
     render(): JSX.Element;
     handleClick(event: UIEvent): void;
 }

package.json

 {
   "name": "@domoinc/domo-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A collection of Domo web components built using Stencil",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

README.md

 # Domo UI
 
+[![npm](https://img.shields.io/npm/v/@domoinc/domo-ui.svg)](https://www.npmjs.com/package/@domoinc/domo-ui)
+[![npm](https://img.shields.io/npm/dt/@domoinc/domo-ui.svg)](https://www.npmjs.com/package/@domoinc/domo-ui)
+[![npm](https://img.shields.io/npm/dm/@domoinc/domo-ui.svg)](https://www.npmjs.com/package/@domoinc/domo-ui)
+
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
@@ -21,17 +25,50 @@
 
-- Put a script tag similar to this `<script src='https://unpkg.com/@domoinc/domo-ui@0.0.1/dist/domo-ui.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
+- Put a script tag similar to this `<script src='https://unpkg.com/@domoinc/domo-ui@{LATEST_VERSION}/dist/domo-ui.js'></script>`, replacing `{LATEST_VERSION}` with the latest released version of the library, in the head of your index.html
+- Then you can use the elements anywhere in your template, JSX, html etc
 
-### Node Modules
+### In an Angular CLI app
 
 - Run `npm install @domoinc/domo-ui --save` or `yarn add @domoinc/domo-ui`
-- Put a script tag similar to this `<script src='node_modules/@domoinc/domo-ui/dist/domo-ui.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
+- In your `AppModule`, import the `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and add that to your `schemas` array, like so:
 
-### In a stencil-starter app
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
 
-- Run `npm install domo-ui --save`
-- Add an import to the npm packages `import domo-ui;`
-- Then you can use the element anywhere in your template, JSX, html etc
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```
 
+- Import the `defineCustomElements` function from the library and include it in your `main.ts` file, like so:
+
+```ts
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { defineCustomElements } from '@domoinc/domo-ui';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.log(err));
+
+// Call the imported function from the library, passing in window
+defineCustomElements(window);
+```
+
+- Then you can use the elements anywhere in your HTML, templates, etc.
+
 _More instructions coming soon_

No alert changes

Improved metrics

Number of lines in readme file

74

100%

Worsened metrics

Total package byte prevSize

610201

-11.03%

Number of package files

168

-3.45%

Lines of code

4091

-40.95%

No dependency changes