text: import*as tslib_1 from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Pill.css";import*as React from"react";import{Button}from"../../Button";import{Icon}from"../../Icon";import*as Resources from"../../Resources.Widgets";import{css,getSafeId}from"../../Util";import{darken,getColorString,isDark}from"../../Utilities/Color";import{getTabIndex}from"../../Utilities/Focus";import{FocusZoneContext}from"../../FocusZone";var Pill=function(e){function o(o){var t=e.call(this,o)||this;return t.onKeyDown=function(e){13===e.which&&t.props.onClick&&t.props.onClick()},t.onMouseEnter=function(e){t.props.onMouseEnter&&t.props.onMouseEnter(e),t.setState({isHoveringPrimaryElement:!0})},t.onMouseLeave=function(e){t.props.onMouseLeave&&t.props.onMouseLeave(e),t.setState({isHoveringPrimaryElement:!1})},t.onMouseLeaveButton=function(){t.setState({isHoveringPrimaryElement:!0})},t.onMouseOverButton=function(){t.setState({isHoveringPrimaryElement:!1})},t.state={isHoveringPrimaryElement:!1},t}return tslib_1.__extends(o,e),o.getColorStyle=function(e,o,t){if(e){var n=t&&o?darken(e,.06):e;return{backgroundColor:getColorString(n)}}},o.getSizeClass=function(e){switch(e){case 0:return"compact";case 2:return"large";case 1:default:return"regular"}},o.getVariantClass=function(e,o){switch(e){case 1:return"outlined";case 2:return o?css("colored",isDark(o)?"dark":"light"):"standard";case 0:default:return"standard"}},o.getDerivedStateFromProps=function(e,o){if($DEBUG){var t=e.color,n=e.iconProps,r=e.onRemoveClick,i=e.onRenderFilledVisual,s=e.size,l=void 0===s?1:s,a=e.variant;if(0===l){var c=[];r&&c.push("onRemoveClick"),i&&c.push("onRenderFilledVisual"),c.length>0&&console.warn("Pill Size is Compact, but the following fields were provided: "+c.join(", ")+" - these will be ignored. Consider changing Pill Size to Regular or Large if you need to support these items")}else i&&n&&console.warn("onRenderFilledVisual and iconProps have both been supplied; using onRenderFilledVisual");2!==a||t?t&&2!==a&&console.warn("Color was provided, but Pill Variant is not set to Colored - Pill will render as whatever variant was provided"):console.warn("Pill Variant is set to Colored, but not color was provided - Pill will render as Standard")}return o},o.prototype.render=function(){var e=this,t=this.props,n=t.ariaHidden,r=t.contentClassName,i=t.className,s=t.color,l=t.containsCount,a=void 0!==l&&l,c=t.iconProps,u=t.id,d=t.onClick,m=t.onRemoveClick,p=t.onRenderFilledVisual,v=t.size,f=void 0===v?1:v,g=t.variant,C=void 0===g?0:g,b=this.state.isHoveringPrimaryElement;return React.createElement(FocusZoneContext.Consumer,null,function(t){return React.createElement("div",{"aria-hidden":n,className:css(i,"bolt-pill flex-row flex-center",o.getVariantClass(C,s),o.getSizeClass(f),a&&"count",b&&"hover",d&&"clickable",p&&"has-filled-visual",c&&!p&&"has-icon",m&&"has-remove-button"),"data-focuszone":e.props.excludeFocusZone?void 0:t.focuszoneId,id:getSafeId(u),onClick:d,onKeyDown:e.onKeyDown,onMouseEnter:e.onMouseEnter,onMouseLeave:e.onMouseLeave,role:d?"button":"presentation",style:o.getColorStyle(s,b,d),tabIndex:getTabIndex(e.props)},p&&React.createElement("div",{className:"bolt-pill-filled-visual flex-noshrink"},p()),c&&!p&&React.createElement(Icon,tslib_1.__assign({},c,{className:css(c.className,"bolt-pill-icon")})),React.createElement("div",{className:css(r,"bolt-pill-content text-ellipsis")},e.props.children),m&&React.createElement(Button,{ariaLabel:Resources.RemovePillLabel,className:"bolt-pill-button",iconProps:{iconName:"Cancel",size:""},onClick:m,onMouseLeave:e.onMouseLeaveButton,onMouseOver:e.onMouseOverButton,subtle:!0,tooltipProps:{text:Resources.RemovePillLabel}}))})},o}(React.Component);export{Pill};