@tradeshift/elements.header - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

lib/header.esm.js

@@ -1,1 +0,1 @@
-import{customElementDefineHelper as o,html as t,TSElement as r,unsafeCSS as e}from"@tradeshift/elements";import"@tradeshift/elements.app-icon";function l(o,t){for(var r=0;r<t.length;r++){var e=t[r];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}function c(o,t,r){return t&&l(o.prototype,t),r&&l(o,r),o}function n(o,t){return t||(t=o.slice(0)),o.raw=t,o}function i(){var o=n(["\n\t\t\t\t<header dir=",">\n\t\t\t\t\t"," ","\n\t\t\t\t\t<slot> </slot>\n\t\t\t\t</header>\n\t\t\t"]);return i=function(){return o},o}function a(){var o=n(['\n\t\t\t\t<span class="title">',"</span>\n\t\t\t"]);return a=function(){return o},o}function s(){var o=n(['\n\t\t\t\t<ts-app-icon class="icon" src="','" alt="','"></ts-app-icon>\n\t\t\t']);return s=function(){return o},o}o("ts-header",function(o){var l,n;function h(){var t=o.call(this)||this;return t.color="white",t}n=o,(l=h).prototype=Object.create(n.prototype),l.prototype.constructor=l,l.__proto__=n,c(h,null,[{key:"styles",get:function(){return[r.styles,e(":host>header{min-width:100vw;max-width:100vw;width:100vw;height:60px;height:var(--ts-unit-triple);background-color:#fff;background-color:var(--ts-color-white);border-bottom:1px solid #cbd7dc;border-bottom:var(--ts-border);display:flex;align-items:center;flex-direction:row}:host .icon{height:40px;height:var(--ts-unit-double)}:host .icon,:host .title{margin-left:10px;margin-left:var(--ts-unit-half)}:host .title{font-size:18px;font-size:var(--ts-fontsize-big)}::slotted(:first-of-type){margin-left:auto}::slotted(*){margin-right:10px;margin-right:var(--ts-unit-half)}[dir=rtl] ::slotted(*){margin-left:10px;margin-left:var(--ts-unit-half)}[dir=rtl] ::slotted(:first-of-type){margin-right:auto}:host([color=black])>header{background-color:#0f151a;background-color:var(--ts-color-black)}:host([color=black]) .title{color:#fff;color:var(--ts-color-white)}:host([color=red])>header{background-color:#bd0000;background-color:var(--ts-color-red)}:host([color=red]) .title{color:#fff;color:var(--ts-color-white)}:host([color=orange])>header{background-color:#ff8c00;background-color:var(--ts-color-orange)}:host([color=orange]) .title{color:#fff;color:var(--ts-color-white)}:host([color=yellow])>header{background-color:#fdbe12;background-color:var(--ts-color-yellow)}:host([color=yellow]) .title{color:#fff;color:var(--ts-color-white)}:host([color=green])>header{background-color:#50c610;background-color:var(--ts-color-green)}:host([color=green]) .title{color:#fff;color:var(--ts-color-white)}:host([color=blue])>header{background-color:#00aeff;background-color:var(--ts-color-blue)}:host([color=blue]) .title{color:#fff;color:var(--ts-color-white)}:host([color=purple])>header{background-color:#90129b;background-color:var(--ts-color-purple)}:host([color=purple]) .title{color:#fff;color:var(--ts-color-white)}:host([color=pink])>header{background-color:#a70262;background-color:var(--ts-color-pink)}:host([color=pink]) .title{color:#fff;color:var(--ts-color-white)}:host([color=gray])>header{background-color:#9ab2bc;background-color:var(--ts-color-gray)}:host([color=gray]) .title{color:#fff;color:var(--ts-color-white)}:host([color=slate])>header{background-color:#1f2a2e;background-color:var(--ts-color-slate)}:host([color=slate]) .title{color:#fff;color:var(--ts-color-white)}:host([color=white])>header{background-color:#fff;background-color:var(--ts-color-white)}:host([color=white]) .title{color:#0f151a;color:var(--ts-color-black)}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0},icon:{type:String,reflect:!0},title:{type:String,reflect:!0},color:{type:String,reflect:!0}}}}]);var f=h.prototype;return f.getIcon=function(){return this.icon?t(s(),this.icon,this.title):""},f.getTitle=function(){return this.title?t(a(),this.title):""},f.render=function(){return t(i(),this.direction,this.getIcon(),this.getTitle())},c(h,[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}}]),h}(r));
+import{customElementDefineHelper as o,html as t,TSElement as r,unsafeCSS as e}from"@tradeshift/elements";import"@tradeshift/elements.app-icon";function c(o,t){for(var r=0;r<t.length;r++){var e=t[r];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}function l(o,t,r){return t&&c(o.prototype,t),r&&c(o,r),o}function n(o,t){return t||(t=o.slice(0)),o.raw=t,o}function i(){var o=n(["\n\t\t\t\t<header dir=",'>\n\t\t\t\t\t<div class="title-icon-container">\n\t\t\t\t\t\t'," ",'\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="slot-container">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</header>\n\t\t\t']);return i=function(){return o},o}function a(){var o=n(['\n\t\t\t\t<span class="title">',"</span>\n\t\t\t"]);return a=function(){return o},o}function s(){var o=n(['\n\t\t\t\t<ts-app-icon class="icon" src="','" alt="','"></ts-app-icon>\n\t\t\t']);return s=function(){return o},o}o("ts-header",function(o){var c,n;function h(){var t=o.call(this)||this;return t.color="white",t}n=o,(c=h).prototype=Object.create(n.prototype),c.prototype.constructor=c,c.__proto__=n,l(h,null,[{key:"styles",get:function(){return[r.styles,e(":host{border-bottom:1px solid #cbd7dc;border-bottom:var(--ts-border);height:60px;height:var(--ts-unit-triple)}:host,:host>header{display:flex;width:100%}:host>header{background-color:#fff;background-color:var(--ts-color-white);align-items:center;justify-content:space-between}:host .icon{height:40px;height:var(--ts-unit-double)}:host .icon,:host .title{margin-left:10px;margin-left:var(--ts-unit-half)}:host .title{font-size:18px;font-size:var(--ts-fontsize-big)}.title-icon-container{align-items:center;display:flex}.slot-container{margin:0 10px;margin:0 var(--ts-unit-half)}[dir=rtl] .icon,[dir=rtl] .title{margin-left:0;margin-right:10px;margin-right:var(--ts-unit-half)}:host([color=black])>header{background-color:#0f151a;background-color:var(--ts-color-black)}:host([color=black]) .title{color:#fff;color:var(--ts-color-white)}:host([color=red])>header{background-color:#bd0000;background-color:var(--ts-color-red)}:host([color=red]) .title{color:#fff;color:var(--ts-color-white)}:host([color=orange])>header{background-color:#ff8c00;background-color:var(--ts-color-orange)}:host([color=orange]) .title{color:#fff;color:var(--ts-color-white)}:host([color=yellow])>header{background-color:#fdbe12;background-color:var(--ts-color-yellow)}:host([color=yellow]) .title{color:#fff;color:var(--ts-color-white)}:host([color=green])>header{background-color:#50c610;background-color:var(--ts-color-green)}:host([color=green]) .title{color:#fff;color:var(--ts-color-white)}:host([color=blue])>header{background-color:#00aeff;background-color:var(--ts-color-blue)}:host([color=blue]) .title{color:#fff;color:var(--ts-color-white)}:host([color=purple])>header{background-color:#90129b;background-color:var(--ts-color-purple)}:host([color=purple]) .title{color:#fff;color:var(--ts-color-white)}:host([color=pink])>header{background-color:#a70262;background-color:var(--ts-color-pink)}:host([color=pink]) .title{color:#fff;color:var(--ts-color-white)}:host([color=gray])>header{background-color:#9ab2bc;background-color:var(--ts-color-gray)}:host([color=gray]) .title{color:#fff;color:var(--ts-color-white)}:host([color=slate])>header{background-color:#1f2a2e;background-color:var(--ts-color-slate)}:host([color=slate]) .title{color:#fff;color:var(--ts-color-white)}:host([color=white])>header{background-color:#fff;background-color:var(--ts-color-white)}:host([color=white]) .title{color:#0f151a;color:var(--ts-color-black)}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0},icon:{type:String,reflect:!0},title:{type:String,reflect:!0},color:{type:String,reflect:!0}}}}]);var f=h.prototype;return f.getIcon=function(){return this.icon?t(s(),this.icon,this.title):""},f.getTitle=function(){return this.title?t(a(),this.title):""},f.render=function(){return t(i(),this.direction,this.getIcon(),this.getTitle())},l(h,[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}}]),h}(r));

lib/header.umd.js

@@ -1,197 +0,1 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('@tradeshift/elements')) :
-  typeof define === 'function' && define.amd ? define(['@tradeshift/elements'], factory) :
-  (global = global || self, factory(global.ts.elements));
-}(this, function (elements) { 'use strict';
-
-  function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-  }
-
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
-  }
-
-  function _taggedTemplateLiteralLoose(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    strings.raw = raw;
-    return strings;
-  }
-
-  function i(t, e) {
-    for (var r = 0; r < e.length; r++) {
-      var n = e[r];
-      n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n);
-    }
-  }
-
-  function o() {
-    var t,
-        e,
-        r = (t = ['\n\t\t\t\t<img .src="', '" .alt="', '"></img>\n\t\t\t'], e || (e = t.slice(0)), t.raw = e, t);
-    return o = function o() {
-      return r;
-    }, r;
-  }
-
-  elements.customElementDefineHelper("ts-app-icon", function (t) {
-    var u, p, a, s, c;
-
-    function l() {
-      var e = t.call(this) || this;
-      return e.type = "", e;
-    }
-
-    return p = t, (u = l).prototype = Object.create(p.prototype), u.prototype.constructor = u, u.__proto__ = p, a = l, c = [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(":host img{width:40px;width:var(--ts-unit-double);height:40px;height:var(--ts-unit-double);border-radius:3px;border-radius:var(--ts-radius)}")];
-      }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          type: {
-            type: String,
-            reflect: !0
-          },
-          src: {
-            type: String,
-            reflect: !0
-          },
-          alt: {
-            type: String,
-            reflect: !0
-          }
-        };
-      }
-    }], (s = null) && i(a.prototype, s), c && i(a, c), l.prototype.render = function () {
-      return elements.html(o(), this.src, this.alt);
-    }, l;
-  }(elements.TSElement));
-
-  var css = "/* General........................................................ */\n\n:host > header {\n\t\tmin-width: 100vw;\n\t\tmax-width: 100vw;\n\t\twidth: 100vw;\n\t\theight: calc(3 * 20px);\n\t\theight: var(--ts-unit-triple);\n\t\tbackground-color: rgb(255, 255, 255);\n\t\tbackground-color: var(--ts-color-white);\n\t\tborder-bottom: 1px solid rgb(203, 215, 220);\n\t\tborder-bottom: var(--ts-border);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-direction: row;\n\t}\n\n:host .icon {\n\t\tmargin-left: calc(0.5 * 20px);\n\t\tmargin-left: var(--ts-unit-half);\n\t\theight: calc(2 * 20px);\n\t\theight: var(--ts-unit-double);\n\t}\n\n:host .title {\n\t\tfont-size: 18px;\n\t\tfont-size: var(--ts-fontsize-big);\n\t\tmargin-left: calc(0.5 * 20px);\n\t\tmargin-left: var(--ts-unit-half);\n\t}\n\n::slotted(:first-of-type) {\n\tmargin-left: auto;\n}\n\n::slotted(*) {\n\tmargin-right: calc(0.5 * 20px);\n\tmargin-right: var(--ts-unit-half);\n}\n\n/* Right to left................................................... */\n\n[dir='rtl'] ::slotted(*) {\n\t\tmargin-left: calc(0.5 * 20px);\n\t\tmargin-left: var(--ts-unit-half);\n\t}\n\n[dir='rtl'] ::slotted(:first-of-type) {\n\t\tmargin-right: auto;\n\t}\n\n/* Colors......................................................... */\n\n:host([color='black']) > header {\n\t\tbackground-color: rgb(15, 21, 26);\n\t\tbackground-color: var(--ts-color-black);\n\t}\n\n:host([color='black']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='red']) > header {\n\t\tbackground-color: rgb(189, 0, 0);\n\t\tbackground-color: var(--ts-color-red);\n\t}\n\n:host([color='red']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='orange']) > header {\n\t\tbackground-color: rgb(255, 140, 0);\n\t\tbackground-color: var(--ts-color-orange);\n\t}\n\n:host([color='orange']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='yellow']) > header {\n\t\tbackground-color: rgb(253, 190, 18);\n\t\tbackground-color: var(--ts-color-yellow);\n\t}\n\n:host([color='yellow']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='green']) > header {\n\t\tbackground-color: rgb(80, 198, 16);\n\t\tbackground-color: var(--ts-color-green);\n\t}\n\n:host([color='green']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='blue']) > header {\n\t\tbackground-color: rgb(0, 174, 255);\n\t\tbackground-color: var(--ts-color-blue);\n\t}\n\n:host([color='blue']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='purple']) > header {\n\t\tbackground-color: rgb(144, 18, 155);\n\t\tbackground-color: var(--ts-color-purple);\n\t}\n\n:host([color='purple']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='pink']) > header {\n\t\tbackground-color: rgb(167, 2, 98);\n\t\tbackground-color: var(--ts-color-pink);\n\t}\n\n:host([color='pink']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='gray']) > header {\n\t\tbackground-color: rgb(154, 178, 188);\n\t\tbackground-color: var(--ts-color-gray);\n\t}\n\n:host([color='gray']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='slate']) > header {\n\t\tbackground-color: rgb(31, 42, 46);\n\t\tbackground-color: var(--ts-color-slate);\n\t}\n\n:host([color='slate']) .title {\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t}\n\n:host([color='white']) > header {\n\t\tbackground-color: rgb(255, 255, 255);\n\t\tbackground-color: var(--ts-color-white);\n\t}\n\n:host([color='white']) .title {\n\t\tcolor: rgb(15, 21, 26);\n\t\tcolor: var(--ts-color-black);\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhlYWRlci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FOztBQUduRTtFQUNDLGdCQUFnQjtFQUNoQixnQkFBZ0I7RUFDaEIsWUFBWTtFQUNaLHNCQUE2QjtFQUE3Qiw2QkFBNkI7RUFDN0Isb0NBQXVDO0VBQXZDLHVDQUF1QztFQUN2QywyQ0FBK0I7RUFBL0IsK0JBQStCO0VBQy9CLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsbUJBQW1CO0NBQ3BCOztBQUVBO0VBQ0MsNkJBQWdDO0VBQWhDLGdDQUFnQztFQUNoQyxzQkFBaUM7RUFBakMsNkJBQWlDO0NBQ2xDOztBQUVBO0VBQ0MsZUFBaUM7RUFBakMsaUNBQWlDO0VBQ2pDLDZCQUFnQztFQUFoQyxnQ0FBZ0M7Q0FDakM7O0FBR0Q7Q0FDQyxpQkFBaUI7QUFDbEI7O0FBRUE7Q0FDQyw4QkFBaUM7Q0FBakMsaUNBQWlDO0FBQ2xDOztBQUVBLHFFQUFxRTs7QUFHcEU7RUFDQyw2QkFBZ0M7RUFBaEMsZ0NBQWdDO0NBQ2pDOztBQUVBO0VBQ0Msa0JBQWtCO0NBQ25COztBQUdELG9FQUFvRTs7QUFHbkU7RUFDQyxpQ0FBdUM7RUFBdkMsdUNBQXVDO0NBQ3hDOztBQUVBO0VBQ0MseUJBQTRCO0VBQTVCLDRCQUE0QjtDQUM3Qjs7QUFJQTtFQUNDLGdDQUFxQztFQUFyQyxxQ0FBcUM7Q0FDdEM7O0FBRUE7RUFDQyx5QkFBNEI7RUFBNUIsNEJBQTRCO0NBQzdCOztBQUlBO0VBQ0Msa0NBQXdDO0VBQXhDLHdDQUF3QztDQUN6Qzs7QUFFQTtFQUNDLHlCQUE0QjtFQUE1Qiw0QkFBNEI7Q0FDN0I7O0FBSUE7RUFDQyxtQ0FBd0M7RUFBeEMsd0NBQXdDO0NBQ3pDOztBQUVBO0VBQ0MseUJBQTRCO0VBQTVCLDRCQUE0QjtDQUM3Qjs7QUFJQTtFQUNDLGtDQUF1QztFQUF2Qyx1Q0FBdUM7Q0FDeEM7O0FBRUE7RUFDQyx5QkFBNEI7RUFBNUIsNEJBQTRCO0NBQzdCOztBQUlBO0VBQ0Msa0NBQXNDO0VBQXRDLHNDQUFzQztDQUN2Qzs7QUFFQTtFQUNDLHlCQUE0QjtFQUE1Qiw0QkFBNEI7Q0FDN0I7O0FBSUE7RUFDQyxtQ0FBd0M7RUFBeEMsd0NBQXdDO0NBQ3pDOztBQUVBO0VBQ0MseUJBQTRCO0VBQTVCLDRCQUE0QjtDQUM3Qjs7QUFJQTtFQUNDLGlDQUFzQztFQUF0QyxzQ0FBc0M7Q0FDdkM7O0FBRUE7RUFDQyx5QkFBNEI7RUFBNUIsNEJBQTRCO0NBQzdCOztBQUlBO0VBQ0Msb0NBQXNDO0VBQXRDLHNDQUFzQztDQUN2Qzs7QUFFQTtFQUNDLHlCQUE0QjtFQUE1Qiw0QkFBNEI7Q0FDN0I7O0FBSUE7RUFDQyxpQ0FBdUM7RUFBdkMsdUNBQXVDO0NBQ3hDOztBQUVBO0VBQ0MseUJBQTRCO0VBQTVCLDRCQUE0QjtDQUM3Qjs7QUFJQTtFQUNDLG9DQUF1QztFQUF2Qyx1Q0FBdUM7Q0FDeEM7O0FBRUE7RUFDQyxzQkFBNEI7RUFBNUIsNEJBQTRCO0NBQzdCIiwiZmlsZSI6ImhlYWRlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHQmID4gaGVhZGVyIHtcblx0XHRtaW4td2lkdGg6IDEwMHZ3O1xuXHRcdG1heC13aWR0aDogMTAwdnc7XG5cdFx0d2lkdGg6IDEwMHZ3O1xuXHRcdGhlaWdodDogdmFyKC0tdHMtdW5pdC10cmlwbGUpO1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0XHRib3JkZXItYm90dG9tOiB2YXIoLS10cy1ib3JkZXIpO1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHR9XG5cblx0JiAuaWNvbiB7XG5cdFx0bWFyZ2luLWxlZnQ6IHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdFx0YmxvY2stc2l6ZTogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGZvbnQtc2l6ZTogdmFyKC0tdHMtZm9udHNpemUtYmlnKTtcblx0XHRtYXJnaW4tbGVmdDogdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0fVxufVxuXG46OnNsb3R0ZWQoOmZpcnN0LW9mLXR5cGUpIHtcblx0bWFyZ2luLWxlZnQ6IGF1dG87XG59XG5cbjo6c2xvdHRlZCgqKSB7XG5cdG1hcmdpbi1yaWdodDogdmFyKC0tdHMtdW5pdC1oYWxmKTtcbn1cblxuLyogUmlnaHQgdG8gbGVmdC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuXG5bZGlyPSdydGwnXSB7XG5cdCYgOjpzbG90dGVkKCopIHtcblx0XHRtYXJnaW4tbGVmdDogdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0fVxuXG5cdCYgOjpzbG90dGVkKDpmaXJzdC1vZi10eXBlKSB7XG5cdFx0bWFyZ2luLXJpZ2h0OiBhdXRvO1xuXHR9XG59XG5cbi8qIENvbG9ycy4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuXG46aG9zdChbY29sb3I9J2JsYWNrJ10pIHtcblx0JiA+IGhlYWRlciB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmxhY2spO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoW2NvbG9yPSdyZWQnXSkge1xuXHQmID4gaGVhZGVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1yZWQpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoW2NvbG9yPSdvcmFuZ2UnXSkge1xuXHQmID4gaGVhZGVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1vcmFuZ2UpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoW2NvbG9yPSd5ZWxsb3cnXSkge1xuXHQmID4gaGVhZGVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci15ZWxsb3cpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoW2NvbG9yPSdncmVlbiddKSB7XG5cdCYgPiBoZWFkZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWdyZWVuKTtcblx0fVxuXG5cdCYgLnRpdGxlIHtcblx0XHRjb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR9XG59XG5cbjpob3N0KFtjb2xvcj0nYmx1ZSddKSB7XG5cdCYgPiBoZWFkZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoW2NvbG9yPSdwdXJwbGUnXSkge1xuXHQmID4gaGVhZGVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1wdXJwbGUpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci13aGl0ZSk7XG5cdH1cbn1cblxuOmhvc3QoW2NvbG9yPSdwaW5rJ10pIHtcblx0JiA+IGhlYWRlciB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3ItcGluayk7XG5cdH1cblxuXHQmIC50aXRsZSB7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0fVxufVxuXG46aG9zdChbY29sb3I9J2dyYXknXSkge1xuXHQmID4gaGVhZGVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1ncmF5KTtcblx0fVxuXG5cdCYgLnRpdGxlIHtcblx0XHRjb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR9XG59XG5cbjpob3N0KFtjb2xvcj0nc2xhdGUnXSkge1xuXHQmID4gaGVhZGVyIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cy1jb2xvci1zbGF0ZSk7XG5cdH1cblxuXHQmIC50aXRsZSB7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0fVxufVxuXG46aG9zdChbY29sb3I9J3doaXRlJ10pIHtcblx0JiA+IGhlYWRlciB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHR9XG5cblx0JiAudGl0bGUge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibGFjayk7XG5cdH1cbn1cbiJdfQ== */";
-
-  function _templateObject3() {
-    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<header dir=", ">\n\t\t\t\t\t", " ", "\n\t\t\t\t\t<slot> </slot>\n\t\t\t\t</header>\n\t\t\t"]);
-
-    _templateObject3 = function _templateObject3() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject2() {
-    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<span class=\"title\">", "</span>\n\t\t\t"]);
-
-    _templateObject2 = function _templateObject2() {
-      return data;
-    };
-
-    return data;
-  }
-
-  function _templateObject() {
-    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t<ts-app-icon class=\"icon\" src=\"", "\" alt=\"", "\"></ts-app-icon>\n\t\t\t"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  elements.customElementDefineHelper('ts-header',
-  /*#__PURE__*/
-  function (_TSElement) {
-    _inheritsLoose(_class, _TSElement);
-
-    _createClass(_class, null, [{
-      key: "styles",
-      get: function get() {
-        return [elements.TSElement.styles, elements.unsafeCSS(css)];
-      }
-    }, {
-      key: "properties",
-      get: function get() {
-        return {
-          dir: {
-            type: String,
-            reflect: true
-          },
-          icon: {
-            type: String,
-            reflect: true
-          },
-          title: {
-            type: String,
-            reflect: true
-          },
-          color: {
-            type: String,
-            reflect: true
-          }
-        };
-      }
-    }]);
-
-    function _class() {
-      var _this;
-
-      _this = _TSElement.call(this) || this; // Make the color when we use it.
-
-      _this.color = 'white';
-      return _this;
-    }
-
-    var _proto = _class.prototype;
-
-    _proto.getIcon = function getIcon() {
-      if (!this.icon) {
-        return '';
-      }
-
-      return elements.html(_templateObject(), this.icon, this.title);
-    };
-
-    _proto.getTitle = function getTitle() {
-      if (!this.title) {
-        return '';
-      }
-
-      return elements.html(_templateObject2(), this.title);
-    };
-
-    _proto.render = function render() {
-      return elements.html(_templateObject3(), this.direction, this.getIcon(), this.getTitle());
-    };
-
-    _createClass(_class, [{
-      key: "direction",
-      get: function get() {
-        return this.dir ? this.dir : this.bodyDir;
-      }
-    }]);
-
-    return _class;
-  }(elements.TSElement));
-
-}));
-//# sourceMappingURL=header.umd.js.map
+!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["@tradeshift/elements"],o):o((t=t||self).ts.elements)}(this,function(t){"use strict";function o(t,o){for(var r=0;r<o.length;r++){var e=o[r];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function r(t,r,e){return r&&o(t.prototype,r),e&&o(t,e),t}function e(t,o){return o||(o=t.slice(0)),t.raw=o,t}function n(t,o){for(var r=0;r<o.length;r++){var e=o[r];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function l(){var t,o,r=(t=['\n\t\t\t\t<img .src="','" .alt="','"></img>\n\t\t\t'],o||(o=t.slice(0)),t.raw=o,t);return l=function(){return r},r}t.customElementDefineHelper("ts-app-icon",function(o){var r,e,c,i;function a(){var t=o.call(this)||this;return t.type="",t}return e=o,(r=a).prototype=Object.create(e.prototype),r.prototype.constructor=r,r.__proto__=e,c=a,i=[{key:"styles",get:function(){return[t.TSElement.styles,t.unsafeCSS(":host img{width:40px;width:var(--ts-unit-double);height:40px;height:var(--ts-unit-double);border-radius:3px;border-radius:var(--ts-radius)}")]}},{key:"properties",get:function(){return{type:{type:String,reflect:!0},src:{type:String,reflect:!0},alt:{type:String,reflect:!0}}}}],null&&n(c.prototype,null),i&&n(c,i),a.prototype.render=function(){return t.html(l(),this.src,this.alt)},a}(t.TSElement));function c(){var t=e(["\n\t\t\t\t<header dir=",'>\n\t\t\t\t\t<div class="title-icon-container">\n\t\t\t\t\t\t'," ",'\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="slot-container">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</header>\n\t\t\t']);return c=function(){return t},t}function i(){var t=e(['\n\t\t\t\t<span class="title">',"</span>\n\t\t\t"]);return i=function(){return t},t}function a(){var t=e(['\n\t\t\t\t<ts-app-icon class="icon" src="','" alt="','"></ts-app-icon>\n\t\t\t']);return a=function(){return t},t}t.customElementDefineHelper("ts-header",function(o){var e,n;function l(){var t=o.call(this)||this;return t.color="white",t}n=o,(e=l).prototype=Object.create(n.prototype),e.prototype.constructor=e,e.__proto__=n,r(l,null,[{key:"styles",get:function(){return[t.TSElement.styles,t.unsafeCSS(":host{border-bottom:1px solid #cbd7dc;border-bottom:var(--ts-border);height:60px;height:var(--ts-unit-triple)}:host,:host>header{display:flex;width:100%}:host>header{background-color:#fff;background-color:var(--ts-color-white);align-items:center;justify-content:space-between}:host .icon{height:40px;height:var(--ts-unit-double)}:host .icon,:host .title{margin-left:10px;margin-left:var(--ts-unit-half)}:host .title{font-size:18px;font-size:var(--ts-fontsize-big)}.title-icon-container{align-items:center;display:flex}.slot-container{margin:0 10px;margin:0 var(--ts-unit-half)}[dir=rtl] .icon,[dir=rtl] .title{margin-left:0;margin-right:10px;margin-right:var(--ts-unit-half)}:host([color=black])>header{background-color:#0f151a;background-color:var(--ts-color-black)}:host([color=black]) .title{color:#fff;color:var(--ts-color-white)}:host([color=red])>header{background-color:#bd0000;background-color:var(--ts-color-red)}:host([color=red]) .title{color:#fff;color:var(--ts-color-white)}:host([color=orange])>header{background-color:#ff8c00;background-color:var(--ts-color-orange)}:host([color=orange]) .title{color:#fff;color:var(--ts-color-white)}:host([color=yellow])>header{background-color:#fdbe12;background-color:var(--ts-color-yellow)}:host([color=yellow]) .title{color:#fff;color:var(--ts-color-white)}:host([color=green])>header{background-color:#50c610;background-color:var(--ts-color-green)}:host([color=green]) .title{color:#fff;color:var(--ts-color-white)}:host([color=blue])>header{background-color:#00aeff;background-color:var(--ts-color-blue)}:host([color=blue]) .title{color:#fff;color:var(--ts-color-white)}:host([color=purple])>header{background-color:#90129b;background-color:var(--ts-color-purple)}:host([color=purple]) .title{color:#fff;color:var(--ts-color-white)}:host([color=pink])>header{background-color:#a70262;background-color:var(--ts-color-pink)}:host([color=pink]) .title{color:#fff;color:var(--ts-color-white)}:host([color=gray])>header{background-color:#9ab2bc;background-color:var(--ts-color-gray)}:host([color=gray]) .title{color:#fff;color:var(--ts-color-white)}:host([color=slate])>header{background-color:#1f2a2e;background-color:var(--ts-color-slate)}:host([color=slate]) .title{color:#fff;color:var(--ts-color-white)}:host([color=white])>header{background-color:#fff;background-color:var(--ts-color-white)}:host([color=white]) .title{color:#0f151a;color:var(--ts-color-black)}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0},icon:{type:String,reflect:!0},title:{type:String,reflect:!0},color:{type:String,reflect:!0}}}}]);var s=l.prototype;return s.getIcon=function(){return this.icon?t.html(a(),this.icon,this.title):""},s.getTitle=function(){return this.title?t.html(i(),this.title):""},s.render=function(){return t.html(c(),this.direction,this.getIcon(),this.getTitle())},r(l,[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}}]),l}(t.TSElement))});

package.json

 {
   "name": "@tradeshift/elements.header",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "src": "src/header.js",
@@ -12,6 +12,6 @@ "main": "lib/header.umd.js",
   "dependencies": {
-    "@tradeshift/elements": "^0.7.2",
-    "@tradeshift/elements.app-icon": "^0.7.2"
+    "@tradeshift/elements": "^0.7.3",
+    "@tradeshift/elements.app-icon": "^0.7.3"
   },
-  "gitHead": "93f7b1fb922f4933bfc857e9058a912ef9c424ff"
+  "gitHead": "46421a95e47d9a40f521c3be0411e619dde12ee7"
 }

New alerts

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

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

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

Worsened metrics

Total package byte prevSize

28509

decreased by-24.17%

Lines of code

37

decreased by-82.79%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@tradeshift/elements@^0.7.3

• Updated@tradeshift/elements.app-icon@^0.7.3