text: /**
  @license
  Copyright (c) 2019 The Beruang Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at
  https://github.com/DatatransInformatika/beruang/blob/master/LICENSE.txt The complete set of authors may be found at
  https://github.com/DatatransInformatika/beruang/blob/master/AUTHORS.txt The complete set of contributors may be
  found at https://github.com/DatatransInformatika/beruang/blob/master/CONTRIBUTORS.txt
  */
  import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  import '@polymer/iron-flex-layout/iron-flex-layout.js';
  import '@polymer/polymer/lib/elements/dom-if.js';
  import '@webcomponents/shadycss/entrypoints/apply-shim.js';
  import {BeruangBehavior} from '@beruang/beruang-behavior.js';
  import {BrownBehavior} from '@beruang/brown/brown-behavior.js';
  import '@beruang/brown/brown-style.js';
  
  /**
  `brown-tab-item-desktop` is tab item element.
  @customElement
  @polymer
  */
  class BrownTabItemDesktop extends BrownBehavior(BeruangBehavior(PolymerElement)) {
    static get template() {//v
      return html`
        <style  include="brown-style">
          :host {
            @apply --layout-horizontal;
            @apply --layout-center;
            @apply --nouserselect;
            color: var(--tabitem-passive-color);
            font-family: var(--tabitem-font-family);
            font-size: var(--tabitem-font-size);
            cursor:pointer;
          }
  
          :host > ::slotted(iron-icon) {/*v*/
            height:16px;
          }
  
          :host > #tab-closer {
            height:16px;
          }
  
          :host > #tab-closer.closeiconhover {/*v*/
            color: var(--tabitem-active-color);
          }
  
          :host([active]) {/*v*/
            color: var(--tabitem-active-color);
            border-bottom: 2px solid var(--tabitem-active-color);
          }
        </style>
        <slot></slot>
        <template is="dom-if" if="[[closable]]">
          <iron-icon
            icon="close"
            id="tab-closer"
            on-mouseenter="_closeIconMouseEnter"
            on-mouseleave="_closeIconMouseLeave">
          </iron-icon>
        </template>
      `;
    }
  
    static get properties() {
        return {
            active: {
                type:Boolean,
                value:false,
                reflectToAttribute:true,
                observer:'_activeChanged'
            },
  
            closable: {
                type:Boolean,
                value:false
            }
      };
    }
  
    ready() {
        super.ready();
        this.setAttribute("slot", "header");
    }
  
    _activeChanged(newValue, oldValue) {//jika tab diklik, properti active memanggil fungsi observer _activeChanged
  
      let initial = oldValue==null && newValue==false;
      if(initial) {
        return;
      }
  
      this.dispatchEvent(
        new CustomEvent(
          "active-changed",//konstruksi event argument 1: nama event
          { bubbles:true,
            composed:true,
            //mengambil anggota active dari event: event.detail.active;
            detail:{active:newValue}//event "active-changed" mengirim newValue
          }//konstruksi event argument 2: object event
        )
      );
  
    }
  
    _closeIconMouseEnter(e) {
      e.target.classList.add("closeiconhover");
      e.target.icon="highlight-off";
    }
  
    _closeIconMouseLeave(e) {
      e.target.classList.remove("closeiconhover");
      e.target.icon="close";
    }
  }
  
  window.customElements.define('brown-tabitem-desktop', BrownTabItemDesktop);
  