@tradeshift/elements.header - npm Package Compare versions

Comparing version 0.39.0 to 0.40.0

lib/header.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["exports","@tradeshift/elements"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).ts=t.ts||{},t.ts.elements=t.ts.elements||{},t.ts.elements.header=t.ts.elements.header||{}),t.ts.elements)}(this,(function(t,e){"use strict";function r(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}function n(t,e){return e||(e=t.slice(0)),t.raw=e,t}function i(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function c(t,e){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},c(t,e)}var s,l=function(t){var r,o,n,l;function a(){return t.apply(this,arguments)||this}return o=t,(r=a).prototype=Object.create(o.prototype),r.prototype.constructor=r,c(r,o),a.prototype.render=function(){return e.html(s||(t=['\n\t\t\t<img .src="','" .alt="','"></img>\n\t\t'],r||(r=t.slice(0)),t.raw=r,s=t),this.src,this.alt);var t,r},n=a,l=[{key:"styles",get:function(){return[e.TSElement.styles,e.unsafeCSS(":host img{border-radius:3px;border-radius:var(--ts-radius);height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}:host([size=large]) img{height:60px;height:var(--ts-unit-triple);width:60px;width:var(--ts-unit-triple)}")]}},{key:"properties",get:function(){return{size:{type:String,reflect:!0},src:{type:String,reflect:!0},alt:{type:String,reflect:!0}}}}],null&&i(n.prototype,null),l&&i(n,l),Object.defineProperty(n,"prototype",{writable:!1}),a}(e.TSElement);function a(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},h.apply(this,arguments)}function u(t,e){return u=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},u(t,e)}function f(t,e){return e||(e=t.slice(0)),t.raw=e,t}e.customElementDefineHelper("ts-app-icon",l);var p,d={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};h({},e.helpers.classNamesToSelector(d));var g,v,b=e.constants.colors,y=e.constants.colorModifiers,m={DEFAULT:"default",INVERTED:"inverted",PRIMARY:"primary",DANGER:"danger",ERROR:"error",SUCCESS:"success",ACTIVE:"active",INFO:"info",FOCUS:"focus",WARNING:"warning",DISABLED:"disabled",DISABLED_CHECKED:"disabled-checked",SUGGESTED:"suggested",SLATE_LIGHTEST:"slate-lightest",GRAY_DARKER:"gray-darker",ACTION:"action"},w=((p={})[m.DEFAULT]=b.SLATE,p[m.INVERTED]=b.WHITE,p[m.DANGER]=b.RED,p[m.ERROR]=b.RED,p[m.SUCCESS]=b.GREEN,p[m.PRIMARY]=b.BLUE,p[m.ACTIVE]=b.BLUE,p[m.INFO]=b.BLUE,p[m.FOCUS]=b.BLUE,p[m.WARNING]=b.ORANGE,p[m.DISABLED]=b.GRAY+y.LIGHTER,p[m.SUGGESTED]=b.PURPLE,p[m.DISABLED_CHECKED]=b.GRAY+y.LIGHT,p[m.SLATE_LIGHTEST]=b.SLATE+y.LIGHTEST,p[m.GRAY_DARKER]=b.GRAY+y.DARKER,p[m.ACTION]=b.GRAY,p),k="medium",S=function(t){var r,o;function n(){var e;return(e=t.call(this)||this).size=k,e.iconCache=new Map,e.svgContent="",e}o=t,(r=n).prototype=Object.create(o.prototype),r.prototype.constructor=r,u(r,o);var i,c,s=n.prototype;return s.attributeChangedCallback=function(e,r,o){var n=this;switch(t.prototype.attributeChangedCallback.call(this,e,r,o),e){case"icon":!this.src&&o&&window.customElements.whenDefined("ts-icon").then((function(){n.getIcon()}));break;case"src":o&&window.customElements.whenDefined("ts-icon").then((function(){n.getSrc()}))}},s.getIcon=function(){return new Promise(function(t,e){var r,o,n;if(this.icon.indexOf("<svg")>-1&&this.icon.indexOf("</svg>")>-1)return this.svgContent=this.parseSvg(this.icon),t();if(!this.iconCache.has(this.icon)){var i=function(){try{return s.call(this)}catch(t){return e(t)}}.bind(this),c=function(r){try{return console.error(r),this.svgContent="",t()}catch(t){return e(t)}}.bind(this);try{return Promise.resolve(import("@tradeshift/elements.icon/lib/assets/icons/"+this.icon+".svg")).then(function(e){try{return r=e.default,Promise.resolve(fetch(r)).then(function(e){try{return(o=e).ok?Promise.resolve(this.extractSvgContent(o)).then(function(t){try{return n=t,this.iconCache.set(this.icon,n),i()}catch(t){return c(t)}}.bind(this),c):(this.svgContent="",t())}catch(t){return c(t)}}.bind(this),c)}catch(t){return c(t)}}.bind(this),c)}catch(t){c(t)}}function s(){return this.svgContent=this.iconCache.get(this.icon),t()}return s.call(this)}.bind(this))},s.getSrc=function(){return new Promise(function(t,e){var r,o;if(!this.iconCache.has(this.src)){var n=function(){try{return c.call(this)}catch(t){return e(t)}}.bind(this),i=function(r){try{return console.error(r),this.svgContent="",t()}catch(t){return e(t)}}.bind(this);try{return Promise.resolve(fetch(this.src)).then(function(e){try{return(r=e).ok?Promise.resolve(this.extractSvgContent(r)).then(function(t){try{return o=t,this.iconCache.set(this.src,o),n()}catch(t){return i(t)}}.bind(this),i):(this.svgContent="",t())}catch(t){return i(t)}}.bind(this),i)}catch(t){i(t)}}function c(){return this.svgContent=this.iconCache.get(this.src),t()}return c.call(this)}.bind(this))},s.parseSvg=function(t){return(new DOMParser).parseFromString(t,"image/svg+xml").firstChild},s.extractSvgContent=function(t){return new Promise(function(e,r){var o;return Promise.resolve(t.text()).then(function(t){try{return o=t,e(this.parseSvg(o))}catch(t){return r(t)}}.bind(this),r)}.bind(this))},s.render=function(){return e.html(g||(g=f(['<span class="','">',"</span>"])),d.ICON_WRAPPER,this.svgContent)},i=n,c=[{key:"styles",get:function(){var t=Object.keys(m).map((function(t){var r=m[t],o=w[r];return e.css(v||(v=f(["\n\t\t\t\t:host([type='","']) {\n\t\t\t\t\t--ts-icon-color: var(--ts-color-",");\n\t\t\t\t}\n\t\t\t"])),e.unsafeCSS(r),e.unsafeCSS(o))}));return[e.TSElement.styles,e.unsafeCSS(':host{display:inline-block}:host svg{color:var(--ts-icon-color)}.fill-none{fill:none}:host([size=small]) .icon-wrapper{height:12px;height:var(--ts-fontsize-mini);width:12px;width:var(--ts-fontsize-mini)}:host([size=medium]) .icon-wrapper{height:16px;height:var(--ts-fontsize-medium);width:16px;width:var(--ts-fontsize-medium)}:host([size=large]) .icon-wrapper{height:24px;height:var(--ts-fontsize-xbig);width:24px;width:var(--ts-fontsize-xbig)}:host([size=extra-large]) .icon-wrapper{height:60px;height:var(--ts-unit-triple);width:60px;width:var(--ts-unit-triple)}:host([rotate="90"]) .icon-wrapper{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([rotate="180"]) .icon-wrapper{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([rotate="270"]) .icon-wrapper{-webkit-transform:rotate(270deg);transform:rotate(270deg)}:host([flip=h]) .icon-wrapper,:host([flip=horizontal]) .icon-wrapper{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host([flip=v]) .icon-wrapper,:host([flip=vertical]) .icon-wrapper{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.icon-wrapper{display:block;height:0;padding-top:100%;position:relative;width:100%}svg{height:100%;left:0;position:absolute;top:0;width:100%}:host([type=default]) svg{color:#1f2a2e;color:var(--ts-color-slate)}:host([type=inverted]) svg{color:#fff;color:var(--ts-color-white)}:host([type=primary]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=danger]) svg{color:#bd0000;color:var(--ts-color-red)}:host([type=error]) svg{color:#bd0000;color:var(--ts-color-red)}:host([type=success]) svg{color:#50c610;color:var(--ts-color-green)}:host([type=active]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=info]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=focus]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=warning]) svg{color:#ff8c00;color:var(--ts-color-orange)}:host([type=disabled]) svg{color:#e6ecef;color:var(--ts-color-gray-lighter)}:host([type=disabled-checked]) svg{color:#cbd7dc;color:var(--ts-color-gray-light)}:host([type=suggested]) svg{color:#90129b;color:var(--ts-color-purple)}:host([type=slate-lightest]) svg{color:#506b77;color:var(--ts-color-slate-lightest)}:host([type=gray-darker]) svg{color:#648796;color:var(--ts-color-gray-darker)}:host([type=action]) svg{color:#9ab2bc;color:var(--ts-color-gray)}:host([circular]){background-color:var(--ts-icon-color);border-radius:50%}:host([circular]) svg{color:#fff;color:var(--ts-color-white)}')].concat(t)}},{key:"properties",get:function(){return{icon:{type:String,reflect:!0},src:{type:String,reflect:!0},size:{type:String,reflect:!0},type:{type:String,reflect:!0},circular:{type:Boolean,reflect:!0},rotate:{type:Number,reflect:!0},flip:{type:String,reflect:!0},svgContent:{type:String,attribute:!1}}}}],null&&a(i.prototype,null),c&&a(i,c),Object.defineProperty(i,"prototype",{writable:!1}),n}(e.TSElement);e.customElementDefineHelper("ts-icon",S);var E,C,x,O,R=function(t){var i,c;function s(){var e;return(e=t.call(this)||this).color="white",e}c=t,(i=s).prototype=Object.create(c.prototype),i.prototype.constructor=i,o(i,c);var l,a,h,u=s.prototype;return u.getIcon=function(){return this.icon?e.html(E||(E=n([' <ts-app-icon class="icon" src="','" alt="','"></ts-app-icon> '])),this.icon,this.title):""},u.openChromeMenu=function(){window.top.postMessage('app-broadcast:{"appIds": "Tradeshift.Chrome", "key": "ts-broadcast-chrome-menu-open"}',"*")},u.getTitle=function(){return this.title?e.html(C||(C=n([' <span class="title">',"</span> "])),this.title):""},u.render=function(){return e.html(x||(x=n(["\n\t\t\t<header dir=",'>\n\t\t\t\t<div class="title-icon-container">'," "," ",'</div>\n\t\t\t\t<div class="slot-container">\n\t\t\t\t\t\x3c!-- Extra items on the opposite side of the header goes here, like button group. \t--\x3e\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</header>\n\t\t'])),this.direction,this.getMenuSwitch,this.getIcon(),this.getTitle())},l=s,h=[{key:"styles",get:function(){return[e.TSElement.styles,e.unsafeCSS(":host{border-bottom:1px solid #cbd7dc;border-bottom:var(--ts-border);display:flex;height:60px;height:var(--ts-unit-triple);width:100%}:host>header{align-items:center;background-color:#fff;background-color:var(--ts-color-white);display:flex;justify-content:space-between;width:100%}:host .icon{block-size:40px;height:40px;height:var(--ts-unit-double);block-size:var(--ts-unit-double);margin-left:10px;margin-left:var(--ts-unit-half)}:host .title{font-size:18px;font-size:var(--ts-fontsize-big);margin-left:10px;margin-left:var(--ts-unit-half)}.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)}.menu-switch{cursor:pointer;display:none;padding:10px;padding:var(--ts-unit-half)}@media screen and (max-width:600px){.icon{display:none}.menu-switch{display:block}:host .title{margin-left:0;margin-right:0}}")]}},{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}}}}],(a=[{key:"getMenuSwitch",get:function(){return e.html(O||(O=n(['\n\t\t\t<ts-icon\n\t\t\t\t@click="','"\n\t\t\t\tclass="menu-switch"\n\t\t\t\ticon="','"\n\t\t\t\tsize="large"\n\t\t\t\ttabindex="0"\n\t\t\t></ts-icon>\n\t\t'])),this.openChromeMenu,'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.355 4a.84.84 0 0 1 .619.25.84.84 0 0 1 .25.618v1.15a.85.85 0 0 1-.25.607.822.822 0 0 1-.619.26H3.868a.833.833 0 0 1-.608-.26.833.833 0 0 1-.26-.607v-1.15c0-.246.087-.452.26-.619A.85.85 0 0 1 3.868 4h16.487Zm0 6.14a.84.84 0 0 1 .619.249.84.84 0 0 1 .25.618v1.15a.85.85 0 0 1-.25.607.822.822 0 0 1-.619.26H3.868a.833.833 0 0 1-.608-.26.833.833 0 0 1-.26-.607v-1.15c0-.246.087-.452.26-.618a.85.85 0 0 1 .608-.25h16.487Zm0 6.16a.84.84 0 0 1 .619.25.84.84 0 0 1 .25.618v1.15a.84.84 0 0 1-.25.618.84.84 0 0 1-.619.25H3.868a.85.85 0 0 1-.608-.25.822.822 0 0 1-.26-.618v-1.15c0-.245.087-.452.26-.618a.85.85 0 0 1 .608-.25h16.487Z" fill="currentColor"/></svg>')}},{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}}])&&r(l.prototype,a),h&&r(l,h),Object.defineProperty(l,"prototype",{writable:!1}),s}(e.TSElement);e.customElementDefineHelper("ts-header",R),t.TSHeader=R,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["exports","@tradeshift/elements"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).ts=t.ts||{},t.ts.elements=t.ts.elements||{},t.ts.elements.header=t.ts.elements.header||{}),t.ts.elements)}(this,(function(t,e){"use strict";function r(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}function n(t,e){return e||(e=t.slice(0)),t.raw=e,t}function i(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function c(t,e){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},c(t,e)}var s,l=function(t){var r,o,n,l;function a(){return t.apply(this,arguments)||this}return o=t,(r=a).prototype=Object.create(o.prototype),r.prototype.constructor=r,c(r,o),a.prototype.render=function(){return e.html(s||(t=['\n\t\t\t<img .src="','" .alt="','"></img>\n\t\t'],r||(r=t.slice(0)),t.raw=r,s=t),this.src,this.alt);var t,r},n=a,l=[{key:"styles",get:function(){return[e.TSElement.styles,e.unsafeCSS(":host img{border-radius:3px;border-radius:var(--ts-radius);height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}:host([size=large]) img{height:60px;height:var(--ts-unit-triple);width:60px;width:var(--ts-unit-triple)}")]}},{key:"properties",get:function(){return{size:{type:String,reflect:!0},src:{type:String,reflect:!0},alt:{type:String,reflect:!0}}}}],null&&i(n.prototype,null),l&&i(n,l),Object.defineProperty(n,"prototype",{writable:!1}),a}(e.TSElement);function a(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},h.apply(this,arguments)}function u(t,e){return u=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},u(t,e)}function f(t,e){return e||(e=t.slice(0)),t.raw=e,t}e.customElementDefineHelper("ts-app-icon",l);var p,d={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};h({},e.helpers.classNamesToSelector(d));var g,v,b=e.constants.colors,y=e.constants.colorModifiers,m={DEFAULT:"default",INVERTED:"inverted",PRIMARY:"primary",DANGER:"danger",ERROR:"error",SUCCESS:"success",ACTIVE:"active",INFO:"info",FOCUS:"focus",WARNING:"warning",DISABLED:"disabled",DISABLED_CHECKED:"disabled-checked",SUGGESTED:"suggested",SLATE_LIGHTEST:"slate-lightest",GRAY_DARKER:"gray-darker",ACTION:"action"},w=((p={})[m.DEFAULT]=b.SLATE,p[m.INVERTED]=b.WHITE,p[m.DANGER]=b.RED,p[m.ERROR]=b.RED,p[m.SUCCESS]=b.GREEN,p[m.PRIMARY]=b.BLUE,p[m.ACTIVE]=b.BLUE,p[m.INFO]=b.BLUE,p[m.FOCUS]=b.BLUE,p[m.WARNING]=b.ORANGE,p[m.DISABLED]=b.GRAY+y.LIGHTER,p[m.SUGGESTED]=b.PURPLE,p[m.DISABLED_CHECKED]=b.GRAY+y.LIGHT,p[m.SLATE_LIGHTEST]=b.SLATE+y.LIGHTEST,p[m.GRAY_DARKER]=b.GRAY+y.DARKER,p[m.ACTION]=b.GRAY,p),S="medium",k=function(t){var r,o;function n(){var e;return(e=t.call(this)||this).size=S,e.iconCache=new Map,e.svgContent="",e}o=t,(r=n).prototype=Object.create(o.prototype),r.prototype.constructor=r,u(r,o);var i,c,s=n.prototype;return s.attributeChangedCallback=function(e,r,o){var n=this;switch(t.prototype.attributeChangedCallback.call(this,e,r,o),e){case"icon":!this.src&&o&&window.customElements.whenDefined("ts-icon").then((function(){n.getIcon()}));break;case"src":o&&window.customElements.whenDefined("ts-icon").then((function(){n.getSrc()}))}},s.getIcon=function(){return new Promise(function(t,e){var r,o,n;if(this.validateSvg(this.icon))return this.svgContent=this.parseSvg(this.icon),t();if(this.iconCache.has(this.icon))return this.svgContent=this.iconCache.get(this.icon),t();var i=function(){try{return t()}catch(t){return e(t)}},c=function(t){try{return console.error(t),this.svgContent="",i()}catch(t){return e(t)}}.bind(this);try{return Promise.resolve(import("@tradeshift/elements.icon/lib/assets/icons/"+this.icon+".svg")).then(function(e){try{return r=e.default,o="",this.validateSvg(r)?(o=this.parseSvg(r),s.call(this)):Promise.resolve(fetch(r)).then(function(e){try{return(n=e).ok?Promise.resolve(this.extractSvgContent(n)).then(function(t){try{return o=t,s.call(this)}catch(t){return c(t)}}.bind(this),c):(this.svgContent="",t())}catch(t){return c(t)}}.bind(this),c);function s(){return this.iconCache.set(this.icon,o),this.svgContent=o,i()}}catch(l){return c(l)}}.bind(this),c)}catch(t){c(t)}}.bind(this))},s.getSrc=function(){return new Promise(function(t,e){var r,o;if(this.iconCache.has(this.src))return this.svgContent=this.iconCache.get(this.src),t();var n=function(){try{return t()}catch(t){return e(t)}},i=function(t){try{return console.error(t),this.svgContent="",n()}catch(t){return e(t)}}.bind(this);try{return Promise.resolve(fetch(this.src)).then(function(e){try{return(r=e).ok?Promise.resolve(this.extractSvgContent(r)).then(function(t){try{return o=t,this.iconCache.set(this.src,o),this.svgContent=o,n()}catch(t){return i(t)}}.bind(this),i):(this.svgContent="",t())}catch(t){return i(t)}}.bind(this),i)}catch(t){i(t)}}.bind(this))},s.validateSvg=function(t){return t.indexOf("<svg")>-1&&t.indexOf("</svg>")>-1},s.parseSvg=function(t){return(new DOMParser).parseFromString(t,"image/svg+xml").firstChild},s.extractSvgContent=function(t){return new Promise(function(e,r){var o;return Promise.resolve(t.text()).then(function(t){try{return o=t,e(this.parseSvg(o))}catch(t){return r(t)}}.bind(this),r)}.bind(this))},s.render=function(){return e.html(g||(g=f(['<span class="','">',"</span>"])),d.ICON_WRAPPER,this.svgContent)},i=n,c=[{key:"styles",get:function(){var t=Object.keys(m).map((function(t){var r=m[t],o=w[r];return e.css(v||(v=f(["\n\t\t\t\t:host([type='","']) {\n\t\t\t\t\t--ts-icon-color: var(--ts-color-",");\n\t\t\t\t}\n\t\t\t"])),e.unsafeCSS(r),e.unsafeCSS(o))}));return[e.TSElement.styles,e.unsafeCSS(':host{display:inline-block}:host svg{color:var(--ts-icon-color)}.fill-none{fill:none}:host([size=small]) .icon-wrapper{height:12px;height:var(--ts-fontsize-mini);width:12px;width:var(--ts-fontsize-mini)}:host([size=medium]) .icon-wrapper{height:16px;height:var(--ts-fontsize-medium);width:16px;width:var(--ts-fontsize-medium)}:host([size=large]) .icon-wrapper{height:24px;height:var(--ts-fontsize-xbig);width:24px;width:var(--ts-fontsize-xbig)}:host([size=extra-large]) .icon-wrapper{height:60px;height:var(--ts-unit-triple);width:60px;width:var(--ts-unit-triple)}:host([rotate="90"]) .icon-wrapper{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([rotate="180"]) .icon-wrapper{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([rotate="270"]) .icon-wrapper{-webkit-transform:rotate(270deg);transform:rotate(270deg)}:host([flip=h]) .icon-wrapper,:host([flip=horizontal]) .icon-wrapper{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host([flip=v]) .icon-wrapper,:host([flip=vertical]) .icon-wrapper{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.icon-wrapper{display:block;height:0;padding-top:100%;position:relative;width:100%}svg{height:100%;left:0;position:absolute;top:0;width:100%}:host([type=default]) svg{color:#1f2a2e;color:var(--ts-color-slate)}:host([type=inverted]) svg{color:#fff;color:var(--ts-color-white)}:host([type=primary]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=danger]) svg{color:#bd0000;color:var(--ts-color-red)}:host([type=error]) svg{color:#bd0000;color:var(--ts-color-red)}:host([type=success]) svg{color:#50c610;color:var(--ts-color-green)}:host([type=active]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=info]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=focus]) svg{color:#00aeff;color:var(--ts-color-blue)}:host([type=warning]) svg{color:#ff8c00;color:var(--ts-color-orange)}:host([type=disabled]) svg{color:#e6ecef;color:var(--ts-color-gray-lighter)}:host([type=disabled-checked]) svg{color:#cbd7dc;color:var(--ts-color-gray-light)}:host([type=suggested]) svg{color:#90129b;color:var(--ts-color-purple)}:host([type=slate-lightest]) svg{color:#506b77;color:var(--ts-color-slate-lightest)}:host([type=gray-darker]) svg{color:#648796;color:var(--ts-color-gray-darker)}:host([type=action]) svg{color:#9ab2bc;color:var(--ts-color-gray)}:host([circular]){background-color:var(--ts-icon-color);border-radius:50%}:host([circular]) svg{color:#fff;color:var(--ts-color-white)}')].concat(t)}},{key:"properties",get:function(){return{icon:{type:String,reflect:!0},src:{type:String,reflect:!0},size:{type:String,reflect:!0},type:{type:String,reflect:!0},circular:{type:Boolean,reflect:!0},rotate:{type:Number,reflect:!0},flip:{type:String,reflect:!0},svgContent:{type:String,attribute:!1}}}}],null&&a(i.prototype,null),c&&a(i,c),Object.defineProperty(i,"prototype",{writable:!1}),n}(e.TSElement);e.customElementDefineHelper("ts-icon",k);var E,C,x,O,R=function(t){var i,c;function s(){var e;return(e=t.call(this)||this).color="white",e}c=t,(i=s).prototype=Object.create(c.prototype),i.prototype.constructor=i,o(i,c);var l,a,h,u=s.prototype;return u.getIcon=function(){return this.icon?e.html(E||(E=n([' <ts-app-icon class="icon" src="','" alt="','"></ts-app-icon> '])),this.icon,this.title):""},u.openChromeMenu=function(){window.top.postMessage('app-broadcast:{"appIds": "Tradeshift.Chrome", "key": "ts-broadcast-chrome-menu-open"}',"*")},u.getTitle=function(){return this.title?e.html(C||(C=n([' <span class="title">',"</span> "])),this.title):""},u.render=function(){return e.html(x||(x=n(["\n\t\t\t<header dir=",'>\n\t\t\t\t<div class="title-icon-container">'," "," ",'</div>\n\t\t\t\t<div class="slot-container">\n\t\t\t\t\t\x3c!-- Extra items on the opposite side of the header goes here, like button group. \t--\x3e\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</header>\n\t\t'])),this.direction,this.getMenuSwitch,this.getIcon(),this.getTitle())},l=s,h=[{key:"styles",get:function(){return[e.TSElement.styles,e.unsafeCSS(":host{border-bottom:1px solid #cbd7dc;border-bottom:var(--ts-border);display:flex;height:60px;height:var(--ts-unit-triple);width:100%}:host>header{align-items:center;background-color:#fff;background-color:var(--ts-color-white);display:flex;justify-content:space-between;width:100%}:host .icon{block-size:40px;height:40px;height:var(--ts-unit-double);block-size:var(--ts-unit-double);margin-left:10px;margin-left:var(--ts-unit-half)}:host .title{font-size:18px;font-size:var(--ts-fontsize-big);margin-left:10px;margin-left:var(--ts-unit-half)}.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)}.menu-switch{cursor:pointer;display:none;padding:10px;padding:var(--ts-unit-half)}@media screen and (max-width:600px){.icon{display:none}.menu-switch{display:block}:host .title{margin-left:0;margin-right:0}}")]}},{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}}}}],(a=[{key:"getMenuSwitch",get:function(){return e.html(O||(O=n(['\n\t\t\t<ts-icon\n\t\t\t\t@click="','"\n\t\t\t\tclass="menu-switch"\n\t\t\t\ticon="','"\n\t\t\t\tsize="large"\n\t\t\t\ttabindex="0"\n\t\t\t></ts-icon>\n\t\t'])),this.openChromeMenu,'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.355 4a.84.84 0 0 1 .619.25.84.84 0 0 1 .25.618v1.15a.85.85 0 0 1-.25.607.822.822 0 0 1-.619.26H3.868a.833.833 0 0 1-.608-.26.833.833 0 0 1-.26-.607v-1.15c0-.246.087-.452.26-.619A.85.85 0 0 1 3.868 4h16.487Zm0 6.14a.84.84 0 0 1 .619.249.84.84 0 0 1 .25.618v1.15a.85.85 0 0 1-.25.607.822.822 0 0 1-.619.26H3.868a.833.833 0 0 1-.608-.26.833.833 0 0 1-.26-.607v-1.15c0-.246.087-.452.26-.618a.85.85 0 0 1 .608-.25h16.487Zm0 6.16a.84.84 0 0 1 .619.25.84.84 0 0 1 .25.618v1.15a.84.84 0 0 1-.25.618.84.84 0 0 1-.619.25H3.868a.85.85 0 0 1-.608-.25.822.822 0 0 1-.26-.618v-1.15c0-.245.087-.452.26-.618a.85.85 0 0 1 .608-.25h16.487Z" fill="currentColor"/></svg>')}},{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}}])&&r(l.prototype,a),h&&r(l,h),Object.defineProperty(l,"prototype",{writable:!1}),s}(e.TSElement);e.customElementDefineHelper("ts-header",R),t.TSHeader=R,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "@tradeshift/elements.header",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "repository": {
@@ -18,9 +18,9 @@ "type": "git",
   "dependencies": {
-    "@tradeshift/elements": "^0.39.0",
-    "@tradeshift/elements.app-icon": "^0.39.0",
-    "@tradeshift/elements.button": "^0.39.0",
-    "@tradeshift/elements.icon": "^0.39.0"
+    "@tradeshift/elements": "^0.40.0",
+    "@tradeshift/elements.app-icon": "^0.40.0",
+    "@tradeshift/elements.button": "^0.40.0",
+    "@tradeshift/elements.icon": "^0.40.0"
   },
   "src": "src/header.js",
-  "gitHead": "3553e0208b3f9a52c6ca850412507c39ca11e0b7"
+  "gitHead": "95eb701d1139386b893ad0ed34acb72284339732"
 }

No alert changes

Improved metrics

Total package byte prevSize

34314

increased by0.19%

Dependency changes

• + Added@tradeshift/elements@0.40.2(transitive)

• + Added@tradeshift/elements.app-icon@0.40.2(transitive)

• + Added@tradeshift/elements.button@0.40.2(transitive)

• + Added@tradeshift/elements.icon@0.40.2(transitive)

• - Removed@tradeshift/elements@0.39.0(transitive)

• - Removed@tradeshift/elements.app-icon@0.39.0(transitive)

• - Removed@tradeshift/elements.button@0.39.0(transitive)

• - Removed@tradeshift/elements.icon@0.39.0(transitive)

• Updated@tradeshift/elements@^0.40.0

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

• Updated@tradeshift/elements.button@^0.40.0

• Updated@tradeshift/elements.icon@^0.40.0