{"version":3,"names":["kdxPageselectorCss","PageSelector","guid","goToPage","e","preventDefault","pageUrl","document","getElementById","this","selectId","value","window","location","href","componentWillLoad","render","h","class","Boolean","selectorTitle","dropdownText","selectName","selectIcon","buttonText","onClick"],"sources":["./src/components/kdx-pageselector/kdx-pageselector.scss?tag=kdx-pageselector","./src/components/kdx-pageselector/kdx-pageselector.tsx"],"sourcesContent":["kdx-pageselector {\r\n  max-width: 50%;\r\n  margin: 0 auto;\r\n}\r\n.kdx-pageselector {\r\n  background: #FFFFFF;\r\n  border-radius: 14px;\r\n  opacity: 1;\r\n  box-shadow: 0px 3px 6px #00000029;\r\n  margin-top: -35px;\r\n  z-index: 5;\r\n  position: relative;\r\n\r\n\r\n  &__inner {\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 25px 22px 22px 22px;\r\n\r\n      .kdx-pageselector__title {\r\n        color: $primary;\r\n        @include text-size(16);\r\n        @include line-height(24);\r\n        font-weight: 700;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      .dropdown-wrapper {\r\n          margin: 0 79px 0 12px;\r\n          display: flex;\r\n          flex-grow: 1;\r\n          flex-basis: 0;\r\n  \r\n          kdx-dropdown-list {\r\n              width: 100%;\r\n              position: relative;\r\n              \r\n              button {\r\n                svg {\r\n                  @include svg-format(14px, 16px, $primary);\r\n                }\r\n              }\r\n      \r\n              .dropdown-text {\r\n                  text-transform: none;\r\n                  color: $gray-dark;\r\n              }\r\n      \r\n              .form-control {\r\n                  background: transparent;\r\n                  border-bottom: 1px solid $gray-dark;\r\n                  box-shadow: none;\r\n                  color: $gray-dark;\r\n                  text-transform: none;\r\n                  font-weight: 400;\r\n                  @include text-size(16);\r\n                  @include line-height(20);\r\n\r\n                  .svg-icon {\r\n                    svg {\r\n                      @include svg-format(14px, 16px, $secondary);\r\n                    }\r\n                  }\r\n              }\r\n          }\r\n      }\r\n      .btn.btn-primary {\r\n        padding: 14px 16px;\r\n        max-width: 53px;\r\n        max-height: 46px;\r\n        position: absolute;\r\n        top: 9px;\r\n        right: 22px;\r\n      }\r\n  }\r\n}\r\n\r\n@include media-breakpoint-down(lg) {\r\n  kdx-pageselector {\r\n    max-width: 100%;\r\n  }\r\n}\r\n\r\n@include media-breakpoint-down(md) {\r\nkdx-pageselector {\r\n  \r\n  .kdx-pageselector {\r\n    position: relative;\r\n\r\n    &__inner {\r\n      flex-wrap: wrap;\r\n      justify-content: flex-start;\r\n      padding: 9px 9px 13px 22px;\r\n\r\n      .dropdown-wrapper {\r\n        min-width: 75%;\r\n        margin: 0 15px 0 0;\r\n        flex-grow: 0;\r\n        flex-basis: 0;\r\n\r\n        .kdx-dropdown-list {\r\n          .form-control {\r\n            padding: 0;\r\n            min-height: 21.5px;\r\n            @include text-size(14);\r\n            line-height: auto;\r\n          }\r\n        }\r\n\r\n      }\r\n\r\n      .form-control { \r\n        padding: 0;\r\n      }\r\n\r\n      button {\r\n        padding: 10px;\r\n\r\n        &.btn.btn-primary {\r\n          position: absolute;\r\n          right: 9px;\r\n          top: 9px;\r\n        }\r\n      }\r\n      \r\n    }\r\n    .kdx-pageselector__title {\r\n      @include text-size(14);\r\n      @include line-height(22);\r\n      width: 100%;\r\n      text-align: left;\r\n    }\r\n  }\r\n}\r\n}\r\n","import { Component, h, Prop, Element, State } from '@stencil/core';\r\nimport { guid } from 'utils';\r\n\r\n@Component({\r\n  tag: 'kdx-pageselector',\r\n  styleUrl: 'kdx-pageselector.scss',\r\n  shadow: false,\r\n})\r\nexport class PageSelector {\r\n  @Element() root: HTMLElement;\r\n\r\n  /**\r\n   * Large text that goes to the left dropdown\r\n   */\r\n  @Prop() selectorTitle: string;\r\n\r\n  /**\r\n   * Text on button\r\n   */\r\n  @Prop() buttonText: string = 'Go';\r\n\r\n  /**\r\n   * Placeholder text for custom select\r\n   */\r\n  @Prop() dropdownText: string;\r\n\r\n  /**\r\n   * The name attribute of the select tag\r\n   */\r\n  @Prop() selectName: string;\r\n  \r\n  /**\r\n\t * The dropdown icon\r\n\t */\r\n\t@Prop() selectIcon: string = \"chevron-down\";\r\n\r\n  /**\r\n   * Default option, not a selectable. If none, display first option in its place.\r\n   */\r\n  @Prop() defaultOption?: string;\r\n\r\n  /**\r\n\t * The ID of the select tag\r\n\t */\r\n\t@Prop({\r\n\t\tmutable: true,\r\n\t\treflect: true\r\n\t}) selectId: string;\r\n\r\n  /**\r\n\t * Generated GUID for toggling custom dropdown\r\n\t */\r\n\t@State() guid: string = guid();\r\n\r\n\r\n  /**\r\n   * Function runs when button is clicked, opens chosen page\r\n   *\r\n   * @param e - event\r\n   */\r\n  goToPage(e) {\r\n    e.preventDefault();\r\n    const pageUrl = (document.getElementById(this.selectId) as HTMLSelectElement).value;\r\n    \r\n    window.location.href = pageUrl;\r\n\r\n  }\r\n\r\n  componentWillLoad() {\r\n\t\t// Create unique ID\r\n\t\tthis.selectId = (!this.selectId) ? \"kdx-dropdown-list-\" + this.guid : this.selectId;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"kdx-pageselector\">\r\n        <div class=\"kdx-pageselector__inner\">\r\n          {Boolean(this.selectorTitle) && <div class=\"kdx-pageselector__title\">{this.selectorTitle}</div>}\r\n          <div class=\"dropdown-wrapper\">\r\n            <kdx-dropdown-list \r\n              class=\"homepage-pageselector\"\r\n              dropdown-text={this.dropdownText} \r\n              select-name={this.selectName}\r\n              select-icon={this.selectIcon}\r\n              select-id={this.selectId}>\r\n              <slot />\r\n            </kdx-dropdown-list>\r\n          </div>\r\n          <button\r\n            class=\"btn btn-primary\"\r\n            aria-label={this.buttonText}\r\n            onClick={e => {\r\n              this.goToPage(e);\r\n            }}\r\n          >\r\n            {this.buttonText}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sFAAA,MAAMA,EAAqB,8hJ,MCQdC,EAAY,M,sEAWM,K,sEAeD,e,+DAkBLC,G,CAQvBC,SAASC,GACPA,EAAEC,iBACF,MAAMC,EAAWC,SAASC,eAAeC,KAAKC,UAAgCC,MAE9EC,OAAOC,SAASC,KAAOR,C,CAIzBS,oBAEAN,KAAKC,UAAaD,KAAKC,SAAY,qBAAuBD,KAAKP,KAAOO,KAAKC,Q,CAG3EM,SACE,OACEC,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKC,MAAM,2BACRC,QAAQV,KAAKW,gBAAkBH,EAAA,OAAKC,MAAM,2BAA2BT,KAAKW,eAC3EH,EAAA,OAAKC,MAAM,oBACTD,EAAA,qBACEC,MAAM,wBAAuB,gBACdT,KAAKY,aAAY,cACnBZ,KAAKa,WAAU,cACfb,KAAKc,WAAU,YACjBd,KAAKC,UAChBO,EAAA,eAGJA,EAAA,UACEC,MAAM,kBAAiB,aACXT,KAAKe,WACjBC,QAASrB,IACPK,KAAKN,SAASC,EAAE,GAGjBK,KAAKe,a"}