import CSSReflectionMixin from '../../../mixins/css-reflection-mixin' ; const { customElement , property } = Polymer . decorators ; const SVG = ( ( window as any ) . svgjs || ( window as any ) . SVG ) as svgjs . Library ; customElement polymer @ customElement ( 'atom-chevron' ) export default class AtomChevronElement extends CSSReflectionMixin ( Polymer . Element ) { static DEFAULT_THICKNESS = 6 ; static DEFAULT_STROKE_SIZE = 1 ; /**
     * The direction the chevron should point.
     */ @ property ( { type : String , reflectToAttribute : true } ) direction : 'left' | 'right' = 'right' ; @ property ( { type : Boolean } ) noAutoRender = false ; svgDoc : svgjs . Doc ; chevron : svgjs . Polygon ; _lastDirection : 'left' | 'right' ; param width param height param thickness param fillColor param strokeSize param strokeColor returns static createChevron ( { width , height , thickness , fillColor , strokeSize , strokeColor } ) { const chevron = new SVG . Polygon ( ) ; const pointArray = AtomChevronElement . createChevronPointArray ( { width , height , thickness } ) ; chevron . plot ( pointArray ) ; chevron . fill ( fillColor ) ; if ( strokeSize > 0 ) { chevron . stroke ( { width : strokeSize , color : strokeColor } ) ; } return chevron ; } static createChevronPointArray ( { width , height , thickness } ) { return new SVG . PointArray ( [ [ 0 , 0 ] , [ thickness , 0 ] , [ width , height / 2 ] , [ thickness , height ] , [ 0 , height ] , [ width - thickness , height / 2 ] ] ) ; } ready ( ) { super . ready ( ) ; this . svgDoc = SVG ( this . shadowRoot as any ) ; } connectedCallback ( ) { super . connectedCallback ( ) ; if ( ! this . noAutoRender ) { if ( document . readyState === 'complete' ) { Polymer . RenderStatus . afterNextRender ( this , this . render ) ; } else { window . addEventListener ( 'load' , ( ) => { Polymer . RenderStatus . afterNextRender ( this , this . render ) ; } ) ; } } } render ( width ? , height ? ) { this . svgDoc . clear ( ) ; width = typeof width === 'number' ? width : this . scrollWidth ; height = typeof height === 'number' ? height : this . clientHeight ; const strokeSize = parseInt ( this . readCSSCustomProperty ( '--atom-chevron-stroke-size' , AtomChevronElement . DEFAULT_STROKE_SIZE ) , 10 ) ; const thickness = parseInt ( this . readCSSCustomProperty ( '--atom-chevron-thickness' , AtomChevronElement . DEFAULT_THICKNESS ) , 10 ) ; this . svgDoc . size ( width , height ) ; const chevron = AtomChevronElement . createChevron ( { width : width - strokeSize , height : height - strokeSize , thickness , fillColor : this . readCSSCustomProperty ( '--atom-chevron-fill-color' ) , strokeSize , strokeColor : this . readCSSCustomProperty ( '--atom-chevron-stroke-color' ) } ) ; chevron . move ( strokeSize / 2 , strokeSize / 2 ) ; this . chevron = chevron ; this . svgDoc . add ( chevron ) ; if ( this . direction === 'left' && this . _lastDirection !== 'left' ) { this . svgDoc . transform ( { scaleX : - 1 } ) ; this . _lastDirection = 'left' ; } } }