@tradeshift/elements.button - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3-alpha.0

lib/button.umd.js

@@ -38,6 +38,26 @@ (function (global, factory) {
 
-  var css = "/* General........................................................ */\n\n:host > button {\n\t\tposition: relative;\n\t\tmargin-right: calc(0.25 * 20px);\n\t\tmargin-right: var(--ts-unit-quarter);\n\t\tborder: 1px solid rgb(203, 215, 220);\n\t\tborder: var(--ts-border);\n\t\tborder-radius: calc(2 * 20px);\n\t\tborder-radius: var(--ts-unit-double);\n\t\tpadding: calc(0.5 * 20px);\n\t\tpadding: var(--ts-unit-half)\n\t}\n\n:host > button:before {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tborder: 1px solid rgb(203, 215, 220);\n\t\t\tborder: var(--ts-border);\n\t\t\tborder-radius: calc(2 * 20px);\n\t\t\tborder-radius: var(--ts-unit-double);\n\t\t}\n\n:host > button:hover {\n\t\t\tcursor: pointer;\n\t\t\tbackground: rgb(230, 236, 239);\n\t\t\tbackground: var(--ts-color-gray-lighter);\n\t\t}\n\n:host > button:focus:before {\n\t\t\tdisplay: block;\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 174, 255);\n\t\t\tborder-color: var(--ts-color-blue);\n\t\t}\n\n:host span {\n\t\tdisplay: block;\n\t\tpadding: 0 20px;\n\t\tpadding: 0 var(--ts-unit);\n\t\tfont-weight: var(--ts-font-weight-semibold);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.02em;\n\t\t-webkit-font-smoothing: antialiased;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t}\n\n/* Primary type................................................... */\n:host([type='primary']) > button {\n\t\tbackground: rgb(0, 174, 255);\n\t\tbackground: var(--ts-color-blue);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue)\n\t}\n:host([type='primary']) > button:hover {\n\t\t\tbackground: rgb(0, 133, 204);\n\t\t\tbackground: var(--ts-color-blue-dark);\n\t\t}\n:host([type='primary']) > button:focus:before {\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 101, 163);\n\t\t\tborder-color: var(--ts-color-blue-darker);\n\t\t}\n\n/* Text type...................................................... */\n:host([type='text']) > button {\n\t\tbackground: transparent;\n\t\tborder: 0;\n\t\tborder-radius: 0;\n\t\tpadding: 0\n\t}\n:host([type='text']) > button:before {\n\t\t\tborder-radius: 0;\n\t\t}\n:host([type='text']) > button:hover {\n\t\t\tbackground: transparent\n\t\t}\n:host([type='text']) > button:hover span {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n:host([type='text']) > button:focus:before {\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 101, 163);\n\t\t\tborder-color: var(--ts-color-blue-darker);\n\t\t}\n:host([type='text']) span {\n\t\tcolor: rgb(0, 174, 255);\n\t\tcolor: var(--ts-color-blue);\n\t\tpadding: 0;\n\t\tfont-weight: var(--ts-font-weight);\n\t\ttext-transform: none;\n\t\tletter-spacing: normal;\n\t}\n\n/* Inside a ButtonGroup ...........................................*/\n\n:host([grouped]) {\n\tdisplay: block;\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\ttext-align: center\n}\n\n:host([grouped]) > button {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJ1dHRvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FOztBQUduRTtFQUNDLGtCQUFrQjtFQUNsQiwrQkFBb0M7RUFBcEMsb0NBQW9DO0VBQ3BDLG9DQUF3QjtFQUF4Qix3QkFBd0I7RUFDeEIsNkJBQW9DO0VBQXBDLG9DQUFvQztFQUNwQyx5QkFBNEI7RUFBNUI7Q0FtQkQ7O0FBbEJDO0dBQ0Msa0JBQWtCO0dBQ2xCLE1BQU07R0FDTixRQUFRO0dBQ1IsU0FBUztHQUNULE9BQU87R0FDUCxvQ0FBd0I7R0FBeEIsd0JBQXdCO0dBQ3hCLDZCQUFvQztHQUFwQyxvQ0FBb0M7RUFDckM7O0FBQ0E7R0FDQyxlQUFlO0dBQ2YsOEJBQXdDO0dBQXhDLHdDQUF3QztFQUN6Qzs7QUFDQTtHQUNDLGNBQWM7R0FDZCxXQUFXO0dBQ1gsOEJBQWtDO0dBQWxDLGtDQUFrQztFQUNuQzs7QUFFRDtFQUNDLGNBQWM7RUFDZCxlQUF5QjtFQUF6Qix5QkFBeUI7RUFDekIsMkNBQTJDO0VBQzNDLHlCQUF5QjtFQUN6QixzQkFBc0I7RUFDdEIsbUNBQW1DO0VBQ25DLGtDQUFrQztDQUNuQzs7QUFHRCxvRUFBb0U7QUFFbkU7RUFDQyw0QkFBZ0M7RUFBaEMsZ0NBQWdDO0VBQ2hDLHlCQUE0QjtFQUE1Qiw0QkFBNEI7RUFDNUIsOEJBQWtDO0VBQWxDO0NBU0Q7QUFQQztHQUNDLDRCQUFxQztHQUFyQyxxQ0FBcUM7RUFDdEM7QUFDQTtHQUNDLFdBQVc7R0FDWCw4QkFBeUM7R0FBekMseUNBQXlDO0VBQzFDOztBQUlGLG9FQUFvRTtBQUVuRTtFQUNDLHVCQUF1QjtFQUN2QixTQUFTO0VBQ1QsZ0JBQWdCO0VBQ2hCO0NBY0Q7QUFiQztHQUNDLGdCQUFnQjtFQUNqQjtBQUNBO0dBQ0M7RUFJRDtBQUhDO0lBQ0MsMEJBQTBCO0dBQzNCO0FBRUQ7R0FDQyxXQUFXO0dBQ1gsOEJBQXlDO0dBQXpDLHlDQUF5QztFQUMxQztBQUdEO0VBQ0MsdUJBQTJCO0VBQTNCLDJCQUEyQjtFQUMzQixVQUFVO0VBQ1Ysa0NBQWtDO0VBQ2xDLG9CQUFvQjtFQUNwQixzQkFBc0I7Q0FDdkI7O0FBR0Qsb0VBQW9FOztBQUVwRTtDQUNDLGNBQWM7Q0FDZCwrQkFBa0M7Q0FBbEMsa0NBQWtDO0NBQ2xDO0FBTUQ7O0FBSkM7RUFDQyxXQUFXO0VBQ1gsY0FBYztDQUNmIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBHZW5lcmFsLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3Qge1xuXHQmID4gYnV0dG9uIHtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0bWFyZ2luLXJpZ2h0OiB2YXIoLS10cy11bml0LXF1YXJ0ZXIpO1xuXHRcdGJvcmRlcjogdmFyKC0tdHMtYm9yZGVyKTtcblx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdFx0cGFkZGluZzogdmFyKC0tdHMtdW5pdC1oYWxmKTtcblx0XHQmOmJlZm9yZSB7XG5cdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHR0b3A6IDA7XG5cdFx0XHRyaWdodDogMDtcblx0XHRcdGJvdHRvbTogMDtcblx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdFx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdFx0fVxuXHRcdCY6aG92ZXIge1xuXHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdFx0YmFja2dyb3VuZDogdmFyKC0tdHMtY29sb3ItZ3JheS1saWdodGVyKTtcblx0XHR9XG5cdFx0Jjpmb2N1czpiZWZvcmUge1xuXHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHRjb250ZW50OiAnJztcblx0XHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0fVxuXHR9XG5cdCYgc3BhbiB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0cGFkZGluZzogMCB2YXIoLS10cy11bml0KTtcblx0XHRmb250LXdlaWdodDogdmFyKC0tdHMtZm9udC13ZWlnaHQtc2VtaWJvbGQpO1xuXHRcdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdFx0bGV0dGVyLXNwYWNpbmc6IDAuMDJlbTtcblx0XHQtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhbnRpYWxpYXNlZDtcblx0XHQtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xuXHR9XG59XG5cbi8qIFByaW1hcnkgdHlwZS4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuOmhvc3QoW3R5cGU9J3ByaW1hcnknXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcblx0XHRjb2xvcjogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJhY2tncm91bmQ6IHZhcigtLXRzLWNvbG9yLWJsdWUtZGFyayk7XG5cdFx0fVxuXHRcdCY6Zm9jdXM6YmVmb3JlIHtcblx0XHRcdGNvbnRlbnQ6ICcnO1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlLWRhcmtlcik7XG5cdFx0fVxuXHR9XG59XG5cbi8qIFRleHQgdHlwZS4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuOmhvc3QoW3R5cGU9J3RleHQnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3JkZXI6IDA7XG5cdFx0Ym9yZGVyLXJhZGl1czogMDtcblx0XHRwYWRkaW5nOiAwO1xuXHRcdCY6YmVmb3JlIHtcblx0XHRcdGJvcmRlci1yYWRpdXM6IDA7XG5cdFx0fVxuXHRcdCY6aG92ZXIge1xuXHRcdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdFx0XHQmIHNwYW4ge1xuXHRcdFx0XHR0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTtcblx0XHRcdH1cblx0XHR9XG5cdFx0Jjpmb2N1czpiZWZvcmUge1xuXHRcdFx0Y29udGVudDogJyc7XG5cdFx0XHRib3JkZXItY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUtZGFya2VyKTtcblx0XHR9XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcblx0XHRwYWRkaW5nOiAwO1xuXHRcdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250LXdlaWdodCk7XG5cdFx0dGV4dC10cmFuc2Zvcm06IG5vbmU7XG5cdFx0bGV0dGVyLXNwYWNpbmc6IG5vcm1hbDtcblx0fVxufVxuXG4vKiBJbnNpZGUgYSBCdXR0b25Hcm91cCAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uKi9cblxuOmhvc3QoW2dyb3VwZWRdKSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiB2YXIoLS10cy11bml0LWhhbGYpO1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cblx0JiA+IGJ1dHRvbiB7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbn1cbiJdfQ== */";
+  var css = "/* General........................................................ */\n\n:host > button {\n\t\tposition: relative;\n\t\tmin-width: calc(2 * 20px);\n\t\tmin-width: var(--ts-unit-double);\n\t\tmargin-right: calc(0.25 * 20px);\n\t\tmargin-right: var(--ts-unit-quarter);\n\t\tborder: 1px solid rgb(203, 215, 220);\n\t\tborder: var(--ts-border);\n\t\tborder-radius: calc(2 * 20px);\n\t\tborder-radius: var(--ts-unit-double)\n\t}\n\n:host > button:before {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tborder: 1px solid rgb(203, 215, 220);\n\t\t\tborder: var(--ts-border);\n\t\t\tborder-radius: calc(2 * 20px);\n\t\t\tborder-radius: var(--ts-unit-double);\n\t\t}\n\n:host > button:hover {\n\t\t\tcursor: pointer;\n\t\t\tbackground: rgb(230, 236, 239);\n\t\t\tbackground: var(--ts-color-gray-lighter);\n\t\t}\n\n:host > button:focus:before {\n\t\t\tdisplay: block;\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 174, 255);\n\t\t\tborder-color: var(--ts-color-blue);\n\t\t}\n\n:host span {\n\t\tdisplay: block;\n\t\tpadding: calc(0.5 * 20px) 20px;\n\t\tpadding: var(--ts-unit-half) var(--ts-unit);\n\t\tfont-weight: 600;\n\t\tfont-weight: var(--ts-fontweight-semibold);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.02em;\n\t\t-webkit-font-smoothing: antialiased;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t}\n\n/* Primary type................................................... */\n\n:host([type='primary']) > button {\n\t\tbackground: rgb(0, 174, 255);\n\t\tbackground: var(--ts-color-blue);\n\t\tcolor: rgb(255, 255, 255);\n\t\tcolor: var(--ts-color-white);\n\t\tborder-color: rgb(0, 174, 255);\n\t\tborder-color: var(--ts-color-blue)\n\t}\n\n:host([type='primary']) > button > ts-icon {\n\t\t\tfill: rgb(255, 255, 255);\n\t\t\tfill: var(--ts-color-white);\n\t\t}\n\n:host([type='primary']) > button:hover {\n\t\t\tbackground: rgb(0, 133, 204);\n\t\t\tbackground: var(--ts-color-blue-dark);\n\t\t}\n\n:host([type='primary']) > button:focus:before {\n\t\t\tcontent: '';\n\t\t\tborder-color: rgb(0, 101, 163);\n\t\t\tborder-color: var(--ts-color-blue-darker);\n\t\t}\n\n/* Text type...................................................... */\n\n:host([type='text']) > button {\n\t\tbackground: transparent;\n\t\tborder: 0;\n\t\tborder-radius: 0;\n\t\tpadding: 0\n\t}\n\n:host([type='text']) > button:hover {\n\t\t\tbackground: transparent\n\t\t}\n\n:host([type='text']) > button:hover span {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n:host([type='text']) > button:focus:before {\n\t\t\tcontent: '';\n\t\t\tborder-color: transparent;\n\t\t}\n\n:host([type='text']) span {\n\t\tcolor: rgb(0, 174, 255);\n\t\tcolor: var(--ts-color-blue);\n\t\tpadding: 0;\n\t\tfont-weight: 400;\n\t\tfont-weight: var(--ts-fontweight);\n\t\ttext-transform: none;\n\t\tletter-spacing: normal;\n\t}\n\n/* Micro size......................................................*/\n\n:host([size='micro']) > button {\n\t\tborder-radius: 20px;\n\t\tborder-radius: var(--ts-unit);\n\t\tpadding: 0 calc(0.5 * 20px);\n\t\tpadding: 0 var(--ts-unit-half);\n\t}\n\n:host([size='micro']) span {\n\t\tpadding: calc(0.125 * 20px);\n\t\tpadding: var(--ts-unit-eighth);\n\t\tfont-size: 11px;\n\t\tfont-size: var(--ts-fontsize-small);\n\t}\n\n/* Inside a ButtonGroup ...........................................*/\n\n:host([grouped]) {\n\tdisplay: block;\n\tmargin-bottom: calc(0.5 * 20px);\n\tmargin-bottom: var(--ts-unit-half);\n\ttext-align: center\n}\n\n:host([grouped]) > button {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n\n/* Button with an icon ............................................*/\n\n:host([icon]) > button {\n\t\twidth: calc(2 * 20px);\n\t\twidth: var(--ts-unit-double);\n\t\theight: calc(2 * 20px);\n\t\theight: var(--ts-unit-double);\n\t\tmargin: 0 auto;\n\t}\n\n/* Disable status .................................................*/\n\n:host([disabled]) {\n\tcursor: not-allowed\n}\n\n:host([disabled]) > button {\n\t\tpointer-events: none;\n\t\tbackground-color: rgb(230, 236, 239);\n\t\tbackground-color: var(--ts-disabled-background-color);\n\t\tborder: rgb(203, 215, 220);\n\t\tborder: var(--ts-disabled-border-color);\n\t}\n\n:host([disabled]) span {\n\t\tcolor: rgb(130, 159, 171);\n\t\tcolor: var(--ts-disabled-color);\n\t}\n\n:host([disabled][type='text']) > button {\n\t\tbackground-color: transparent;\n\t}\n\n/* Busy status ....................................................*/\n\n:host([busy]) > :first-child {\n\t\tpointer-events: none;\n\t\tcursor: default;\n\t\tborder: transparent;\n\t\tbackground-size: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-size: var(--ts-unit-double) var(--ts-unit-double);\n\t\tbackground-image: linear-gradient(\n\t\t\t-45deg,\n\t\t\trgb(203, 215, 220) 25%,\n\t\t\trgb(239, 243, 245) 25%,\n\t\t\trgb(239, 243, 245) 50%,\n\t\t\trgb(203, 215, 220) 50%,\n\t\t\trgb(203, 215, 220) 75%,\n\t\t\trgb(239, 243, 245) 75%,\n\t\t\trgb(239, 243, 245));\n\t\tbackground-image: linear-gradient(\n\t\t\t-45deg,\n\t\t\tvar(--ts-color-gray-light) 25%,\n\t\t\tvar(--ts-color-gray-lightest) 25%,\n\t\t\tvar(--ts-color-gray-lightest) 50%,\n\t\t\tvar(--ts-color-gray-light) 50%,\n\t\t\tvar(--ts-color-gray-light) 75%,\n\t\t\tvar(--ts-color-gray-lightest) 75%,\n\t\t\tvar(--ts-color-gray-lightest)\n\t\t);\n\t\t-webkit-animation: move 1s linear infinite;\n\t\t        animation: move 1s linear infinite\n\t}\n\n:host([busy]) > :first-child > * {\n\t\t\tvisibility: hidden;\n\t\t}\n\n@-webkit-keyframes move {\n\t0% {\n\t\tbackground-position: 0 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-position: var(--ts-unit-double) var(--ts-unit-double);\n\t}\n}\n\n@keyframes move {\n\t0% {\n\t\tbackground-position: 0 0;\n\t}\n\t100% {\n\t\tbackground-position: calc(2 * 20px) calc(2 * 20px);\n\t\tbackground-position: var(--ts-unit-double) var(--ts-unit-double);\n\t}\n}\n\n/*# sourceMappingURL=data:application/json;base64,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YnV0dG9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIEdlbmVyYWwuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiAqL1xuXG46aG9zdCB7XG5cdCYgPiBidXR0b24ge1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRtaW4td2lkdGg6IHZhcigtLXRzLXVuaXQtZG91YmxlKTtcblx0XHRtYXJnaW4tcmlnaHQ6IHZhcigtLXRzLXVuaXQtcXVhcnRlcik7XG5cdFx0Ym9yZGVyOiB2YXIoLS10cy1ib3JkZXIpO1xuXHRcdGJvcmRlci1yYWRpdXM6IHZhcigtLXRzLXVuaXQtZG91YmxlKTtcblx0XHQmOmJlZm9yZSB7XG5cdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHR0b3A6IDA7XG5cdFx0XHRyaWdodDogMDtcblx0XHRcdGJvdHRvbTogMDtcblx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRib3JkZXI6IHZhcigtLXRzLWJvcmRlcik7XG5cdFx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0LWRvdWJsZSk7XG5cdFx0fVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cdFx0XHRiYWNrZ3JvdW5kOiB2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXIpO1xuXHRcdH1cblxuXHRcdCY6Zm9jdXM6YmVmb3JlIHtcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdFx0Y29udGVudDogJyc7XG5cdFx0XHRib3JkZXItY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXHRcdH1cblx0fVxuXG5cdCYgc3BhbiB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0cGFkZGluZzogdmFyKC0tdHMtdW5pdC1oYWxmKSB2YXIoLS10cy11bml0KTtcblx0XHRmb250LXdlaWdodDogdmFyKC0tdHMtZm9udHdlaWdodC1zZW1pYm9sZCk7XG5cdFx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0XHRsZXR0ZXItc3BhY2luZzogMC4wMmVtO1xuXHRcdC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuXHRcdC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7XG5cdH1cbn1cblxuLyogUHJpbWFyeSB0eXBlLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uICovXG5cbjpob3N0KFt0eXBlPSdwcmltYXJ5J10pIHtcblx0JiA+IGJ1dHRvbiB7XG5cdFx0YmFja2dyb3VuZDogdmFyKC0tdHMtY29sb3ItYmx1ZSk7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWNvbG9yLXdoaXRlKTtcblx0XHRib3JkZXItY29sb3I6IHZhcigtLXRzLWNvbG9yLWJsdWUpO1xuXG5cdFx0JiA+IHRzLWljb24ge1xuXHRcdFx0ZmlsbDogdmFyKC0tdHMtY29sb3Itd2hpdGUpO1xuXHRcdH1cblxuXHRcdCY6aG92ZXIge1xuXHRcdFx0YmFja2dyb3VuZDogdmFyKC0tdHMtY29sb3ItYmx1ZS1kYXJrKTtcblx0XHR9XG5cblx0XHQmOmZvY3VzOmJlZm9yZSB7XG5cdFx0XHRjb250ZW50OiAnJztcblx0XHRcdGJvcmRlci1jb2xvcjogdmFyKC0tdHMtY29sb3ItYmx1ZS1kYXJrZXIpO1xuXHRcdH1cblx0fVxufVxuXG4vKiBUZXh0IHR5cGUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4gKi9cblxuOmhvc3QoW3R5cGU9J3RleHQnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3JkZXI6IDA7XG5cdFx0Ym9yZGVyLXJhZGl1czogMDtcblx0XHRwYWRkaW5nOiAwO1xuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRcdCYgc3BhbiB7XG5cdFx0XHRcdHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdCY6Zm9jdXM6YmVmb3JlIHtcblx0XHRcdGNvbnRlbnQ6ICcnO1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdGNvbG9yOiB2YXIoLS10cy1jb2xvci1ibHVlKTtcblx0XHRwYWRkaW5nOiAwO1xuXHRcdGZvbnQtd2VpZ2h0OiB2YXIoLS10cy1mb250d2VpZ2h0KTtcblx0XHR0ZXh0LXRyYW5zZm9ybTogbm9uZTtcblx0XHRsZXR0ZXItc3BhY2luZzogbm9ybWFsO1xuXHR9XG59XG5cbi8qIE1pY3JvIHNpemUuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4qL1xuXG46aG9zdChbc2l6ZT0nbWljcm8nXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRib3JkZXItcmFkaXVzOiB2YXIoLS10cy11bml0KTtcblx0XHRwYWRkaW5nOiAwIHZhcigtLXRzLXVuaXQtaGFsZik7XG5cdH1cblxuXHQmIHNwYW4ge1xuXHRcdHBhZGRpbmc6IHZhcigtLXRzLXVuaXQtZWlnaHRoKTtcblx0XHRmb250LXNpemU6IHZhcigtLXRzLWZvbnRzaXplLXNtYWxsKTtcblx0fVxufVxuXG4vKiBJbnNpZGUgYSBCdXR0b25Hcm91cCAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uKi9cblxuOmhvc3QoW2dyb3VwZWRdKSB7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiB2YXIoLS10cy11bml0LWhhbGYpO1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cblx0JiA+IGJ1dHRvbiB7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbn1cblxuLyogQnV0dG9uIHdpdGggYW4gaWNvbiAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLiovXG5cbjpob3N0KFtpY29uXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHR3aWR0aDogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdGhlaWdodDogdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHRcdG1hcmdpbjogMCBhdXRvO1xuXHR9XG59XG5cbi8qIERpc2FibGUgc3RhdHVzIC4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4qL1xuXG46aG9zdChbZGlzYWJsZWRdKSB7XG5cdGN1cnNvcjogbm90LWFsbG93ZWQ7XG5cdCYgPiBidXR0b24ge1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRzLWRpc2FibGVkLWJhY2tncm91bmQtY29sb3IpO1xuXHRcdGJvcmRlcjogdmFyKC0tdHMtZGlzYWJsZWQtYm9yZGVyLWNvbG9yKTtcblx0fVxuXG5cdCYgc3BhbiB7XG5cdFx0Y29sb3I6IHZhcigtLXRzLWRpc2FibGVkLWNvbG9yKTtcblx0fVxufVxuXG46aG9zdChbZGlzYWJsZWRdW3R5cGU9J3RleHQnXSkge1xuXHQmID4gYnV0dG9uIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0fVxufVxuXG4vKiBCdXN5IHN0YXR1cyAuLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uKi9cblxuOmhvc3QoW2J1c3ldKSB7XG5cdCYgPiA6Zmlyc3QtY2hpbGQge1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdGN1cnNvcjogZGVmYXVsdDtcblx0XHRib3JkZXI6IHRyYW5zcGFyZW50O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogdmFyKC0tdHMtdW5pdC1kb3VibGUpIHZhcigtLXRzLXVuaXQtZG91YmxlKTtcblx0XHRiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG5cdFx0XHQtNDVkZWcsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0KSAyNSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KSAyNSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KSA1MCUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0KSA1MCUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0KSA3NSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KSA3NSUsXG5cdFx0XHR2YXIoLS10cy1jb2xvci1ncmF5LWxpZ2h0ZXN0KVxuXHRcdCk7XG5cdFx0YW5pbWF0aW9uOiBtb3ZlIDFzIGxpbmVhciBpbmZpbml0ZTtcblxuXHRcdCYgPiAqIHtcblx0XHRcdHZpc2liaWxpdHk6IGhpZGRlbjtcblx0XHR9XG5cdH1cbn1cblxuQGtleWZyYW1lcyBtb3ZlIHtcblx0MCUge1xuXHRcdGJhY2tncm91bmQtcG9zaXRpb246IDAgMDtcblx0fVxuXHQxMDAlIHtcblx0XHRiYWNrZ3JvdW5kLXBvc2l0aW9uOiB2YXIoLS10cy11bml0LWRvdWJsZSkgdmFyKC0tdHMtdW5pdC1kb3VibGUpO1xuXHR9XG59XG4iXX0= */";
 
+  function _templateObject3() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\t<span><slot></slot></span>\n\t\t\t\t\t  "]);
+
+    _templateObject3 = function _templateObject3() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\t<ts-icon icon=\"", "\" size=\"medium\"></ts-icon>\n\t\t\t\t\t  "]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
   function _templateObject() {
-    var data = _taggedTemplateLiteralLoose(["\n\t\t\t<button>\n\t\t\t\t<span>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t"]);
+    var data = _taggedTemplateLiteralLoose(["\n\t\t\t<button ?disabled=\"", "\">\n\t\t\t\t", "\n\t\t\t</button>\n\t\t"]);
 
@@ -68,2 +88,18 @@ _templateObject = function _templateObject() {
           },
+          size: {
+            type: String,
+            reflect: true
+          },
+          busy: {
+            type: String,
+            reflect: true
+          },
+          icon: {
+            type: String,
+            reflect: true
+          },
+          disabled: {
+            type: Boolean,
+            reflect: true
+          },
           grouped: {
@@ -89,3 +125,3 @@ type: Boolean,
     _proto.render = function render() {
-      return elements.html(_templateObject());
+      return elements.html(_templateObject(), this.disabled, this.icon ? elements.html(_templateObject2(), this.icon) : elements.html(_templateObject3()));
     };
@@ -92,0 +128,0 @@

package.json

 {
   "name": "@tradeshift/elements.button",
-  "version": "0.3.2",
+  "version": "0.3.3-alpha.0",
   "src": "src/button.js",
@@ -11,5 +11,5 @@ "main": "lib/button.umd.js",
   "dependencies": {
-    "@tradeshift/elements": "^0.3.2"
+    "@tradeshift/elements": "^0.3.3-alpha.0"
   },
-  "gitHead": "ed4ea395440f96ed6216ea36899ba681438b4d52"
+  "gitHead": "22be22731cb412dd2167f5fc8e68764d1585701e"
 }

New 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

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

Total package byte prevSize

32225

increased by33.18%

Lines of code

163

increased by49.54%

Dependency changes

• Updated@tradeshift/elements@^0.3.3-alpha.0