@forter/button - npm Package Compare versions

Comparing version 5.5.1 to 5.6.0

build/index.js

@@ -78,3 +78,3 @@ import{register as n}from"@forter/core";import{html as t,FcElement as o}from"@forter/element";import{DelegatesFocusMixin as e}from"@forter/mixins/delegates-focus-mixin";var r=t`<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 56 56">
   </style>
-</svg>`;class i extends(e(o)){static get properties(){return{intent:{type:String,reflect:!0,attribute:!1},width:{type:String,reflect:!0,attribute:!1},icon:{type:String},flat:{type:Boolean,reflect:!0,value:!1},disabled:{type:Boolean,reflect:!0,value:!1,attribute:!1},loading:{type:Boolean,value:!1,attribute:!1},valid:{type:Boolean,value:!1,attribute:!1},invalid:{type:Boolean,value:!1,attribute:!1}}}static get is(){return"fc-button"}static get styles(){return['/* We can do this because we set a box-shadow on focused button below */\n::-moz-focus-inner {\n  border: 0;\n}\n\n:host {\n  display: inline-block;\n  outline: none;\n\n  --fc-button-background-color: white;\n  --fc-button-min-height: 30px;\n  --fc-button-inner-margin: 3px;\n  --fc-button-outer-margin: 0;\n  --fc-icon-size: 18px;\n  --fc-button-padding: 14px;\n  --fc-button-hover-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.07);\n  --fc-button-active-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.11);\n  --fc-button-default-border-radius: 20px;\n  --fc-button-focus-box-shadow: var(--fc-default-focus-outline);\n  --fc-button-box-shadow: 0 1px 8px 0 var(--fc-button-background-color), 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n\n:host(:empty) > button {\n  padding: calc(var(--fc-icon-size) - 4px);\n  height: var(--fc-icon-size);\n  width: var(--fc-icon-size);\n\n  --fc-button-min-height: var(--fc-icon-size);\n  --fc-button-min-width: var(--fc-icon-size);\n  --fc-button-border-radius: 50%;\n}\n\n:host(:empty) > button > div {\n  display: none;\n}\n\n:host([intent="apply"]),\n:host([intent="primary"]) {\n  --fc-button-background-color: var(--fc-primary-500);\n}\n\n:host([intent="secondary"]) {\n  --fc-button-background-color: var(--fc-secondary-400);\n}\n\n:host([intent="cancel"]) {\n  --fc-button-background-color: var(--fc-cancel-300);\n  --fc-button-item-color: var(--fc-button-color, var(--fc-gray-800)) !important;\n}\n\n:host([intent="success"]) {\n  --fc-button-background-color: var(--fc-success-400);\n}\n\n:host([intent="warn"]) {\n  --fc-button-background-color: var(--fc-warning-400);\n}\n\n:host([intent="danger"]) {\n  --fc-button-background-color: var(--fc-danger-400);\n}\n\n:host(:not([intent])) {\n  --fc-button-item-color: var(--fc-button-color, var(--fc-blue-900));\n}\n\n:host([intent]) {\n  --fc-button-item-color: var(--fc-button-color, white);\n}\n\n:host button {\n  width: var(--fc-button-min-width, auto);\n  font: var(--fc-button-font, var(--fc-font-14px-400));\n  color: var(--fc-button-item-color);\n  min-height: var(--fc-button-min-height);\n  align-items: center;\n  background-color: var(--fc-button-background-color);\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  border: var(--fc-button-border, 0);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  letter-spacing: 0.01em;\n  line-height: var(--fc-button-min-height);\n  outline: none;\n  overflow: visible;\n  padding: 0 var(--fc-button-padding);\n  position: relative;\n  text-align: var(--fc-button-text-align, center);\n  text-decoration: none;\n  text-transform: var(--fc-button-text-transform, capitalize);\n  justify-content: var(--fc-button-justify-content, center);\n  transition:\n    box-shadow 0.3s ease-in-out,\n    width 0.3s ease-in-out;\n  user-select: none;\n  white-space: nowrap;\n}\n\n:host(:not(:empty)) button > * {\n  margin: 0 var(--fc-button-inner-margin);\n}\n\n:host(:not([loading])) ul {\n  display: none;\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\n:host button::after,\n:host button::before {\n  content: \'\';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  transition: box-shadow 0.3s ease-in-out;\n}\n\n:host button::after {\n  opacity: 0.3;\n}\n\n:host([loading]) button::after {\n  background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.1) 50%, transparent 60%, transparent 100%);\n  background-size: 500% 100%;\n  animation: gradient 1.6s infinite;\n}\n\n:host(:not([flat])) button:focus:enabled::before {\n  box-shadow: var(--fc-button-focus-box-shadow);\n}\n\n:host(:not([flat])) button::after {\n  box-shadow: var(--fc-button-box-shadow);\n}\n\n:host button:hover {\n  background-color: var(--fc-button-hover-background-color, var(--fc-button-background-color));\n}\n\n:host(:not([flat])) button:hover::after {\n  box-shadow: none;\n}\n\n@keyframes gradient {\n  0% {\n    background-position: 100% 100%;\n  }\n\n  100% {\n    background-position: 0% 0%;\n  }\n}\n\n:host svg {\n  fill: var(--fc-button-item-color);\n  stroke: var(--fc-button-item-color);\n  height: 14px;\n  width: 14px;\n}\n\n:host(:not([loading])) svg {\n  display: none;\n}\n\n:host(:not([icon])) fc-icon:first-of-type {\n  display: none;\n}\n\n:host button:first-child {\n  display: flex;\n  align-items: center;\n}\n\n:host button:first-child > div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host button:first-child > div:first-child {\n  height: var(--fc-icon-size);\n}\n\n:host i {\n  display: none;\n}\n\n:host([valid]) i,\n:host([invalid]) i {\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  min-width: 12px;\n  height: 12px;\n}\n\n:host([invalid]) i::after,\n:host([invalid]) i::before {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  width: 12px;\n  height: 2px;\n  background: var(--fc-button-item-color);\n  transform: rotate(45deg);\n  border-radius: 5px;\n  top: 6px;\n  left: 0;\n}\n\n:host([invalid]) i::after {\n  transform: rotate(-45deg);\n}\n\n:host([valid]) i::after {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  top: -4px;\n  width: 6px;\n  height: 10px;\n  border-color: var(--fc-button-item-color);\n  border-width: 0 2px 2px 0;\n  border-style: solid;\n  transform-origin: bottom left;\n  transform: rotate(45deg);\n}\n\n:host([width="large"]) button {\n  --fc-button-padding: 40px;\n}\n\n:host([width="medium"]) button {\n  --fc-button-padding: 20px;\n}\n\n:host([width="small"]) button {\n  --fc-button-padding: 5px;\n  --fc-button-font: var(--fc-font-12px-300);\n}\n\n:host([disabled]) {\n  opacity: 0.25;\n}\n\n:host([flat]) button {\n  box-shadow: none !important;\n  background-color: transparent;\n}\n\n:host button:disabled {\n  cursor: not-allowed;\n}\n\n:host([flat]) button:hover {\n  background-color: var(--fc-button-hover-background-color, transparent);\n}\n\n:host button:active:not(:disabled) {\n  box-shadow: var(--fc-button-active-background-shadow);\n}\n\n:host button:hover:not(:disabled):not(:active) {\n  box-shadow: var(--fc-button-hover-background-shadow);\n}\n\n:host([flat]) button:hover:not(:disabled) {\n  color: var(--fc-primary-500);\n\n  --fc-icon-fill: var(--fc-primary-500);\n}\n\n:host([flat]) button:active:not(:disabled) {\n  color: var(--fc-primary-400);\n\n  --fc-icon-fill: var(--fc-primary-400);\n}\n\n:host([flat]) button:not(:hover):focus:enabled {\n  color: var(--fc-primary-600);\n\n  --fc-icon-fill: var(--fc-primary-600);\n}\n']}get button(){return this.root.querySelector("button")}updated(){const{button:n,disabled:t}=this;n.disabled=t}firstUpdated(){this.updated()}render(){const{icon:n,textContent:o}=this;return t`
+</svg>`;class i extends(e(o)){static get properties(){return{intent:{type:String,reflect:!0,attribute:!1},width:{type:String,reflect:!0,attribute:!1},icon:{type:String},flat:{type:Boolean,reflect:!0,value:!1},disabled:{type:Boolean,reflect:!0,value:!1,attribute:!1},loading:{type:Boolean,value:!1,attribute:!1},valid:{type:Boolean,value:!1,attribute:!1},invalid:{type:Boolean,value:!1,attribute:!1}}}static get is(){return"fc-button"}static get styles(){return['/* We can do this because we set a box-shadow on focused button below */\n::-moz-focus-inner {\n  border: 0;\n}\n\n:host {\n  outline: none;\n  display: inline-block;\n\n  --fc-button-background-color: white;\n  --fc-button-min-height: 30px;\n  --fc-button-inner-margin: 3px;\n  --fc-button-outer-margin: 0;\n  --fc-icon-size: 18px;\n  --fc-button-padding: 14px;\n  --fc-button-hover-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.07);\n  --fc-button-active-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.11);\n  --fc-button-default-border-radius: 20px;\n  --fc-button-focus-box-shadow: var(--fc-default-focus-outline);\n  --fc-button-box-shadow: 0 1px 8px 0 var(--fc-button-background-color), 0 1px 3px rgba(0, 0, 0, 0.4);\n  --fc-button-hover-text-color: var(--fc-primary-500);\n}\n\n:host(:empty) > button {\n  padding: calc(var(--fc-icon-size) - 4px);\n  height: var(--fc-icon-size);\n  width: var(--fc-icon-size);\n\n  --fc-button-min-height: var(--fc-icon-size);\n  --fc-button-min-width: var(--fc-icon-size);\n  --fc-button-border-radius: 50%;\n}\n\n:host(:empty) > button > div {\n  display: none;\n}\n\n:host([intent="apply"]),\n:host([intent="primary"]) {\n  --fc-button-background-color: var(--fc-primary-500);\n}\n\n:host([intent="secondary"]) {\n  --fc-button-background-color: var(--fc-secondary-400);\n}\n\n:host([intent="cancel"]) {\n  --fc-button-background-color: var(--fc-cancel-300);\n  --fc-button-item-color: var(--fc-button-color, var(--fc-gray-800)) !important;\n}\n\n:host([intent="success"]) {\n  --fc-button-background-color: var(--fc-success-400);\n}\n\n:host([intent="warn"]) {\n  --fc-button-background-color: var(--fc-warning-400);\n}\n\n:host([intent="danger"]) {\n  --fc-button-background-color: var(--fc-danger-400);\n}\n\n:host(:not([intent])) {\n  --fc-button-item-color: var(--fc-button-color, var(--fc-blue-900));\n}\n\n:host([intent]) {\n  --fc-button-item-color: var(--fc-button-color, white);\n}\n\n:host button {\n  width: var(--fc-button-min-width, auto);\n  font: var(--fc-button-font, var(--fc-font-14px-400));\n  color: var(--fc-button-item-color);\n  min-height: var(--fc-button-min-height);\n  align-items: center;\n  background-color: var(--fc-button-background-color);\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  border: var(--fc-button-border, 0);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  letter-spacing: 0.01em;\n  line-height: var(--fc-button-min-height);\n  outline: none;\n  overflow: visible;\n  padding: 0 var(--fc-button-padding);\n  position: relative;\n  text-align: var(--fc-button-text-align, center);\n  text-decoration: none;\n  text-transform: var(--fc-button-text-transform, capitalize);\n  justify-content: var(--fc-button-justify-content, center);\n  transition:\n    box-shadow 0.3s ease-in-out,\n    width 0.3s ease-in-out;\n  user-select: none;\n  white-space: nowrap;\n}\n\n:host(:not(:empty)) button > * {\n  margin: 0 var(--fc-button-inner-margin);\n}\n\n:host(:not([loading])) ul {\n  display: none;\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\n:host button::after,\n:host button::before {\n  content: \'\';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  transition: box-shadow 0.3s ease-in-out;\n}\n\n:host button::after {\n  opacity: 0.3;\n}\n\n:host([loading]) button::after {\n  background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.1) 50%, transparent 60%, transparent 100%);\n  background-size: 500% 100%;\n  animation: gradient 1.6s infinite;\n}\n\n:host(:not([flat])) button:focus:enabled::before {\n  box-shadow: var(--fc-button-focus-box-shadow);\n}\n\n:host(:not([flat])) button::after {\n  box-shadow: var(--fc-button-box-shadow);\n}\n\n:host button:hover {\n  background-color: var(--fc-button-hover-background-color, var(--fc-button-background-color));\n}\n\n:host(:not([flat])) button:hover::after {\n  box-shadow: none;\n}\n\n@keyframes gradient {\n  0% {\n    background-position: 100% 100%;\n  }\n\n  100% {\n    background-position: 0% 0%;\n  }\n}\n\n:host svg {\n  fill: var(--fc-button-item-color);\n  stroke: var(--fc-button-item-color);\n  height: 14px;\n  width: 14px;\n}\n\n:host(:not([loading])) svg {\n  display: none;\n}\n\n:host(:not([icon])) fc-icon:first-of-type {\n  display: none;\n}\n\n:host button:first-child {\n  display: flex;\n  align-items: center;\n}\n\n:host button:first-child > div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host button:first-child > div:first-child {\n  height: var(--fc-icon-size);\n}\n\n:host i {\n  display: none;\n}\n\n:host([valid]) i,\n:host([invalid]) i {\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  min-width: 12px;\n  height: 12px;\n}\n\n:host([invalid]) i::after,\n:host([invalid]) i::before {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  width: 12px;\n  height: 2px;\n  background: var(--fc-button-item-color);\n  transform: rotate(45deg);\n  border-radius: 5px;\n  top: 6px;\n  left: 0;\n}\n\n:host([invalid]) i::after {\n  transform: rotate(-45deg);\n}\n\n:host([valid]) i::after {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  top: -4px;\n  left: 0;\n  width: 6px;\n  height: 10px;\n  border-color: var(--fc-button-item-color);\n  border-width: 0 2px 2px 0;\n  border-style: solid;\n  transform-origin: bottom left;\n  transform: rotate(45deg);\n}\n\n:host([width="large"]) button {\n  --fc-button-padding: 40px;\n}\n\n:host([width="medium"]) button {\n  --fc-button-padding: 20px;\n}\n\n:host([width="small"]) button {\n  --fc-button-padding: 5px;\n  --fc-button-font: var(--fc-font-12px-300);\n}\n\n:host([disabled]) {\n  opacity: 0.25;\n}\n\n:host([flat]) button {\n  box-shadow: none !important;\n  background-color: transparent;\n}\n\n:host button:disabled {\n  cursor: not-allowed;\n}\n\n:host([flat]) button:hover {\n  background-color: var(--fc-button-hover-background-color, transparent);\n}\n\n:host button:active:not(:disabled) {\n  box-shadow: var(--fc-button-active-background-shadow);\n}\n\n:host button:hover:not(:disabled):not(:active) {\n  box-shadow: var(--fc-button-hover-background-shadow);\n}\n\n:host([flat]) button:hover:not(:disabled) {\n  color: var(--fc-button-hover-text-color);\n\n  --fc-icon-fill: var(--fc-button-hover-text-color);\n}\n\n:host([flat]) button:active:not(:disabled) {\n  color: var(--fc-primary-400);\n\n  --fc-icon-fill: var(--fc-primary-400);\n}\n\n:host([flat]) button:not(:hover):focus:enabled {\n  color: var(--fc-primary-600);\n\n  --fc-icon-fill: var(--fc-primary-600);\n}\n']}get button(){return this.root.querySelector("button")}updated(){const{button:n,disabled:t}=this;n.disabled=t}firstUpdated(){this.updated()}render(){const{icon:n,textContent:o}=this;return t`
       <button
@@ -81,0 +81,0 @@ aria-label="${o||"button"}">

build/index.legacy.js

@@ -1,1 +0,1 @@
-function t(n){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(n)}function n(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function e(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}function r(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&a(t,n)}function i(t){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,n){return(a=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t,n){return!n||"object"!=typeof n&&"function"!=typeof n?c(t):n}function u(t,n,e){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,n,e){var o=function(t,n){for(;!Object.prototype.hasOwnProperty.call(t,n)&&null!==(t=i(t)););return t}(t,n);if(o){var r=Object.getOwnPropertyDescriptor(o,n);return r.get?r.get.call(e):r.value}})(t,n,e||t)}function l(t,n){return n||(n=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(n)}}))}function f(n){return(f="function"==typeof Symbol&&"symbol"===t(Symbol.iterator)?function(n){return t(n)}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":t(n)})(n)}function d(t,n){if(e=t,!(null!=(o=n)&&"undefined"!=typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](e):e instanceof o))throw new TypeError("Cannot call a class as a function");var e,o}function h(t,n){return!n||"object"!==f(n)&&"function"!=typeof n?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):n}function p(t){var n="function"==typeof Map?new Map:void 0;return(p=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,o)}function o(){return y(t,arguments,g(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),v(o,t)})(t)}function b(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function y(t,n,e){return(y=b()?Reflect.construct:function(t,n,e){var o=[null];o.push.apply(o,n);var r=new(Function.bind.apply(t,o));return e&&v(r,e.prototype),r}).apply(null,arguments)}function v(t,n){return(v=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function g(t){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var m=function(t){function n(){return d(this,n),h(this,g(n).apply(this,arguments))}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&v(t,n)}(n,p(HTMLElement)),n}(),k=function(t){return function(t){function e(){var t;return n(this,e),(t=s(this,i(e).call(this)))._connected=!1,t._firstUpdated=!1,t._props={},t._propsToAttrs={},t._attrsToProps={},t._ignoreNextAttributeChange={},t.constructor._classProperties=new Map,Object.keys(t.constructor.properties).forEach((function(n){var e=t.constructor.propertyNameToAttributeName(n);t.constructor._classProperties.set(n,t.constructor.properties[n]),t._propsToAttrs[n]=e,t._attrsToProps[e]=n})),t}return r(e,t),o(e,null,[{key:"propertyNameToAttributeName",value:function(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}},{key:"properties",get:function(){return{}}},{key:"observedAttributes",get:function(){var t=this;return Object.keys(this.properties).map((function(n){return t.propertyNameToAttributeName(n)}))}}]),o(e,[{key:"connectedCallback",value:function(){var t=this;u(i(e.prototype),"connectedCallback",this)&&u(i(e.prototype),"connectedCallback",this).call(this),this._connected||(Object.keys(this.constructor.properties).forEach((function(n){var e=t._propsToAttrs[n],o=Object.prototype.hasOwnProperty.call(t,n)?t[n]:t.constructor.properties[n].value;delete t[n],Object.defineProperty(t,n,{get:function(){return t._props[n]},set:function(e){t.set(n,e)}}),t.hasAttribute(e)?t.attributeChangedCallback(e,void 0,t.getAttribute(e)):t[n]=o})),this._connected=!0),this.requestUpdate&&this.requestUpdate(),!this.firstUpdated||this.connected||this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0)}},{key:"attributeChangedCallback",value:function(t,n,e){var o=this._attrsToProps[t];if(!this._ignoreNextAttributeChange[t]){switch(this.constructor.properties[o].type){case Number:this[o]=Number(e);break;case Boolean:this[o]=null!==e;break;case Array:case Object:this[o]=JSON.parse(e.includes("['")?e.replace(/'/g,'"'):e);break;default:this[o]=e}this._connected&&this.requestUpdate&&!1!==this.constructor.properties[o].attribute&&this.requestUpdate()}this._ignoreNextAttributeChange[t]=!1}},{key:"set",value:function(t,n){var e=this._props[t];switch(this.constructor.properties[t].type){case Number:this._props[t]=null===n?null:Number(n);break;default:this._props[t]=n}if(e!==this[t]){if(!1!==this.constructor.properties[t].reflectToAttribute){var o=this._propsToAttrs[t];if(null===this[t])this.removeAttribute(o);else switch(this.constructor.properties[t].type){case Boolean:this[t]?(this._ignoreNextAttributeChange[o]=!0,this.setAttribute(o,"")):this.removeAttribute(o);break;case Array:case Object:this._ignoreNextAttributeChange[o]=!0,this.setAttribute(o,JSON.stringify(this[t]));break;default:this._ignoreNextAttributeChange[o]=!0,this.setAttribute(o,this[t])}}if(this.updated&&this._connected){var r=new Map;r.set(t,this[t]),this.updated(r)}}}},{key:"firstUpdated",value:function(){}},{key:"updated",value:function(){}}]),e}(t)},w={},x=function(t){for(var n=arguments.length,e=new Array(n>1?n-1:0),o=1;o<n;o++)e[o-1]=arguments[o];var r=t.join("")+e.join("");return r in w||(w[r]=t.reduce((function(t,n,o){return t+n+(e[o]||"")}),"")),w[r]},S=function(t){return function(t){function e(){var t;return n(this,e),(t=s(this,i(e).call(this))).isCSS||t.attachShadow({mode:"open"}),t._query=t.root.querySelector.bind(t.root),t._queryAll=t.root.querySelectorAll.bind(t.root),t}return r(e,t),o(e,[{key:"isCSS",get:function(){return window.isCSS||this.hasAttribute("css")}},{key:"root",get:function(){return this.isCSS?this:this.shadowRoot}}]),o(e,[{key:"render",value:function(){return""}},{key:"requestUpdate",value:function(){var t=this.innerHTML;if(this.constructor.renderer){var n={scopeName:this.constructor.is,eventContext:this};this.constructor.renderer(this.render(),this.root,n),this._styleRender()}else this._defaultRender();this._patchSlot(t)}},{key:"_patchSlot",value:function(t){var n=this.root.querySelector("slot");this.isCSS&&n&&t&&(n.outerHTML=t.replace(">"," slot>"))}},{key:"_defaultRender",value:function(){var t=this._createTemplate(this.render()).content.cloneNode(!0);this.root.firstElementChild&&(this.root.innerHTML=""),this.root.innerText&&""!==this.root.innerText.trim()&&(this.root.innerText=""),this.root.appendChild(t),this._styleRender(),this.bindEvents&&this.bindEvents(),this.renderComplete()}},{key:"renderComplete",value:function(){}},{key:"_styleRender",value:function(){var t=this;(this.constructor.styles||[]).map((function(n){var e=t._createTemplate("<style>".concat(n,"</style>"),!0);t.root.appendChild(e.content.cloneNode(!0))}))}},{key:"_createTemplate",value:function(t,n){var e=document.createElement("template");return e.innerHTML=this.isCSS&&n?this._patchLightDomCSS(t):t,!window.ShadyCSS||window.ShadyCSS.nativeRenderer||this.isCSS||(window.ShadyCSS.prepareTemplate(e,this.nodeName.toLowerCase()),window.ShadyCSS.styleElement(this)),e}},{key:"_patchLightDomCSS",value:function(t){var n=this.constructor.is;return t.split("\n}\n").filter((function(t){return t.includes("{")})).map((function(t){return t.split("{").map((function(t,e){return t.split(",").map((function(t){return 0!==e||t.includes("@")?t:t.includes("::slotted(")&&t.includes("::slotted(")?t.replace(":host(","".concat(n)).replace("::slotted(","").replace(")"," ").replace(")"," "):t.includes("::slotted(")?t.replace("::slotted("," ".concat(n," ")).replace(")"," "):t.includes(":host(")?t.replace(":host(","".concat(n)).replace(")"," "):t.includes(":host")?t.replace(":host","".concat(n)):"".concat(n," ").concat(t)})).join(",")})).join("{")})).join("\n}\n")}}]),e}(t)},_=function(t){return function(t){function e(){var t;return n(this,e),(t=s(this,i(e).call(this)))._boundEvents=[],t._eventTypes=[],t.bindEvents.bind(c(t)),t}return r(e,t),o(e,[{key:"_cleanStyles",value:function(t){var n=t.split("</style>").filter((function(t){return!t.includes("<style>")})).join(""),e=t.split("<style>").filter((function(t){return!t.includes("</style>")})).join("");return n.length>0?n:e}},{key:"bindEvents",value:function(){var t=this;if(this.root&&!this.renderer){var n=this._cleanStyles(this.root.innerHTML);if(!n.includes("on-"))return;if(!n.split("on-")[1].includes('="'))return;if(this._eventTypes=(n.split("on-")||[]).map((function(t){return t.split("=")[0]})).filter((function(t){return!t.includes("<")&&!t.includes(" ")&&!t.includes('"')})),0===this._eventTypes.length)return;this._eventTypes.forEach((function(n){var e="on-".concat(n);t.root.querySelectorAll("[".concat(e,"]")).forEach((function(o){var r={el:o,eventType:n,fn:t[o.getAttribute(e)].bind(t)};t.off(o,n,r.fn),t.on(o,n,r.fn),t._boundEvents.push(r)}))}))}}},{key:"disconnectedCallback",value:function(){var t=this;u(i(e.prototype),"disconnectedCallback",this)&&u(i(e.prototype),"disconnectedCallback",this).call(this),this._boundEvents.forEach((function(n){t.off(n.el,n.eventType,n.fn)}))}},{key:"on",value:function(t,n,e){t.addEventListener(n,e)}},{key:"off",value:function(t,n,e){t.removeEventListener(n,e)}},{key:"fire",value:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=e.bubbles,r=void 0!==o&&o,i=e.composed,a=void 0!==i&&i;return this.dispatchEvent(new CustomEvent(t,{bubbles:r,composed:a,detail:n}))}}]),e}(t)},C=function(t){function e(){return n(this,e),s(this,i(e).apply(this,arguments))}return r(e,_(S(k(m)))),e}();function T(){var t=l(['<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 56 56">\n  <circle cx="28" cy="28" r="18" stroke-width="20" fill="none" stroke-dasharray="0 42" stroke-linecap="round"></circle>\n  \n  <circle cx="28" cy="28" r="6" stroke="none"></circle>\n  <style>\n    svg {\n      /* cubic-bezier(.22,.01,.3,.93) */\n      /* cubic-bezier(.25,0,0,.5) */\n      animation: rotate 1.6s cubic-bezier(.22,.01,.3,.93) infinite;\n    }\n\n    @keyframes rotate {\n      0% {\n        transform: rotate(0deg);\n      }\n      60% {\n        transform: rotate(260deg);\n      }\n      65% {\n        transform: rotate(260deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n    \n    svg > circle:first-of-type {\n      animation: close 0.8s cubic-bezier(.61,.01,.2,.99) alternate infinite;\n    }\n\n    svg > circle:last-of-type {\n      animation: show 0.8s cubic-bezier(.61,.01,.2,.99) alternate infinite;\n    }\n\n    @keyframes show {\n      0% {\n        opacity: 0;\n      }\n      90% {\n        opacity: 0;\n      }\n      95% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n\n    @keyframes close {\n      0% {\n        r: 18;\n        stroke-dasharray: 0 37.699;\n        stroke-width: 20;\n      }\n      10% {\n        r: 18;\n        stroke-dasharray: 0 37.699;\n        stroke-width: 20;\n      }\n      95% {\n        r: 0;\n        stroke-dasharray: 0;\n        opacity: 1;\n        stroke-width: 12;\n      }\n      96% {\n        opacity: 0;\n      }\n      100% {\n        r: 0;\n        opacity: 0;\n        stroke-dasharray: 0;\n        stroke-width: 12;\n      }\n    }\n  </style>\n</svg>']);return T=function(){return t},t}var E=x(T()),O=regeneratorRuntime.mark(R),j={delegatesFocus:Symbol("delegatesFocus"),focusTarget:Symbol("focusTarget")},A=["a[href]","area[href]","button:not([disabled])","details","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[contentEditable="true"]',"[tabindex]"].join(",");function R(t,n){var e,o,r;return regeneratorRuntime.wrap((function(i){for(;;)switch(i.prev=i.next){case 0:if(!n(t)){i.next=3;break}return i.next=3,t;case 3:if(e=function(t){var n=t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):[];return n.length>0?n:t.childNodes},!(o=t instanceof HTMLElement&&t.shadowRoot?t.shadowRoot.children:e(t))){i.next=12;break}r=0;case 7:if(!(r<o.length)){i.next=12;break}return i.delegateYield(R(o[r],n),"t0",9);case 9:r++,i.next=7;break;case 12:case"end":return i.stop()}}),O)}var N=function(t){return function(t){function e(){return n(this,e),s(this,i(e).apply(this,arguments))}return r(e,t),o(e,[{key:"createRenderRoot",value:function(){return this.attachShadow({mode:"open",delegatesFocus:!0})}},{key:"focus",value:function(t){if(this.shadowRoot.delegatesFocus)u(i(e.prototype),"focus",this).call(this,t);else{var n=this[j.focusTarget];n&&n.focus(t)}}},{key:j.delegatesFocus,get:function(){return!0}},{key:j.focusTarget,get:function(){var t,n;return this.shadowRoot.delegatesFocus?this:(t=this.shadowRoot,(n=R(t,(function(t){return t instanceof HTMLElement&&t.matches(A)&&t.tabIndex>=0})).next().value)instanceof HTMLElement?n:null)}}]),e}(t)};function z(){var t=l(['\n      <button\n         aria-label="','">\n          <i></i>\n          \n          ','\n          \n          \x3c!-- Icon --\x3e\n          <fc-icon icon="','"></fc-icon>\n            \n          \x3c!-- Label --\x3e\n          <div>\n              <slot></slot>\n          </div>\n      </button>\n    ']);return z=function(){return t},t}!function(t){if(t&&!customElements.get(t.is))try{customElements.define(t.is,t)}catch(e){var n=customElements.get(t.is);n&&n.toString()===t.toString()||console.error("Could not register custom element for ".concat(t.is,": name taken by"),n)}}(function(t){function e(){return n(this,e),s(this,i(e).apply(this,arguments))}return r(e,N(C)),o(e,[{key:"updated",value:function(){var t=this.button,n=this.disabled;t.disabled=n}},{key:"firstUpdated",value:function(){this.updated()}},{key:"render",value:function(){var t=this.icon,n=this.textContent;return x(z(),n||"button",E,t)}},{key:"connectedCallback",value:function(){u(i(e.prototype),"connectedCallback",this).call(this),this.addEventListener("keydown",this.onKeydown),this.addEventListener("keyup",this.onKeyup)}},{key:"disconnectedCallback",value:function(){u(i(e.prototype),"disconnectedCallback",this)&&u(i(e.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("keyup",this.onKeyup)}},{key:"button",get:function(){return this.root.querySelector("button")}}],[{key:"properties",get:function(){return{intent:{type:String,reflect:!0,attribute:!1},width:{type:String,reflect:!0,attribute:!1},icon:{type:String},flat:{type:Boolean,reflect:!0,value:!1},disabled:{type:Boolean,reflect:!0,value:!1,attribute:!1},loading:{type:Boolean,value:!1,attribute:!1},valid:{type:Boolean,value:!1,attribute:!1},invalid:{type:Boolean,value:!1,attribute:!1}}}},{key:"is",get:function(){return"fc-button"}},{key:"styles",get:function(){return['/* We can do this because we set a box-shadow on focused button below */\n::-moz-focus-inner {\n  border: 0;\n}\n\n:host {\n  display: inline-block;\n  outline: none;\n\n  --fc-button-background-color: white;\n  --fc-button-min-height: 30px;\n  --fc-button-inner-margin: 3px;\n  --fc-button-outer-margin: 0;\n  --fc-icon-size: 18px;\n  --fc-button-padding: 14px;\n  --fc-button-hover-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.07);\n  --fc-button-active-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.11);\n  --fc-button-default-border-radius: 20px;\n  --fc-button-focus-box-shadow: var(--fc-default-focus-outline);\n  --fc-button-box-shadow: 0 1px 8px 0 var(--fc-button-background-color), 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n\n:host(:empty) > button {\n  padding: calc(var(--fc-icon-size) - 4px);\n  height: var(--fc-icon-size);\n  width: var(--fc-icon-size);\n\n  --fc-button-min-height: var(--fc-icon-size);\n  --fc-button-min-width: var(--fc-icon-size);\n  --fc-button-border-radius: 50%;\n}\n\n:host(:empty) > button > div {\n  display: none;\n}\n\n:host([intent="apply"]),\n:host([intent="primary"]) {\n  --fc-button-background-color: var(--fc-primary-500);\n}\n\n:host([intent="secondary"]) {\n  --fc-button-background-color: var(--fc-secondary-400);\n}\n\n:host([intent="cancel"]) {\n  --fc-button-background-color: var(--fc-cancel-300);\n  --fc-button-item-color: var(--fc-button-color, var(--fc-gray-800)) !important;\n}\n\n:host([intent="success"]) {\n  --fc-button-background-color: var(--fc-success-400);\n}\n\n:host([intent="warn"]) {\n  --fc-button-background-color: var(--fc-warning-400);\n}\n\n:host([intent="danger"]) {\n  --fc-button-background-color: var(--fc-danger-400);\n}\n\n:host(:not([intent])) {\n  --fc-button-item-color: var(--fc-button-color, var(--fc-blue-900));\n}\n\n:host([intent]) {\n  --fc-button-item-color: var(--fc-button-color, white);\n}\n\n:host button {\n  width: var(--fc-button-min-width, auto);\n  font: var(--fc-button-font, var(--fc-font-14px-400));\n  color: var(--fc-button-item-color);\n  min-height: var(--fc-button-min-height);\n  align-items: center;\n  background-color: var(--fc-button-background-color);\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  border: var(--fc-button-border, 0);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  letter-spacing: 0.01em;\n  line-height: var(--fc-button-min-height);\n  outline: none;\n  overflow: visible;\n  padding: 0 var(--fc-button-padding);\n  position: relative;\n  text-align: var(--fc-button-text-align, center);\n  text-decoration: none;\n  text-transform: var(--fc-button-text-transform, capitalize);\n  justify-content: var(--fc-button-justify-content, center);\n  transition:\n    box-shadow 0.3s ease-in-out,\n    width 0.3s ease-in-out;\n  user-select: none;\n  white-space: nowrap;\n}\n\n:host(:not(:empty)) button > * {\n  margin: 0 var(--fc-button-inner-margin);\n}\n\n:host(:not([loading])) ul {\n  display: none;\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\n:host button::after,\n:host button::before {\n  content: \'\';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  transition: box-shadow 0.3s ease-in-out;\n}\n\n:host button::after {\n  opacity: 0.3;\n}\n\n:host([loading]) button::after {\n  background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.1) 50%, transparent 60%, transparent 100%);\n  background-size: 500% 100%;\n  animation: gradient 1.6s infinite;\n}\n\n:host(:not([flat])) button:focus:enabled::before {\n  box-shadow: var(--fc-button-focus-box-shadow);\n}\n\n:host(:not([flat])) button::after {\n  box-shadow: var(--fc-button-box-shadow);\n}\n\n:host button:hover {\n  background-color: var(--fc-button-hover-background-color, var(--fc-button-background-color));\n}\n\n:host(:not([flat])) button:hover::after {\n  box-shadow: none;\n}\n\n@keyframes gradient {\n  0% {\n    background-position: 100% 100%;\n  }\n\n  100% {\n    background-position: 0% 0%;\n  }\n}\n\n:host svg {\n  fill: var(--fc-button-item-color);\n  stroke: var(--fc-button-item-color);\n  height: 14px;\n  width: 14px;\n}\n\n:host(:not([loading])) svg {\n  display: none;\n}\n\n:host(:not([icon])) fc-icon:first-of-type {\n  display: none;\n}\n\n:host button:first-child {\n  display: flex;\n  align-items: center;\n}\n\n:host button:first-child > div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host button:first-child > div:first-child {\n  height: var(--fc-icon-size);\n}\n\n:host i {\n  display: none;\n}\n\n:host([valid]) i,\n:host([invalid]) i {\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  min-width: 12px;\n  height: 12px;\n}\n\n:host([invalid]) i::after,\n:host([invalid]) i::before {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  width: 12px;\n  height: 2px;\n  background: var(--fc-button-item-color);\n  transform: rotate(45deg);\n  border-radius: 5px;\n  top: 6px;\n  left: 0;\n}\n\n:host([invalid]) i::after {\n  transform: rotate(-45deg);\n}\n\n:host([valid]) i::after {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  top: -4px;\n  width: 6px;\n  height: 10px;\n  border-color: var(--fc-button-item-color);\n  border-width: 0 2px 2px 0;\n  border-style: solid;\n  transform-origin: bottom left;\n  transform: rotate(45deg);\n}\n\n:host([width="large"]) button {\n  --fc-button-padding: 40px;\n}\n\n:host([width="medium"]) button {\n  --fc-button-padding: 20px;\n}\n\n:host([width="small"]) button {\n  --fc-button-padding: 5px;\n  --fc-button-font: var(--fc-font-12px-300);\n}\n\n:host([disabled]) {\n  opacity: 0.25;\n}\n\n:host([flat]) button {\n  box-shadow: none !important;\n  background-color: transparent;\n}\n\n:host button:disabled {\n  cursor: not-allowed;\n}\n\n:host([flat]) button:hover {\n  background-color: var(--fc-button-hover-background-color, transparent);\n}\n\n:host button:active:not(:disabled) {\n  box-shadow: var(--fc-button-active-background-shadow);\n}\n\n:host button:hover:not(:disabled):not(:active) {\n  box-shadow: var(--fc-button-hover-background-shadow);\n}\n\n:host([flat]) button:hover:not(:disabled) {\n  color: var(--fc-primary-500);\n\n  --fc-icon-fill: var(--fc-primary-500);\n}\n\n:host([flat]) button:active:not(:disabled) {\n  color: var(--fc-primary-400);\n\n  --fc-icon-fill: var(--fc-primary-400);\n}\n\n:host([flat]) button:not(:hover):focus:enabled {\n  color: var(--fc-primary-600);\n\n  --fc-icon-fill: var(--fc-primary-600);\n}\n']}}]),e}());
+function t(n){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(n)}function n(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function e(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}function r(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&a(t,n)}function i(t){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,n){return(a=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function c(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function s(t,n){return!n||"object"!=typeof n&&"function"!=typeof n?c(t):n}function u(t,n,e){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,n,e){var o=function(t,n){for(;!Object.prototype.hasOwnProperty.call(t,n)&&null!==(t=i(t)););return t}(t,n);if(o){var r=Object.getOwnPropertyDescriptor(o,n);return r.get?r.get.call(e):r.value}})(t,n,e||t)}function l(t,n){return n||(n=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(n)}}))}function f(n){return(f="function"==typeof Symbol&&"symbol"===t(Symbol.iterator)?function(n){return t(n)}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":t(n)})(n)}function d(t,n){if(e=t,!(null!=(o=n)&&"undefined"!=typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](e):e instanceof o))throw new TypeError("Cannot call a class as a function");var e,o}function h(t,n){return!n||"object"!==f(n)&&"function"!=typeof n?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):n}function p(t){var n="function"==typeof Map?new Map:void 0;return(p=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,o)}function o(){return y(t,arguments,g(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),v(o,t)})(t)}function b(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}function y(t,n,e){return(y=b()?Reflect.construct:function(t,n,e){var o=[null];o.push.apply(o,n);var r=new(Function.bind.apply(t,o));return e&&v(r,e.prototype),r}).apply(null,arguments)}function v(t,n){return(v=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function g(t){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var m=function(t){function n(){return d(this,n),h(this,g(n).apply(this,arguments))}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&v(t,n)}(n,p(HTMLElement)),n}(),k=function(t){return function(t){function e(){var t;return n(this,e),(t=s(this,i(e).call(this)))._connected=!1,t._firstUpdated=!1,t._props={},t._propsToAttrs={},t._attrsToProps={},t._ignoreNextAttributeChange={},t.constructor._classProperties=new Map,Object.keys(t.constructor.properties).forEach((function(n){var e=t.constructor.propertyNameToAttributeName(n);t.constructor._classProperties.set(n,t.constructor.properties[n]),t._propsToAttrs[n]=e,t._attrsToProps[e]=n})),t}return r(e,t),o(e,null,[{key:"propertyNameToAttributeName",value:function(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}},{key:"properties",get:function(){return{}}},{key:"observedAttributes",get:function(){var t=this;return Object.keys(this.properties).map((function(n){return t.propertyNameToAttributeName(n)}))}}]),o(e,[{key:"connectedCallback",value:function(){var t=this;u(i(e.prototype),"connectedCallback",this)&&u(i(e.prototype),"connectedCallback",this).call(this),this._connected||(Object.keys(this.constructor.properties).forEach((function(n){var e=t._propsToAttrs[n],o=Object.prototype.hasOwnProperty.call(t,n)?t[n]:t.constructor.properties[n].value;delete t[n],Object.defineProperty(t,n,{get:function(){return t._props[n]},set:function(e){t.set(n,e)}}),t.hasAttribute(e)?t.attributeChangedCallback(e,void 0,t.getAttribute(e)):t[n]=o})),this._connected=!0),this.requestUpdate&&this.requestUpdate(),!this.firstUpdated||this.connected||this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0)}},{key:"attributeChangedCallback",value:function(t,n,e){var o=this._attrsToProps[t];if(!this._ignoreNextAttributeChange[t]){switch(this.constructor.properties[o].type){case Number:this[o]=Number(e);break;case Boolean:this[o]=null!==e;break;case Array:case Object:this[o]=JSON.parse(e.includes("['")?e.replace(/'/g,'"'):e);break;default:this[o]=e}this._connected&&this.requestUpdate&&!1!==this.constructor.properties[o].attribute&&this.requestUpdate()}this._ignoreNextAttributeChange[t]=!1}},{key:"set",value:function(t,n){var e=this._props[t];switch(this.constructor.properties[t].type){case Number:this._props[t]=null===n?null:Number(n);break;default:this._props[t]=n}if(e!==this[t]){if(!1!==this.constructor.properties[t].reflectToAttribute){var o=this._propsToAttrs[t];if(null===this[t])this.removeAttribute(o);else switch(this.constructor.properties[t].type){case Boolean:this[t]?(this._ignoreNextAttributeChange[o]=!0,this.setAttribute(o,"")):this.removeAttribute(o);break;case Array:case Object:this._ignoreNextAttributeChange[o]=!0,this.setAttribute(o,JSON.stringify(this[t]));break;default:this._ignoreNextAttributeChange[o]=!0,this.setAttribute(o,this[t])}}if(this.updated&&this._connected){var r=new Map;r.set(t,this[t]),this.updated(r)}}}},{key:"firstUpdated",value:function(){}},{key:"updated",value:function(){}}]),e}(t)},w={},x=function(t){for(var n=arguments.length,e=new Array(n>1?n-1:0),o=1;o<n;o++)e[o-1]=arguments[o];var r=t.join("")+e.join("");return r in w||(w[r]=t.reduce((function(t,n,o){return t+n+(e[o]||"")}),"")),w[r]},S=function(t){return function(t){function e(){var t;return n(this,e),(t=s(this,i(e).call(this))).isCSS||t.attachShadow({mode:"open"}),t._query=t.root.querySelector.bind(t.root),t._queryAll=t.root.querySelectorAll.bind(t.root),t}return r(e,t),o(e,[{key:"isCSS",get:function(){return window.isCSS||this.hasAttribute("css")}},{key:"root",get:function(){return this.isCSS?this:this.shadowRoot}}]),o(e,[{key:"render",value:function(){return""}},{key:"requestUpdate",value:function(){var t=this.innerHTML;if(this.constructor.renderer){var n={scopeName:this.constructor.is,eventContext:this};this.constructor.renderer(this.render(),this.root,n),this._styleRender()}else this._defaultRender();this._patchSlot(t)}},{key:"_patchSlot",value:function(t){var n=this.root.querySelector("slot");this.isCSS&&n&&t&&(n.outerHTML=t.replace(">"," slot>"))}},{key:"_defaultRender",value:function(){var t=this._createTemplate(this.render()).content.cloneNode(!0);this.root.firstElementChild&&(this.root.innerHTML=""),this.root.innerText&&""!==this.root.innerText.trim()&&(this.root.innerText=""),this.root.appendChild(t),this._styleRender(),this.bindEvents&&this.bindEvents(),this.renderComplete()}},{key:"renderComplete",value:function(){}},{key:"_styleRender",value:function(){var t=this;(this.constructor.styles||[]).map((function(n){var e=t._createTemplate("<style>".concat(n,"</style>"),!0);t.root.appendChild(e.content.cloneNode(!0))}))}},{key:"_createTemplate",value:function(t,n){var e=document.createElement("template");return e.innerHTML=this.isCSS&&n?this._patchLightDomCSS(t):t,!window.ShadyCSS||window.ShadyCSS.nativeRenderer||this.isCSS||(window.ShadyCSS.prepareTemplate(e,this.nodeName.toLowerCase()),window.ShadyCSS.styleElement(this)),e}},{key:"_patchLightDomCSS",value:function(t){var n=this.constructor.is;return t.split("\n}\n").filter((function(t){return t.includes("{")})).map((function(t){return t.split("{").map((function(t,e){return t.split(",").map((function(t){return 0!==e||t.includes("@")?t:t.includes("::slotted(")&&t.includes("::slotted(")?t.replace(":host(","".concat(n)).replace("::slotted(","").replace(")"," ").replace(")"," "):t.includes("::slotted(")?t.replace("::slotted("," ".concat(n," ")).replace(")"," "):t.includes(":host(")?t.replace(":host(","".concat(n)).replace(")"," "):t.includes(":host")?t.replace(":host","".concat(n)):"".concat(n," ").concat(t)})).join(",")})).join("{")})).join("\n}\n")}}]),e}(t)},_=function(t){return function(t){function e(){var t;return n(this,e),(t=s(this,i(e).call(this)))._boundEvents=[],t._eventTypes=[],t.bindEvents.bind(c(t)),t}return r(e,t),o(e,[{key:"_cleanStyles",value:function(t){var n=t.split("</style>").filter((function(t){return!t.includes("<style>")})).join(""),e=t.split("<style>").filter((function(t){return!t.includes("</style>")})).join("");return n.length>0?n:e}},{key:"bindEvents",value:function(){var t=this;if(this.root&&!this.renderer){var n=this._cleanStyles(this.root.innerHTML);if(!n.includes("on-"))return;if(!n.split("on-")[1].includes('="'))return;if(this._eventTypes=(n.split("on-")||[]).map((function(t){return t.split("=")[0]})).filter((function(t){return!t.includes("<")&&!t.includes(" ")&&!t.includes('"')})),0===this._eventTypes.length)return;this._eventTypes.forEach((function(n){var e="on-".concat(n);t.root.querySelectorAll("[".concat(e,"]")).forEach((function(o){var r={el:o,eventType:n,fn:t[o.getAttribute(e)].bind(t)};t.off(o,n,r.fn),t.on(o,n,r.fn),t._boundEvents.push(r)}))}))}}},{key:"disconnectedCallback",value:function(){var t=this;u(i(e.prototype),"disconnectedCallback",this)&&u(i(e.prototype),"disconnectedCallback",this).call(this),this._boundEvents.forEach((function(n){t.off(n.el,n.eventType,n.fn)}))}},{key:"on",value:function(t,n,e){t.addEventListener(n,e)}},{key:"off",value:function(t,n,e){t.removeEventListener(n,e)}},{key:"fire",value:function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=e.bubbles,r=void 0!==o&&o,i=e.composed,a=void 0!==i&&i;return this.dispatchEvent(new CustomEvent(t,{bubbles:r,composed:a,detail:n}))}}]),e}(t)},C=function(t){function e(){return n(this,e),s(this,i(e).apply(this,arguments))}return r(e,_(S(k(m)))),e}();function T(){var t=l(['<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 56 56">\n  <circle cx="28" cy="28" r="18" stroke-width="20" fill="none" stroke-dasharray="0 42" stroke-linecap="round"></circle>\n  \n  <circle cx="28" cy="28" r="6" stroke="none"></circle>\n  <style>\n    svg {\n      /* cubic-bezier(.22,.01,.3,.93) */\n      /* cubic-bezier(.25,0,0,.5) */\n      animation: rotate 1.6s cubic-bezier(.22,.01,.3,.93) infinite;\n    }\n\n    @keyframes rotate {\n      0% {\n        transform: rotate(0deg);\n      }\n      60% {\n        transform: rotate(260deg);\n      }\n      65% {\n        transform: rotate(260deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n    \n    svg > circle:first-of-type {\n      animation: close 0.8s cubic-bezier(.61,.01,.2,.99) alternate infinite;\n    }\n\n    svg > circle:last-of-type {\n      animation: show 0.8s cubic-bezier(.61,.01,.2,.99) alternate infinite;\n    }\n\n    @keyframes show {\n      0% {\n        opacity: 0;\n      }\n      90% {\n        opacity: 0;\n      }\n      95% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n\n    @keyframes close {\n      0% {\n        r: 18;\n        stroke-dasharray: 0 37.699;\n        stroke-width: 20;\n      }\n      10% {\n        r: 18;\n        stroke-dasharray: 0 37.699;\n        stroke-width: 20;\n      }\n      95% {\n        r: 0;\n        stroke-dasharray: 0;\n        opacity: 1;\n        stroke-width: 12;\n      }\n      96% {\n        opacity: 0;\n      }\n      100% {\n        r: 0;\n        opacity: 0;\n        stroke-dasharray: 0;\n        stroke-width: 12;\n      }\n    }\n  </style>\n</svg>']);return T=function(){return t},t}var E=x(T()),O=regeneratorRuntime.mark(R),j={delegatesFocus:Symbol("delegatesFocus"),focusTarget:Symbol("focusTarget")},A=["a[href]","area[href]","button:not([disabled])","details","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[contentEditable="true"]',"[tabindex]"].join(",");function R(t,n){var e,o,r;return regeneratorRuntime.wrap((function(i){for(;;)switch(i.prev=i.next){case 0:if(!n(t)){i.next=3;break}return i.next=3,t;case 3:if(e=function(t){var n=t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):[];return n.length>0?n:t.childNodes},!(o=t instanceof HTMLElement&&t.shadowRoot?t.shadowRoot.children:e(t))){i.next=12;break}r=0;case 7:if(!(r<o.length)){i.next=12;break}return i.delegateYield(R(o[r],n),"t0",9);case 9:r++,i.next=7;break;case 12:case"end":return i.stop()}}),O)}var N=function(t){return function(t){function e(){return n(this,e),s(this,i(e).apply(this,arguments))}return r(e,t),o(e,[{key:"createRenderRoot",value:function(){return this.attachShadow({mode:"open",delegatesFocus:!0})}},{key:"focus",value:function(t){if(this.shadowRoot.delegatesFocus)u(i(e.prototype),"focus",this).call(this,t);else{var n=this[j.focusTarget];n&&n.focus(t)}}},{key:j.delegatesFocus,get:function(){return!0}},{key:j.focusTarget,get:function(){var t,n;return this.shadowRoot.delegatesFocus?this:(t=this.shadowRoot,(n=R(t,(function(t){return t instanceof HTMLElement&&t.matches(A)&&t.tabIndex>=0})).next().value)instanceof HTMLElement?n:null)}}]),e}(t)};function z(){var t=l(['\n      <button\n         aria-label="','">\n          <i></i>\n          \n          ','\n          \n          \x3c!-- Icon --\x3e\n          <fc-icon icon="','"></fc-icon>\n            \n          \x3c!-- Label --\x3e\n          <div>\n              <slot></slot>\n          </div>\n      </button>\n    ']);return z=function(){return t},t}!function(t){if(t&&!customElements.get(t.is))try{customElements.define(t.is,t)}catch(e){var n=customElements.get(t.is);n&&n.toString()===t.toString()||console.error("Could not register custom element for ".concat(t.is,": name taken by"),n)}}(function(t){function e(){return n(this,e),s(this,i(e).apply(this,arguments))}return r(e,N(C)),o(e,[{key:"updated",value:function(){var t=this.button,n=this.disabled;t.disabled=n}},{key:"firstUpdated",value:function(){this.updated()}},{key:"render",value:function(){var t=this.icon,n=this.textContent;return x(z(),n||"button",E,t)}},{key:"connectedCallback",value:function(){u(i(e.prototype),"connectedCallback",this).call(this),this.addEventListener("keydown",this.onKeydown),this.addEventListener("keyup",this.onKeyup)}},{key:"disconnectedCallback",value:function(){u(i(e.prototype),"disconnectedCallback",this)&&u(i(e.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("keyup",this.onKeyup)}},{key:"button",get:function(){return this.root.querySelector("button")}}],[{key:"properties",get:function(){return{intent:{type:String,reflect:!0,attribute:!1},width:{type:String,reflect:!0,attribute:!1},icon:{type:String},flat:{type:Boolean,reflect:!0,value:!1},disabled:{type:Boolean,reflect:!0,value:!1,attribute:!1},loading:{type:Boolean,value:!1,attribute:!1},valid:{type:Boolean,value:!1,attribute:!1},invalid:{type:Boolean,value:!1,attribute:!1}}}},{key:"is",get:function(){return"fc-button"}},{key:"styles",get:function(){return['/* We can do this because we set a box-shadow on focused button below */\n::-moz-focus-inner {\n  border: 0;\n}\n\n:host {\n  outline: none;\n  display: inline-block;\n\n  --fc-button-background-color: white;\n  --fc-button-min-height: 30px;\n  --fc-button-inner-margin: 3px;\n  --fc-button-outer-margin: 0;\n  --fc-icon-size: 18px;\n  --fc-button-padding: 14px;\n  --fc-button-hover-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.07);\n  --fc-button-active-background-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.11);\n  --fc-button-default-border-radius: 20px;\n  --fc-button-focus-box-shadow: var(--fc-default-focus-outline);\n  --fc-button-box-shadow: 0 1px 8px 0 var(--fc-button-background-color), 0 1px 3px rgba(0, 0, 0, 0.4);\n  --fc-button-hover-text-color: var(--fc-primary-500);\n}\n\n:host(:empty) > button {\n  padding: calc(var(--fc-icon-size) - 4px);\n  height: var(--fc-icon-size);\n  width: var(--fc-icon-size);\n\n  --fc-button-min-height: var(--fc-icon-size);\n  --fc-button-min-width: var(--fc-icon-size);\n  --fc-button-border-radius: 50%;\n}\n\n:host(:empty) > button > div {\n  display: none;\n}\n\n:host([intent="apply"]),\n:host([intent="primary"]) {\n  --fc-button-background-color: var(--fc-primary-500);\n}\n\n:host([intent="secondary"]) {\n  --fc-button-background-color: var(--fc-secondary-400);\n}\n\n:host([intent="cancel"]) {\n  --fc-button-background-color: var(--fc-cancel-300);\n  --fc-button-item-color: var(--fc-button-color, var(--fc-gray-800)) !important;\n}\n\n:host([intent="success"]) {\n  --fc-button-background-color: var(--fc-success-400);\n}\n\n:host([intent="warn"]) {\n  --fc-button-background-color: var(--fc-warning-400);\n}\n\n:host([intent="danger"]) {\n  --fc-button-background-color: var(--fc-danger-400);\n}\n\n:host(:not([intent])) {\n  --fc-button-item-color: var(--fc-button-color, var(--fc-blue-900));\n}\n\n:host([intent]) {\n  --fc-button-item-color: var(--fc-button-color, white);\n}\n\n:host button {\n  width: var(--fc-button-min-width, auto);\n  font: var(--fc-button-font, var(--fc-font-14px-400));\n  color: var(--fc-button-item-color);\n  min-height: var(--fc-button-min-height);\n  align-items: center;\n  background-color: var(--fc-button-background-color);\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  border: var(--fc-button-border, 0);\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  letter-spacing: 0.01em;\n  line-height: var(--fc-button-min-height);\n  outline: none;\n  overflow: visible;\n  padding: 0 var(--fc-button-padding);\n  position: relative;\n  text-align: var(--fc-button-text-align, center);\n  text-decoration: none;\n  text-transform: var(--fc-button-text-transform, capitalize);\n  justify-content: var(--fc-button-justify-content, center);\n  transition:\n    box-shadow 0.3s ease-in-out,\n    width 0.3s ease-in-out;\n  user-select: none;\n  white-space: nowrap;\n}\n\n:host(:not(:empty)) button > * {\n  margin: 0 var(--fc-button-inner-margin);\n}\n\n:host(:not([loading])) ul {\n  display: none;\n}\n\n:host([loading]) button {\n  cursor: progress;\n}\n\n:host button::after,\n:host button::before {\n  content: \'\';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  border-radius: var(--fc-button-border-radius, var(--fc-button-default-border-radius));\n  transition: box-shadow 0.3s ease-in-out;\n}\n\n:host button::after {\n  opacity: 0.3;\n}\n\n:host([loading]) button::after {\n  background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.1) 50%, transparent 60%, transparent 100%);\n  background-size: 500% 100%;\n  animation: gradient 1.6s infinite;\n}\n\n:host(:not([flat])) button:focus:enabled::before {\n  box-shadow: var(--fc-button-focus-box-shadow);\n}\n\n:host(:not([flat])) button::after {\n  box-shadow: var(--fc-button-box-shadow);\n}\n\n:host button:hover {\n  background-color: var(--fc-button-hover-background-color, var(--fc-button-background-color));\n}\n\n:host(:not([flat])) button:hover::after {\n  box-shadow: none;\n}\n\n@keyframes gradient {\n  0% {\n    background-position: 100% 100%;\n  }\n\n  100% {\n    background-position: 0% 0%;\n  }\n}\n\n:host svg {\n  fill: var(--fc-button-item-color);\n  stroke: var(--fc-button-item-color);\n  height: 14px;\n  width: 14px;\n}\n\n:host(:not([loading])) svg {\n  display: none;\n}\n\n:host(:not([icon])) fc-icon:first-of-type {\n  display: none;\n}\n\n:host button:first-child {\n  display: flex;\n  align-items: center;\n}\n\n:host button:first-child > div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host button:first-child > div:first-child {\n  height: var(--fc-icon-size);\n}\n\n:host i {\n  display: none;\n}\n\n:host([valid]) i,\n:host([invalid]) i {\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  min-width: 12px;\n  height: 12px;\n}\n\n:host([invalid]) i::after,\n:host([invalid]) i::before {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  width: 12px;\n  height: 2px;\n  background: var(--fc-button-item-color);\n  transform: rotate(45deg);\n  border-radius: 5px;\n  top: 6px;\n  left: 0;\n}\n\n:host([invalid]) i::after {\n  transform: rotate(-45deg);\n}\n\n:host([valid]) i::after {\n  content: \'\';\n  display: block;\n  box-sizing: border-box;\n  position: absolute;\n  top: -4px;\n  left: 0;\n  width: 6px;\n  height: 10px;\n  border-color: var(--fc-button-item-color);\n  border-width: 0 2px 2px 0;\n  border-style: solid;\n  transform-origin: bottom left;\n  transform: rotate(45deg);\n}\n\n:host([width="large"]) button {\n  --fc-button-padding: 40px;\n}\n\n:host([width="medium"]) button {\n  --fc-button-padding: 20px;\n}\n\n:host([width="small"]) button {\n  --fc-button-padding: 5px;\n  --fc-button-font: var(--fc-font-12px-300);\n}\n\n:host([disabled]) {\n  opacity: 0.25;\n}\n\n:host([flat]) button {\n  box-shadow: none !important;\n  background-color: transparent;\n}\n\n:host button:disabled {\n  cursor: not-allowed;\n}\n\n:host([flat]) button:hover {\n  background-color: var(--fc-button-hover-background-color, transparent);\n}\n\n:host button:active:not(:disabled) {\n  box-shadow: var(--fc-button-active-background-shadow);\n}\n\n:host button:hover:not(:disabled):not(:active) {\n  box-shadow: var(--fc-button-hover-background-shadow);\n}\n\n:host([flat]) button:hover:not(:disabled) {\n  color: var(--fc-button-hover-text-color);\n\n  --fc-icon-fill: var(--fc-button-hover-text-color);\n}\n\n:host([flat]) button:active:not(:disabled) {\n  color: var(--fc-primary-400);\n\n  --fc-icon-fill: var(--fc-primary-400);\n}\n\n:host([flat]) button:not(:hover):focus:enabled {\n  color: var(--fc-primary-600);\n\n  --fc-icon-fill: var(--fc-primary-600);\n}\n']}}]),e}());

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.6.0](https://github.com/forter/web-components/compare/@forter/button@5.5.1...@forter/button@5.6.0) (2022-06-02)
+
+
+### Features
+
+* **button:** bump ver ([#991](https://github.com/forter/web-components/issues/991)) ([a666a36](https://github.com/forter/web-components/commit/a666a36))
+
+
+
+
+
 ## [5.5.1](https://github.com/forter/web-components/compare/@forter/button@5.5.0...@forter/button@5.5.1) (2022-05-16)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@forter/button",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "Button from Forter Components",
@@ -50,6 +50,6 @@ "main": "build/index.js",
     "@forter/element": "^1.6.1",
-    "@forter/icon": "^4.6.3",
+    "@forter/icon": "^4.6.6",
     "@forter/mixins": "^3.2.8"
   },
-  "gitHead": "8d0153f05fa2cc173caa3cd03feac8b4252762e3"
+  "gitHead": "23d0fc50fcd4864ce33500e3929bb8bde124b388"
 }

README.md

@@ -64,2 +64,3 @@ # fc-button
 | `--fc-button-font`             | button font. example: var(--fc-font-20px-600) |
+| `--fc-button-hover-text-color` | change flat type text color                   |
 | `--fc-button-inner-margin`     | button inner margin. example: 10px            |
@@ -66,0 +67,0 @@ | `--fc-button-justify-content`  | justify content. example: left                |

src/FcButton.js

@@ -45,2 +45,3 @@ import style from './fc-button.css';
  * @cssprop --fc-button-justify-content - justify content. example: left
+ * @cssprop --fc-button-hover-text-color - change flat type text color
  * @slot - textContent for the checkbox label. example: `<span> My Button </span>`
@@ -47,0 +48,0 @@ */

web-components.json

@@ -7,3 +7,3 @@ {
       "description": "An element by Forter\n<!-- Author: David Ondrich <[e-mail]> -->\n[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-button--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fbutton) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/button) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/button) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/button)\n\n## Usage\n\n```html\n<script>\n   import '@forter/button';\n</script>\n\n<fc-button>Button</fc-button>\n```\n## Examples\n\n```html\n<!-- flat icon -->\n<fc-button flat=\"true\" icon=\"edit\"></fc-button>\n\n  * <!-- no text -->\n<fc-button icon=\"edit\"></fc-button>\n\n<!-- intent loading -->\n<fc-button loading intent=\"success\">Submit</fc-button>\n\n```",
-      "jsDoc": "/**\n * An element by Forter\n * <!-- Author: David Ondrich <[e-mail]> -->\n * [![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-button--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fbutton) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/button) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/button) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/button)\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/button';\n * </script>\n *\n * <fc-button>Button</fc-button>\n * ```\n * ## Examples\n *\n * ```html\n * <!-- flat icon -->\n * <fc-button flat=\"true\" icon=\"edit\"></fc-button>\n *\n *  * <!-- no text -->\n * <fc-button icon=\"edit\"></fc-button>\n *\n * <!-- intent loading -->\n * <fc-button loading intent=\"success\">Submit</fc-button>\n *\n * ```\n * @element fc-button\n *\n * @fires click - fires once value changed. example: `{ \"target\": { \"checked\": true } }`\n * @cssprop --fc-button-background-color - button background colour.\n * @cssprop --fc-button-color - button colour.\n * @cssprop --fc-button-border-radius - button border radius.\n * @cssprop --fc-button-box-shadow - button box shadow. example: none\n * @cssprop --fc-button-min-height - button height. example: 200px\n * @cssprop --fc-button-inner-margin - button inner margin. example: 10px\n * @cssprop --fc-button-min-width - button min-width. example: 200px\n * @cssprop --fc-button-text-transform - button text transform. example: uppercase\n * @cssprop --fc-button-font - button font. example: var(--fc-font-20px-600)\n * @cssprop --fc-button-justify-content - justify content. example: left\n * @slot - textContent for the checkbox label. example: `<span> My Button </span>`\n */",
+      "jsDoc": "/**\n * An element by Forter\n * <!-- Author: David Ondrich <[e-mail]> -->\n * [![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-button--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fbutton) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/button) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/button) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/button/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/button)\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/button';\n * </script>\n *\n * <fc-button>Button</fc-button>\n * ```\n * ## Examples\n *\n * ```html\n * <!-- flat icon -->\n * <fc-button flat=\"true\" icon=\"edit\"></fc-button>\n *\n *  * <!-- no text -->\n * <fc-button icon=\"edit\"></fc-button>\n *\n * <!-- intent loading -->\n * <fc-button loading intent=\"success\">Submit</fc-button>\n *\n * ```\n * @element fc-button\n *\n * @fires click - fires once value changed. example: `{ \"target\": { \"checked\": true } }`\n * @cssprop --fc-button-background-color - button background colour.\n * @cssprop --fc-button-color - button colour.\n * @cssprop --fc-button-border-radius - button border radius.\n * @cssprop --fc-button-box-shadow - button box shadow. example: none\n * @cssprop --fc-button-min-height - button height. example: 200px\n * @cssprop --fc-button-inner-margin - button inner margin. example: 10px\n * @cssprop --fc-button-min-width - button min-width. example: 200px\n * @cssprop --fc-button-text-transform - button text transform. example: uppercase\n * @cssprop --fc-button-font - button font. example: var(--fc-font-20px-600)\n * @cssprop --fc-button-justify-content - justify content. example: left\n * @cssprop --fc-button-hover-text-color - change flat type text color\n * @slot - textContent for the checkbox label. example: `<span> My Button </span>`\n */",
       "attributes": [
@@ -123,2 +123,6 @@ {
         {
+          "name": "--fc-button-hover-text-color",
+          "description": "change flat type text color"
+        },
+        {
           "name": "--fc-button-justify-content",
@@ -125,0 +129,0 @@ "description": "justify content. example: left"

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

117275

increased by0.82%

Lines of code

890

increased by0.79%

Number of lines in readme file

70

increased by1.45%

Dependency changes

• Updated@forter/icon@^4.6.6