import '@polymer/polymer/polymer-legacy' ; import { IronFitBehavior } from '@polymer/iron-fit-behavior/iron-fit-behavior' ; import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn' ; import { html } from '@polymer/polymer/lib/utils/html-tag' ; export interface OutlineHelpBubble extends Element { show ( positionTarget , arrowDirection , leftOrRightOffset ) : void ; hide ( ) : void ; } Polymer ( { _template : html `
    <style include="cloud-install-styles"></style>
    <style>
      :host {
        margin: 10px;
        z-index: 100;
      }
      paper-button {
        color: var(--primary-green);
      }
      .helpContent {
        background-color: #fff;
        color: #000;
        padding: 24px;
        font-size: 14px;
        width: 250px;
        border-radius: 4px;
        box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2);
      }
      .upArrowWrapper,
      .downArrowWrapper,
      .rightArrowWrapper,
      .leftArrowWrapper {
        display: none;
        position: absolute;
        text-align: center;
      }
      :host(.showArrow-up) .upArrowWrapper,
      :host(.showArrow-down) .downArrowWrapper,
      :host(.showArrow-left) .leftArrowWrapper,
      :host(.showArrow-right) .rightArrowWrapper {
        display: block;
      }
      .upArrowWrapper {
        top: -13px;
        width: 100%;
        left: 0px;
      }
      .downArrowWrapper {
        top: 100%;
        width: 100%;
        left: 0px;
        margin-top: -3px;
      }
      .rightArrowWrapper {
        top: 8px;
        left: 100%;
      }
      .leftArrowWrapper {
        top: 8px;
        left: -10px;
      }
      .upArrow,
      .downArrow,
      .rightArrow,
      .leftArrow {
        width: 0px;
        height: 0px;
        display: inline-block;
      }
      .upArrow {
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
      }
      .downArrow {
        border-top: 10px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
      }
      .rightArrow {
        border-left: 10px solid #fff;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
      }
      .leftArrow {
        border-right: 10px solid #fff;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
      }
      /* rtl:begin:ignore */
      /* Multiple :host selectors must not have spacing between them */
      :host(:dir(ltr)):host(.offset-right) .upArrowWrapper,
      :host(:dir(ltr)):host(.offset-right) .downArrowWrapper {
        margin-left: 35%;
      }
      :host(:dir(ltr)):host(.offset-left) .upArrowWrapper,
      :host(:dir(ltr)):host(.offset-left) .downArrowWrapper {
        margin-left: -35%;
      }
      :host(:dir(rtl)):host(.offset-right) .upArrowWrapper,
      :host(:dir(rtl)):host(.offset-right) .downArrowWrapper {
        margin-right: 35%;
      }
      :host(:dir(rtl)):host(.offset-left) .upArrowWrapper,
      :host(:dir(rtl)):host(.offset-left) .downArrowWrapper {
        margin-right: -35%;
      }
      /* rtl:end:ignore */
    </style>
    <div class="rightArrowWrapper"><div class="rightArrow"></div></div>
    <div class="leftArrowWrapper"><div class="leftArrow"></div></div>
    <div class="upArrowWrapper"><div class="upArrow"></div></div>
    <div class="downArrowWrapper"><div class="downArrow"></div></div>
    <div class="helpContent"><slot></slot></div>
` , is : 'outline-help-bubble' , behaviors : [ IronFitBehavior , ] , ready ( ) { this . setAttribute ( 'no-overlap' , true ) ; this . setAttribute ( 'hidden' , true ) ; } , show ( positionTarget , arrowDirection , leftOrRightOffset ) { this . removeAttribute ( 'hidden' ) ; this . classList . add ( 'showArrow-' + arrowDirection ) ; const isUpOrDown = arrowDirection === 'up' || arrowDirection === 'down' ; if ( isUpOrDown && ( leftOrRightOffset === 'left' || leftOrRightOffset === 'right' ) ) { this . classList . add ( 'offset-' + leftOrRightOffset ) ; } this . positionTarget = positionTarget ; this . refit ( ) ; window . addEventListener ( 'scroll' , this . refit . bind ( this ) ) ; window . addEventListener ( 'resize' , this . refit . bind ( this ) ) ; } , hide ( ) { this . setAttribute ( 'hidden' , true ) ; window . removeEventListener ( 'scroll' , this . refit . bind ( this ) ) ; window . removeEventListener ( 'resize' , this . refit . bind ( this ) ) ; this . fire ( 'outline-help-bubble-dismissed' ) ; } } ) ;