@tradeshift/elements.icon - npm Package Compare versions

Comparing version 0.38.0 to 0.39.0

lib/icon.esm.js

@@ -1,1 +0,1 @@
-import{helpers as t,constants as r,customElementDefineHelper as e,html as o,TSElement as n,css as i,unsafeCSS as s}from"@tradeshift/elements";function c(t,r){for(var e=0;e<r.length;e++){var o=r[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function a(){return(a=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t}).apply(this,arguments)}function l(t,r){return(l=Object.setPrototypeOf||function(t,r){return t.__proto__=r,t})(t,r)}function h(t,r){return r||(r=t.slice(0)),t.raw=r,t}var u,f={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};a({},t.classNamesToSelector(f));var p,g,v=r.colors,d=r.colorModifiers,y={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"},b=((u={})[y.DEFAULT]=v.SLATE,u[y.INVERTED]=v.WHITE,u[y.DANGER]=v.RED,u[y.ERROR]=v.RED,u[y.SUCCESS]=v.GREEN,u[y.PRIMARY]=v.BLUE,u[y.ACTIVE]=v.BLUE,u[y.INFO]=v.BLUE,u[y.FOCUS]=v.BLUE,u[y.WARNING]=v.ORANGE,u[y.DISABLED]=v.GRAY+d.LIGHTER,u[y.SUGGESTED]=v.PURPLE,u[y.DISABLED_CHECKED]=v.GRAY+d.LIGHT,u[y.SLATE_LIGHTEST]=v.SLATE+d.LIGHTEST,u[y.GRAY_DARKER]=v.GRAY+d.DARKER,u[y.ACTION]=v.GRAY,u),E={SMALL:"small",MEDIUM:"medium",LARGE:"large",EXTRA_LARGE:"extra-large"},m=function(t){var r,e;function a(){var r=t.call(this)||this;return r.size=E.MEDIUM,r.iconCache=new Map,r.svgContent="",r}e=t,(r=a).prototype=Object.create(e.prototype),r.prototype.constructor=r,l(r,e);var u,v,d,m=a.prototype;return m.attributeChangedCallback=function(r,e,o){var n=this;switch(t.prototype.attributeChangedCallback.call(this,r,e,o),r){case"icon":this.src||null===o||window.customElements.whenDefined("ts-icon").then((function(){n.getIcon()}));break;case"src":null!==o&&window.customElements.whenDefined("ts-icon").then((function(){n.getSrc()}))}},m.getIcon=function(){return new Promise(function(t,r){var e,o,n;if(!this.iconCache.has(this.icon)){var i=function(){try{return function(){return this.svgContent=this.iconCache.get(this.icon),t()}.call(this)}catch(t){return r(t)}}.bind(this),s=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return r(t)}}.bind(this);try{return Promise.resolve(import("@tradeshift/elements.icon/lib/assets/icons/"+this.icon+".svg")).then(function(r){try{return e=r.default,Promise.resolve(fetch(e)).then(function(r){try{return(o=r).ok?Promise.resolve(this.extractSvgContent(o)).then(function(t){try{return n=t,this.iconCache.set(this.icon,n),i()}catch(t){return s(t)}}.bind(this),s):(this.svgContent="",t())}catch(t){return s(t)}}.bind(this),s)}catch(t){return s(t)}}.bind(this),s)}catch(t){s(t)}}return function(){return this.svgContent=this.iconCache.get(this.icon),t()}.call(this)}.bind(this))},m.getSrc=function(){return new Promise(function(t,r){var e,o;if(!this.iconCache.has(this.src)){var n=function(){try{return function(){return this.svgContent=this.iconCache.get(this.src),t()}.call(this)}catch(t){return r(t)}}.bind(this),i=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return r(t)}}.bind(this);try{return Promise.resolve(fetch(this.src)).then(function(r){try{return(e=r).ok?Promise.resolve(this.extractSvgContent(e)).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)}}return function(){return this.svgContent=this.iconCache.get(this.src),t()}.call(this)}.bind(this))},m.extractSvgContent=function(t){return new Promise((function(r,e){var o,n,i;return Promise.resolve(t.text()).then((function(t){try{return o=t,n=new DOMParser,i=n.parseFromString(o,"image/svg+xml"),r(i.firstChild)}catch(t){return e(t)}}),e)}))},m.render=function(){return o(p||(p=h(['<span class="','">',"</span>"])),f.ICON_WRAPPER,this.svgContent)},u=a,d=[{key:"styles",get:function(){var t=Object.keys(y).map((function(t){var r=y[t],e=b[r];return i(g||(g=h(["\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"])),s(r),s(e))}));return[n.styles,s(':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}}}}],(v=null)&&c(u.prototype,v),d&&c(u,d),a}(n);e("ts-icon",m);export{m as TSIcon,f as classNames,E as sizes,b as typeColors,y as types};
+import{helpers as t,constants as r,customElementDefineHelper as e,html as o,TSElement as n,css as i,unsafeCSS as s}from"@tradeshift/elements";function c(t,r){for(var e=0;e<r.length;e++){var o=r[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function a(){return a=Object.assign?Object.assign.bind():function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},a.apply(this,arguments)}function l(t,r){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,r){return t.__proto__=r,t},l(t,r)}function h(t,r){return r||(r=t.slice(0)),t.raw=r,t}var u,p={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};a({},t.classNamesToSelector(p));var f,g,v=r.colors,d=r.colorModifiers,y={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"},b=((u={})[y.DEFAULT]=v.SLATE,u[y.INVERTED]=v.WHITE,u[y.DANGER]=v.RED,u[y.ERROR]=v.RED,u[y.SUCCESS]=v.GREEN,u[y.PRIMARY]=v.BLUE,u[y.ACTIVE]=v.BLUE,u[y.INFO]=v.BLUE,u[y.FOCUS]=v.BLUE,u[y.WARNING]=v.ORANGE,u[y.DISABLED]=v.GRAY+d.LIGHTER,u[y.SUGGESTED]=v.PURPLE,u[y.DISABLED_CHECKED]=v.GRAY+d.LIGHT,u[y.SLATE_LIGHTEST]=v.SLATE+d.LIGHTEST,u[y.GRAY_DARKER]=v.GRAY+d.DARKER,u[y.ACTION]=v.GRAY,u),E={SMALL:"small",MEDIUM:"medium",LARGE:"large",EXTRA_LARGE:"extra-large"},m=function(t){var r,e;function a(){var r;return(r=t.call(this)||this).size=E.MEDIUM,r.iconCache=new Map,r.svgContent="",r}e=t,(r=a).prototype=Object.create(e.prototype),r.prototype.constructor=r,l(r,e);var u,v,d,m=a.prototype;return m.attributeChangedCallback=function(r,e,o){var n=this;switch(t.prototype.attributeChangedCallback.call(this,r,e,o),r){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()}))}},m.getIcon=function(){return new Promise(function(t,r){var e,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 c.call(this)}catch(t){return r(t)}}.bind(this),s=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return r(t)}}.bind(this);try{return Promise.resolve(import("@tradeshift/elements.icon/lib/assets/icons/"+this.icon+".svg")).then(function(r){try{return e=r.default,Promise.resolve(fetch(e)).then(function(r){try{return(o=r).ok?Promise.resolve(this.extractSvgContent(o)).then(function(t){try{return n=t,this.iconCache.set(this.icon,n),i()}catch(t){return s(t)}}.bind(this),s):(this.svgContent="",t())}catch(t){return s(t)}}.bind(this),s)}catch(t){return s(t)}}.bind(this),s)}catch(t){s(t)}}function c(){return this.svgContent=this.iconCache.get(this.icon),t()}return c.call(this)}.bind(this))},m.getSrc=function(){return new Promise(function(t,r){var e,o;if(!this.iconCache.has(this.src)){var n=function(){try{return s.call(this)}catch(t){return r(t)}}.bind(this),i=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return r(t)}}.bind(this);try{return Promise.resolve(fetch(this.src)).then(function(r){try{return(e=r).ok?Promise.resolve(this.extractSvgContent(e)).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 s(){return this.svgContent=this.iconCache.get(this.src),t()}return s.call(this)}.bind(this))},m.parseSvg=function(t){return(new DOMParser).parseFromString(t,"image/svg+xml").firstChild},m.extractSvgContent=function(t){return new Promise(function(r,e){var o;return Promise.resolve(t.text()).then(function(t){try{return o=t,r(this.parseSvg(o))}catch(t){return e(t)}}.bind(this),e)}.bind(this))},m.render=function(){return o(f||(f=h(['<span class="','">',"</span>"])),p.ICON_WRAPPER,this.svgContent)},u=a,d=[{key:"styles",get:function(){var t=Object.keys(y).map((function(t){var r=y[t],e=b[r];return i(g||(g=h(["\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"])),s(r),s(e))}));return[n.styles,s(':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}}}}],(v=null)&&c(u.prototype,v),d&&c(u,d),Object.defineProperty(u,"prototype",{writable:!1}),a}(n);e("ts-icon",m);export{m as TSIcon,p as classNames,E as sizes,b as typeColors,y as types};

lib/icon.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.icon=t.ts.elements.icon||{}),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(){return(o=Object.assign||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}).apply(this,arguments)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return e||(e=t.slice(0)),t.raw=e,t}var i,c={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};o({},e.helpers.classNamesToSelector(c));var a,l,h=e.constants.colors,u=e.constants.colorModifiers,f={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"},p=((i={})[f.DEFAULT]=h.SLATE,i[f.INVERTED]=h.WHITE,i[f.DANGER]=h.RED,i[f.ERROR]=h.RED,i[f.SUCCESS]=h.GREEN,i[f.PRIMARY]=h.BLUE,i[f.ACTIVE]=h.BLUE,i[f.INFO]=h.BLUE,i[f.FOCUS]=h.BLUE,i[f.WARNING]=h.ORANGE,i[f.DISABLED]=h.GRAY+u.LIGHTER,i[f.SUGGESTED]=h.PURPLE,i[f.DISABLED_CHECKED]=h.GRAY+u.LIGHT,i[f.SLATE_LIGHTEST]=h.SLATE+u.LIGHTEST,i[f.GRAY_DARKER]=h.GRAY+u.DARKER,i[f.ACTION]=h.GRAY,i),g={SMALL:"small",MEDIUM:"medium",LARGE:"large",EXTRA_LARGE:"extra-large"},v=function(t){var o,i;function h(){var e=t.call(this)||this;return e.size=g.MEDIUM,e.iconCache=new Map,e.svgContent="",e}i=t,(o=h).prototype=Object.create(i.prototype),o.prototype.constructor=o,n(o,i);var u,v,d,y=h.prototype;return y.attributeChangedCallback=function(e,r,o){var n=this;switch(t.prototype.attributeChangedCallback.call(this,e,r,o),e){case"icon":this.src||null===o||window.customElements.whenDefined("ts-icon").then((function(){n.getIcon()}));break;case"src":null!==o&&window.customElements.whenDefined("ts-icon").then((function(){n.getSrc()}))}},y.getIcon=function(){return new Promise(function(t,e){var r,o,n;if(!this.iconCache.has(this.icon)){var s=function(){try{return function(){return this.svgContent=this.iconCache.get(this.icon),t()}.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(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),s()}catch(t){return i(t)}}.bind(this),i):(this.svgContent="",t())}catch(t){return i(t)}}.bind(this),i)}catch(t){return i(t)}}.bind(this),i)}catch(t){i(t)}}return function(){return this.svgContent=this.iconCache.get(this.icon),t()}.call(this)}.bind(this))},y.getSrc=function(){return new Promise(function(t,e){var r,o;if(!this.iconCache.has(this.src)){var n=function(){try{return function(){return this.svgContent=this.iconCache.get(this.src),t()}.call(this)}catch(t){return e(t)}}.bind(this),s=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 s(t)}}.bind(this),s):(this.svgContent="",t())}catch(t){return s(t)}}.bind(this),s)}catch(t){s(t)}}return function(){return this.svgContent=this.iconCache.get(this.src),t()}.call(this)}.bind(this))},y.extractSvgContent=function(t){return new Promise((function(e,r){var o,n,s;return Promise.resolve(t.text()).then((function(t){try{return o=t,n=new DOMParser,s=n.parseFromString(o,"image/svg+xml"),e(s.firstChild)}catch(t){return r(t)}}),r)}))},y.render=function(){return e.html(a||(a=s(['<span class="','">',"</span>"])),c.ICON_WRAPPER,this.svgContent)},u=h,d=[{key:"styles",get:function(){var t=Object.keys(f).map((function(t){var r=f[t],o=p[r];return e.css(l||(l=s(["\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}}}}],(v=null)&&r(u.prototype,v),d&&r(u,d),h}(e.TSElement);e.customElementDefineHelper("ts-icon",v),t.TSIcon=v,t.classNames=c,t.sizes=g,t.typeColors=p,t.types=f,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.icon=t.ts.elements.icon||{}),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(){return o=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},o.apply(this,arguments)}function n(t,e){return n=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},n(t,e)}function s(t,e){return e||(e=t.slice(0)),t.raw=e,t}var i,c={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};o({},e.helpers.classNamesToSelector(c));var a,l,h=e.constants.colors,u=e.constants.colorModifiers,f={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"},p=((i={})[f.DEFAULT]=h.SLATE,i[f.INVERTED]=h.WHITE,i[f.DANGER]=h.RED,i[f.ERROR]=h.RED,i[f.SUCCESS]=h.GREEN,i[f.PRIMARY]=h.BLUE,i[f.ACTIVE]=h.BLUE,i[f.INFO]=h.BLUE,i[f.FOCUS]=h.BLUE,i[f.WARNING]=h.ORANGE,i[f.DISABLED]=h.GRAY+u.LIGHTER,i[f.SUGGESTED]=h.PURPLE,i[f.DISABLED_CHECKED]=h.GRAY+u.LIGHT,i[f.SLATE_LIGHTEST]=h.SLATE+u.LIGHTEST,i[f.GRAY_DARKER]=h.GRAY+u.DARKER,i[f.ACTION]=h.GRAY,i),g={SMALL:"small",MEDIUM:"medium",LARGE:"large",EXTRA_LARGE:"extra-large"},v=function(t){var o,i;function h(){var e;return(e=t.call(this)||this).size=g.MEDIUM,e.iconCache=new Map,e.svgContent="",e}i=t,(o=h).prototype=Object.create(i.prototype),o.prototype.constructor=o,n(o,i);var u,v,d,y=h.prototype;return y.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()}))}},y.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 s=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(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),s()}catch(t){return i(t)}}.bind(this),i):(this.svgContent="",t())}catch(t){return i(t)}}.bind(this),i)}catch(t){return i(t)}}.bind(this),i)}catch(t){i(t)}}function c(){return this.svgContent=this.iconCache.get(this.icon),t()}return c.call(this)}.bind(this))},y.getSrc=function(){return new Promise(function(t,e){var r,o;if(!this.iconCache.has(this.src)){var n=function(){try{return i.call(this)}catch(t){return e(t)}}.bind(this),s=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 s(t)}}.bind(this),s):(this.svgContent="",t())}catch(t){return s(t)}}.bind(this),s)}catch(t){s(t)}}function i(){return this.svgContent=this.iconCache.get(this.src),t()}return i.call(this)}.bind(this))},y.parseSvg=function(t){return(new DOMParser).parseFromString(t,"image/svg+xml").firstChild},y.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))},y.render=function(){return e.html(a||(a=s(['<span class="','">',"</span>"])),c.ICON_WRAPPER,this.svgContent)},u=h,d=[{key:"styles",get:function(){var t=Object.keys(f).map((function(t){var r=f[t],o=p[r];return e.css(l||(l=s(["\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}}}}],(v=null)&&r(u.prototype,v),d&&r(u,d),Object.defineProperty(u,"prototype",{writable:!1}),h}(e.TSElement);e.customElementDefineHelper("ts-icon",v),t.TSIcon=v,t.classNames=c,t.sizes=g,t.typeColors=p,t.types=f,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "@tradeshift/elements.icon",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "repository": {
@@ -19,9 +19,9 @@ "type": "git",
   "scripts": {
-    "post-build": "node ./scripts/export-svg.js"
+    "pre-build": "node ./scripts/export-svg.js"
   },
   "dependencies": {
-    "@tradeshift/elements": "^0.38.0"
+    "@tradeshift/elements": "^0.39.0"
   },
   "src": "src/icon.js",
-  "gitHead": "00b9d48acbe486496c432652e3ca7c489041b1d8"
+  "gitHead": "3553e0208b3f9a52c6ca850412507c39ca11e0b7"
 }

