text: !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/iron-icon/iron-icon.js"),require("@polymer/iron-icons/iron-icons.js"),require("@lrnwebcomponents/lrn-shared-styles/lrn-shared-styles.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/iron-icon/iron-icon.js","@polymer/iron-icons/iron-icons.js","@lrnwebcomponents/lrn-shared-styles/lrn-shared-styles.js"],n):n((e=e||self).SimplePicker={},e.polymerElement_js)}(this,function(e,n){"use strict";function t(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function i(e,n){for(var t=0;t<n.length;t++){var i=n[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function o(e,n,t){return n&&i(e.prototype,n),t&&i(e,t),e}function l(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&r(e,n)}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function r(e,n){return(r=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function a(e,n){return!n||"object"!=typeof n&&"function"!=typeof n?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):n}function p(e,n,t){return(p="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,n,t){var i=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=s(e)););return e}(e,n);if(i){var o=Object.getOwnPropertyDescriptor(i,n);return o.get?o.get.call(t):o.value}})(e,n,t||e)}function c(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function u(){var e=c(['\n      <style is="custom-style" include="lrn-shared-styles">\n        :host {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n        }\n        :host .label {\n          padding: 2px 10px;\n          line-height: 100%;\n          @apply --simple-picker-option-label;\n        }\n      </style>\n      <iron-icon\n        aria-hidden="true"\n        hidden$="[[_hideIcon(icon)]]"\n        icon$="[[icon]]"\n      ></iron-icon>\n      <div id="title" class$="[[_getSrOnly(hideOptionLabels)]]">[[title]]</div>\n    ']);return u=function(){return e},e}var d=function(e){function i(){return t(this,i),a(this,s(i).apply(this,arguments))}return l(i,n.PolymerElement),o(i,[{key:"_hideIcon",value:function(e){return null===this.icon}},{key:"_handleFocus",value:function(){this.dispatchEvent(new CustomEvent("option-focus",{detail:this}))}},{key:"_handleHover",value:function(){this.dispatchEvent(new CustomEvent("option-focus",{detail:this}))}},{key:"_getSrOnly",value:function(e){return!1===e?"label":"label sr-only"}},{key:"_updateTitle",value:function(){var e=document.createElement("span");!1!==this.titleAsHtml&&(e.innerHTML=this.title,this.$.title.innerHTML="",this.$.title.appendChild(e))}},{key:"ready",value:function(){p(s(i.prototype),"ready",this).call(this);var e=this;this._updateTitle(),this.addEventListener("focus",function(n){e._handleFocus()}),this.addEventListener("mouseover",function(n){e._handleHover()})}},{key:"connectedCallback",value:function(){p(s(i.prototype),"connectedCallback",this).call(this)}}],[{key:"template",get:function(){return n.html(u())}},{key:"properties",get:function(){return{active:{name:"active",type:"Boolean",value:null,reflectToAttribute:!0},icon:{name:"icon",type:"String",value:null,reflectToAttribute:!1},hideOptionLabels:{name:"hideOptionLabels",type:"Boolean",value:!1,reflectToAttribute:!0},id:{name:"order",type:"String",value:null,reflectToAttribute:!0},selected:{name:"selected",type:"Boolean",value:!1,reflectToAttribute:!0},data:{name:"data",type:"Object",value:null},title:{name:"title",type:"String",value:null,reflectToAttribute:!0,observer:"_updateTitle"},titleAsHtml:{name:"titleAsHtml",type:"Boolean",value:!1,reflectToAttribute:!0},value:{name:"label",type:"String",value:null,reflectToAttribute:!0}}}},{key:"tag",get:function(){return"simple-picker-option"}}]),i}();function h(){var e=c(['\n<style>:host {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  --simple-picker-color: black;\n  font-size: var(--paper-input-container-label_-_font-size, var(--paper-font-subhead_-_font-size, inherit));\n  max-height: calc(var(--simple-picker-option-size, 24px) + 4px);\n  @apply --simple-picker;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host label {\n  padding-right: 5px;\n  color: var(--paper-input-container-label_-_color, var(--paper-input-container-color, var(--secondary-text-color, #000)));\n  @apply --simple-picker-label;\n}\n\n:host, \n:host #sample, \n:host .rows {\n  margin: 0;\n  padding: 0;\n}\n\n:host #listbox {\n  display: flex;\n  flex: 1 0 auto;\n  max-height: calc(var(--simple-picker-option-size, 24px) + 4px);\n}\n\n:host #sample {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 2px;\n  border-radius: 2px;\n  background-color: var(--simple-picker-background-color,#ddd);\n  border: 1px solid var(--simple-picker-sample-border-color, var(--simple-picker-border-color, var(--simple-picker-color)));\n} \n\n:host #icon {\n  transform: var(--simple-picker-icon-tranform, rotate(0deg));\n  transition: transform 0.25s;\n}\n\n:host([expanded]) #icon {\n  transform: var(--simple-picker-expanded-icon-tranform, rotate(0deg));\n  transition: transform 0.25s;\n}\n\n:host #collapse {\n  display: none;\n  width: 100%;\n  position: absolute;\n  top: calc(var(--simple-picker-option-size, 24px) + 4px);\n  padding: 0 1px;\n  @apply --simple-picker-collapse;\n}\n\n:host([expanded]:not([disabled])) #collapse {\n  display: block;\n} \n\n:host .rows {\n  display: block;\n  position: absolute;\n  z-index: 1000;\n  outline: 1px solid var(--simple-picker-border-color, var(--simple-picker-color));\n  background-color: var(--simple-picker-background-color,#ddd);\n  box-shadow: 0px 0px 1px #888;\n  @apply --simple-picker-rows;\n}\n\n:host .row {\n  display: flex; \n  align-items: stretch;\n  justify-content: space-between;\n  @apply --simple-picker-row;\n}\n\n:host simple-picker-option {\n  z-index: 1;\n  flex: 1 1 auto;\n  max-height: unset;\n  min-height: var(--simple-picker-option-size, 24px);\n  min-width: var(--simple-picker-option-size, 24px);\n  line-height: var(--simple-picker-option-size, 24px);\n  color: var(--simple-picker-color);\n  background-color: var(--simple-picker-option-background-color, white);\n  outline: var(--simple-picker-option-outline, none);\n  transition: max-height 2s;\n  @apply --simple-picker-option;\n}\n\n:host(:not([value])) #sample simple-picker-option,\n:host([value="null"]) #sample simple-picker-option {\n  @apply --simple-picker-sample-null;\n  --simple-picker-option-label: {\n    @apply --simple-picker-sample-null-label;\n  };\n}\n\n:host #sample simple-picker-option {\n  @apply --simple-picker-sample-option;\n}\n\n:host simple-picker-option[selected] {\n  z-index: 50;\n  color: var(--simple-picker-color);\n  background-color: var(--simple-picker-selected-option-background-color, #e8e8e8);\n  outline: var(--simple-picker-selected-option-outline, none);\n}\n\n:host simple-picker-option[active] {\n  z-index: 100;\n  cursor: pointer;\n  color: var(--simple-picker-color);\n  background-color: var(--simple-picker-active-option-background-color, #aaddff);\n  outline: var(--simple-picker-active-option-outline, none);\n}\n\n:host #sample simple-picker-option {\n  color: var(--simple-picker-sample-color,  var(--simple-picker-color));\n  background-color: var(--simple-picker-sample-background-color, transparent);\n  border: none;\n}\n\n:host(:not([expanded])) #collapse simple-picker-option {\n  max-height: 0;\n  transition: max-height 1.5s;\n}\n\n:host #collapse simple-picker-option:not([value]),\n:host #collapse simple-picker-option[value=null] {\n  @apply --simple-picker-option-null;\n}\n\n@media screen and (max-width: 600px) {\n  :host {\n    position: static;\n  }\n  :host #collapse {\n    top: 0;\n    margin-top: 0;\n    position: relative;\n  } \n  :host .rows {\n    position: sticky;\n  }  \n}\n</style>\n<label for="listbox" hidden$="[[!hasLabel]]">[[label]]</label>\n<div id="listbox"\n  aria-activedescendant$="[[__activeDesc]]" \n  aria-labelledby$="[[ariaLabelledby]]" \n  disabled$="[[disabled]]"\n  role="listbox" \n  tabindex="0">\n  <div id="sample">\n    <simple-picker-option \n      aria-hidden="true" \n      hide-option-labels$="[[hideOptionLabels]]"\n      icon$="[[__selectedOption.icon]]"\n      style$="[[__selectedOption.style]]" \n      title$="[[__selectedOption.alt]]"\n      title-as-html$="[[titleAsHtml]]">\n    </simple-picker-option>\n    <span id="icon"><iron-icon aria-hidden="true" icon="arrow-drop-down"></iron-icon></span>\n  </div>\n  <div id="collapse">\n    <div class="rows">\n      <template is="dom-repeat" items="[[__options]]" as="row" index-as="rownum">\n        <div class="row">\n          <template is="dom-repeat" items=[[row]] as="option" index-as="colnum">\n            <simple-picker-option \n              active$="[[_isActive(__activeDesc,rownum,colnum)]]"\n              aria-selected$="[[_isSelected(value,option.value)]]"\n              data$="[[data]]"\n              hide-option-labels$="[[hideOptionLabels]]"\n              icon$="[[option.icon]]"\n              id$="[[_getOptionId(rownum,colnum)]]"\n              role="option"\n              selected$="[[_isSelected(value,option.value)]]"\n              on-option-focus="_handleOptionFocus"\n              on-set-selected-option="_handleSetSelectedOption"\n              style$="[[option.style]]" \n              tabindex="-1"\n              title="[[option.alt]]"\n              title-as-html$="[[titleAsHtml]]"\n              value="[[option.value]]">\n            </simple-picker-option>\n          </template>\n        </div>\n      </template>\n    </div>\n  </div>\n</div>']);return h=function(){return e},e}window.customElements.define(d.tag,d);var v=function(e){function i(){return t(this,i),a(this,s(i).apply(this,arguments))}return l(i,n.PolymerElement),o(i,[{key:"_getOption",value:function(e,n){if(void 0!==e&&null!=n){var t=n.split("-");return e[t[1]][t[2]]}return null}},{key:"_getOptionId",value:function(e,n){return"option-"+e+"-"+n}},{key:"_goToOption",value:function(e,n){var t=this._getOptionId(e,n),i=this.shadowRoot.querySelector("#"+t),o=this.shadowRoot.querySelector("#"+this.__activeDesc);null!==i&&(i.tabindex=0,i.focus(),o.tabindex=-1)}},{key:"_handleListboxEvent",value:function(e,n){this.dispatchEvent(new CustomEvent(n,{detail:this})),"click"===n&&this._toggleListbox(!this.expanded)}},{key:"_handleListboxKeydown",value:function(e){this.dispatchEvent(new CustomEvent("keydown",{detail:this}));var n=this.__activeDesc.split("-"),t=parseInt(n[1]),i=parseInt(n[2]);if(32===e.keyCode)e.preventDefault(),this._toggleListbox(!this.expanded);else if(this.expanded&&[9,35,36,38,40].includes(e.keyCode))if(e.preventDefault(),35===e.keyCode){var o=this.options.length-1,l=this.options[o].length-1;this._goToOption(o,l)}else 36===e.keyCode?this._goToOption(0,0):38===e.keyCode?i>0?this._goToOption(t,i-1):t>0&&this._goToOption(t-1,this.options[t-1].length-1):40===e.keyCode&&(i<this.options[t].length-1?this._goToOption(t,i+1):t<this.options.length-1&&this._goToOption(t+1,[0]))}},{key:"_handleOptionFocus",value:function(e){this._setActiveOption(e.detail.id)}},{key:"_hasLabel",value:function(e){return null!=e&&""!==e.trim()}},{key:"_isActive",value:function(e,n,t){return e===this._getOptionId(n,t)}},{key:"_isSelected",value:function(e,n){return e===n}},{key:"_setActiveOption",value:function(e){this.__activeDesc=e,this.dispatchEvent(new CustomEvent("option-focus",{detail:this}))}},{key:"_setSelectedOption",value:function(){var e=null;if(void 0!==this.options&&null!==this.options){this.set("__options","string"==typeof this.options?JSON.parse(this.options):this.options.slice()),this.__activeDesc="option-0-0";for(var n=0;n<this.__options.length;n++)for(var t=0;t<this.__options[n].length;t++)this.__options[n][t].value===this.value&&(this.__activeDesc="option-"+n+"-"+t,e=this.__options[n][t])}null===e&&(this.value=null),this.__selectedOption=e,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this}))}},{key:"_toggleListbox",value:function(e){var n=this.shadowRoot.querySelector("#"+this.__activeDesc);this.expanded=e,e?(null!==n&&n.focus(),this.dispatchEvent(new CustomEvent("expand",{detail:this}))):(null!==n&&(this.value=n.getAttribute("value")),this.dispatchEvent(new CustomEvent("collapse",{detail:this})))}},{key:"ready",value:function(){p(s(i.prototype),"ready",this).call(this);var e=this;void 0!==this.$.listbox&&(this.$.listbox.addEventListener("click",function(n){e._handleListboxEvent(n,"click")}),this.$.listbox.addEventListener("mousedown",function(n){e._handleListboxEvent(n,"mousedown")}),this.$.listbox.addEventListener("keydown",function(n){e._handleListboxKeydown(n)}),this.addEventListener("blur",function(e){this.expanded=!1}))}},{key:"setOptions",value:function(e){this.set("options",[[]]),this.set("options",e)}},{key:"connectedCallback",value:function(){p(s(i.prototype),"connectedCallback",this).call(this)}}],[{key:"template",get:function(){return n.html(h())}},{key:"properties",get:function(){return{ariaLabelledby:{name:"ariaLabelledby",type:"String",value:null},disabled:{name:"disabled",type:"Boolean",value:!1},expanded:{name:"expanded",type:"Boolean",value:!1,reflectToAttribute:!0},titleAsHtml:{name:"titleAsHtml",type:"Boolean",value:!1},hideOptionLabels:{name:"hideOptionLabels",type:"Boolean",value:!1},hasLabel:{name:"label",type:"Boolean",computed:"_hasLabel(label)"},label:{name:"label",type:"String",value:null},options:{name:"options",type:"Array",value:[[]],notify:!0,observer:"_setSelectedOption"},value:{name:"value",type:"Object",value:null,notify:!0,observer:"_setSelectedOption",reflectToAttribute:!0},__activeDesc:{name:"__activeDesc",type:"String",value:"option-0-0"},__selectedOption:{name:"_setSelectedOption",type:"Object"}}}},{key:"tag",get:function(){return"simple-picker"}}]),i}();window.customElements.define(v.tag,v),e.SimplePicker=v,Object.defineProperty(e,"__esModule",{value:!0})});
  //# sourceMappingURL=simple-picker.umd.js.map
  