sling-web-component-button - npm Package Compare versions

Comparing version 0.2.27 to 0.2.28

dist/cjs/component/Button.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n      <style>\n        /**\n * Button\n */\n\n/* Button Definitions */\n\n.emd-btn,\na.emd-btn {\n  background-color: var(--button--color--default, #424B54);\n  color: var(--button--text-color, #FFFFFF);\n  border-color: var(--button--color--default, #424B54);\n  border-width: var(--button--border-width, 1px);\n  border-style: var(--button--border-style, solid);\n  border-radius: var(--button--border-radius, 2px);\n  cursor: pointer;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  font-size: var(--button--font-size, 14px);\n  font-weight: var(--button--font-weight, 600);\n  font-family: var(--button--font-family, "Montserrat", sans-serif);\n  outline: none;\n  padding: var(--button--padding, 9px);\n  text-transform: var(--button--text-transform, lowercase);\n  text-align: center;\n  letter-spacing: 0.04em;\n  user-select: none;\n  white-space: nowrap;\n  transition: all 300ms ease-in-out;\n}\n\n.emd-btn:hover,\n.emd-btn:focus,\na.emd-btn:hover,\na.emd-btn:focus {\n  background-color: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n.emd-btn_type_outline,\n.emd-btn_type_text {\n  color: var(--button--color--default, #424B54);\n  fill: var(--button--color--default, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_outline:hover,\n.emd-btn_type_outline:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n  background-color: var(--button--color--default--tint, #B9C3CC);\n}\n\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n/* Add marging to icon */\n\n.emd-btn > [class*=" fa-"],\na.emd-btn > [class*=" fa-"] {\n  margin: 0 5px;\n}\n\n/**\n * Colors & States\n */\n\n/* ----- Primary ----- */\n\n.emd-btn_color_primary {\n  background-color: var(--button--color--primary, #94c940);\n  border-color: var(--button--color--primary, #94c940);\n}\n\n.emd-btn_color_primary:focus,\n.emd-btn_color_primary:hover {\n  background-color: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n.emd-btn_color_primary.emd-btn_type_outline,\n.emd-btn_color_primary.emd-btn_type_text {\n  color: var(--button--color--primary, #94c940);\n  fill: var(--button--color--primary, #94c940);\n  background-color: transparent;\n}\n\n.emd-btn_color_primary.emd-btn_type_outline:hover,\n.emd-btn_color_primary.emd-btn_type_outline:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n  background-color: var(--button--color--primary--tint, #f4f9eb);\n}\n\n.emd-btn_color_primary.emd-btn_type_text:hover,\n.emd-btn_color_primary.emd-btn_type_text:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n/* ----- Secondary ----- */\n\n.emd-btn_color_secondary {\n  background-color: var(--button--color--secondary, #103A21);\n  border-color: var(--button--color--secondary, #103A21);\n}\n\n.emd-btn_color_secondary:focus,\n.emd-btn_color_secondary:hover {\n  background-color: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline,\n.emd-btn_color_secondary.emd-btn_type_text {\n  color: var(--button--color--secondary, #103A21);\n  fill: var(--button--color--secondary, #103A21);\n  background-color: transparent;\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline:hover,\n.emd-btn_color_secondary.emd-btn_type_outline:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n  background-color: var(--button--color--secondary--tint, #E7EBE8);\n}\n\n.emd-btn_color_secondary.emd-btn_type_text:hover,\n.emd-btn_color_secondary.emd-btn_type_text:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n/* ----- Success ----- */\n\n.emd-btn_color_success {\n  background-color: var(--button--color--success, #31cd65);\n  border-color: var(--button--color--success, #31cd65);\n}\n\n.emd-btn_color_success:focus,\n.emd-btn_color_success:hover {\n  background-color: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n.emd-btn_color_success.emd-btn_type_outline,\n.emd-btn_color_success.emd-btn_type_text {\n  color: var(--button--color--success, #31cd65);\n  fill: var(--button--color--success, #31cd65);\n  background-color: transparent;\n}\n\n.emd-btn_color_success.emd-btn_type_outline:hover,\n.emd-btn_color_success.emd-btn_type_outline:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n  background-color: var(--button--color--success--tint, #f3f8ec);\n}\n\n.emd-btn_color_success.emd-btn_type_text:hover,\n.emd-btn_color_success.emd-btn_type_text:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n/* ----- Danger ----- */\n\n.emd-btn_color_danger {\n  background-color: var(--button--color--danger, #cd3131);\n  border-color: var(--button--color--danger, #cd3131);\n\n}\n\n.emd-btn_color_danger:focus,\n.emd-btn_color_danger:hover {\n  background-color: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n.emd-btn_color_danger.emd-btn_type_outline,\n.emd-btn_color_danger.emd-btn_type_text {\n  color: var(--button--color--danger, #cd3131);\n  fill: var(--button--color--danger, #cd3131);\n  background-color: transparent;\n}\n\n.emd-btn_color_danger.emd-btn_type_outline:hover,\n.emd-btn_color_danger.emd-btn_type_outline:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n  background-color: var(--button--color--danger--tint, #efc2c2);\n}\n\n.emd-btn_color_danger.emd-btn_type_text:hover,\n.emd-btn_color_danger.emd-btn_type_text:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n/* ----- Warning ----- */\n\n.emd-btn_color_warning {\n  background-color: var(--button--color--warning, #ffcc32);\n  border-color: var(--button--color--warning, #ffcc32);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning:focus,\n.emd-btn_color_warning:hover {\n  background-color: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning.emd-btn_type_outline,\n.emd-btn_color_warning.emd-btn_type_text {\n  color: var(--button--color--warning, #ffcc32);\n  fill: var(--button--color--warning, #ffcc32);\n  background-color: transparent;\n}\n\n.emd-btn_color_warning.emd-btn_type_outline:hover,\n.emd-btn_color_warning.emd-btn_type_outline:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  background-color: var(--button--color--warning--tint, #fff9ea);\n}\n\n.emd-btn_color_warning.emd-btn_type_text:hover,\n.emd-btn_color_warning.emd-btn_type_text:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n}\n\n/* ----- Info ----- */\n\n.emd-btn_color_info {\n  background-color: var(--button--color--info, #32A0D2);\n  border-color: var(--button--color--info, #32A0D2);\n}\n\n.emd-btn_color_info:focus,\n.emd-btn_color_info:hover {\n  background-color: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n.emd-btn_color_info.emd-btn_type_outline,\n.emd-btn_color_info.emd-btn_type_text {\n  color: var(--button--color--info, #32A0D2);\n  fill: var(--button--color--info, #32A0D2);\n  background-color: transparent;\n}\n\n.emd-btn_color_info.emd-btn_type_outline:hover,\n.emd-btn_color_info.emd-btn_type_outline:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n  background-color: var(--button--color--info--tint, #eaf5fa);\n}\n\n.emd-btn_color_info.emd-btn_type_text:hover,\n.emd-btn_color_info.emd-btn_type_text:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n/* ----- Clear ----- */\n\n.emd-btn_color_clear {\n  background-color: var(--button--color--clear, #FFFFFF);\n  border-color: var(--button--color--clear, #FFFFFF);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear:focus,\n.emd-btn_color_clear:hover {\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear.emd-btn_type_outline,\n.emd-btn_color_clear.emd-btn_type_text {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear, #FFFFFF);\n  background-color: transparent;\n}\n\n.emd-btn_color_clear.emd-btn_type_outline:hover,\n.emd-btn_color_clear.emd-btn_type_outline:focus {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear, #FFFFFF);\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n.emd-btn_color_clear.emd-btn_type_text:hover,\n.emd-btn_color_clear.emd-btn_type_text:focus {\n  color: var(--button--color--clear--shade, #D6DDE4);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n/* ----- Disable ----- */\n\n.emd-btn:disabled,\n.emd-btn_disabled {\n  background-color: var(--button--color--disable, #B9C3CC);\n  border-color: var(--button--color--disable, #B9C3CC);\n  color: var(--button--color--disable--shade, #424B54);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.emd-btn:disabled:hover,\n.emd-btn_disabled:hover {\n  border-color: var(--button--color--disable, #B9C3CC);\n  background-color: var(--button--color--disable, #B9C3CC);\n}\n\n.emd-btn:disabled.emd-btn_type_outline,\n.emd-btn_disabled.emd-btn_type_outline {\n  color: var(--button--color--disable--shade, #424B54);\n  border-color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn:disabled.emd-btn_type_outline:hover,\n.emd-btn_disabled.emd-btn_type_outline:hover {\n  border-color: var(--button--color--disable--shade, #424B54);\n  color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_text:disabled,\n.emd-btn_type_text.emd-btn_disabled {\n  color: var(--button--color--disable--shade, #424B54);\n  -ms-flex-item-align: var(--button--color--disable--shade, #424B54);\n}\n\n.emd-btn_type_text:disabled:hover,\n.emd-btn_type_text.emd-btn_disabled:hover {\n  color: var(--button--color--disable--shade, #424B54);\n  fill: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n/**\n * Sizes\n */\n\n/* Small */\n\n.emd-btn_size_small {\n  padding: var(--button--padding--small, 6px);\n  font-weight: var(--button--font-weight--small, 400);\n  font-size: var(--button--font-size--small, 12px);\n}\n\n/* Big */\n\n.emd-btn_size_big {\n  padding: var(--button--padding--big, 12px);\n  font-size: var(--button--font-size--big, 16px);\n}\n\n/**\n * Shapes\n */\n\n/* Outline */\n\n.emd-btn_type_outline {\n  letter-spacing: 0.1em;\n}\n\n/* Text */\n\n.emd-btn_type_text,\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n}\n\n/* Block */\n\n.emd-btn_block {\n  width: 100%;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([block]) {\n  display: block;\n  width: 100%;\n}\n\n      </style>\n      <button class$="', '" disabled=', '>\n        <slot></slot>\n      </button>\n    '], ['\n      <style>\n        /**\n * Button\n */\n\n/* Button Definitions */\n\n.emd-btn,\na.emd-btn {\n  background-color: var(--button--color--default, #424B54);\n  color: var(--button--text-color, #FFFFFF);\n  border-color: var(--button--color--default, #424B54);\n  border-width: var(--button--border-width, 1px);\n  border-style: var(--button--border-style, solid);\n  border-radius: var(--button--border-radius, 2px);\n  cursor: pointer;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  font-size: var(--button--font-size, 14px);\n  font-weight: var(--button--font-weight, 600);\n  font-family: var(--button--font-family, "Montserrat", sans-serif);\n  outline: none;\n  padding: var(--button--padding, 9px);\n  text-transform: var(--button--text-transform, lowercase);\n  text-align: center;\n  letter-spacing: 0.04em;\n  user-select: none;\n  white-space: nowrap;\n  transition: all 300ms ease-in-out;\n}\n\n.emd-btn:hover,\n.emd-btn:focus,\na.emd-btn:hover,\na.emd-btn:focus {\n  background-color: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n.emd-btn_type_outline,\n.emd-btn_type_text {\n  color: var(--button--color--default, #424B54);\n  fill: var(--button--color--default, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_outline:hover,\n.emd-btn_type_outline:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n  background-color: var(--button--color--default--tint, #B9C3CC);\n}\n\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n/* Add marging to icon */\n\n.emd-btn > [class*=" fa-"],\na.emd-btn > [class*=" fa-"] {\n  margin: 0 5px;\n}\n\n/**\n * Colors & States\n */\n\n/* ----- Primary ----- */\n\n.emd-btn_color_primary {\n  background-color: var(--button--color--primary, #94c940);\n  border-color: var(--button--color--primary, #94c940);\n}\n\n.emd-btn_color_primary:focus,\n.emd-btn_color_primary:hover {\n  background-color: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n.emd-btn_color_primary.emd-btn_type_outline,\n.emd-btn_color_primary.emd-btn_type_text {\n  color: var(--button--color--primary, #94c940);\n  fill: var(--button--color--primary, #94c940);\n  background-color: transparent;\n}\n\n.emd-btn_color_primary.emd-btn_type_outline:hover,\n.emd-btn_color_primary.emd-btn_type_outline:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n  background-color: var(--button--color--primary--tint, #f4f9eb);\n}\n\n.emd-btn_color_primary.emd-btn_type_text:hover,\n.emd-btn_color_primary.emd-btn_type_text:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n/* ----- Secondary ----- */\n\n.emd-btn_color_secondary {\n  background-color: var(--button--color--secondary, #103A21);\n  border-color: var(--button--color--secondary, #103A21);\n}\n\n.emd-btn_color_secondary:focus,\n.emd-btn_color_secondary:hover {\n  background-color: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline,\n.emd-btn_color_secondary.emd-btn_type_text {\n  color: var(--button--color--secondary, #103A21);\n  fill: var(--button--color--secondary, #103A21);\n  background-color: transparent;\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline:hover,\n.emd-btn_color_secondary.emd-btn_type_outline:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n  background-color: var(--button--color--secondary--tint, #E7EBE8);\n}\n\n.emd-btn_color_secondary.emd-btn_type_text:hover,\n.emd-btn_color_secondary.emd-btn_type_text:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n/* ----- Success ----- */\n\n.emd-btn_color_success {\n  background-color: var(--button--color--success, #31cd65);\n  border-color: var(--button--color--success, #31cd65);\n}\n\n.emd-btn_color_success:focus,\n.emd-btn_color_success:hover {\n  background-color: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n.emd-btn_color_success.emd-btn_type_outline,\n.emd-btn_color_success.emd-btn_type_text {\n  color: var(--button--color--success, #31cd65);\n  fill: var(--button--color--success, #31cd65);\n  background-color: transparent;\n}\n\n.emd-btn_color_success.emd-btn_type_outline:hover,\n.emd-btn_color_success.emd-btn_type_outline:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n  background-color: var(--button--color--success--tint, #f3f8ec);\n}\n\n.emd-btn_color_success.emd-btn_type_text:hover,\n.emd-btn_color_success.emd-btn_type_text:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n/* ----- Danger ----- */\n\n.emd-btn_color_danger {\n  background-color: var(--button--color--danger, #cd3131);\n  border-color: var(--button--color--danger, #cd3131);\n\n}\n\n.emd-btn_color_danger:focus,\n.emd-btn_color_danger:hover {\n  background-color: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n.emd-btn_color_danger.emd-btn_type_outline,\n.emd-btn_color_danger.emd-btn_type_text {\n  color: var(--button--color--danger, #cd3131);\n  fill: var(--button--color--danger, #cd3131);\n  background-color: transparent;\n}\n\n.emd-btn_color_danger.emd-btn_type_outline:hover,\n.emd-btn_color_danger.emd-btn_type_outline:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n  background-color: var(--button--color--danger--tint, #efc2c2);\n}\n\n.emd-btn_color_danger.emd-btn_type_text:hover,\n.emd-btn_color_danger.emd-btn_type_text:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n/* ----- Warning ----- */\n\n.emd-btn_color_warning {\n  background-color: var(--button--color--warning, #ffcc32);\n  border-color: var(--button--color--warning, #ffcc32);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning:focus,\n.emd-btn_color_warning:hover {\n  background-color: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning.emd-btn_type_outline,\n.emd-btn_color_warning.emd-btn_type_text {\n  color: var(--button--color--warning, #ffcc32);\n  fill: var(--button--color--warning, #ffcc32);\n  background-color: transparent;\n}\n\n.emd-btn_color_warning.emd-btn_type_outline:hover,\n.emd-btn_color_warning.emd-btn_type_outline:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  background-color: var(--button--color--warning--tint, #fff9ea);\n}\n\n.emd-btn_color_warning.emd-btn_type_text:hover,\n.emd-btn_color_warning.emd-btn_type_text:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n}\n\n/* ----- Info ----- */\n\n.emd-btn_color_info {\n  background-color: var(--button--color--info, #32A0D2);\n  border-color: var(--button--color--info, #32A0D2);\n}\n\n.emd-btn_color_info:focus,\n.emd-btn_color_info:hover {\n  background-color: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n.emd-btn_color_info.emd-btn_type_outline,\n.emd-btn_color_info.emd-btn_type_text {\n  color: var(--button--color--info, #32A0D2);\n  fill: var(--button--color--info, #32A0D2);\n  background-color: transparent;\n}\n\n.emd-btn_color_info.emd-btn_type_outline:hover,\n.emd-btn_color_info.emd-btn_type_outline:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n  background-color: var(--button--color--info--tint, #eaf5fa);\n}\n\n.emd-btn_color_info.emd-btn_type_text:hover,\n.emd-btn_color_info.emd-btn_type_text:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n/* ----- Clear ----- */\n\n.emd-btn_color_clear {\n  background-color: var(--button--color--clear, #FFFFFF);\n  border-color: var(--button--color--clear, #FFFFFF);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear:focus,\n.emd-btn_color_clear:hover {\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear.emd-btn_type_outline,\n.emd-btn_color_clear.emd-btn_type_text {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear, #FFFFFF);\n  background-color: transparent;\n}\n\n.emd-btn_color_clear.emd-btn_type_outline:hover,\n.emd-btn_color_clear.emd-btn_type_outline:focus {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear, #FFFFFF);\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n.emd-btn_color_clear.emd-btn_type_text:hover,\n.emd-btn_color_clear.emd-btn_type_text:focus {\n  color: var(--button--color--clear--shade, #D6DDE4);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n/* ----- Disable ----- */\n\n.emd-btn:disabled,\n.emd-btn_disabled {\n  background-color: var(--button--color--disable, #B9C3CC);\n  border-color: var(--button--color--disable, #B9C3CC);\n  color: var(--button--color--disable--shade, #424B54);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.emd-btn:disabled:hover,\n.emd-btn_disabled:hover {\n  border-color: var(--button--color--disable, #B9C3CC);\n  background-color: var(--button--color--disable, #B9C3CC);\n}\n\n.emd-btn:disabled.emd-btn_type_outline,\n.emd-btn_disabled.emd-btn_type_outline {\n  color: var(--button--color--disable--shade, #424B54);\n  border-color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn:disabled.emd-btn_type_outline:hover,\n.emd-btn_disabled.emd-btn_type_outline:hover {\n  border-color: var(--button--color--disable--shade, #424B54);\n  color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_text:disabled,\n.emd-btn_type_text.emd-btn_disabled {\n  color: var(--button--color--disable--shade, #424B54);\n  -ms-flex-item-align: var(--button--color--disable--shade, #424B54);\n}\n\n.emd-btn_type_text:disabled:hover,\n.emd-btn_type_text.emd-btn_disabled:hover {\n  color: var(--button--color--disable--shade, #424B54);\n  fill: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n/**\n * Sizes\n */\n\n/* Small */\n\n.emd-btn_size_small {\n  padding: var(--button--padding--small, 6px);\n  font-weight: var(--button--font-weight--small, 400);\n  font-size: var(--button--font-size--small, 12px);\n}\n\n/* Big */\n\n.emd-btn_size_big {\n  padding: var(--button--padding--big, 12px);\n  font-size: var(--button--font-size--big, 16px);\n}\n\n/**\n * Shapes\n */\n\n/* Outline */\n\n.emd-btn_type_outline {\n  letter-spacing: 0.1em;\n}\n\n/* Text */\n\n.emd-btn_type_text,\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n}\n\n/* Block */\n\n.emd-btn_block {\n  width: 100%;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([block]) {\n  display: block;\n  width: 100%;\n}\n\n      </style>\n      <button class$="', '" disabled=', '>\n        <slot></slot>\n      </button>\n    ']);
+var _templateObject = _taggedTemplateLiteral(['\n      <style>\n        /**\n * Button\n */\n\n/* Button Definitions */\n\n.emd-btn,\na.emd-btn {\n  background-color: var(--button--color--default, #424B54);\n  color: var(--button--text-color, #FFFFFF);\n  border-color: var(--button--color--default, #424B54);\n  border-width: var(--button--border-width, 1px);\n  border-style: var(--button--border-style, solid);\n  border-radius: var(--button--border-radius, 2px);\n  cursor: pointer;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  font-size: var(--button--font-size, 14px);\n  font-weight: var(--button--font-weight, 600);\n  font-family: var(--button--font-family, "Montserrat", sans-serif);\n  outline: none;\n  padding: var(--button--padding, 9px);\n  text-transform: var(--button--text-transform, lowercase);\n  text-align: center;\n  letter-spacing: 0.04em;\n  user-select: none;\n  white-space: nowrap;\n  transition: all 300ms ease-in-out;\n}\n\n.emd-btn:hover,\n.emd-btn:focus,\na.emd-btn:hover,\na.emd-btn:focus {\n  background-color: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n.emd-btn_type_outline,\n.emd-btn_type_text {\n  color: var(--button--color--default, #424B54);\n  fill: var(--button--color--default, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_outline:hover,\n.emd-btn_type_outline:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n  background-color: var(--button--color--default--tint, #B9C3CC);\n}\n\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n/* Add marging to icon */\n\n.emd-btn > [class*=" fa-"],\na.emd-btn > [class*=" fa-"] {\n  margin: 0 5px;\n}\n\n/**\n * Colors & States\n */\n\n/* ----- Primary ----- */\n\n.emd-btn_color_primary {\n  background-color: var(--button--color--primary, #94c940);\n  border-color: var(--button--color--primary, #94c940);\n}\n\n.emd-btn_color_primary:focus,\n.emd-btn_color_primary:hover {\n  background-color: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n.emd-btn_color_primary.emd-btn_type_outline,\n.emd-btn_color_primary.emd-btn_type_text {\n  color: var(--button--color--primary, #94c940);\n  fill: var(--button--color--primary, #94c940);\n  background-color: transparent;\n}\n\n.emd-btn_color_primary.emd-btn_type_outline:hover,\n.emd-btn_color_primary.emd-btn_type_outline:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n  background-color: var(--button--color--primary--tint, #f4f9eb);\n}\n\n.emd-btn_color_primary.emd-btn_type_text:hover,\n.emd-btn_color_primary.emd-btn_type_text:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n/* ----- Secondary ----- */\n\n.emd-btn_color_secondary {\n  background-color: var(--button--color--secondary, #103A21);\n  border-color: var(--button--color--secondary, #103A21);\n}\n\n.emd-btn_color_secondary:focus,\n.emd-btn_color_secondary:hover {\n  background-color: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline,\n.emd-btn_color_secondary.emd-btn_type_text {\n  color: var(--button--color--secondary, #103A21);\n  fill: var(--button--color--secondary, #103A21);\n  background-color: transparent;\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline:hover,\n.emd-btn_color_secondary.emd-btn_type_outline:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n  background-color: var(--button--color--secondary--tint, #E7EBE8);\n}\n\n.emd-btn_color_secondary.emd-btn_type_text:hover,\n.emd-btn_color_secondary.emd-btn_type_text:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n/* ----- Success ----- */\n\n.emd-btn_color_success {\n  background-color: var(--button--color--success, #31cd65);\n  border-color: var(--button--color--success, #31cd65);\n}\n\n.emd-btn_color_success:focus,\n.emd-btn_color_success:hover {\n  background-color: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n.emd-btn_color_success.emd-btn_type_outline,\n.emd-btn_color_success.emd-btn_type_text {\n  color: var(--button--color--success, #31cd65);\n  fill: var(--button--color--success, #31cd65);\n  background-color: transparent;\n}\n\n.emd-btn_color_success.emd-btn_type_outline:hover,\n.emd-btn_color_success.emd-btn_type_outline:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n  background-color: var(--button--color--success--tint, #f3f8ec);\n}\n\n.emd-btn_color_success.emd-btn_type_text:hover,\n.emd-btn_color_success.emd-btn_type_text:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n/* ----- Danger ----- */\n\n.emd-btn_color_danger {\n  background-color: var(--button--color--danger, #cd3131);\n  border-color: var(--button--color--danger, #cd3131);\n\n}\n\n.emd-btn_color_danger:focus,\n.emd-btn_color_danger:hover {\n  background-color: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n.emd-btn_color_danger.emd-btn_type_outline,\n.emd-btn_color_danger.emd-btn_type_text {\n  color: var(--button--color--danger, #cd3131);\n  fill: var(--button--color--danger, #cd3131);\n  background-color: transparent;\n}\n\n.emd-btn_color_danger.emd-btn_type_outline:hover,\n.emd-btn_color_danger.emd-btn_type_outline:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n  background-color: var(--button--color--danger--tint, #efc2c2);\n}\n\n.emd-btn_color_danger.emd-btn_type_text:hover,\n.emd-btn_color_danger.emd-btn_type_text:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n/* ----- Warning ----- */\n\n.emd-btn_color_warning {\n  background-color: var(--button--color--warning, #ffcc32);\n  border-color: var(--button--color--warning, #ffcc32);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning:focus,\n.emd-btn_color_warning:hover {\n  background-color: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning.emd-btn_type_outline,\n.emd-btn_color_warning.emd-btn_type_text {\n  color: var(--button--color--warning, #ffcc32);\n  fill: var(--button--color--warning, #ffcc32);\n  background-color: transparent;\n}\n\n.emd-btn_color_warning.emd-btn_type_outline:hover,\n.emd-btn_color_warning.emd-btn_type_outline:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  background-color: var(--button--color--warning--tint, #fff9ea);\n}\n\n.emd-btn_color_warning.emd-btn_type_text:hover,\n.emd-btn_color_warning.emd-btn_type_text:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n}\n\n/* ----- Info ----- */\n\n.emd-btn_color_info {\n  background-color: var(--button--color--info, #32A0D2);\n  border-color: var(--button--color--info, #32A0D2);\n}\n\n.emd-btn_color_info:focus,\n.emd-btn_color_info:hover {\n  background-color: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n.emd-btn_color_info.emd-btn_type_outline,\n.emd-btn_color_info.emd-btn_type_text {\n  color: var(--button--color--info, #32A0D2);\n  fill: var(--button--color--info, #32A0D2);\n  background-color: transparent;\n}\n\n.emd-btn_color_info.emd-btn_type_outline:hover,\n.emd-btn_color_info.emd-btn_type_outline:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n  background-color: var(--button--color--info--tint, #eaf5fa);\n}\n\n.emd-btn_color_info.emd-btn_type_text:hover,\n.emd-btn_color_info.emd-btn_type_text:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n/* ----- Clear ----- */\n\n.emd-btn_color_clear {\n  background-color: var(--button--color--clear, #FFFFFF);\n  border-color: var(--button--color--clear, #FFFFFF);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear:focus,\n.emd-btn_color_clear:hover {\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear.emd-btn_type_outline,\n.emd-btn_color_clear.emd-btn_type_text {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear, #FFFFFF);\n  background-color: transparent;\n}\n\n.emd-btn_color_clear.emd-btn_type_outline:hover,\n.emd-btn_color_clear.emd-btn_type_outline:focus {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear, #FFFFFF);\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n.emd-btn_color_clear.emd-btn_type_text:hover,\n.emd-btn_color_clear.emd-btn_type_text:focus {\n  color: var(--button--color--clear--shade, #D6DDE4);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n/* ----- Disable ----- */\n\n.emd-btn:disabled,\n.emd-btn_disabled {\n  background-color: var(--button--color--disable, #B9C3CC);\n  border-color: var(--button--color--disable, #B9C3CC);\n  color: var(--button--color--disable--shade, #424B54);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.emd-btn:disabled:hover,\n.emd-btn_disabled:hover {\n  border-color: var(--button--color--disable, #B9C3CC);\n  background-color: var(--button--color--disable, #B9C3CC);\n}\n\n.emd-btn:disabled.emd-btn_type_outline,\n.emd-btn_disabled.emd-btn_type_outline {\n  color: var(--button--color--disable--shade, #424B54);\n  border-color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn:disabled.emd-btn_type_outline:hover,\n.emd-btn_disabled.emd-btn_type_outline:hover {\n  border-color: var(--button--color--disable--shade, #424B54);\n  color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_text:disabled,\n.emd-btn_type_text.emd-btn_disabled {\n  color: var(--button--color--disable--shade, #424B54);\n  -ms-flex-item-align: var(--button--color--disable--shade, #424B54);\n}\n\n.emd-btn_type_text:disabled:hover,\n.emd-btn_type_text.emd-btn_disabled:hover {\n  color: var(--button--color--disable--shade, #424B54);\n  fill: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n/**\n * Sizes\n */\n\n/* Small */\n\n.emd-btn_size_small {\n  padding: var(--button--padding--small, 6px);\n  font-weight: var(--button--font-weight--small, 400);\n  font-size: var(--button--font-size--small, 12px);\n}\n\n/* Big */\n\n.emd-btn_size_big {\n  padding: var(--button--padding--big, 12px);\n  font-size: var(--button--font-size--big, 16px);\n}\n\n/**\n * Shapes\n */\n\n/* Outline */\n\n.emd-btn_type_outline {\n  letter-spacing: 0.1em;\n}\n\n/* Text */\n\n.emd-btn_type_text,\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n}\n\n/* Block */\n\n.emd-btn_block {\n  width: 100%;\n}\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n:host([block]) {\n  display: block;\n  width: 100%;\n}\n\n      </style>\n      <button class$="', '" disabled=', '>\n        <slot></slot>\n      </button>\n    '], ['\n      <style>\n        /**\n * Button\n */\n\n/* Button Definitions */\n\n.emd-btn,\na.emd-btn {\n  background-color: var(--button--color--default, #424B54);\n  color: var(--button--text-color, #FFFFFF);\n  border-color: var(--button--color--default, #424B54);\n  border-width: var(--button--border-width, 1px);\n  border-style: var(--button--border-style, solid);\n  border-radius: var(--button--border-radius, 2px);\n  cursor: pointer;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  font-size: var(--button--font-size, 14px);\n  font-weight: var(--button--font-weight, 600);\n  font-family: var(--button--font-family, "Montserrat", sans-serif);\n  outline: none;\n  padding: var(--button--padding, 9px);\n  text-transform: var(--button--text-transform, lowercase);\n  text-align: center;\n  letter-spacing: 0.04em;\n  user-select: none;\n  white-space: nowrap;\n  transition: all 300ms ease-in-out;\n}\n\n.emd-btn:hover,\n.emd-btn:focus,\na.emd-btn:hover,\na.emd-btn:focus {\n  background-color: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n.emd-btn_type_outline,\n.emd-btn_type_text {\n  color: var(--button--color--default, #424B54);\n  fill: var(--button--color--default, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_outline:hover,\n.emd-btn_type_outline:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n  background-color: var(--button--color--default--tint, #B9C3CC);\n}\n\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  color: var(--button--color--default--shade, #242932);\n  fill: var(--button--color--default--shade, #242932);\n  border-color: var(--button--color--default--shade, #242932);\n}\n\n/* Add marging to icon */\n\n.emd-btn > [class*=" fa-"],\na.emd-btn > [class*=" fa-"] {\n  margin: 0 5px;\n}\n\n/**\n * Colors & States\n */\n\n/* ----- Primary ----- */\n\n.emd-btn_color_primary {\n  background-color: var(--button--color--primary, #94c940);\n  border-color: var(--button--color--primary, #94c940);\n}\n\n.emd-btn_color_primary:focus,\n.emd-btn_color_primary:hover {\n  background-color: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n.emd-btn_color_primary.emd-btn_type_outline,\n.emd-btn_color_primary.emd-btn_type_text {\n  color: var(--button--color--primary, #94c940);\n  fill: var(--button--color--primary, #94c940);\n  background-color: transparent;\n}\n\n.emd-btn_color_primary.emd-btn_type_outline:hover,\n.emd-btn_color_primary.emd-btn_type_outline:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n  background-color: var(--button--color--primary--tint, #f4f9eb);\n}\n\n.emd-btn_color_primary.emd-btn_type_text:hover,\n.emd-btn_color_primary.emd-btn_type_text:focus {\n  color: var(--button--color--primary--shade, #779e32);\n  fill: var(--button--color--primary--shade, #779e32);\n  border-color: var(--button--color--primary--shade, #779e32);\n}\n\n/* ----- Secondary ----- */\n\n.emd-btn_color_secondary {\n  background-color: var(--button--color--secondary, #103A21);\n  border-color: var(--button--color--secondary, #103A21);\n}\n\n.emd-btn_color_secondary:focus,\n.emd-btn_color_secondary:hover {\n  background-color: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline,\n.emd-btn_color_secondary.emd-btn_type_text {\n  color: var(--button--color--secondary, #103A21);\n  fill: var(--button--color--secondary, #103A21);\n  background-color: transparent;\n}\n\n.emd-btn_color_secondary.emd-btn_type_outline:hover,\n.emd-btn_color_secondary.emd-btn_type_outline:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n  background-color: var(--button--color--secondary--tint, #E7EBE8);\n}\n\n.emd-btn_color_secondary.emd-btn_type_text:hover,\n.emd-btn_color_secondary.emd-btn_type_text:focus {\n  color: var(--button--color--secondary--shade, #06170D);\n  fill: var(--button--color--secondary--shade, #06170D);\n  border-color: var(--button--color--secondary--shade, #06170D);\n}\n\n/* ----- Success ----- */\n\n.emd-btn_color_success {\n  background-color: var(--button--color--success, #31cd65);\n  border-color: var(--button--color--success, #31cd65);\n}\n\n.emd-btn_color_success:focus,\n.emd-btn_color_success:hover {\n  background-color: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n.emd-btn_color_success.emd-btn_type_outline,\n.emd-btn_color_success.emd-btn_type_text {\n  color: var(--button--color--success, #31cd65);\n  fill: var(--button--color--success, #31cd65);\n  background-color: transparent;\n}\n\n.emd-btn_color_success.emd-btn_type_outline:hover,\n.emd-btn_color_success.emd-btn_type_outline:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n  background-color: var(--button--color--success--tint, #f3f8ec);\n}\n\n.emd-btn_color_success.emd-btn_type_text:hover,\n.emd-btn_color_success.emd-btn_type_text:focus {\n  color: var(--button--color--success--shade, #26a550);\n  fill: var(--button--color--success--shade, #26a550);\n  border-color: var(--button--color--success--shade, #26a550);\n}\n\n/* ----- Danger ----- */\n\n.emd-btn_color_danger {\n  background-color: var(--button--color--danger, #cd3131);\n  border-color: var(--button--color--danger, #cd3131);\n\n}\n\n.emd-btn_color_danger:focus,\n.emd-btn_color_danger:hover {\n  background-color: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n.emd-btn_color_danger.emd-btn_type_outline,\n.emd-btn_color_danger.emd-btn_type_text {\n  color: var(--button--color--danger, #cd3131);\n  fill: var(--button--color--danger, #cd3131);\n  background-color: transparent;\n}\n\n.emd-btn_color_danger.emd-btn_type_outline:hover,\n.emd-btn_color_danger.emd-btn_type_outline:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n  background-color: var(--button--color--danger--tint, #efc2c2);\n}\n\n.emd-btn_color_danger.emd-btn_type_text:hover,\n.emd-btn_color_danger.emd-btn_type_text:focus {\n  color: var(--button--color--danger--shade, #a42727);\n  fill: var(--button--color--danger--shade, #a42727);\n  border-color: var(--button--color--danger--shade, #a42727);\n}\n\n/* ----- Warning ----- */\n\n.emd-btn_color_warning {\n  background-color: var(--button--color--warning, #ffcc32);\n  border-color: var(--button--color--warning, #ffcc32);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning:focus,\n.emd-btn_color_warning:hover {\n  background-color: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  color: var(--button--text-color--warning, #0C1219);\n}\n\n.emd-btn_color_warning.emd-btn_type_outline,\n.emd-btn_color_warning.emd-btn_type_text {\n  color: var(--button--color--warning, #ffcc32);\n  fill: var(--button--color--warning, #ffcc32);\n  background-color: transparent;\n}\n\n.emd-btn_color_warning.emd-btn_type_outline:hover,\n.emd-btn_color_warning.emd-btn_type_outline:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n  background-color: var(--button--color--warning--tint, #fff9ea);\n}\n\n.emd-btn_color_warning.emd-btn_type_text:hover,\n.emd-btn_color_warning.emd-btn_type_text:focus {\n  color: var(--button--color--warning--shade, #cca328);\n  fill: var(--button--color--warning--shade, #cca328);\n  border-color: var(--button--color--warning--shade, #cca328);\n}\n\n/* ----- Info ----- */\n\n.emd-btn_color_info {\n  background-color: var(--button--color--info, #32A0D2);\n  border-color: var(--button--color--info, #32A0D2);\n}\n\n.emd-btn_color_info:focus,\n.emd-btn_color_info:hover {\n  background-color: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n.emd-btn_color_info.emd-btn_type_outline,\n.emd-btn_color_info.emd-btn_type_text {\n  color: var(--button--color--info, #32A0D2);\n  fill: var(--button--color--info, #32A0D2);\n  background-color: transparent;\n}\n\n.emd-btn_color_info.emd-btn_type_outline:hover,\n.emd-btn_color_info.emd-btn_type_outline:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n  background-color: var(--button--color--info--tint, #eaf5fa);\n}\n\n.emd-btn_color_info.emd-btn_type_text:hover,\n.emd-btn_color_info.emd-btn_type_text:focus {\n  color: var(--button--color--info--shade, #2880a8);\n  fill: var(--button--color--info--shade, #2880a8);\n  border-color: var(--button--color--info--shade, #2880a8);\n}\n\n/* ----- Clear ----- */\n\n.emd-btn_color_clear {\n  background-color: var(--button--color--clear, #FFFFFF);\n  border-color: var(--button--color--clear, #FFFFFF);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear:focus,\n.emd-btn_color_clear:hover {\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n  color: var(--button--text-color--clear, #242932);\n}\n\n.emd-btn_color_clear.emd-btn_type_outline,\n.emd-btn_color_clear.emd-btn_type_text {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear, #FFFFFF);\n  background-color: transparent;\n}\n\n.emd-btn_color_clear.emd-btn_type_outline:hover,\n.emd-btn_color_clear.emd-btn_type_outline:focus {\n  color: var(--button--color--clear, #FFFFFF);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear, #FFFFFF);\n  background-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n.emd-btn_color_clear.emd-btn_type_text:hover,\n.emd-btn_color_clear.emd-btn_type_text:focus {\n  color: var(--button--color--clear--shade, #D6DDE4);\n  fill: var(--button--color--clear--shade, #D6DDE4);\n  border-color: var(--button--color--clear--shade, #D6DDE4);\n}\n\n/* ----- Disable ----- */\n\n.emd-btn:disabled,\n.emd-btn_disabled {\n  background-color: var(--button--color--disable, #B9C3CC);\n  border-color: var(--button--color--disable, #B9C3CC);\n  color: var(--button--color--disable--shade, #424B54);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.emd-btn:disabled:hover,\n.emd-btn_disabled:hover {\n  border-color: var(--button--color--disable, #B9C3CC);\n  background-color: var(--button--color--disable, #B9C3CC);\n}\n\n.emd-btn:disabled.emd-btn_type_outline,\n.emd-btn_disabled.emd-btn_type_outline {\n  color: var(--button--color--disable--shade, #424B54);\n  border-color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn:disabled.emd-btn_type_outline:hover,\n.emd-btn_disabled.emd-btn_type_outline:hover {\n  border-color: var(--button--color--disable--shade, #424B54);\n  color: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n.emd-btn_type_text:disabled,\n.emd-btn_type_text.emd-btn_disabled {\n  color: var(--button--color--disable--shade, #424B54);\n  -ms-flex-item-align: var(--button--color--disable--shade, #424B54);\n}\n\n.emd-btn_type_text:disabled:hover,\n.emd-btn_type_text.emd-btn_disabled:hover {\n  color: var(--button--color--disable--shade, #424B54);\n  fill: var(--button--color--disable--shade, #424B54);\n  background-color: transparent;\n}\n\n/**\n * Sizes\n */\n\n/* Small */\n\n.emd-btn_size_small {\n  padding: var(--button--padding--small, 6px);\n  font-weight: var(--button--font-weight--small, 400);\n  font-size: var(--button--font-size--small, 12px);\n}\n\n/* Big */\n\n.emd-btn_size_big {\n  padding: var(--button--padding--big, 12px);\n  font-size: var(--button--font-size--big, 16px);\n}\n\n/**\n * Shapes\n */\n\n/* Outline */\n\n.emd-btn_type_outline {\n  letter-spacing: 0.1em;\n}\n\n/* Text */\n\n.emd-btn_type_text,\n.emd-btn_type_text:hover,\n.emd-btn_type_text:focus {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n}\n\n/* Block */\n\n.emd-btn_block {\n  width: 100%;\n}\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n:host([block]) {\n  display: block;\n  width: 100%;\n}\n\n      </style>\n      <button class$="', '" disabled=', '>\n        <slot></slot>\n      </button>\n    ']);
 
@@ -13,0 +13,0 @@ var _cjs = require('sling-web-framework/dist/cjs');

dist/es/component/Button.js

@@ -451,2 +451,3 @@ import { SlingElement, html } from 'sling-web-framework/dist/es';
   display: inline-block;
+  vertical-align: middle;
 }
@@ -453,0 +454,0 @@

package.json

 {
   "name": "sling-web-component-button",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "description": "",
@@ -12,5 +12,5 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "sling-web-framework": "^0.2.27",
-    "sling-web-helpers": "^0.2.27"
+    "sling-web-framework": "^0.2.28",
+    "sling-web-helpers": "^0.2.28"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Improved metrics

Total package byte prevSize

54292

increased by0.15%

Lines of code

554

increased by0.18%

Dependency changes

• Updatedsling-web-framework@^0.2.28

• Updatedsling-web-helpers@^0.2.28