import '@polymer/polymer/polymer-legacy' ; import '@polymer/paper-dropdown-menu/paper-dropdown-menu' ; import '@polymer/paper-listbox/paper-listbox' ; import '@polymer/paper-item/paper-item' ; import '@polymer/iron-icon/iron-icon' ; import '@polymer/iron-icons/iron-icons' ; import './cloud-install-styles' ; import { html , PolymerElement } from '@polymer/polymer' ; import type { PolymerElementProperties } from '@polymer/polymer/interfaces' ; export type LanguageDef = { id : string ; name : string ; dir : 'ltr' | 'rtl' ; } ; export class OutlineLanguagePicker extends PolymerElement { static get template ( ) { return html `
    <style include="cloud-install-styles"></style>
    <style>
      paper-dropdown-menu {
        --paper-input-container-input: {
          color: var(--medium-gray);
          font-size: 14px;
        };
      }
      .language-item {
        display: flex;
        cursor: pointer;
        font-size: 16px;
        padding-left: 24px;
        --paper-item-selected: {
          color: var(--primary-green);
          font-weight: normal;
        }
      }
      .language-name {
        flex-grow: 1;
      }
    </style>
    <paper-dropdown-menu no-label-float="" vertical-align="bottom">
      <paper-listbox slot="dropdown-content" selected="{{selectedLanguage}}" attr-for-selected="value" on-selected-changed="_languageChanged">
        <template is="dom-repeat" items="{{languages}}" as="lang">
          <paper-item class="language-item" value="{{lang.id}}">
            <span class="language-name">{{lang.name}}</span>
            <iron-icon icon="check" hidden$="{{_shouldHideCheckmark(selectedLanguage, lang.id)}}"></iron-icon>
          </paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>` ; } static get is ( ) { return 'outline-language-picker' ; } static get properties ( ) : PolymerElementProperties { return { selectedLanguage : { type : String } , languages : { type : Array } , } ; } selectedLanguage = '' ; languages : LanguageDef [ ] = [ ] ; _shouldHideCheckmark ( language , languageCode ) { return language !== languageCode ; } _languageChanged ( event ) { const languageCode = event . detail . value ; const languageDir = this . languages . find ( lang => lang . id === languageCode ) . dir ; const params = { bubbles : true , composed : true , detail : { languageCode , languageDir } } ; const customEvent = new CustomEvent ( 'SetLanguageRequested' , params ) ; this . dispatchEvent ( customEvent ) ; } } customElements . define ( OutlineLanguagePicker . is , OutlineLanguagePicker ) ;