README.md

@@ -35,3 +35,3 @@ <h1 align="center">
 | ---------- | ---------- | ------- | ------------ | ------------------------------------------------------- |
-| icon       | icon       | String  |              | Icon name, ex: 'arrow-up'                               |
+| icon       | icon       | String  |              | Icon name, ex: 'arrow-up' or inline svg string          |
 | src        | src        | String  |              | Url to svg for icon. It will override the icon property |
@@ -38,0 +38,0 @@ | size       | size       | String  | sizes.MEDIUM | 'small' or 'medium' or 'large'                          |

types/icon.d.ts

 export interface TSIconHTMLAttributes {
-	/**  Icon name, ex: 'arrow-up'  */
+	/**  Icon name, ex: 'arrow-up' or inline svg string  */
 	icon?: string;
@@ -26,3 +26,3 @@
 export interface TSIcon {
-	/**  Icon name, ex: 'arrow-up'  */
+	/**  Icon name, ex: 'arrow-up' or inline svg string  */
 	icon?: string;
@@ -29,0 +29,0 @@

Fixed 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

Improved metrics

Lines of code

375

increased by0.27%

Number of medium supply chain risk alerts

4

decreased by-20%

Worsened metrics

Total package byte prevSize

132938

decreased by-4.04%

Number of package files

124

decreased by-0.8%

Dependency changes

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

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

• Updated@tradeshift/elements@^0.39.0