@tradeshift/elements.modal - npm Package Compare versions

Comparing version 0.38.0 to 0.39.0

lib/modal.esm.js

@@ -1,1 +0,1 @@
-import{customElementDefineHelper as t,html as e,TSElement as i,CloseOnEscBehavior as n,unsafeCSS as o}from"@tradeshift/elements";import"@tradeshift/elements.button";import"@tradeshift/elements.cover";import"@tradeshift/elements.header";function a(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,e){return(r=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 l,d,c={CLOSE:"close",CLOSED:"closed",OPEN:"open",OPENED:"opened"},h={MEDIUM:"medium",LARGE:"large"},p=function(t){var c,p;function u(){var e=t.call(this)||this;return e.size=h.LARGE,e.title="",e.noCloseOnEscKey=!1,e.closeBehavior=new n(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)),e.hideHeader=!1,e.noPadding=!1,e.noCloseOnCoverClick=!1,e}p=t,(c=u).prototype=Object.create(p.prototype),c.prototype.constructor=c,r(c,p);var f,v,m,b=u.prototype;return b.open=function(){this.visible=!0},b.close=function(){this.noCloseOnCoverClick||(this.visible=!1,this.dispatchCustomEvent("close"))},b.handleTransition=function(t){"opacity"===t.propertyName&&(this.visible?this.dispatchCustomEvent("opened"):this.dispatchCustomEvent("closed"))},b.attributeChangedCallback=function(e,i,n){t.prototype.attributeChangedCallback.call(this,e,i,n),"data-visible"===e&&n&&this.dispatchCustomEvent("open")},b.render=function(){return e(l||(l=s(['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the `ts-note` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time `ts-button-group`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'],['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the \\`ts-note\\` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time \\`ts-button-group\\`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'])),this.direction,this.size,this.hidden,this.handleTransition,this.header,this.visible,this.close)},b.firstUpdated=function(){this.closeBehavior.start()},b.disconnectedCallback=function(){this.closeBehavior.stop(),t.prototype.disconnectedCallback.call(this)},f=u,m=[{key:"styles",get:function(){return[i.styles,o(".container{background-color:#fff;background-color:var(--ts-color-white);bottom:20px;bottom:var(--ts-unit);box-shadow:inset 0 0 0 1px #cbd7dc;box-shadow:var(--ts-boxshadow-border-default);display:flex;flex-direction:column;left:20px;left:var(--ts-unit);position:absolute;right:20px;right:var(--ts-unit);top:20px;top:var(--ts-unit);z-index:1500;z-index:var(--ts-zindex-modal)}ts-header{flex-grow:0;flex-shrink:0;padding:0 0 0 5px;padding:0 0 0 var(--ts-unit-quarter)}ts-header[dir=rtl]{padding:0 5px 0 0;padding:0 var(--ts-unit-quarter) 0 0}.note ::slotted(ts-note){flex-grow:0;padding-left:20px;padding-left:var(--ts-unit);padding-right:20px;padding-right:var(--ts-unit)}.close{height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}main{flex-grow:1;overflow:auto;padding:20px;padding:var(--ts-unit)}:host([no-padding]) main{padding:0}footer{flex-grow:0}.container.medium{bottom:12.5%;left:25%;right:25%;top:12.5%}.container.small{bottom:auto;left:50%;right:auto;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:380px;width:var(--ts-modal-width-small)}.fade-in{opacity:1;transition:visibility .1s linear .1s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:visible}.fade-out{opacity:0;transition:visibility .2s linear .1s,opacity .2s;transition:visibility var(--ts-transition-fast) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:hidden}@media (max-width:600px){.container,.container.medium,.container.small{bottom:10px;bottom:var(--ts-unit-half);left:10px;left:var(--ts-unit-half);right:10px;right:var(--ts-unit-half);top:10px;top:var(--ts-unit-half);-webkit-transform:translate(0);transform:translate(0);width:auto}.container main{padding:10px;padding:var(--ts-unit-half)}}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0,attribute:"data-dir"},size:{type:String,reflect:!0,attribute:"data-size"},title:{type:String,reflect:!0,attribute:"data-title"},visible:{type:Boolean,reflect:!0,attribute:"data-visible"},noCloseOnEscKey:{type:Boolean,attribute:"no-close-on-esc-key"},noCloseOnCoverClick:{type:Boolean,attribute:"no-close-on-cover-click"},hideHeader:{type:Boolean,attribute:"hide-header"},noPadding:{type:Boolean,attribute:"no-padding"}}}}],(v=[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}},{key:"hidden",get:function(){return this.visible?"fade-in":"fade-out"}},{key:"header",get:function(){return this.hideHeader?"":e(d||(d=s(['\n\t\t\t<ts-header .title="','" dir="','">\n\t\t\t\t<ts-button class="no-border" icon="close-clear" size="large" @click="','"></ts-button>\n\t\t\t</ts-header>\n\t\t'])),this.title,this.direction,this.close)}}])&&a(f.prototype,v),m&&a(f,m),u}(i);t("ts-modal",p);export{p as TSModal,c as customEventNames,h as sizes};
+import{customElementDefineHelper as t,html as e,TSElement as i,CloseOnEscBehavior as n,unsafeCSS as o}from"@tradeshift/elements";import"@tradeshift/elements.button";import"@tradeshift/elements.cover";import"@tradeshift/elements.header";function a(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,e){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},r(t,e)}function s(t,e){return e||(e=t.slice(0)),t.raw=e,t}var l,d,c={CLOSE:"close",CLOSED:"closed",OPEN:"open",OPENED:"opened"},h={MEDIUM:"medium",LARGE:"large"},p=function(t){var c,p;function u(){var e;return(e=t.call(this)||this).size=h.LARGE,e.title="",e.noCloseOnEscKey=!1,e.closeBehavior=new n(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)),e.hideHeader=!1,e.noPadding=!1,e.noCloseOnCoverClick=!1,e}p=t,(c=u).prototype=Object.create(p.prototype),c.prototype.constructor=c,r(c,p);var f,v,m,b=u.prototype;return b.open=function(){this.visible=!0},b.close=function(){this.noCloseOnCoverClick||(this.visible=!1,this.dispatchCustomEvent("close"))},b.handleTransition=function(t){"opacity"===t.propertyName&&(this.visible?this.dispatchCustomEvent("opened"):this.dispatchCustomEvent("closed"))},b.attributeChangedCallback=function(e,i,n){t.prototype.attributeChangedCallback.call(this,e,i,n),"data-visible"===e&&n&&this.dispatchCustomEvent("open")},b.render=function(){return e(l||(l=s(['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the `ts-note` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time `ts-button-group`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'],['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the \\`ts-note\\` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time \\`ts-button-group\\`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'])),this.direction,this.size,this.hidden,this.handleTransition,this.header,this.visible,this.close)},b.firstUpdated=function(){this.closeBehavior.start()},b.disconnectedCallback=function(){this.closeBehavior.stop(),t.prototype.disconnectedCallback.call(this)},f=u,m=[{key:"styles",get:function(){return[i.styles,o(".container{background-color:#fff;background-color:var(--ts-color-white);bottom:20px;bottom:var(--ts-unit);box-shadow:inset 0 0 0 1px #cbd7dc;box-shadow:var(--ts-boxshadow-border-default);display:flex;flex-direction:column;left:20px;left:var(--ts-unit);position:absolute;right:20px;right:var(--ts-unit);top:20px;top:var(--ts-unit);z-index:1500;z-index:var(--ts-zindex-modal)}ts-header{flex-grow:0;flex-shrink:0;padding:0 0 0 5px;padding:0 0 0 var(--ts-unit-quarter)}ts-header[dir=rtl]{padding:0 5px 0 0;padding:0 var(--ts-unit-quarter) 0 0}.note ::slotted(ts-note){flex-grow:0;padding-left:20px;padding-left:var(--ts-unit);padding-right:20px;padding-right:var(--ts-unit)}.close{height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}main{flex-grow:1;overflow:auto;padding:20px;padding:var(--ts-unit)}:host([no-padding]) main{padding:0}footer{flex-grow:0}.container.medium{bottom:12.5%;left:25%;right:25%;top:12.5%}.container.small{bottom:auto;left:50%;right:auto;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:380px;width:var(--ts-modal-width-small)}.fade-in{opacity:1;transition:visibility .1s linear .1s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:visible}.fade-out{opacity:0;transition:visibility .2s linear .1s,opacity .2s;transition:visibility var(--ts-transition-fast) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:hidden}@media (max-width:600px){.container,.container.medium,.container.small{bottom:10px;bottom:var(--ts-unit-half);left:10px;left:var(--ts-unit-half);right:10px;right:var(--ts-unit-half);top:10px;top:var(--ts-unit-half);-webkit-transform:translate(0);transform:translate(0);width:auto}.container main{padding:10px;padding:var(--ts-unit-half)}}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0,attribute:"data-dir"},size:{type:String,reflect:!0,attribute:"data-size"},title:{type:String,reflect:!0,attribute:"data-title"},visible:{type:Boolean,reflect:!0,attribute:"data-visible"},noCloseOnEscKey:{type:Boolean,attribute:"no-close-on-esc-key"},noCloseOnCoverClick:{type:Boolean,attribute:"no-close-on-cover-click"},hideHeader:{type:Boolean,attribute:"hide-header"},noPadding:{type:Boolean,attribute:"no-padding"}}}}],(v=[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}},{key:"hidden",get:function(){return this.visible?"fade-in":"fade-out"}},{key:"header",get:function(){return this.hideHeader?"":e(d||(d=s(['\n\t\t\t<ts-header .title="','" dir="','">\n\t\t\t\t<ts-button class="no-border" icon="','" size="large" @click="','"></ts-button>\n\t\t\t</ts-header>\n\t\t'])),this.title,this.direction,'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="m11.998 10.584 4.292-4.291a1 1 0 0 1 1.414 1.414l-4.291 4.291 4.291 4.292a1 1 0 0 1-1.414 1.414l-4.292-4.291-4.29 4.291a1 1 0 1 1-1.415-1.414l4.291-4.292-4.291-4.29a1 1 0 0 1 1.414-1.415l4.291 4.291Z" fill="currentColor"/></g></svg>',this.close)}}])&&a(f.prototype,v),m&&a(f,m),Object.defineProperty(f,"prototype",{writable:!1}),u}(i);t("ts-modal",p);export{p as TSModal,c as customEventNames,h as sizes};

lib/modal.umd.js

@@ -1,1 +0,1 @@
-!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["exports","@tradeshift/elements"],o):o(((t="undefined"!=typeof globalThis?globalThis:t||self).ts=t.ts||{},t.ts.elements=t.ts.elements||{},t.ts.elements.modal=t.ts.elements.modal||{}),t.ts.elements)}(this,(function(t,o){"use strict";function e(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function r(t,o){return(r=Object.setPrototypeOf||function(t,o){return t.__proto__=o,t})(t,o)}function n(t,o){return o||(o=t.slice(0)),t.raw=o,t}function i(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function s(){return(s=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}function a(t,o){return(a=Object.setPrototypeOf||function(t,o){return t.__proto__=o,t})(t,o)}function c(t,o){return o||(o=t.slice(0)),t.raw=o,t}var l,d={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};s({},o.helpers.classNamesToSelector(d));var u,h,p=o.constants.colors,f=o.constants.colorModifiers,b={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"},g=((l={})[b.DEFAULT]=p.SLATE,l[b.INVERTED]=p.WHITE,l[b.DANGER]=p.RED,l[b.ERROR]=p.RED,l[b.SUCCESS]=p.GREEN,l[b.PRIMARY]=p.BLUE,l[b.ACTIVE]=p.BLUE,l[b.INFO]=p.BLUE,l[b.FOCUS]=p.BLUE,l[b.WARNING]=p.ORANGE,l[b.DISABLED]=p.GRAY+f.LIGHTER,l[b.SUGGESTED]=p.PURPLE,l[b.DISABLED_CHECKED]=p.GRAY+f.LIGHT,l[b.SLATE_LIGHTEST]=p.SLATE+f.LIGHTEST,l[b.GRAY_DARKER]=p.GRAY+f.DARKER,l[b.ACTION]=p.GRAY,l),v="medium",y=function(t){var e,r;function n(){var o=t.call(this)||this;return o.size=v,o.iconCache=new Map,o.svgContent="",o}r=t,(e=n).prototype=Object.create(r.prototype),e.prototype.constructor=e,a(e,r);var s,l,p=n.prototype;return p.attributeChangedCallback=function(o,e,r){var n=this;switch(t.prototype.attributeChangedCallback.call(this,o,e,r),o){case"icon":this.src||null===r||window.customElements.whenDefined("ts-icon").then((function(){n.getIcon()}));break;case"src":null!==r&&window.customElements.whenDefined("ts-icon").then((function(){n.getSrc()}))}},p.getIcon=function(){return new Promise(function(t,o){var e,r,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 o(t)}}.bind(this),s=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return o(t)}}.bind(this);try{return Promise.resolve(import("@tradeshift/elements.icon/lib/assets/icons/"+this.icon+".svg")).then(function(o){try{return e=o.default,Promise.resolve(fetch(e)).then(function(o){try{return(r=o).ok?Promise.resolve(this.extractSvgContent(r)).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))},p.getSrc=function(){return new Promise(function(t,o){var e,r;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 o(t)}}.bind(this),i=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return o(t)}}.bind(this);try{return Promise.resolve(fetch(this.src)).then(function(o){try{return(e=o).ok?Promise.resolve(this.extractSvgContent(e)).then(function(t){try{return r=t,this.iconCache.set(this.src,r),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))},p.extractSvgContent=function(t){return new Promise((function(o,e){var r,n,i;return Promise.resolve(t.text()).then((function(t){try{return r=t,n=new DOMParser,i=n.parseFromString(r,"image/svg+xml"),o(i.firstChild)}catch(t){return e(t)}}),e)}))},p.render=function(){return o.html(u||(u=c(['<span class="','">',"</span>"])),d.ICON_WRAPPER,this.svgContent)},s=n,l=[{key:"styles",get:function(){var t=Object.keys(b).map((function(t){var e=b[t],r=g[e];return o.css(h||(h=c(["\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"])),o.unsafeCSS(e),o.unsafeCSS(r))}));return[o.TSElement.styles,o.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&&i(s.prototype,null),l&&i(s,l),n}(o.TSElement);function m(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function x(t,o){return(x=Object.setPrototypeOf||function(t,o){return t.__proto__=o,t})(t,o)}function w(t,o){return o||(o=t.slice(0)),t.raw=o,t}o.customElementDefineHelper("ts-icon",y);var k,E,C={PRIMARY:"primary",SECONDARY:"secondary",TEXT:"text",ACCEPT:"accept",WARNING:"warning",DANGER:"danger"},S=function(t){var e,r;function n(){var o=t.call(this)||this;return o.grouped=!1,o}r=t,(e=n).prototype=Object.create(r.prototype),e.prototype.constructor=e,x(e,r);var i,s,a,c=n.prototype;return c.updated=function(t){var o=this;t.forEach((function(t,e){"focused"===e&&(t||window.customElements.whenDefined("ts-button").then((function(){return o.shadowRoot.getElementById("button").focus()})))}))},c.clickHandler=function(t){this.disabled||this.busy||this.dispatchCustomEvent("button-click",t)},c.render=function(){return o.html(k||(k=w(['\n\t\t\t<button id="button" ?disabled="','" dir="','" @click="','">\n\t\t\t\t',"\n\t\t\t\t<span>\n\t\t\t\t\t\x3c!-- Text of the button should be wrapped around `ts-button` element --\x3e\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t"],['\n\t\t\t<button id="button" ?disabled="','" dir="','" @click="','">\n\t\t\t\t',"\n\t\t\t\t<span>\n\t\t\t\t\t\x3c!-- Text of the button should be wrapped around \\`ts-button\\` element --\x3e\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t"])),this.disabled,this.direction,this.clickHandler,this.icon?o.html(E||(E=w([' <ts-icon icon="','" size="large" type="','"></ts-icon> '])),this.icon,this.iconType):"")},i=n,a=[{key:"styles",get:function(){return[o.TSElement.styles,o.unsafeCSS(":host{--ts-box-shadow-color:transparent;display:inline-block;font-size:14px;font-size:var(--ts-font-size-default);line-height:20px;line-height:var(--ts-unit)}:host>button{border:none;border-radius:40px;border-radius:var(--ts-unit-double);box-shadow:inset 0 0 0 2px var(--ts-box-shadow-color);box-shadow:var(--ts-boxshadow-focus-border) var(--ts-box-shadow-color);font-size:14px;font-size:var(--ts-font-size-default);min-width:40px;min-width:var(--ts-unit-double);padding:0;position:relative}:host span{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;font-weight:600;font-weight:var(--ts-fontweight-semibold);line-height:20px;line-height:var(--ts-unit);padding:10px 20px;padding:var(--ts-unit-half) var(--ts-unit);text-transform:uppercase;white-space:nowrap}:host(:not([busy]))>button:hover{background:#e6ecef;background:var(--ts-color-gray-lighter);cursor:pointer}:host(:not([type]))>button,:host([type=secondary])>button{background:#fff;background:var(--ts-color-white);box-shadow:inset 0 0 0 1px #cbd7dc;box-shadow:var(--ts-boxshadow-border-default)}:host(:not([type]))>button:focus,:host([type=secondary])>button:focus{box-shadow:inset 0 0 0 2px #00aeff;box-shadow:var(--ts-boxshadow-focus-border) var(--ts-color-blue)}:host(.no-border)>button{background:transparent;box-shadow:none}:host(.no-border)>button:focus{box-shadow:none}:host([type=primary])>button{background:#00aeff;background:var(--ts-color-blue);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=primary])>button:hover{background:#0085cc;background:var(--ts-color-blue-dark)}:host(:not([busy])[type=primary])>button:focus{--ts-box-shadow-color:var(--ts-color-blue-darker)}:host([type=accept])>button{background:#50c610;background:var(--ts-color-green);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=accept])>button:hover{background:#399d0b;background:var(--ts-color-green-dark)}:host(:not([busy])[type=accept])>button:focus{--ts-box-shadow-color:var(--ts-color-green-darker)}:host([type=warning])>button{background:#ff8c00;background:var(--ts-color-orange);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=warning])>button:hover{background:#f07c00;background:var(--ts-color-orange-dark)}:host(:not([busy])[type=warning])>button:focus{--ts-box-shadow-color:var(--ts-color-orange-darker)}:host([type=danger])>button{background:#bd0000;background:var(--ts-color-red);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=danger])>button:hover{background:#900;background:var(--ts-color-red-dark)}:host(:not([busy])[type=danger])>button:focus{--ts-box-shadow-color:var(--ts-color-red-darker)}:host([type=text])>button{align-items:center;background:transparent;border-radius:3px;border-radius:var(--ts-radius);display:flex}:host([type=text]) span{color:#00aeff;color:var(--ts-color-blue);font-weight:400;font-weight:var(--ts-fontweight);letter-spacing:normal;padding:0 5px;padding:0 var(--ts-unit-quarter);text-transform:none}:host(:not([busy])[type=text])>button:hover{background:transparent}:host(:not([busy])[type=text])>button:hover span{color:#0085cc;color:var(--ts-color-blue-dark)}:host(:not([busy])[type=text])>button:focus{background:#00aeff;background:var(--ts-color-blue)}:host(:not([busy])[type=text])>button:focus span{color:#fff;color:var(--ts-color-white)}[dir=ltr] :host([type=text][icon])>button{padding-left:10px}:host([type=text][icon])>button:dir(ltr){padding-left:10px}[dir=rtl] :host([type=text][icon])>button{padding-right:10px}:host([type=text][icon])>button:dir(rtl){padding-right:10px}[dir=ltr] :host([type=text][icon])>button{padding-left:var(--ts-unit-half)}:host([type=text][icon])>button:dir(ltr){padding-left:var(--ts-unit-half)}[dir=rtl] :host([type=text][icon])>button{padding-right:var(--ts-unit-half)}:host([type=text][icon])>button:dir(rtl){padding-right:var(--ts-unit-half)}:host([type=text][icon])>button{-webkit-padding-start:10px;-webkit-padding-start:var(--ts-unit-half);padding-inline-start:10px;padding-inline-start:var(--ts-unit-half)}:host([type=text][icon])>button span{color:var(--ts-color-blue-darkest);padding:10px;padding:var(--ts-unit-half)}:host(:not([busy])[type=text][icon])>button:hover{background:#eff3f5;background:var(--ts-color-gray-lightest)}:host(:not([busy])[type=text][icon])>button:hover span{color:var(--ts-color-blue-darkest)}:host(:not([busy])[type=text][icon])>button:focus{--ts-box-shadow-color:var(--ts-color-gray);background:#eff3f5;background:var(--ts-color-gray-lightest)}:host(:not([busy])[type=text][icon])>button:focus span{color:var(--ts-color-blue-darkest)}:host(:not([type=text])[size=micro])>button{border-radius:20px;border-radius:var(--ts-unit);font-size:11px;font-size:var(--ts-fontsize-small);padding:0 10px;padding:0 var(--ts-unit-half)}:host(:not([type=text])[size=micro]) span{font-size:11px;font-size:var(--ts-fontsize-small);padding:0 2.5px;padding:0 var(--ts-unit-eighth)}:host([full-width]),:host([grouped]){display:block;text-align:center}:host([full-width])>button,:host([grouped])>button{display:block;width:100%}:host([grouped]){margin-bottom:10px;margin-bottom:var(--ts-unit-half)}:host([inline]){display:inline-block}:host([inline])>button{display:inline;width:auto}:host([grouped][type=text])>button{display:flex;justify-content:center}:host(:not([type=text])[icon])>button{height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}:host(:not([type=text])[icon]) ts-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}:host(:not([type=text])[icon]) span{visibility:hidden}:host([disabled]){cursor:not-allowed}:host([disabled])>button{background-color:#e6ecef;background-color:var(--ts-disabled-background-color);box-shadow:none;pointer-events:none}:host([disabled]) span{color:#829fab;color:var(--ts-disabled-color)}:host([disabled][type=text])>button{background-color:transparent}:host([busy])>:first-child{-webkit-animation:move 1s linear infinite;animation:move 1s linear infinite;background-image:linear-gradient(-45deg,#cbd7dc 25%,#eff3f5 0,#eff3f5 50%,#cbd7dc 0,#cbd7dc 75%,#eff3f5 0,#eff3f5);background-image:linear-gradient(-45deg,var(--ts-color-gray-light) 25%,var(--ts-color-gray-lightest) 25%,var(--ts-color-gray-lightest) 50%,var(--ts-color-gray-light) 50%,var(--ts-color-gray-light) 75%,var(--ts-color-gray-lightest) 75%,var(--ts-color-gray-lightest));background-size:40px 40px;background-size:var(--ts-unit-double) var(--ts-unit-double);box-shadow:none;cursor:default;pointer-events:none}:host([busy])>:first-child>*{visibility:hidden}@-webkit-keyframes move{0%{background-position:0 0}to{background-position:40px 40px;background-position:var(--ts-unit-double) var(--ts-unit-double)}}@keyframes move{0%{background-position:0 0}to{background-position:40px 40px;background-position:var(--ts-unit-double) var(--ts-unit-double)}}")]}},{key:"properties",get:function(){return{type:{type:String,reflect:!0},size:{type:String,reflect:!0},busy:{type:Boolean,reflect:!0},icon:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},dir:{type:String,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},grouped:{type:Boolean,reflect:!0},inline:{type:Boolean,reflect:!0}}}}],(s=[{key:"direction",get:function(){return this.dir||this.bodyDir}},{key:"iconType",get:function(){return this.icon&&this.type===C.TEXT?"action":[C.DANGER,C.WARNING,C.ACCEPT,C.PRIMARY].indexOf(this.type)>-1?"inverted":"default"}}])&&m(i.prototype,s),a&&m(i,a),n}(o.TSElement);function z(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function O(t,o){return(O=Object.setPrototypeOf||function(t,o){return t.__proto__=o,t})(t,o)}o.customElementDefineHelper("ts-button",S);var T,R=function(t){var e,r,n,i;function s(){var o=t.call(this)||this;return o.visible=!1,o}return r=t,(e=s).prototype=Object.create(r.prototype),e.prototype.constructor=e,O(e,r),s.prototype.render=function(){return o.html(T||(t=[' <div class="cover ','"></div> '],e||(e=t.slice(0)),t.raw=e,T=t),this.visible?"ts-fadeIn":"ts-fadeOut");var t,e},n=s,i=[{key:"styles",get:function(){return[o.TSElement.styles,o.unsafeCSS(".cover{background-color:#0f151a;background-color:var(--ts-color-black);bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;visibility:hidden;z-index:10000;z-index:var(--ts-zindex-max)}.ts-fadeIn{opacity:.8;transition:visibility .1s linear .1s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:visible}.ts-fadeOut{opacity:0;transition:visibility .1s linear .2s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-fast),opacity var(--ts-transition-fast);visibility:hidden}:host(.ts-aside-cover)>div{pointer-events:auto;z-index:1999;z-index:var(--ts-zindex-aside-cover)}:host(.ts-dialog-cover)>div{pointer-events:auto;z-index:2999;z-index:var(--ts-zindex-dialog-cover)}:host(.ts-spin-cover)>div{pointer-events:auto;z-index:3999;z-index:var(--ts-zindex-spin-cover)}:host(.ts-modal-cover)>div{pointer-events:auto;z-index:1499;z-index:var(--ts-zindex-modal-cover)}")]}},{key:"properties",get:function(){return{visible:{type:Boolean,attribute:"data-visible",reflect:!0}}}}],null&&z(n.prototype,null),i&&z(n,i),s}(o.TSElement);function A(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function D(t,o){return(D=Object.setPrototypeOf||function(t,o){return t.__proto__=o,t})(t,o)}o.customElementDefineHelper("ts-cover",R);var P,I=function(t){var e,r,n,i;function s(){return t.apply(this,arguments)||this}return r=t,(e=s).prototype=Object.create(r.prototype),e.prototype.constructor=e,D(e,r),s.prototype.render=function(){return o.html(P||(t=['\n\t\t\t<img .src="','" .alt="','"></img>\n\t\t'],e||(e=t.slice(0)),t.raw=e,P=t),this.src,this.alt);var t,e},n=s,i=[{key:"styles",get:function(){return[o.TSElement.styles,o.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&&A(n.prototype,null),i&&A(n,i),s}(o.TSElement);function _(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function N(t,o){return(N=Object.setPrototypeOf||function(t,o){return t.__proto__=o,t})(t,o)}function G(t,o){return o||(o=t.slice(0)),t.raw=o,t}o.customElementDefineHelper("ts-app-icon",I);var B,j,L,H,U=function(t){var e,r;function n(){var o=t.call(this)||this;return o.color="white",o}r=t,(e=n).prototype=Object.create(r.prototype),e.prototype.constructor=e,N(e,r);var i,s,a,c=n.prototype;return c.getIcon=function(){return this.icon?o.html(B||(B=G([' <ts-app-icon class="icon" src="','" alt="','"></ts-app-icon> '])),this.icon,this.title):""},c.openChromeMenu=function(){window.top.postMessage('app-broadcast:{"appIds": "Tradeshift.Chrome", "key": "ts-broadcast-chrome-menu-open"}',"*")},c.getTitle=function(){return this.title?o.html(j||(j=G([' <span class="title">',"</span> "])),this.title):""},c.render=function(){return o.html(L||(L=G(["\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())},i=n,a=[{key:"styles",get:function(){return[o.TSElement.styles,o.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{height:40px;height: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}}}}],(s=[{key:"getMenuSwitch",get:function(){return o.html(H||(H=G(['\n\t\t\t<ts-icon\n\t\t\t\t@click="','"\n\t\t\t\tclass="menu-switch"\n\t\t\t\ticon="menu-switch"\n\t\t\t\tsize="large"\n\t\t\t\ttabindex="0"\n\t\t\t></ts-icon>\n\t\t'])),this.openChromeMenu)}},{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}}])&&_(i.prototype,s),a&&_(i,a),n}(o.TSElement);o.customElementDefineHelper("ts-header",U);var M,Y,W={MEDIUM:"medium",LARGE:"large"},F=function(t){var i,s;function a(){var e=t.call(this)||this;return e.size=W.LARGE,e.title="",e.noCloseOnEscKey=!1,e.closeBehavior=new o.CloseOnEscBehavior(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)),e.hideHeader=!1,e.noPadding=!1,e.noCloseOnCoverClick=!1,e}s=t,(i=a).prototype=Object.create(s.prototype),i.prototype.constructor=i,r(i,s);var c,l,d,u=a.prototype;return u.open=function(){this.visible=!0},u.close=function(){this.noCloseOnCoverClick||(this.visible=!1,this.dispatchCustomEvent("close"))},u.handleTransition=function(t){"opacity"===t.propertyName&&(this.visible?this.dispatchCustomEvent("opened"):this.dispatchCustomEvent("closed"))},u.attributeChangedCallback=function(o,e,r){t.prototype.attributeChangedCallback.call(this,o,e,r),"data-visible"===o&&r&&this.dispatchCustomEvent("open")},u.render=function(){return o.html(M||(M=n(['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the `ts-note` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time `ts-button-group`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'],['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the \\`ts-note\\` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time \\`ts-button-group\\`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'])),this.direction,this.size,this.hidden,this.handleTransition,this.header,this.visible,this.close)},u.firstUpdated=function(){this.closeBehavior.start()},u.disconnectedCallback=function(){this.closeBehavior.stop(),t.prototype.disconnectedCallback.call(this)},c=a,d=[{key:"styles",get:function(){return[o.TSElement.styles,o.unsafeCSS(".container{background-color:#fff;background-color:var(--ts-color-white);bottom:20px;bottom:var(--ts-unit);box-shadow:inset 0 0 0 1px #cbd7dc;box-shadow:var(--ts-boxshadow-border-default);display:flex;flex-direction:column;left:20px;left:var(--ts-unit);position:absolute;right:20px;right:var(--ts-unit);top:20px;top:var(--ts-unit);z-index:1500;z-index:var(--ts-zindex-modal)}ts-header{flex-grow:0;flex-shrink:0;padding:0 0 0 5px;padding:0 0 0 var(--ts-unit-quarter)}ts-header[dir=rtl]{padding:0 5px 0 0;padding:0 var(--ts-unit-quarter) 0 0}.note ::slotted(ts-note){flex-grow:0;padding-left:20px;padding-left:var(--ts-unit);padding-right:20px;padding-right:var(--ts-unit)}.close{height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}main{flex-grow:1;overflow:auto;padding:20px;padding:var(--ts-unit)}:host([no-padding]) main{padding:0}footer{flex-grow:0}.container.medium{bottom:12.5%;left:25%;right:25%;top:12.5%}.container.small{bottom:auto;left:50%;right:auto;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:380px;width:var(--ts-modal-width-small)}.fade-in{opacity:1;transition:visibility .1s linear .1s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:visible}.fade-out{opacity:0;transition:visibility .2s linear .1s,opacity .2s;transition:visibility var(--ts-transition-fast) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:hidden}@media (max-width:600px){.container,.container.medium,.container.small{bottom:10px;bottom:var(--ts-unit-half);left:10px;left:var(--ts-unit-half);right:10px;right:var(--ts-unit-half);top:10px;top:var(--ts-unit-half);-webkit-transform:translate(0);transform:translate(0);width:auto}.container main{padding:10px;padding:var(--ts-unit-half)}}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0,attribute:"data-dir"},size:{type:String,reflect:!0,attribute:"data-size"},title:{type:String,reflect:!0,attribute:"data-title"},visible:{type:Boolean,reflect:!0,attribute:"data-visible"},noCloseOnEscKey:{type:Boolean,attribute:"no-close-on-esc-key"},noCloseOnCoverClick:{type:Boolean,attribute:"no-close-on-cover-click"},hideHeader:{type:Boolean,attribute:"hide-header"},noPadding:{type:Boolean,attribute:"no-padding"}}}}],(l=[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}},{key:"hidden",get:function(){return this.visible?"fade-in":"fade-out"}},{key:"header",get:function(){return this.hideHeader?"":o.html(Y||(Y=n(['\n\t\t\t<ts-header .title="','" dir="','">\n\t\t\t\t<ts-button class="no-border" icon="close-clear" size="large" @click="','"></ts-button>\n\t\t\t</ts-header>\n\t\t'])),this.title,this.direction,this.close)}}])&&e(c.prototype,l),d&&e(c,d),a}(o.TSElement);o.customElementDefineHelper("ts-modal",F),t.TSModal=F,t.customEventNames={CLOSE:"close",CLOSED:"closed",OPEN:"open",OPENED:"opened"},t.sizes=W,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@tradeshift/elements")):"function"==typeof define&&define.amd?define(["exports","@tradeshift/elements"],o):o(((t="undefined"!=typeof globalThis?globalThis:t||self).ts=t.ts||{},t.ts.elements=t.ts.elements||{},t.ts.elements.modal=t.ts.elements.modal||{}),t.ts.elements)}(this,(function(t,o){"use strict";function e(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function r(t,o){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},r(t,o)}function n(t,o){return o||(o=t.slice(0)),t.raw=o,t}function i(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function s(){return s=Object.assign?Object.assign.bind():function(t){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},s.apply(this,arguments)}function a(t,o){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},a(t,o)}function c(t,o){return o||(o=t.slice(0)),t.raw=o,t}var l,d={ICON_WRAPPER:"icon-wrapper",CIRCULAR_BG:"circular-background"};s({},o.helpers.classNamesToSelector(d));var u,h,p=o.constants.colors,f=o.constants.colorModifiers,b={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"},g=((l={})[b.DEFAULT]=p.SLATE,l[b.INVERTED]=p.WHITE,l[b.DANGER]=p.RED,l[b.ERROR]=p.RED,l[b.SUCCESS]=p.GREEN,l[b.PRIMARY]=p.BLUE,l[b.ACTIVE]=p.BLUE,l[b.INFO]=p.BLUE,l[b.FOCUS]=p.BLUE,l[b.WARNING]=p.ORANGE,l[b.DISABLED]=p.GRAY+f.LIGHTER,l[b.SUGGESTED]=p.PURPLE,l[b.DISABLED_CHECKED]=p.GRAY+f.LIGHT,l[b.SLATE_LIGHTEST]=p.SLATE+f.LIGHTEST,l[b.GRAY_DARKER]=p.GRAY+f.DARKER,l[b.ACTION]=p.GRAY,l),v="medium",y=function(t){var e,r;function n(){var o;return(o=t.call(this)||this).size=v,o.iconCache=new Map,o.svgContent="",o}r=t,(e=n).prototype=Object.create(r.prototype),e.prototype.constructor=e,a(e,r);var s,l,p=n.prototype;return p.attributeChangedCallback=function(o,e,r){var n=this;switch(t.prototype.attributeChangedCallback.call(this,o,e,r),o){case"icon":!this.src&&r&&window.customElements.whenDefined("ts-icon").then((function(){n.getIcon()}));break;case"src":r&&window.customElements.whenDefined("ts-icon").then((function(){n.getSrc()}))}},p.getIcon=function(){return new Promise(function(t,o){var e,r,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 a.call(this)}catch(t){return o(t)}}.bind(this),s=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return o(t)}}.bind(this);try{return Promise.resolve(import("@tradeshift/elements.icon/lib/assets/icons/"+this.icon+".svg")).then(function(o){try{return e=o.default,Promise.resolve(fetch(e)).then(function(o){try{return(r=o).ok?Promise.resolve(this.extractSvgContent(r)).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 a(){return this.svgContent=this.iconCache.get(this.icon),t()}return a.call(this)}.bind(this))},p.getSrc=function(){return new Promise(function(t,o){var e,r;if(!this.iconCache.has(this.src)){var n=function(){try{return s.call(this)}catch(t){return o(t)}}.bind(this),i=function(e){try{return console.error(e),this.svgContent="",t()}catch(t){return o(t)}}.bind(this);try{return Promise.resolve(fetch(this.src)).then(function(o){try{return(e=o).ok?Promise.resolve(this.extractSvgContent(e)).then(function(t){try{return r=t,this.iconCache.set(this.src,r),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))},p.parseSvg=function(t){return(new DOMParser).parseFromString(t,"image/svg+xml").firstChild},p.extractSvgContent=function(t){return new Promise(function(o,e){var r;return Promise.resolve(t.text()).then(function(t){try{return r=t,o(this.parseSvg(r))}catch(t){return e(t)}}.bind(this),e)}.bind(this))},p.render=function(){return o.html(u||(u=c(['<span class="','">',"</span>"])),d.ICON_WRAPPER,this.svgContent)},s=n,l=[{key:"styles",get:function(){var t=Object.keys(b).map((function(t){var e=b[t],r=g[e];return o.css(h||(h=c(["\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"])),o.unsafeCSS(e),o.unsafeCSS(r))}));return[o.TSElement.styles,o.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&&i(s.prototype,null),l&&i(s,l),Object.defineProperty(s,"prototype",{writable:!1}),n}(o.TSElement);function m(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function x(t,o){return x=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},x(t,o)}function w(t,o){return o||(o=t.slice(0)),t.raw=o,t}o.customElementDefineHelper("ts-icon",y);var k,E,S={PRIMARY:"primary",SECONDARY:"secondary",TEXT:"text",ACCEPT:"accept",WARNING:"warning",DANGER:"danger"},C=function(t){var e,r;function n(){var o;return(o=t.call(this)||this).grouped=!1,o}r=t,(e=n).prototype=Object.create(r.prototype),e.prototype.constructor=e,x(e,r);var i,s,a,c=n.prototype;return c.updated=function(t){var o=this;t.forEach((function(t,e){"focused"===e&&(t||window.customElements.whenDefined("ts-button").then((function(){return o.shadowRoot.getElementById("button").focus()})))}))},c.clickHandler=function(t){this.disabled||this.busy||this.dispatchCustomEvent("button-click",t)},c.getIcon=function(){return this.icon||this.iconSrc?o.html(k||(k=w(['<ts-icon .icon="','" .src="','" size="large" type="','"></ts-icon>'])),this.icon,this.iconSrc,this.iconType):""},c.render=function(){return o.html(E||(E=w(['\n\t\t\t<button id="button" ?disabled="','" dir="','" @click="','">\n\t\t\t\t',"\n\t\t\t\t<span>\n\t\t\t\t\t\x3c!-- Text of the button should be wrapped around `ts-button` element --\x3e\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t"],['\n\t\t\t<button id="button" ?disabled="','" dir="','" @click="','">\n\t\t\t\t',"\n\t\t\t\t<span>\n\t\t\t\t\t\x3c!-- Text of the button should be wrapped around \\`ts-button\\` element --\x3e\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t"])),this.disabled,this.direction,this.clickHandler,this.getIcon())},i=n,a=[{key:"styles",get:function(){return[o.TSElement.styles,o.unsafeCSS(":host{--ts-box-shadow-color:transparent;display:inline-block;font-size:14px;font-size:var(--ts-font-size-default);line-height:20px;line-height:var(--ts-unit)}:host>button{border:none;border-radius:40px;border-radius:var(--ts-unit-double);box-shadow:inset 0 0 0 2px var(--ts-box-shadow-color);box-shadow:var(--ts-boxshadow-focus-border) var(--ts-box-shadow-color);font-size:14px;font-size:var(--ts-font-size-default);min-width:40px;min-width:var(--ts-unit-double);padding:0;position:relative}:host span{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;font-weight:600;font-weight:var(--ts-fontweight-semibold);line-height:20px;line-height:var(--ts-unit);padding:10px 20px;padding:var(--ts-unit-half) var(--ts-unit);text-transform:uppercase;white-space:nowrap}:host(:not([busy]))>button:hover{background:#e6ecef;background:var(--ts-color-gray-lighter);cursor:pointer}:host(:not([type]))>button,:host([type=secondary])>button{background:#fff;background:var(--ts-color-white);box-shadow:inset 0 0 0 1px #cbd7dc;box-shadow:var(--ts-boxshadow-border-default)}:host(:not([type]))>button:focus,:host([type=secondary])>button:focus{box-shadow:inset 0 0 0 2px #00aeff;box-shadow:var(--ts-boxshadow-focus-border) var(--ts-color-blue)}:host(.no-border)>button{background:transparent;box-shadow:none}:host(.no-border)>button:focus{box-shadow:none}:host([type=primary])>button{background:#00aeff;background:var(--ts-color-blue);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=primary])>button:hover{background:#0085cc;background:var(--ts-color-blue-dark)}:host(:not([busy])[type=primary])>button:focus{--ts-box-shadow-color:var(--ts-color-blue-darker)}:host([type=accept])>button{background:#50c610;background:var(--ts-color-green);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=accept])>button:hover{background:#399d0b;background:var(--ts-color-green-dark)}:host(:not([busy])[type=accept])>button:focus{--ts-box-shadow-color:var(--ts-color-green-darker)}:host([type=warning])>button{background:#ff8c00;background:var(--ts-color-orange);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=warning])>button:hover{background:#f07c00;background:var(--ts-color-orange-dark)}:host(:not([busy])[type=warning])>button:focus{--ts-box-shadow-color:var(--ts-color-orange-darker)}:host([type=danger])>button{background:#bd0000;background:var(--ts-color-red);color:#fff;color:var(--ts-color-white)}:host(:not([busy])[type=danger])>button:hover{background:#900;background:var(--ts-color-red-dark)}:host(:not([busy])[type=danger])>button:focus{--ts-box-shadow-color:var(--ts-color-red-darker)}:host([type=text])>button{align-items:center;background:transparent;border-radius:3px;border-radius:var(--ts-radius);display:flex}:host([type=text]) span{color:#00aeff;color:var(--ts-color-blue);font-weight:400;font-weight:var(--ts-fontweight);letter-spacing:normal;padding:0 5px;padding:0 var(--ts-unit-quarter);text-transform:none}:host(:not([busy])[type=text])>button:hover{background:transparent}:host(:not([busy])[type=text])>button:hover span{color:#0085cc;color:var(--ts-color-blue-dark)}:host(:not([busy])[type=text])>button:focus{background:#00aeff;background:var(--ts-color-blue)}:host(:not([busy])[type=text])>button:focus span{color:#fff;color:var(--ts-color-white)}[dir=ltr] :host([type=text][icon-src])>button,[dir=ltr] :host([type=text][icon])>button{padding-left:var(--ts-unit-half)}:host([type=text][icon-src])>button:dir(ltr),:host([type=text][icon])>button:dir(ltr){padding-left:var(--ts-unit-half)}[dir=rtl] :host([type=text][icon-src])>button,[dir=rtl] :host([type=text][icon])>button{padding-right:var(--ts-unit-half)}:host([type=text][icon-src])>button:dir(rtl),:host([type=text][icon])>button:dir(rtl){padding-right:var(--ts-unit-half)}[dir=ltr] :host([type=text][icon-src])>button,[dir=ltr] :host([type=text][icon])>button{padding-left:10px}:host([type=text][icon-src])>button:dir(ltr),:host([type=text][icon])>button:dir(ltr){padding-left:10px}[dir=rtl] :host([type=text][icon-src])>button,[dir=rtl] :host([type=text][icon])>button{padding-right:10px}:host([type=text][icon-src])>button:dir(rtl),:host([type=text][icon])>button:dir(rtl){padding-right:10px}:host([type=text][icon-src])>button,:host([type=text][icon])>button{-webkit-padding-start:10px;-webkit-padding-start:var(--ts-unit-half);padding-inline-start:10px;padding-inline-start:var(--ts-unit-half)}:host([type=text][icon-src])>button span,:host([type=text][icon])>button span{color:var(--ts-color-blue-darkest);padding:10px;padding:var(--ts-unit-half)}:host(:not([busy])[type=text][icon-src])>button:hover,:host(:not([busy])[type=text][icon])>button:hover{background:#eff3f5;background:var(--ts-color-gray-lightest)}:host(:not([busy])[type=text][icon-src])>button:hover span,:host(:not([busy])[type=text][icon])>button:hover span{color:var(--ts-color-blue-darkest)}:host(:not([busy])[type=text][icon-src])>button:focus,:host(:not([busy])[type=text][icon])>button:focus{--ts-box-shadow-color:var(--ts-color-gray);background:#eff3f5;background:var(--ts-color-gray-lightest)}:host(:not([busy])[type=text][icon-src])>button:focus span,:host(:not([busy])[type=text][icon])>button:focus span{color:var(--ts-color-blue-darkest)}:host(:not([type=text])[size=micro])>button{border-radius:20px;border-radius:var(--ts-unit);font-size:11px;font-size:var(--ts-fontsize-small);padding:0 10px;padding:0 var(--ts-unit-half)}:host(:not([type=text])[size=micro]) span{font-size:11px;font-size:var(--ts-fontsize-small);padding:0 2.5px;padding:0 var(--ts-unit-eighth)}:host([full-width]),:host([grouped]){display:block;text-align:center}:host([full-width])>button,:host([grouped])>button{display:block;width:100%}:host([grouped]){margin-bottom:10px;margin-bottom:var(--ts-unit-half)}:host([inline]){display:inline-block}:host([inline])>button{display:inline;width:auto}:host([grouped][type=text])>button{display:flex;justify-content:center}:host(:not([type=text])[icon-src])>button,:host(:not([type=text])[icon])>button{height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}:host(:not([type=text])[icon-src]) ts-icon,:host(:not([type=text])[icon]) ts-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}:host(:not([type=text])[icon-src]) span,:host(:not([type=text])[icon]) span{visibility:hidden}:host([disabled]){cursor:not-allowed}:host([disabled])>button{background-color:#e6ecef;background-color:var(--ts-disabled-background-color);box-shadow:none;pointer-events:none}:host([disabled]) span{color:#829fab;color:var(--ts-disabled-color)}:host([disabled][type=text])>button{background-color:transparent}:host([busy])>:first-child{-webkit-animation:move 1s linear infinite;animation:move 1s linear infinite;background-image:linear-gradient(-45deg,#cbd7dc 25%,#eff3f5 0,#eff3f5 50%,#cbd7dc 0,#cbd7dc 75%,#eff3f5 0,#eff3f5);background-image:linear-gradient(-45deg,var(--ts-color-gray-light) 25%,var(--ts-color-gray-lightest) 25%,var(--ts-color-gray-lightest) 50%,var(--ts-color-gray-light) 50%,var(--ts-color-gray-light) 75%,var(--ts-color-gray-lightest) 75%,var(--ts-color-gray-lightest));background-size:40px 40px;background-size:var(--ts-unit-double) var(--ts-unit-double);box-shadow:none;cursor:default;pointer-events:none}:host([busy])>:first-child>*{visibility:hidden}@-webkit-keyframes move{0%{background-position:0 0}to{background-position:40px 40px;background-position:var(--ts-unit-double) var(--ts-unit-double)}}@keyframes move{0%{background-position:0 0}to{background-position:40px 40px;background-position:var(--ts-unit-double) var(--ts-unit-double)}}")]}},{key:"properties",get:function(){return{type:{type:String,reflect:!0},size:{type:String,reflect:!0},busy:{type:Boolean,reflect:!0},icon:{type:String,reflect:!0},iconSrc:{type:String,reflect:!0,attribute:"icon-src"},disabled:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},dir:{type:String,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},grouped:{type:Boolean,reflect:!0},inline:{type:Boolean,reflect:!0}}}}],(s=[{key:"direction",get:function(){return this.dir||this.bodyDir}},{key:"iconType",get:function(){return(this.icon||this.iconSrc)&&this.type===S.TEXT?"action":[S.DANGER,S.WARNING,S.ACCEPT,S.PRIMARY].indexOf(this.type)>-1?"inverted":"default"}}])&&m(i.prototype,s),a&&m(i,a),Object.defineProperty(i,"prototype",{writable:!1}),n}(o.TSElement);function O(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function z(t,o){return z=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},z(t,o)}o.customElementDefineHelper("ts-button",C);var T,R=function(t){var e,r,n,i;function s(){var o;return(o=t.call(this)||this).visible=!1,o}return r=t,(e=s).prototype=Object.create(r.prototype),e.prototype.constructor=e,z(e,r),s.prototype.render=function(){return o.html(T||(t=[' <div class="cover ','"></div> '],e||(e=t.slice(0)),t.raw=e,T=t),this.visible?"ts-fadeIn":"ts-fadeOut");var t,e},n=s,i=[{key:"styles",get:function(){return[o.TSElement.styles,o.unsafeCSS(".cover{background-color:#0f151a;background-color:var(--ts-color-black);bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;visibility:hidden;z-index:10000;z-index:var(--ts-zindex-max)}.ts-fadeIn{opacity:.8;transition:visibility .1s linear .1s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:visible}.ts-fadeOut{opacity:0;transition:visibility .1s linear .2s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-fast),opacity var(--ts-transition-fast);visibility:hidden}:host(.ts-aside-cover)>div{pointer-events:auto;z-index:1999;z-index:var(--ts-zindex-aside-cover)}:host(.ts-dialog-cover)>div{pointer-events:auto;z-index:2999;z-index:var(--ts-zindex-dialog-cover)}:host(.ts-spin-cover)>div{pointer-events:auto;z-index:3999;z-index:var(--ts-zindex-spin-cover)}:host(.ts-modal-cover)>div{pointer-events:auto;z-index:1499;z-index:var(--ts-zindex-modal-cover)}")]}},{key:"properties",get:function(){return{visible:{type:Boolean,attribute:"data-visible",reflect:!0}}}}],null&&O(n.prototype,null),i&&O(n,i),Object.defineProperty(n,"prototype",{writable:!1}),s}(o.TSElement);function P(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function A(t,o){return A=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},A(t,o)}o.customElementDefineHelper("ts-cover",R);var D,I=function(t){var e,r,n,i;function s(){return t.apply(this,arguments)||this}return r=t,(e=s).prototype=Object.create(r.prototype),e.prototype.constructor=e,A(e,r),s.prototype.render=function(){return o.html(D||(t=['\n\t\t\t<img .src="','" .alt="','"></img>\n\t\t'],e||(e=t.slice(0)),t.raw=e,D=t),this.src,this.alt);var t,e},n=s,i=[{key:"styles",get:function(){return[o.TSElement.styles,o.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&&P(n.prototype,null),i&&P(n,i),Object.defineProperty(n,"prototype",{writable:!1}),s}(o.TSElement);function j(t,o){for(var e=0;e<o.length;e++){var r=o[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function _(t,o){return _=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,o){return t.__proto__=o,t},_(t,o)}function B(t,o){return o||(o=t.slice(0)),t.raw=o,t}o.customElementDefineHelper("ts-app-icon",I);var N,G,L,H,M=function(t){var e,r;function n(){var o;return(o=t.call(this)||this).color="white",o}r=t,(e=n).prototype=Object.create(r.prototype),e.prototype.constructor=e,_(e,r);var i,s,a,c=n.prototype;return c.getIcon=function(){return this.icon?o.html(N||(N=B([' <ts-app-icon class="icon" src="','" alt="','"></ts-app-icon> '])),this.icon,this.title):""},c.openChromeMenu=function(){window.top.postMessage('app-broadcast:{"appIds": "Tradeshift.Chrome", "key": "ts-broadcast-chrome-menu-open"}',"*")},c.getTitle=function(){return this.title?o.html(G||(G=B([' <span class="title">',"</span> "])),this.title):""},c.render=function(){return o.html(L||(L=B(["\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())},i=n,a=[{key:"styles",get:function(){return[o.TSElement.styles,o.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}}}}],(s=[{key:"getMenuSwitch",get:function(){return o.html(H||(H=B(['\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}}])&&j(i.prototype,s),a&&j(i,a),Object.defineProperty(i,"prototype",{writable:!1}),n}(o.TSElement);o.customElementDefineHelper("ts-header",M);var U,Y,W={MEDIUM:"medium",LARGE:"large"},F=function(t){var i,s;function a(){var e;return(e=t.call(this)||this).size=W.LARGE,e.title="",e.noCloseOnEscKey=!1,e.closeBehavior=new o.CloseOnEscBehavior(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)),e.hideHeader=!1,e.noPadding=!1,e.noCloseOnCoverClick=!1,e}s=t,(i=a).prototype=Object.create(s.prototype),i.prototype.constructor=i,r(i,s);var c,l,d,u=a.prototype;return u.open=function(){this.visible=!0},u.close=function(){this.noCloseOnCoverClick||(this.visible=!1,this.dispatchCustomEvent("close"))},u.handleTransition=function(t){"opacity"===t.propertyName&&(this.visible?this.dispatchCustomEvent("opened"):this.dispatchCustomEvent("closed"))},u.attributeChangedCallback=function(o,e,r){t.prototype.attributeChangedCallback.call(this,o,e,r),"data-visible"===o&&r&&this.dispatchCustomEvent("open")},u.render=function(){return o.html(U||(U=n(['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the `ts-note` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time `ts-button-group`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'],['\n\t\t\t<div\n\t\t\t\tdir="','"\n\t\t\t\tclass="container '," ",'"\n\t\t\t\t@transitionend="','"\n\t\t\t>\n\t\t\t\t','\n\t\t\t\t<div class="note">\n\t\t\t\t\t\x3c!-- Use this slot name on the \\`ts-note\\` in the modal\t--\x3e\n\t\t\t\t\t<slot name="note"></slot>\n\t\t\t\t</div>\n\t\t\t\t<main>\n\t\t\t\t\t\x3c!-- Content in the main section of the modal\t--\x3e\n\t\t\t\t\t<slot name="main"></slot>\n\t\t\t\t</main>\n\t\t\t\t<footer>\n\t\t\t\t\t\x3c!-- Content in the footer section of the modal, most of the time \\`ts-button-group\\`\t--\x3e\n\t\t\t\t\t<slot name="footer"></slot>\n\t\t\t\t</footer>\n\t\t\t</div>\n\t\t\t<ts-cover class="ts-modal-cover" ?data-visible=',' @click="','"></ts-cover>\n\t\t'])),this.direction,this.size,this.hidden,this.handleTransition,this.header,this.visible,this.close)},u.firstUpdated=function(){this.closeBehavior.start()},u.disconnectedCallback=function(){this.closeBehavior.stop(),t.prototype.disconnectedCallback.call(this)},c=a,d=[{key:"styles",get:function(){return[o.TSElement.styles,o.unsafeCSS(".container{background-color:#fff;background-color:var(--ts-color-white);bottom:20px;bottom:var(--ts-unit);box-shadow:inset 0 0 0 1px #cbd7dc;box-shadow:var(--ts-boxshadow-border-default);display:flex;flex-direction:column;left:20px;left:var(--ts-unit);position:absolute;right:20px;right:var(--ts-unit);top:20px;top:var(--ts-unit);z-index:1500;z-index:var(--ts-zindex-modal)}ts-header{flex-grow:0;flex-shrink:0;padding:0 0 0 5px;padding:0 0 0 var(--ts-unit-quarter)}ts-header[dir=rtl]{padding:0 5px 0 0;padding:0 var(--ts-unit-quarter) 0 0}.note ::slotted(ts-note){flex-grow:0;padding-left:20px;padding-left:var(--ts-unit);padding-right:20px;padding-right:var(--ts-unit)}.close{height:40px;height:var(--ts-unit-double);width:40px;width:var(--ts-unit-double)}main{flex-grow:1;overflow:auto;padding:20px;padding:var(--ts-unit)}:host([no-padding]) main{padding:0}footer{flex-grow:0}.container.medium{bottom:12.5%;left:25%;right:25%;top:12.5%}.container.small{bottom:auto;left:50%;right:auto;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:380px;width:var(--ts-modal-width-small)}.fade-in{opacity:1;transition:visibility .1s linear .1s,opacity .2s;transition:visibility var(--ts-transition-now) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:visible}.fade-out{opacity:0;transition:visibility .2s linear .1s,opacity .2s;transition:visibility var(--ts-transition-fast) linear var(--ts-transition-now),opacity var(--ts-transition-fast);visibility:hidden}@media (max-width:600px){.container,.container.medium,.container.small{bottom:10px;bottom:var(--ts-unit-half);left:10px;left:var(--ts-unit-half);right:10px;right:var(--ts-unit-half);top:10px;top:var(--ts-unit-half);-webkit-transform:translate(0);transform:translate(0);width:auto}.container main{padding:10px;padding:var(--ts-unit-half)}}")]}},{key:"properties",get:function(){return{dir:{type:String,reflect:!0,attribute:"data-dir"},size:{type:String,reflect:!0,attribute:"data-size"},title:{type:String,reflect:!0,attribute:"data-title"},visible:{type:Boolean,reflect:!0,attribute:"data-visible"},noCloseOnEscKey:{type:Boolean,attribute:"no-close-on-esc-key"},noCloseOnCoverClick:{type:Boolean,attribute:"no-close-on-cover-click"},hideHeader:{type:Boolean,attribute:"hide-header"},noPadding:{type:Boolean,attribute:"no-padding"}}}}],(l=[{key:"direction",get:function(){return this.dir?this.dir:this.bodyDir}},{key:"hidden",get:function(){return this.visible?"fade-in":"fade-out"}},{key:"header",get:function(){return this.hideHeader?"":o.html(Y||(Y=n(['\n\t\t\t<ts-header .title="','" dir="','">\n\t\t\t\t<ts-button class="no-border" icon="','" size="large" @click="','"></ts-button>\n\t\t\t</ts-header>\n\t\t'])),this.title,this.direction,'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="m11.998 10.584 4.292-4.291a1 1 0 0 1 1.414 1.414l-4.291 4.291 4.291 4.292a1 1 0 0 1-1.414 1.414l-4.292-4.291-4.29 4.291a1 1 0 1 1-1.415-1.414l4.291-4.292-4.291-4.29a1 1 0 0 1 1.414-1.415l4.291 4.291Z" fill="currentColor"/></g></svg>',this.close)}}])&&e(c.prototype,l),d&&e(c,d),Object.defineProperty(c,"prototype",{writable:!1}),a}(o.TSElement);o.customElementDefineHelper("ts-modal",F),t.TSModal=F,t.customEventNames={CLOSE:"close",CLOSED:"closed",OPEN:"open",OPENED:"opened"},t.sizes=W,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "@tradeshift/elements.modal",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "repository": {
@@ -18,9 +18,13 @@ "type": "git",
   "dependencies": {
-    "@tradeshift/elements": "^0.38.0",
-    "@tradeshift/elements.button": "^0.38.0",
-    "@tradeshift/elements.cover": "^0.38.0",
-    "@tradeshift/elements.header": "^0.38.0"
+    "@tradeshift/elements": "^0.39.0",
+    "@tradeshift/elements.button": "^0.39.0",
+    "@tradeshift/elements.button-group": "^0.39.0",
+    "@tradeshift/elements.card": "^0.39.0",
+    "@tradeshift/elements.cover": "^0.39.0",
+    "@tradeshift/elements.header": "^0.39.0",
+    "@tradeshift/elements.icon": "^0.39.0",
+    "@tradeshift/elements.note": "^0.39.0"
   },
   "src": "src/modal.js",
-  "gitHead": "00b9d48acbe486496c432652e3ca7c489041b1d8"
+  "gitHead": "3553e0208b3f9a52c6ca850412507c39ca11e0b7"
 }

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

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

Improved metrics

Lines of code

209

increased by5.56%

Worsened metrics

Total package byte prevSize

56168

decreased by-3.4%

Dependency count

8

increased by100%

Number of package files

9

decreased by-10%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• + Added@tradeshift/elements.button-group@^0.39.0

• + Added@tradeshift/elements.card@^0.39.0

• + Added@tradeshift/elements.icon@^0.39.0

• + Added@tradeshift/elements.note@^0.39.0

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

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

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

• + Added@tradeshift/elements.button-group@0.39.0(transitive)

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

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

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

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

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

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

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

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

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

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

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

• Updated@tradeshift/elements@^0.39.0

• Updated@tradeshift/elements.button@^0.39.0

• Updated@tradeshift/elements.cover@^0.39.0

• Updated@tradeshift/elements.header@^0.39.0