https://www.sbk.org/_assets/5704df88ed45aead8ce948e4ec501605/assets/searchFlyout-bI_MoA2e.js

1import{r as s,a as u,i as v,x as b}from"./lit-element-CMl-6rf4.js";import{t as S}from"./custom-element-UsVr97OX.js";import{n as p}from"./property-YChvWeu5.js";import{r as f}from"./state-DCyB6vuB.js";import{a as y,s as k,b as m,h as w}from"./variables-Cy9Q-5Rw.js";const c=s(`${y}`),h=s(`${k}`),x=s(`${m}`),g=s(`${w}`),_=u`
2  :host {
3    --search-flyout-control-width: calc((100% / 12) * 10);
4    --search-flyout-list-width: 100%;
5
6    @media all and (min-width: ${c}) {
7      --search-flyout__standart-lg-width: 400px;
8    }
9
10    @media all and (min-width: ${h}) {
11      --search-flyout-list-width: calc((100% / 12) * 8);
12    }
13  }
14
15  ::slotted(sbk-link) {
16    width: 100%;
17    vertical-align: unset;
18  }
19
20  .search-flyout {
21    display: none;
22    position: absolute;
23    width: 100%;
24    z-index: 15;
25    left: unset;
26    right: 0;
27    top: var(--sbkTopNavBarSizingLargeScreenFixedBarHeight);
28    background-color: var(--sbkNavFlyoutColorBgColorOnScroll);
29    height: calc(100vh - var(--sbkTopNavBarSizingLargeScreenFixedBarHeight));
30    overflow-x: hidden;
31    overflow-y: auto;
32    scrollbar-gutter: stable;
33
34    @media all and (min-width: ${c}) {
35      padding-top: var(--sbkSearchFlyoutSpacingViewportMdInsetTop);
36      padding-bottom: var(--sbkSearchFlyoutSpacingViewportMdInsetBottom);
37      left: unset;
38      right: 0;
39      width: var(--sbkNavFlyoutSizingLgFixedWidth);
40      top: var(--sbkTopNavBarSizingLargeScreenFixedBarHeight);
41      background-color: #ffffff;
42      height: calc(100vh - var(--sbkTopNavBarSizingLargeScreenFixedBarHeight));
43      overflow-x: hidden;
44      overflow-y: auto;
45      border-top: var(--sbkNavFlyoutBorderTop);
46    }
47
48    @media all and (min-width: ${h}) {
49      padding-top: var(--sbkSearchFlyoutSpacingViewportLgInsetTop);
50      padding-bottom: var(--sbkSearchFlyoutSpacingViewportLgInsetBottom);
51    }
52
53    @media all and (min-width: ${x}) {
54      padding-top: var(--sbkSearchFlyoutSpacingViewportXlInsetTop);
55      padding-bottom: var(--sbkSearchFlyoutSpacingViewportXlInsetBottom);
56      left: 0;
57      width: 100%;
58      min-height: 50vh;
59      height: fit-content;
60    }
61  }
62
63  .nav-flyout-backdrop {
64    display: none;
65  }
66
67  .nav-flyout-backdrop.expanded {
68    display: block;
69    position: fixed;
70    top: 102px;
71    left: 0;
72    width: 100%;
73    height: 100vh;
74    z-index: 9;
75    background-color: var(--sbkNavFlyoutColorBackdrop);
76
77    @media all and (max-width: ${g}) {
78      top: var(--sbkTopNavBarSizingSmallScreenFixedBarHeight);
79    }
80  }
81
82  .nav-flyout.on-scroll {
83    background: var(--sbkNavFlyoutColorBgColorOnScroll);
84  }
85
86  .search-flyout.expanded {
87    display: block;
88  }
89
90  .search-flyout__content-wrapper {
91    position: relative;
92    padding: var(--sbkNavFlyoutSpacingViewportXlInsetTop)
93      var(--sbkCoreGridSmMargin) var(--sbkNavFlyoutSpacingViewportXlInsetBottom);
94    @media all and (min-width: ${c}) {
95      padding: 0 var(--sbkCoreGridMdMargin);
96    }
97  }
98
99  .search-suggestion-wrapper {
100    margin: 0 auto;
101    max-width: var(--sbkCoreContentAreaBodyMaxWidth);
102  }
103
104  .search-suggestion-wrapper.hidden {
105    visibility: hidden;
106  }
107
108  .search-flyout__controls {
109    display: flex;
110    justify-content: flex-end;
111    width: var(--search-flyout-control-width);
112  }
113
114  .search-flyout__controls-close {
115    @media all and (max-width: ${g}) {
116      display: none;
117    }
118  }
119`;var C=Object.defineProperty,B=Object.getOwnPropertyDescriptor,n=(e,i,t,o)=>{for(var a=o>1?void 0:o?B(i,t):i,d=e.length-1,l;d>=0;d--)(l=e[d])&&(a=(o?l(i,t,a):l(a))||a);return o&&a&&C(i,t,a),a};let r=class extends v{constructor(){super(...arguments),this.expanded=!1,this.onScroll=!1,this.hideSearchSuggestion=!1,this._handleKeyDown=e=>{e.key==="Escape"&&this.expanded&&this._handleTriggerClick(e)}}static get styles(){return _}firstUpdated(){const e=this.querySelector("sbk-search");e?.setAttribute("has-dropdown","true"),e?.setAttribute("in-flyout","true"),e&&e.triggerHideSearchSuggestion(!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._handleKeyDown),this.addEventListener("triggerHideSearchSuggestion",this._triggerHideSearchSuggestion)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("triggerHideSearchSuggestion",this._triggerHideSearchSuggestion)}render(){return b`
120      <slot
121        class="search-trigger"
122        name="trigger"
123        @click=${this._handleTriggerClick}
124      ></slot>
125      <div
126        class="search-flyout ${this.expanded?"expanded":""} ${this.onScroll?"on-sroll":""}"
127      >

128        <div class="search-flyout__controls">
129          <sbk-round-button
130            class="search-flyout__controls-close"
131            icon="close"
132            @click=${this._handleTriggerClick}
133            >X
134          </sbk-round-button>
135        </div>
136        <div class="search-flyout__content-wrapper">
137          <div class="search-wrapper">
138            <slot></slot>
139          </div>
140          <div
141            class="search-suggestion-wrapper ${this.hideSearchSuggestion?"hidden":""}"
142          >
143            <slot name="searchSuggestion"></slot>
144          </div>
145        </div>
146      </div>
147      <div
148        class="nav-flyout-backdrop ${this.expanded?"expanded":""}"
149        @click=${this._handleTriggerClick}
150      ></div>
151    `}_handleTriggerClick(e){e.preventDefault(),this.expanded=!this.expanded,this._changeTriggerElement();const i=new CustomEvent("triggeredSearchFlyout",{bubbles:!0,composed:!0,detail:{expanded:this.expanded}});this.dispatchEvent(i);const t=this.querySelector("sbk-search");t&&(this.expanded?(t.triggerHideSearchSuggestion(!1),t.updateComplete.then(()=>{t.focus()})):(t.triggerHideSearchSuggestion(!0),t.updateComplete.then(()=>{t.blur()}))),document.body.classList.toggle("no-scroll",this.expanded)}_closeFlyout(e){e.detail?.id!==this.id&&(this.expanded=!1)}_changeTriggerElement(){const e=this.querySelector('sbk-link[slot="trigger"]');e&&(e.setAttribute("aria-expanded",String(this.expanded)),this.expanded&&e.variant==="icon-navigation"?e.icon="close-round":e.variant==="icon-navigation"&&(e.icon="search"),e.isSelected=this.expanded)}_triggerHideSearchSuggestion(e){this.hideSearchSuggestion=e.detail?.hideSearchSuggestion}};n([p({type:Boolean,reflect:!0})],r.prototype,"expanded",2);n([p({type:Boolean})],r.prototype,"onScroll",2);n([f()],r.prototype,"hideSearchSuggestion",2);r=n([S("sbk-search-flyout")],r);