@kyndryl-design-system/shidoka-applications 2.67.3 → 2.68.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/global/footer/footer.js +7 -7
- package/components/global/header/header.d.ts +8 -0
- package/components/global/header/header.d.ts.map +1 -1
- package/components/global/header/header.js +55 -17
- package/components/global/header/header.js.map +1 -1
- package/components/global/header/headerFlyout.d.ts +1 -1
- package/components/global/header/headerFlyout.d.ts.map +1 -1
- package/components/global/header/headerFlyout.js +21 -19
- package/components/global/header/headerFlyout.js.map +1 -1
- package/components/global/header/headerFlyouts.d.ts +7 -0
- package/components/global/header/headerFlyouts.d.ts.map +1 -1
- package/components/global/header/headerFlyouts.js +16 -13
- package/components/global/header/headerFlyouts.js.map +1 -1
- package/components/global/header/headerLink.js +15 -12
- package/components/global/header/headerLink.js.map +1 -1
- package/components/global/header/headerNav.d.ts +0 -1
- package/components/global/header/headerNav.d.ts.map +1 -1
- package/components/global/header/headerNav.js +15 -19
- package/components/global/header/headerNav.js.map +1 -1
- package/components/global/header/index.js +1 -1
- package/components/global/localNav/localNav.js +11 -8
- package/components/global/localNav/localNav.js.map +1 -1
- package/components/global/localNav/localNavLink.js +7 -3
- package/components/global/localNav/localNavLink.js.map +1 -1
- package/components/global/uiShell/uiShell.js +11 -6
- package/components/global/uiShell/uiShell.js.map +1 -1
- package/components/reusable/accordion/accordionItem.d.ts +5 -5
- package/components/reusable/accordion/accordionItem.d.ts.map +1 -1
- package/components/reusable/accordion/accordionItem.js +34 -8
- package/components/reusable/accordion/accordionItem.js.map +1 -1
- package/components/reusable/dropdown/dropdown.js +1 -1
- package/components/reusable/globalFilter/globalFilter.d.ts +1 -1
- package/components/reusable/globalFilter/globalFilter.js.map +1 -1
- package/components/reusable/modal/modal.js +5 -6
- package/components/reusable/modal/modal.js.map +1 -1
- package/components/reusable/sideDrawer/sideDrawer.js +8 -7
- package/components/reusable/sideDrawer/sideDrawer.js.map +1 -1
- package/components/reusable/widget/widget.js +1 -1
- package/package.json +3 -3
|
@@ -39,15 +39,18 @@ import{_ as t,a as i,b as e,c as o,d as r}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
39
39
|
.footer {
|
|
40
40
|
display: flex;
|
|
41
41
|
flex-direction: column;
|
|
42
|
-
gap:
|
|
43
|
-
padding: 24px
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
gap: 24px;
|
|
43
|
+
padding: 24px 32px;
|
|
44
|
+
border-radius: 8px;
|
|
45
|
+
margin: 0 var(--kd-page-gutter) 8px;
|
|
46
|
+
background: var(--kd-color-background-container-default);
|
|
47
|
+
box-shadow: var(--kd-elevation-level-1);
|
|
46
48
|
}
|
|
47
49
|
@media (min-width: 42rem) {
|
|
48
50
|
.footer {
|
|
49
51
|
flex-direction: row;
|
|
50
52
|
align-items: center;
|
|
53
|
+
gap: 16px;
|
|
51
54
|
}
|
|
52
55
|
}
|
|
53
56
|
|
|
@@ -58,9 +61,6 @@ import{_ as t,a as i,b as e,c as o,d as r}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
58
61
|
margin-bottom: 4px;
|
|
59
62
|
}
|
|
60
63
|
|
|
61
|
-
.logo-container {
|
|
62
|
-
padding: 10px 0;
|
|
63
|
-
}
|
|
64
64
|
@media (min-width: 42rem) {
|
|
65
65
|
.logo-container {
|
|
66
66
|
margin-left: auto;
|
|
@@ -34,11 +34,19 @@ export declare class Header extends LitElement {
|
|
|
34
34
|
* @internal
|
|
35
35
|
*/
|
|
36
36
|
accessor _flyoutsOpen: boolean;
|
|
37
|
+
/** @internal */
|
|
38
|
+
accessor _headerEl: HTMLElement;
|
|
37
39
|
render(): import("lit-html").TemplateResult<1>;
|
|
38
40
|
private handleSlotChange;
|
|
39
41
|
private handleRootLinkClick;
|
|
40
42
|
private _handleNavToggle;
|
|
41
43
|
private _handleFlyoutsToggle;
|
|
44
|
+
/** Morph header on scroll.
|
|
45
|
+
* @internal */
|
|
46
|
+
private _handleScroll;
|
|
47
|
+
/** @internal */
|
|
48
|
+
private _debounceScroll;
|
|
49
|
+
firstUpdated(): void;
|
|
42
50
|
connectedCallback(): void;
|
|
43
51
|
disconnectedCallback(): void;
|
|
44
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAclD;;;;;;;;GAQG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAyB;IAE/C,6EAA6E;IAE7E,QAAQ,CAAC,OAAO,SAAO;IAEvB,+DAA+D;IAE/D,QAAQ,CAAC,QAAQ,SAAM;IAEvB;;OAEG;IAEH,QAAQ,CAAC,MAAM,EAAG,GAAG,CAAC;IAEtB;;OAEG;IAEH,QAAQ,CAAC,gBAAgB,EAAG,GAAG,CAAC;IAEhC;;OAEG;IAEH,QAAQ,CAAC,OAAO,EAAG,GAAG,CAAC;IAEvB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B,gBAAgB;IAEhB,QAAQ,CAAC,SAAS,EAAG,WAAW,CAAC;IAExB,MAAM;IAqCf,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B;mBACe;IACf,OAAO,CAAC,aAAa;IAQrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAIZ,iBAAiB;IAajB,oBAAoB;CAY9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,a as r,r as l,t as s,n as d,o as c}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as
|
|
1
|
+
import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as n,a as r,r as l,t as s,n as d,o as c,e as h}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as m,a as g,x as u}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as p}from"../../../vendor/lit-element-DxLLCKb1.js";import{debounce as v}from"../../../common/helpers/helpers.js";import{l as k}from"../../../vendor/@kyndryl-design-system/shidoka-foundation-7uii0Jz8.js";var f=n`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -63,17 +63,20 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
63
63
|
@media (min-width: 42rem) {
|
|
64
64
|
.overlay {
|
|
65
65
|
position: fixed;
|
|
66
|
-
top:
|
|
66
|
+
top: 0;
|
|
67
67
|
right: 0;
|
|
68
68
|
bottom: 0;
|
|
69
69
|
left: 0;
|
|
70
|
-
z-index: -
|
|
70
|
+
z-index: calc(var(--kd-z-header) - 1);
|
|
71
71
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
72
72
|
background: transparent;
|
|
73
73
|
visibility: hidden;
|
|
74
74
|
}
|
|
75
|
-
.
|
|
76
|
-
|
|
75
|
+
.overlay.scrolled {
|
|
76
|
+
top: var(--kd-header-height);
|
|
77
|
+
}
|
|
78
|
+
.open + .overlay, .child-open + .overlay {
|
|
79
|
+
background: var(--kd-color-background-opacity-inverse-backdrop);
|
|
77
80
|
visibility: visible;
|
|
78
81
|
}
|
|
79
82
|
}
|
|
@@ -91,14 +94,13 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
91
94
|
}
|
|
92
95
|
.menu__content {
|
|
93
96
|
position: fixed;
|
|
94
|
-
top:
|
|
97
|
+
top: var(--kd-header-height);
|
|
95
98
|
right: 0;
|
|
96
99
|
left: 0;
|
|
97
100
|
bottom: 0;
|
|
98
101
|
overflow-y: auto;
|
|
99
102
|
overflow-x: hidden;
|
|
100
103
|
background: var(--kd-color-background-container-default);
|
|
101
|
-
border-bottom: 4px solid var(--kd-color-border-accent-secondary);
|
|
102
104
|
transition: visibility 300ms, opacity 300ms ease-in-out, transform 300ms ease-in-out;
|
|
103
105
|
transform: translateY(-20px);
|
|
104
106
|
visibility: hidden;
|
|
@@ -114,14 +116,15 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
114
116
|
@media (min-width: 42rem) {
|
|
115
117
|
.menu__content {
|
|
116
118
|
position: absolute;
|
|
117
|
-
top: calc(100% + 12px);
|
|
118
|
-
right: -
|
|
119
|
+
top: calc(100% + 12px + 8px);
|
|
120
|
+
right: -20px;
|
|
119
121
|
bottom: auto;
|
|
120
122
|
left: auto;
|
|
121
123
|
border-top: none;
|
|
124
|
+
border-radius: 8px;
|
|
122
125
|
background: var(--kd-color-background-container-default);
|
|
123
|
-
box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
|
|
124
126
|
max-height: calc(100vh - var(--kd-header-height));
|
|
127
|
+
box-shadow: var(--kd-elevation-level-1);
|
|
125
128
|
}
|
|
126
129
|
.menu__content.left {
|
|
127
130
|
left: -12px;
|
|
@@ -237,15 +240,24 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
237
240
|
right: 0;
|
|
238
241
|
left: 0;
|
|
239
242
|
height: var(--kd-header-height);
|
|
240
|
-
|
|
241
|
-
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
242
|
-
padding: 4px calc(var(--kd-page-gutter) - 4px) 4px var(--kd-page-gutter);
|
|
243
|
+
padding: 4px 12px 4px 20px;
|
|
243
244
|
transition: z-index 150ms ease-out;
|
|
244
245
|
z-index: var(--kd-z-header);
|
|
245
246
|
}
|
|
246
247
|
.header.child-open {
|
|
247
248
|
z-index: calc(var(--kd-z-header) + 20);
|
|
248
249
|
}
|
|
250
|
+
@media screen and (min-width: 42rem) {
|
|
251
|
+
.header {
|
|
252
|
+
margin: 0 8px;
|
|
253
|
+
padding-right: calc(var(--kd-page-gutter) - 8px);
|
|
254
|
+
transition: z-index 150ms ease-out, transform 150ms ease-out;
|
|
255
|
+
transform: translateY(8px);
|
|
256
|
+
}
|
|
257
|
+
.header.scrolled {
|
|
258
|
+
transform: none;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
249
261
|
.header.left-slotted {
|
|
250
262
|
padding-left: 12px;
|
|
251
263
|
}
|
|
@@ -256,6 +268,28 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
256
268
|
margin-left: auto;
|
|
257
269
|
}
|
|
258
270
|
|
|
271
|
+
.background {
|
|
272
|
+
position: absolute;
|
|
273
|
+
top: 0;
|
|
274
|
+
right: 0;
|
|
275
|
+
left: 0;
|
|
276
|
+
bottom: 0;
|
|
277
|
+
background: var(--kd-color-background-container-default);
|
|
278
|
+
z-index: -1;
|
|
279
|
+
box-shadow: var(--kd-elevation-level-1);
|
|
280
|
+
}
|
|
281
|
+
@media screen and (min-width: 42rem) {
|
|
282
|
+
.background {
|
|
283
|
+
transition: inset 150ms ease-out, border-radius 150ms ease-out;
|
|
284
|
+
border-radius: 8px;
|
|
285
|
+
}
|
|
286
|
+
.scrolled .background {
|
|
287
|
+
left: -8px;
|
|
288
|
+
right: -8px;
|
|
289
|
+
border-radius: 0;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
259
293
|
.logo-link {
|
|
260
294
|
display: flex;
|
|
261
295
|
align-items: center;
|
|
@@ -322,8 +356,8 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
322
356
|
background: none;
|
|
323
357
|
padding: 0 8px;
|
|
324
358
|
margin: 0 2px;
|
|
325
|
-
}`;let
|
|
326
|
-
<header class="${
|
|
359
|
+
}`;let b=(()=>{var n,b,x,y,_,w,E,z;let O,S,T,C,L,U,j,$,M,W,F=[s("kyn-header")],N=[],Y=p,R=[],q=[],H=[],P=[],A=[],B=[],D=[],G=[],I=[],J=[],K=[],Q=[],V=[],X=[],Z=[],ee=[];return S=class extends Y{constructor(){super(...arguments),n.set(this,i(this,R,"/")),b.set(this,(i(this,q),i(this,H,""))),x.set(this,(i(this,P),i(this,A,void 0))),y.set(this,(i(this,B),i(this,D,void 0))),_.set(this,(i(this,G),i(this,I,void 0))),w.set(this,(i(this,J),i(this,K,!1))),E.set(this,(i(this,Q),i(this,V,!1))),z.set(this,(i(this,X),i(this,Z,void 0))),this._debounceScroll=(i(this,ee),v((()=>{this._handleScroll()})))}get rootUrl(){return a(this,n,"f")}set rootUrl(e){o(this,n,e,"f")}get appTitle(){return a(this,b,"f")}set appTitle(e){o(this,b,e,"f")}get navEls(){return a(this,x,"f")}set navEls(e){o(this,x,e,"f")}get assignedElements(){return a(this,y,"f")}set assignedElements(e){o(this,y,e,"f")}get leftEls(){return a(this,_,"f")}set leftEls(e){o(this,_,e,"f")}get _navOpen(){return a(this,w,"f")}set _navOpen(e){o(this,w,e,"f")}get _flyoutsOpen(){return a(this,E,"f")}set _flyoutsOpen(e){o(this,E,e,"f")}get _headerEl(){return a(this,z,"f")}set _headerEl(e){o(this,z,e,"f")}render(){const e={header:!0,"left-slotted":this.leftEls.length,"child-open":this._navOpen||this._flyoutsOpen};return u`
|
|
360
|
+
<header class="${m(e)}">
|
|
327
361
|
<slot name="left" @slotchange=${this.handleSlotChange}></slot>
|
|
328
362
|
|
|
329
363
|
<a
|
|
@@ -333,7 +367,7 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
333
367
|
@click="${e=>this.handleRootLinkClick(e)}"
|
|
334
368
|
>
|
|
335
369
|
<slot name="logo" @slotchange=${this.handleSlotChange}>
|
|
336
|
-
${g(
|
|
370
|
+
${g(k)}
|
|
337
371
|
</slot>
|
|
338
372
|
</a>
|
|
339
373
|
|
|
@@ -344,6 +378,10 @@ import{_ as e,a as t,b as i,c as a,d as o}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
344
378
|
<div class="header__right">
|
|
345
379
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
346
380
|
</div>
|
|
381
|
+
|
|
382
|
+
<div class="background"></div>
|
|
347
383
|
</header>
|
|
348
|
-
|
|
384
|
+
|
|
385
|
+
<div class="overlay"></div>
|
|
386
|
+
`}handleSlotChange(){this.requestUpdate()}handleRootLinkClick(e){const t=new CustomEvent("on-root-link-click",{detail:{origEvent:e}});this.dispatchEvent(t)}_handleNavToggle(e){this._navOpen=e.detail.open}_handleFlyoutsToggle(e){this._flyoutsOpen=e.detail.open||e.detail.childrenOpen}_handleScroll(){window.scrollY>0?this._headerEl.classList.add("scrolled"):this._headerEl.classList.remove("scrolled")}firstUpdated(){this._handleScroll()}connectedCallback(){super.connectedCallback(),document.addEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.addEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){document.removeEventListener("on-nav-toggle",(e=>this._handleNavToggle(e))),document.removeEventListener("on-flyouts-toggle",(e=>this._handleFlyoutsToggle(e))),window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}},n=new WeakMap,b=new WeakMap,x=new WeakMap,y=new WeakMap,_=new WeakMap,w=new WeakMap,E=new WeakMap,z=new WeakMap,e(S,"Header"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=Y[Symbol.metadata])&&void 0!==e?e:null):void 0;T=[d({type:String})],C=[d({type:String})],L=[c({selector:"kyn-header-nav"})],U=[c()],j=[c({slot:"left"})],$=[r()],M=[r()],W=[h("header")],t(S,null,T,{kind:"accessor",name:"rootUrl",static:!1,private:!1,access:{has:e=>"rootUrl"in e,get:e=>e.rootUrl,set:(e,t)=>{e.rootUrl=t}},metadata:i},R,q),t(S,null,C,{kind:"accessor",name:"appTitle",static:!1,private:!1,access:{has:e=>"appTitle"in e,get:e=>e.appTitle,set:(e,t)=>{e.appTitle=t}},metadata:i},H,P),t(S,null,L,{kind:"accessor",name:"navEls",static:!1,private:!1,access:{has:e=>"navEls"in e,get:e=>e.navEls,set:(e,t)=>{e.navEls=t}},metadata:i},A,B),t(S,null,U,{kind:"accessor",name:"assignedElements",static:!1,private:!1,access:{has:e=>"assignedElements"in e,get:e=>e.assignedElements,set:(e,t)=>{e.assignedElements=t}},metadata:i},D,G),t(S,null,j,{kind:"accessor",name:"leftEls",static:!1,private:!1,access:{has:e=>"leftEls"in e,get:e=>e.leftEls,set:(e,t)=>{e.leftEls=t}},metadata:i},I,J),t(S,null,$,{kind:"accessor",name:"_navOpen",static:!1,private:!1,access:{has:e=>"_navOpen"in e,get:e=>e._navOpen,set:(e,t)=>{e._navOpen=t}},metadata:i},K,Q),t(S,null,M,{kind:"accessor",name:"_flyoutsOpen",static:!1,private:!1,access:{has:e=>"_flyoutsOpen"in e,get:e=>e._flyoutsOpen,set:(e,t)=>{e._flyoutsOpen=t}},metadata:i},V,X),t(S,null,W,{kind:"accessor",name:"_headerEl",static:!1,private:!1,access:{has:e=>"_headerEl"in e,get:e=>e._headerEl,set:(e,t)=>{e._headerEl=t}},metadata:i},Z,ee),t(null,O={value:S},F,{kind:"class",name:S.name,metadata:i},null,N),S=O.value,i&&Object.defineProperty(S,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),S.styles=l(f),i(S,N),S})();export{b as Header};
|
|
349
387
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss?inline';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail. `detail:{ origEvent: Event}`\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details. `detail:{ origEvent: Event}`\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n static override styles = unsafeCSS(HeaderScss);\n\n /** URL for the header logo link. Should target the application home page. */\n @property({ type: String })\n accessor rootUrl = '/';\n\n /** App title text next to logo. Hidden on smaller screens. */\n @property({ type: String })\n accessor appTitle = '';\n\n /** Queries for slotted header-nav.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-header-nav' })\n accessor navEls!: any;\n\n /** Queries for all slotted elements.\n * @internal\n */\n @queryAssignedElements()\n accessor assignedElements!: any;\n\n /** Queries for elements in left slot.\n * @internal\n */\n @queryAssignedElements({ slot: 'left' })\n accessor leftEls!: any;\n\n /** header-nav open state\n * @internal\n */\n @state()\n accessor _navOpen = false;\n\n /** header-flyouts open state\n * @internal\n */\n @state()\n accessor _flyoutsOpen = false;\n\n override render() {\n const classes = {\n header: true,\n 'left-slotted': this.leftEls.length,\n 'child-open': this._navOpen || this._flyoutsOpen,\n };\n\n return html`\n <header class=\"${classMap(classes)}\">\n <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n <a\n href=\"${this.rootUrl}\"\n class=\"logo-link interactive\"\n aria-label=\"${this.rootUrl}\"\n @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n >\n <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n ${unsafeHTML(logo)}\n </slot>\n </a>\n\n <span class=\"title\">${this.appTitle}</span>\n\n <slot name=\"center\"></slot>\n\n <div class=\"header__right\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </header>\n `;\n }\n\n private handleSlotChange() {\n this.requestUpdate();\n }\n\n private handleRootLinkClick(e: Event) {\n const event = new CustomEvent('on-root-link-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _handleNavToggle(e: any) {\n this._navOpen = e.detail.open;\n }\n\n private _handleFlyoutsToggle(e: any) {\n this._flyoutsOpen = e.detail.open;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.addEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n }\n\n override disconnectedCallback() {\n document.removeEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header': Header;\n }\n}\n"],"names":["Header","customElement","LitElement","_classThis","_classSuper","rootUrl","__classPrivateFieldGet","this","_Header_rootUrl_accessor_storage","value","__classPrivateFieldSet","appTitle","_Header_appTitle_accessor_storage","navEls","_Header_navEls_accessor_storage","assignedElements","_Header_assignedElements_accessor_storage","leftEls","_Header_leftEls_accessor_storage","_navOpen","_Header__navOpen_accessor_storage","_flyoutsOpen","_Header__flyoutsOpen_accessor_storage","render","classes","header","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_rootUrl_initializers","_rootUrl_extraInitializers","_appTitle_initializers","_appTitle_extraInitializers","_navEls_initializers","_navEls_extraInitializers","_assignedElements_initializers","_assignedElements_extraInitializers","_leftEls_initializers","_leftEls_extraInitializers","__navOpen_initializers","__navOpen_extraInitializers","__flyoutsOpen_initializers","_rootUrl_decorators","property","type","String","_appTitle_decorators","_navEls_decorators","queryAssignedElements","selector","_assignedElements_decorators","_leftEls_decorators","slot","__navOpen_decorators","state","__flyoutsOpen_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","__flyoutsOpen_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderScss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderScss from './header.scss?inline';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail. `detail:{ origEvent: Event}`\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details. `detail:{ origEvent: Event}`\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n static override styles = unsafeCSS(HeaderScss);\n\n /** URL for the header logo link. Should target the application home page. */\n @property({ type: String })\n accessor rootUrl = '/';\n\n /** App title text next to logo. Hidden on smaller screens. */\n @property({ type: String })\n accessor appTitle = '';\n\n /** Queries for slotted header-nav.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-header-nav' })\n accessor navEls!: any;\n\n /** Queries for all slotted elements.\n * @internal\n */\n @queryAssignedElements()\n accessor assignedElements!: any;\n\n /** Queries for elements in left slot.\n * @internal\n */\n @queryAssignedElements({ slot: 'left' })\n accessor leftEls!: any;\n\n /** header-nav open state\n * @internal\n */\n @state()\n accessor _navOpen = false;\n\n /** header-flyouts open state\n * @internal\n */\n @state()\n accessor _flyoutsOpen = false;\n\n /** @internal */\n @query('header')\n accessor _headerEl!: HTMLElement;\n\n override render() {\n const classes = {\n header: true,\n 'left-slotted': this.leftEls.length,\n 'child-open': this._navOpen || this._flyoutsOpen,\n };\n\n return html`\n <header class=\"${classMap(classes)}\">\n <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n <a\n href=\"${this.rootUrl}\"\n class=\"logo-link interactive\"\n aria-label=\"${this.rootUrl}\"\n @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n >\n <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n ${unsafeHTML(logo)}\n </slot>\n </a>\n\n <span class=\"title\">${this.appTitle}</span>\n\n <slot name=\"center\"></slot>\n\n <div class=\"header__right\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n\n <div class=\"background\"></div>\n </header>\n\n <div class=\"overlay\"></div>\n `;\n }\n\n private handleSlotChange() {\n this.requestUpdate();\n }\n\n private handleRootLinkClick(e: Event) {\n const event = new CustomEvent('on-root-link-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _handleNavToggle(e: any) {\n this._navOpen = e.detail.open;\n }\n\n private _handleFlyoutsToggle(e: any) {\n this._flyoutsOpen = e.detail.open || e.detail.childrenOpen;\n }\n\n /** Morph header on scroll.\n * @internal */\n private _handleScroll() {\n if (window.scrollY > 0) {\n this._headerEl.classList.add('scrolled');\n } else {\n this._headerEl.classList.remove('scrolled');\n }\n }\n\n /** @internal */\n private _debounceScroll = debounce(() => {\n this._handleScroll();\n });\n\n override firstUpdated() {\n this._handleScroll();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.addEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n\n window.addEventListener('scroll', this._debounceScroll);\n }\n\n override disconnectedCallback() {\n document.removeEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n\n window.removeEventListener('scroll', this._debounceScroll);\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header': Header;\n }\n}\n"],"names":["Header","customElement","LitElement","_classThis","_classSuper","_Header_rootUrl_accessor_storage","set","this","__runInitializers","_rootUrl_initializers","_Header_appTitle_accessor_storage","_rootUrl_extraInitializers","_appTitle_initializers","_Header_navEls_accessor_storage","_appTitle_extraInitializers","_navEls_initializers","_Header_assignedElements_accessor_storage","_navEls_extraInitializers","_assignedElements_initializers","_Header_leftEls_accessor_storage","_assignedElements_extraInitializers","_leftEls_initializers","_Header__navOpen_accessor_storage","_leftEls_extraInitializers","__navOpen_initializers","_Header__flyoutsOpen_accessor_storage","__navOpen_extraInitializers","__flyoutsOpen_initializers","_Header__headerEl_accessor_storage","__flyoutsOpen_extraInitializers","__headerEl_initializers","_debounceScroll","__headerEl_extraInitializers","debounce","_handleScroll","rootUrl","__classPrivateFieldGet","value","__classPrivateFieldSet","appTitle","navEls","assignedElements","leftEls","_navOpen","_flyoutsOpen","_headerEl","render","classes","header","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","childrenOpen","window","scrollY","classList","add","remove","firstUpdated","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","_rootUrl_decorators","property","type","String","_appTitle_decorators","_navEls_decorators","queryAssignedElements","selector","_assignedElements_decorators","_leftEls_decorators","slot","__navOpen_decorators","state","__flyoutsOpen_decorators","query","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","__headerEl_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderScss"],"mappings":"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"}
|
|
@@ -36,7 +36,7 @@ export declare class HeaderFlyout extends LitElement {
|
|
|
36
36
|
private _handleBack;
|
|
37
37
|
private handleClick;
|
|
38
38
|
private handleClickOut;
|
|
39
|
-
|
|
39
|
+
willUpdate(changedProps: any): void;
|
|
40
40
|
connectedCallback(): void;
|
|
41
41
|
disconnectedCallback(): void;
|
|
42
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAWlD;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,yBAAyB;IAEzB,QAAQ,CAAC,IAAI,UAAS;IAEtB,mFAAmF;IAEnF,QAAQ,CAAC,UAAU,UAAS;IAE5B,uBAAuB;IAEvB,QAAQ,CAAC,SAAS,UAAS;IAE3B,2BAA2B;IAE3B,QAAQ,CAAC,KAAK,SAAM;IAEpB,oDAAoD;IAEpD,QAAQ,CAAC,aAAa,UAAS;IAE/B,2CAA2C;IAE3C,QAAQ,CAAC,eAAe,UAAS;IAEjC;;;OAGG;IAEH,QAAQ,CAAC,aAAa,SAAM;IAE5B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,SAAM;IAEnB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,SAAU;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAErC,MAAM;
|
|
1
|
+
{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAWlD;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,yBAAyB;IAEzB,QAAQ,CAAC,IAAI,UAAS;IAEtB,mFAAmF;IAEnF,QAAQ,CAAC,UAAU,UAAS;IAE5B,uBAAuB;IAEvB,QAAQ,CAAC,SAAS,UAAS;IAE3B,2BAA2B;IAE3B,QAAQ,CAAC,KAAK,SAAM;IAEpB,oDAAoD;IAEpD,QAAQ,CAAC,aAAa,UAAS;IAE/B,2CAA2C;IAE3C,QAAQ,CAAC,eAAe,UAAS;IAEjC;;;OAGG;IAEH,QAAQ,CAAC,aAAa,SAAM;IAE5B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,SAAM;IAEnB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,SAAU;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAErC,MAAM;IAiFf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,UAAU,CAAC,YAAY,EAAE,GAAG;IAW5B,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as o,o as r,x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,t as d,r as c,n as h,o as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import{b as
|
|
1
|
+
import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js";import{e as o,o as r,x as s}from"../../../vendor/lit-html-fDTfWwFR.js";import{i as l,t as d,r as c,n as h,o as m}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{i as u}from"../../../vendor/lit-element-DxLLCKb1.js";import{b as p,d as k}from"../../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";var v=l`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -63,17 +63,20 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
63
63
|
@media (min-width: 42rem) {
|
|
64
64
|
.overlay {
|
|
65
65
|
position: fixed;
|
|
66
|
-
top:
|
|
66
|
+
top: 0;
|
|
67
67
|
right: 0;
|
|
68
68
|
bottom: 0;
|
|
69
69
|
left: 0;
|
|
70
|
-
z-index: -
|
|
70
|
+
z-index: calc(var(--kd-z-header) - 1);
|
|
71
71
|
transition: background-color 300ms ease-out, visibility 300ms ease-out;
|
|
72
72
|
background: transparent;
|
|
73
73
|
visibility: hidden;
|
|
74
74
|
}
|
|
75
|
-
.
|
|
76
|
-
|
|
75
|
+
.overlay.scrolled {
|
|
76
|
+
top: var(--kd-header-height);
|
|
77
|
+
}
|
|
78
|
+
.open + .overlay, .child-open + .overlay {
|
|
79
|
+
background: var(--kd-color-background-opacity-inverse-backdrop);
|
|
77
80
|
visibility: visible;
|
|
78
81
|
}
|
|
79
82
|
}
|
|
@@ -91,14 +94,13 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
91
94
|
}
|
|
92
95
|
.menu__content {
|
|
93
96
|
position: fixed;
|
|
94
|
-
top:
|
|
97
|
+
top: var(--kd-header-height);
|
|
95
98
|
right: 0;
|
|
96
99
|
left: 0;
|
|
97
100
|
bottom: 0;
|
|
98
101
|
overflow-y: auto;
|
|
99
102
|
overflow-x: hidden;
|
|
100
103
|
background: var(--kd-color-background-container-default);
|
|
101
|
-
border-bottom: 4px solid var(--kd-color-border-accent-secondary);
|
|
102
104
|
transition: visibility 300ms, opacity 300ms ease-in-out, transform 300ms ease-in-out;
|
|
103
105
|
transform: translateY(-20px);
|
|
104
106
|
visibility: hidden;
|
|
@@ -114,14 +116,15 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
114
116
|
@media (min-width: 42rem) {
|
|
115
117
|
.menu__content {
|
|
116
118
|
position: absolute;
|
|
117
|
-
top: calc(100% + 12px);
|
|
118
|
-
right: -
|
|
119
|
+
top: calc(100% + 12px + 8px);
|
|
120
|
+
right: -20px;
|
|
119
121
|
bottom: auto;
|
|
120
122
|
left: auto;
|
|
121
123
|
border-top: none;
|
|
124
|
+
border-radius: 8px;
|
|
122
125
|
background: var(--kd-color-background-container-default);
|
|
123
|
-
box-shadow: 0px 2px 8px 0px rgba(61, 60, 60, 0.25);
|
|
124
126
|
max-height: calc(100vh - var(--kd-header-height));
|
|
127
|
+
box-shadow: var(--kd-elevation-level-1);
|
|
125
128
|
}
|
|
126
129
|
.menu__content.left {
|
|
127
130
|
left: -12px;
|
|
@@ -273,8 +276,8 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
273
276
|
display: flex;
|
|
274
277
|
align-items: center;
|
|
275
278
|
justify-content: center;
|
|
276
|
-
width:
|
|
277
|
-
height:
|
|
279
|
+
width: 16px;
|
|
280
|
+
height: 16px;
|
|
278
281
|
}
|
|
279
282
|
.btn ::slotted([slot=button]) {
|
|
280
283
|
display: flex;
|
|
@@ -282,7 +285,7 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
282
285
|
@media (min-width: 42rem) {
|
|
283
286
|
.btn {
|
|
284
287
|
justify-content: center;
|
|
285
|
-
padding:
|
|
288
|
+
padding: 8px;
|
|
286
289
|
height: auto;
|
|
287
290
|
}
|
|
288
291
|
}
|
|
@@ -368,7 +371,7 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
368
371
|
.label {
|
|
369
372
|
display: none;
|
|
370
373
|
}
|
|
371
|
-
}`;let b=(()=>{var l,b,g,f,x,y,w,z,_,L;let $,T,M,B,C,j,W,
|
|
374
|
+
}`;let b=(()=>{var l,b,g,f,x,y,w,z,_,L;let $,T,M,B,C,E,j,W,S,A,O,P,F=[d("kyn-header-flyout")],H=[],U=u,X=[],Y=[],q=[],D=[],G=[],I=[],J=[],K=[],N=[],Q=[],R=[],V=[],Z=[],tt=[],et=[],it=[],at=[],nt=[],ot=[],rt=[];return T=class extends U{get open(){return a(this,l,"f")}set open(t){n(this,l,t,"f")}get anchorLeft(){return a(this,b,"f")}set anchorLeft(t){n(this,b,t,"f")}get hideArrow(){return a(this,g,"f")}set hideArrow(t){n(this,g,t,"f")}get label(){return a(this,f,"f")}set label(t){n(this,f,t,"f")}get hideMenuLabel(){return a(this,x,"f")}set hideMenuLabel(t){n(this,x,t,"f")}get hideButtonLabel(){return a(this,y,"f")}set hideButtonLabel(t){n(this,y,t,"f")}get assistiveText(){return a(this,w,"f")}set assistiveText(t){n(this,w,t,"f")}get href(){return a(this,z,"f")}set href(t){n(this,z,t,"f")}get backText(){return a(this,_,"f")}set backText(t){n(this,_,t,"f")}get slottedElements(){return a(this,L,"f")}set slottedElements(t){n(this,L,t,"f")}render(){const t={menu:!0,open:this.open},e={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return s`
|
|
372
375
|
<div class="${o(t)}">
|
|
373
376
|
${""!==this.href?s`
|
|
374
377
|
<a
|
|
@@ -387,7 +390,7 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
387
390
|
`}
|
|
388
391
|
|
|
389
392
|
<span slot="button" class="arrow">
|
|
390
|
-
${r(
|
|
393
|
+
${r(p)}
|
|
391
394
|
</span>
|
|
392
395
|
</a>
|
|
393
396
|
`:s`
|
|
@@ -406,14 +409,14 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
406
409
|
`}
|
|
407
410
|
|
|
408
411
|
<span slot="button" class="arrow">
|
|
409
|
-
${r(
|
|
412
|
+
${r(p)}
|
|
410
413
|
</span>
|
|
411
414
|
</button>
|
|
412
415
|
`}
|
|
413
416
|
|
|
414
417
|
<div class=${o(e)}>
|
|
415
418
|
<button class="go-back" @click=${()=>this._handleBack()}>
|
|
416
|
-
<span>${r(
|
|
419
|
+
<span>${r(k)}</span>
|
|
417
420
|
${this.backText}
|
|
418
421
|
</button>
|
|
419
422
|
|
|
@@ -426,6 +429,5 @@ import{_ as t,a as e,b as i,c as a,d as n}from"../../../vendor/tslib-Ac8XvvSX.js
|
|
|
426
429
|
<slot></slot>
|
|
427
430
|
</div>
|
|
428
431
|
</div>
|
|
429
|
-
|
|
430
|
-
`}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}constructor(){super(...arguments),l.set(this,i(this,Y,!1)),b.set(this,(i(this,q),i(this,D,!1))),g.set(this,(i(this,G),i(this,I,!1))),f.set(this,(i(this,J),i(this,K,""))),x.set(this,(i(this,N),i(this,Q,!1))),y.set(this,(i(this,R),i(this,U,!1))),w.set(this,(i(this,V),i(this,Z,""))),z.set(this,(i(this,tt),i(this,et,""))),_.set(this,(i(this,it),i(this,at,"Back"))),L.set(this,(i(this,nt),i(this,ot,void 0))),i(this,rt)}},l=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,x=new WeakMap,y=new WeakMap,w=new WeakMap,z=new WeakMap,_=new WeakMap,L=new WeakMap,t(T,"HeaderFlyout"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=X[Symbol.metadata])&&void 0!==t?t:null):void 0;M=[h({type:Boolean})],B=[h({type:Boolean})],C=[h({type:Boolean})],j=[h({type:String})],W=[h({type:Boolean})],E=[h({type:Boolean})],S=[h({type:String})],O=[h({type:String})],A=[h({type:String})],P=[m()],e(T,null,M,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:i},Y,q),e(T,null,B,{kind:"accessor",name:"anchorLeft",static:!1,private:!1,access:{has:t=>"anchorLeft"in t,get:t=>t.anchorLeft,set:(t,e)=>{t.anchorLeft=e}},metadata:i},D,G),e(T,null,C,{kind:"accessor",name:"hideArrow",static:!1,private:!1,access:{has:t=>"hideArrow"in t,get:t=>t.hideArrow,set:(t,e)=>{t.hideArrow=e}},metadata:i},I,J),e(T,null,j,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:i},K,N),e(T,null,W,{kind:"accessor",name:"hideMenuLabel",static:!1,private:!1,access:{has:t=>"hideMenuLabel"in t,get:t=>t.hideMenuLabel,set:(t,e)=>{t.hideMenuLabel=e}},metadata:i},Q,R),e(T,null,E,{kind:"accessor",name:"hideButtonLabel",static:!1,private:!1,access:{has:t=>"hideButtonLabel"in t,get:t=>t.hideButtonLabel,set:(t,e)=>{t.hideButtonLabel=e}},metadata:i},U,V),e(T,null,S,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:t=>"assistiveText"in t,get:t=>t.assistiveText,set:(t,e)=>{t.assistiveText=e}},metadata:i},Z,tt),e(T,null,O,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:t=>"href"in t,get:t=>t.href,set:(t,e)=>{t.href=e}},metadata:i},et,it),e(T,null,A,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:t=>"backText"in t,get:t=>t.backText,set:(t,e)=>{t.backText=e}},metadata:i},at,nt),e(T,null,P,{kind:"accessor",name:"slottedElements",static:!1,private:!1,access:{has:t=>"slottedElements"in t,get:t=>t.slottedElements,set:(t,e)=>{t.slottedElements=e}},metadata:i},ot,rt),e(null,$={value:T},F,{kind:"class",name:T.name,metadata:i},null,H),T=$.value,i&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),T.styles=c(v),i(T,H),T})();export{b as HeaderFlyout};
|
|
432
|
+
`}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}willUpdate(t){if(t.has("open")){const t=new CustomEvent("on-flyout-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}constructor(){super(...arguments),l.set(this,i(this,X,!1)),b.set(this,(i(this,Y),i(this,q,!1))),g.set(this,(i(this,D),i(this,G,!1))),f.set(this,(i(this,I),i(this,J,""))),x.set(this,(i(this,K),i(this,N,!1))),y.set(this,(i(this,Q),i(this,R,!1))),w.set(this,(i(this,V),i(this,Z,""))),z.set(this,(i(this,tt),i(this,et,""))),_.set(this,(i(this,it),i(this,at,"Back"))),L.set(this,(i(this,nt),i(this,ot,void 0))),i(this,rt)}},l=new WeakMap,b=new WeakMap,g=new WeakMap,f=new WeakMap,x=new WeakMap,y=new WeakMap,w=new WeakMap,z=new WeakMap,_=new WeakMap,L=new WeakMap,t(T,"HeaderFlyout"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=U[Symbol.metadata])&&void 0!==t?t:null):void 0;M=[h({type:Boolean,reflect:!0})],B=[h({type:Boolean})],C=[h({type:Boolean})],E=[h({type:String})],j=[h({type:Boolean})],W=[h({type:Boolean})],S=[h({type:String})],A=[h({type:String})],O=[h({type:String})],P=[m()],e(T,null,M,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:i},X,Y),e(T,null,B,{kind:"accessor",name:"anchorLeft",static:!1,private:!1,access:{has:t=>"anchorLeft"in t,get:t=>t.anchorLeft,set:(t,e)=>{t.anchorLeft=e}},metadata:i},q,D),e(T,null,C,{kind:"accessor",name:"hideArrow",static:!1,private:!1,access:{has:t=>"hideArrow"in t,get:t=>t.hideArrow,set:(t,e)=>{t.hideArrow=e}},metadata:i},G,I),e(T,null,E,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:i},J,K),e(T,null,j,{kind:"accessor",name:"hideMenuLabel",static:!1,private:!1,access:{has:t=>"hideMenuLabel"in t,get:t=>t.hideMenuLabel,set:(t,e)=>{t.hideMenuLabel=e}},metadata:i},N,Q),e(T,null,W,{kind:"accessor",name:"hideButtonLabel",static:!1,private:!1,access:{has:t=>"hideButtonLabel"in t,get:t=>t.hideButtonLabel,set:(t,e)=>{t.hideButtonLabel=e}},metadata:i},R,V),e(T,null,S,{kind:"accessor",name:"assistiveText",static:!1,private:!1,access:{has:t=>"assistiveText"in t,get:t=>t.assistiveText,set:(t,e)=>{t.assistiveText=e}},metadata:i},Z,tt),e(T,null,A,{kind:"accessor",name:"href",static:!1,private:!1,access:{has:t=>"href"in t,get:t=>t.href,set:(t,e)=>{t.href=e}},metadata:i},et,it),e(T,null,O,{kind:"accessor",name:"backText",static:!1,private:!1,access:{has:t=>"backText"in t,get:t=>t.backText,set:(t,e)=>{t.backText=e}},metadata:i},at,nt),e(T,null,P,{kind:"accessor",name:"slottedElements",static:!1,private:!1,access:{has:t=>"slottedElements"in t,get:t=>t.slottedElements,set:(t,e)=>{t.slottedElements=e}},metadata:i},ot,rt),e(null,$={value:T},F,{kind:"class",name:T.name,metadata:i},null,H),T=$.value,i&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),T.styles=c(v),i(T,H),T})();export{b as HeaderFlyout};
|
|
431
433
|
//# sourceMappingURL=headerFlyout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderFlyoutScss from './headerFlyout.scss?inline';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n static override styles = unsafeCSS(HeaderFlyoutScss);\n\n /** Flyout open state. */\n @property({ type: Boolean })\n accessor open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n accessor anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n accessor hideArrow = false;\n\n /** Menu & button label. */\n @property({ type: String })\n accessor label = '';\n\n /** Hide the label at the top of the flyout menu. */\n @property({ type: Boolean })\n accessor hideMenuLabel = false;\n\n /** Hide the label in the mobile button. */\n @property({ type: Boolean })\n accessor hideButtonLabel = false;\n\n /**\n * DEPRECATED. Use `label` instead.\n * Button assistive text, title + aria-label.\n */\n @property({ type: String })\n accessor assistiveText = '';\n\n /** Turns the button into a link. */\n @property({ type: String })\n accessor href = '';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n accessor backText = 'Back';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n accessor slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n open: this.open,\n };\n\n const contentClasses = {\n menu__content: true,\n 'menu__content--left': this.anchorLeft,\n slotted: this.slottedElements.length,\n };\n\n return html`\n <div class=\"${classMap(classes)}\">\n ${this.href !== ''\n ? html`\n <a\n class=\"btn interactive\"\n href=${this.href}\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\">\n ${unsafeSVG(chevronIcon)}\n </span>\n </a>\n `\n : html`\n <button\n class=\"btn interactive\"\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\">\n ${unsafeSVG(chevronIcon)}\n </span>\n </button>\n `}\n\n <div class=${classMap(contentClasses)}>\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <span>${unsafeSVG(backIcon)}</span>\n ${this.backText}\n </button>\n\n ${!this.hideMenuLabel\n ? html`\n <div class=\"menu-label\">\n ${this.label || this.assistiveText}\n </div>\n `\n : null}\n\n <slot></slot>\n </div>\n </div>\n <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n `;\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private handleClick() {\n this.open = !this.open;\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n private _handleOverlayClick() {\n this.open = false;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyout': HeaderFlyout;\n }\n}\n"],"names":["HeaderFlyout","customElement","LitElement","_classThis","_classSuper","open","__classPrivateFieldGet","this","_HeaderFlyout_open_accessor_storage","value","__classPrivateFieldSet","anchorLeft","_HeaderFlyout_anchorLeft_accessor_storage","hideArrow","_HeaderFlyout_hideArrow_accessor_storage","label","_HeaderFlyout_label_accessor_storage","hideMenuLabel","_HeaderFlyout_hideMenuLabel_accessor_storage","hideButtonLabel","_HeaderFlyout_hideButtonLabel_accessor_storage","assistiveText","_HeaderFlyout_assistiveText_accessor_storage","href","_HeaderFlyout_href_accessor_storage","backText","_HeaderFlyout_backText_accessor_storage","slottedElements","_HeaderFlyout_slottedElements_accessor_storage","render","classes","menu","contentClasses","menu__content","slotted","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_open_initializers","_open_extraInitializers","_anchorLeft_initializers","_anchorLeft_extraInitializers","_hideArrow_initializers","_hideArrow_extraInitializers","_label_initializers","_label_extraInitializers","_hideMenuLabel_initializers","_hideMenuLabel_extraInitializers","_hideButtonLabel_initializers","_hideButtonLabel_extraInitializers","_assistiveText_initializers","_assistiveText_extraInitializers","_href_initializers","_href_extraInitializers","_backText_initializers","_backText_extraInitializers","_slottedElements_initializers","_open_decorators","property","type","Boolean","_anchorLeft_decorators","_hideArrow_decorators","_label_decorators","String","_hideMenuLabel_decorators","_hideButtonLabel_decorators","_assistiveText_decorators","_href_decorators","_backText_decorators","_slottedElements_decorators","queryAssignedElements","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","_slottedElements_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderFlyoutScss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport HeaderFlyoutScss from './headerFlyout.scss?inline';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n static override styles = unsafeCSS(HeaderFlyoutScss);\n\n /** Flyout open state. */\n @property({ type: Boolean, reflect: true })\n accessor open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n accessor anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n accessor hideArrow = false;\n\n /** Menu & button label. */\n @property({ type: String })\n accessor label = '';\n\n /** Hide the label at the top of the flyout menu. */\n @property({ type: Boolean })\n accessor hideMenuLabel = false;\n\n /** Hide the label in the mobile button. */\n @property({ type: Boolean })\n accessor hideButtonLabel = false;\n\n /**\n * DEPRECATED. Use `label` instead.\n * Button assistive text, title + aria-label.\n */\n @property({ type: String })\n accessor assistiveText = '';\n\n /** Turns the button into a link. */\n @property({ type: String })\n accessor href = '';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n accessor backText = 'Back';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n accessor slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n open: this.open,\n };\n\n const contentClasses = {\n menu__content: true,\n 'menu__content--left': this.anchorLeft,\n slotted: this.slottedElements.length,\n };\n\n return html`\n <div class=\"${classMap(classes)}\">\n ${this.href !== ''\n ? html`\n <a\n class=\"btn interactive\"\n href=${this.href}\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\">\n ${unsafeSVG(chevronIcon)}\n </span>\n </a>\n `\n : html`\n <button\n class=\"btn interactive\"\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\">\n ${unsafeSVG(chevronIcon)}\n </span>\n </button>\n `}\n\n <div class=${classMap(contentClasses)}>\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <span>${unsafeSVG(backIcon)}</span>\n ${this.backText}\n </button>\n\n ${!this.hideMenuLabel\n ? html`\n <div class=\"menu-label\">\n ${this.label || this.assistiveText}\n </div>\n `\n : null}\n\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private handleClick() {\n this.open = !this.open;\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('open')) {\n const event = new CustomEvent('on-flyout-toggle', {\n composed: true,\n bubbles: true,\n detail: { open: this.open },\n });\n this.dispatchEvent(event);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyout': HeaderFlyout;\n }\n}\n"],"names":["HeaderFlyout","customElement","LitElement","_classThis","_classSuper","open","__classPrivateFieldGet","this","_HeaderFlyout_open_accessor_storage","value","__classPrivateFieldSet","anchorLeft","_HeaderFlyout_anchorLeft_accessor_storage","hideArrow","_HeaderFlyout_hideArrow_accessor_storage","label","_HeaderFlyout_label_accessor_storage","hideMenuLabel","_HeaderFlyout_hideMenuLabel_accessor_storage","hideButtonLabel","_HeaderFlyout_hideButtonLabel_accessor_storage","assistiveText","_HeaderFlyout_assistiveText_accessor_storage","href","_HeaderFlyout_href_accessor_storage","backText","_HeaderFlyout_backText_accessor_storage","slottedElements","_HeaderFlyout_slottedElements_accessor_storage","render","classes","menu","contentClasses","menu__content","slotted","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","set","__runInitializers","_open_initializers","_open_extraInitializers","_anchorLeft_initializers","_anchorLeft_extraInitializers","_hideArrow_initializers","_hideArrow_extraInitializers","_label_initializers","_label_extraInitializers","_hideMenuLabel_initializers","_hideMenuLabel_extraInitializers","_hideButtonLabel_initializers","_hideButtonLabel_extraInitializers","_assistiveText_initializers","_assistiveText_extraInitializers","_href_initializers","_href_extraInitializers","_backText_initializers","_backText_extraInitializers","_slottedElements_initializers","property","type","Boolean","reflect","_anchorLeft_decorators","_hideArrow_decorators","_label_decorators","String","_hideMenuLabel_decorators","_hideButtonLabel_decorators","_assistiveText_decorators","_href_decorators","_backText_decorators","_slottedElements_decorators","queryAssignedElements","__esDecorate","_open_decorators","kind","name","static","private","access","obj","get","metadata","_metadata","_slottedElements_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderFlyoutScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkBaA,EAAY,6DADxBC,EAAc,6BACmBC,oHAARC,EAAA,cAAQC,EAKhC,QAASC,GAAI,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAb,QAASH,CAAII,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAIb,cAASE,GAAU,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAAnB,cAASD,CAAUF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAInB,aAASI,GAAS,OAAAP,EAAAC,KAAAO,EAAA,IAAA,CAAlB,aAASD,CAASJ,GAAAC,EAAAH,KAAAO,EAAAL,EAAA,IAAA,CAIlB,SAASM,GAAK,OAAAT,EAAAC,KAAAS,EAAA,IAAA,CAAd,SAASD,CAAKN,GAAAC,EAAAH,KAAAS,EAAAP,EAAA,IAAA,CAId,iBAASQ,GAAa,OAAAX,EAAAC,KAAAW,EAAA,IAAA,CAAtB,iBAASD,CAAaR,GAAAC,EAAAH,KAAAW,EAAAT,EAAA,IAAA,CAItB,mBAASU,GAAe,OAAAb,EAAAC,KAAAa,EAAA,IAAA,CAAxB,mBAASD,CAAeV,GAAAC,EAAAH,KAAAa,EAAAX,EAAA,IAAA,CAOxB,iBAASY,GAAa,OAAAf,EAAAC,KAAAe,EAAA,IAAA,CAAtB,iBAASD,CAAaZ,GAAAC,EAAAH,KAAAe,EAAAb,EAAA,IAAA,CAItB,QAASc,GAAI,OAAAjB,EAAAC,KAAAiB,EAAA,IAAA,CAAb,QAASD,CAAId,GAAAC,EAAAH,KAAAiB,EAAAf,EAAA,IAAA,CAIb,YAASgB,GAAQ,OAAAnB,EAAAC,KAAAmB,EAAA,IAAA,CAAjB,YAASD,CAAQhB,GAAAC,EAAAH,KAAAmB,EAAAjB,EAAA,IAAA,CAOjB,mBAASkB,GAAe,OAAArB,EAAAC,KAAAqB,EAAA,IAAA,CAAxB,mBAASD,CAAelB,GAAAC,EAAAH,KAAAqB,EAAAnB,EAAA,IAAA,CAEf,MAAAoB,GACP,MAAMC,EAAU,CACdC,MAAM,EACN1B,KAAME,KAAKF,MAGP2B,EAAiB,CACrBC,eAAe,EACf,sBAAuB1B,KAAKI,WAC5BuB,QAAS3B,KAAKoB,gBAAgBQ,QAGhC,OAAOC,CAAI;oBACKC,EAASP;UACL,KAAdvB,KAAKgB,KACHa,CAAI;;;uBAGO7B,KAAKgB;wBACJhB,KAAKQ,OAASR,KAAKc;6BACdd,KAAKQ,OAASR,KAAKc;yBACvBd,KAAK+B;;;;kBAIX/B,KAAKY,gBAMJ,KALAiB,CAAI;;0BAEE7B,KAAKQ,OAASR,KAAKc;;;;;oBAMzBkB,EAAUC;;;cAIlBJ,CAAI;;;wBAGQ7B,KAAKQ,OAASR,KAAKc;6BACdd,KAAKQ,OAASR,KAAKc;yBACvBd,KAAK+B;;;;kBAIX/B,KAAKY,gBAMJ,KALAiB,CAAI;;0BAEE7B,KAAKQ,OAASR,KAAKc;;;;;oBAMzBkB,EAAUC;;;;;qBAKTH,EAASL;2CACa,IAAMzB,KAAKkC;oBAClCF,EAAUG;cAChBnC,KAAKkB;;;YAGNlB,KAAKU,cAMJ,KALAmB,CAAI;;oBAEE7B,KAAKQ,OAASR,KAAKc;;;;;;;MAW7B,WAAAoB,GACNlC,KAAKF,MAAO,EAGN,WAAAiC,GACN/B,KAAKF,MAAQE,KAAKF,KAGZ,cAAAsC,CAAeC,GAChBA,EAAEC,eAAeC,SAASvC,QAC7BA,KAAKF,MAAO,GAIP,UAAA0C,CAAWC,GAClB,GAAIA,EAAaC,IAAI,QAAS,CAC5B,MAAMC,EAAQ,IAAIC,YAAY,mBAAoB,CAChDC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAEjD,KAAME,KAAKF,QAEvBE,KAAKgD,cAAcL,IAId,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMrC,KAAKoC,eAAeC,KAGvD,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMrC,KAAKoC,eAAeC,KAEjEa,MAAMG,yDA/JCpD,EAAAsD,IAAAvD,KAAAwD,EAAAxD,KAAAyD,GAAO,IAIPpD,EAAAkD,IAAAvD,MAAAwD,EAAAxD,KAAA0D,GAAAF,EAAAxD,KAAA2D,GAAa,KAIbpD,EAAAgD,IAAAvD,MAAAwD,EAAAxD,KAAA4D,GAAAJ,EAAAxD,KAAA6D,GAAY,KAIZpD,EAAA8C,IAAAvD,MAAAwD,EAAAxD,KAAA8D,GAAAN,EAAAxD,KAAA+D,EAAQ,MAIRpD,EAAA4C,IAAAvD,MAAAwD,EAAAxD,KAAAgE,GAAAR,EAAAxD,KAAAiE,GAAgB,KAIhBpD,EAAA0C,IAAAvD,MAAAwD,EAAAxD,KAAAkE,GAAAV,EAAAxD,KAAAmE,GAAkB,KAOlBpD,EAAAwC,IAAAvD,MAAAwD,EAAAxD,KAAAoE,GAAAZ,EAAAxD,KAAAqE,EAAgB,MAIhBpD,EAAAsC,IAAAvD,MAAAwD,EAAAxD,KAAAsE,IAAAd,EAAAxD,KAAAuE,GAAO,MAIPpD,EAAAoC,IAAAvD,MAAAwD,EAAAxD,KAAAwE,IAAAhB,EAAAxD,KAAAyE,GAAW,UAOXpD,EAAAkC,IAAAvD,MAAAwD,EAAAxD,KAAA0E,IAAAlB,EAAAxD,KAAA2E,QAAA,2TA3CRC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAInCC,EAAA,CAAAJ,EAAS,CAAEC,KAAMC,WAIjBG,EAAA,CAAAL,EAAS,CAAEC,KAAMC,WAIjBI,EAAA,CAAAN,EAAS,CAAEC,KAAMM,UAIjBC,EAAA,CAAAR,EAAS,CAAEC,KAAMC,WAIjBO,EAAA,CAAAT,EAAS,CAAEC,KAAMC,WAOjBQ,EAAA,CAAAV,EAAS,CAAEC,KAAMM,UAIjBI,EAAA,CAAAX,EAAS,CAAEC,KAAMM,UAIjBK,EAAA,CAAAZ,EAAS,CAAEC,KAAMM,UAOjBM,EAAA,CAAAC,KAzCDC,EAAA/F,EAAA,KAAAgG,EAAA,CAAAC,KAAA,WAAAC,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAASpG,KAAIyD,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAJpG,KAAII,CAAA,GAAAkG,SAAAC,GAAA5C,EAAAC,GAIbiC,EAAA/F,EAAA,KAAAoF,EAAA,CAAAa,KAAA,WAAAC,KAAA,aAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,eAAAA,EAAAC,IAAAD,GAAAA,EAAS9F,WAAUmD,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAV9F,WAAUF,CAAA,GAAAkG,SAAAC,GAAA1C,EAAAC,GAInB+B,EAAA/F,EAAA,KAAAqF,EAAA,CAAAY,KAAA,WAAAC,KAAA,YAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,cAAAA,EAAAC,IAAAD,GAAAA,EAAS5F,UAASiD,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAT5F,UAASJ,CAAA,GAAAkG,SAAAC,GAAAxC,EAAAC,GAIlB6B,EAAA/F,EAAA,KAAAsF,EAAA,CAAAW,KAAA,WAAAC,KAAA,QAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,UAAAA,EAAAC,IAAAD,GAAAA,EAAS1F,MAAK+C,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAL1F,MAAKN,CAAA,GAAAkG,SAAAC,GAAAtC,EAAAC,GAId2B,EAAA/F,EAAA,KAAAwF,EAAA,CAAAS,KAAA,WAAAC,KAAA,gBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,kBAAAA,EAAAC,IAAAD,GAAAA,EAASxF,cAAa6C,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAbxF,cAAaR,CAAA,GAAAkG,SAAAC,GAAApC,EAAAC,GAItByB,EAAA/F,EAAA,KAAAyF,EAAA,CAAAQ,KAAA,WAAAC,KAAA,kBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,oBAAAA,EAAAC,IAAAD,GAAAA,EAAStF,gBAAe2C,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAftF,gBAAeV,CAAA,GAAAkG,SAAAC,GAAAlC,EAAAC,GAOxBuB,EAAA/F,EAAA,KAAA0F,EAAA,CAAAO,KAAA,WAAAC,KAAA,gBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,kBAAAA,EAAAC,IAAAD,GAAAA,EAASpF,cAAayC,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAbpF,cAAaZ,CAAA,GAAAkG,SAAAC,GAAAhC,EAAAC,IAItBqB,EAAA/F,EAAA,KAAA2F,EAAA,CAAAM,KAAA,WAAAC,KAAA,OAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,SAAAA,EAAAC,IAAAD,GAAAA,EAASlF,KAAIuC,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAJlF,KAAId,CAAA,GAAAkG,SAAAC,GAAA9B,GAAAC,IAIbmB,EAAA/F,EAAA,KAAA4F,EAAA,CAAAK,KAAA,WAAAC,KAAA,WAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,aAAAA,EAAAC,IAAAD,GAAAA,EAAShF,SAAQqC,IAAA,CAAA2C,EAAAhG,KAAAgG,EAARhF,SAAQhB,CAAA,GAAAkG,SAAAC,GAAA5B,GAAAC,IAOjBiB,EAAA/F,EAAA,KAAA6F,EAAA,CAAAI,KAAA,WAAAC,KAAA,kBAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAvD,IAAAwD,GAAA,oBAAAA,EAAAC,IAAAD,GAAAA,EAAS9E,gBAAemC,IAAA,CAAA2C,EAAAhG,KAAAgG,EAAf9E,gBAAelB,CAAA,GAAAkG,SAAAC,GAAA1B,GAAA2B,IA/C1BX,EAAA,KAAAY,EAAA,CAAArG,MAAAN,GAAA4G,EAAA,CAAAX,KAAA,QAAAC,KAAAlG,EAAAkG,KAAAM,SAAAC,GAAA,KAAAI,iHACkB7G,EAAA8G,OAASC,EAAUC,GADxBpD,EAAA5D,EAAA6G,MAAY"}
|
|
@@ -6,9 +6,16 @@ import { LitElement } from 'lit';
|
|
|
6
6
|
export declare class HeaderFlyouts extends LitElement {
|
|
7
7
|
static styles: import("lit").CSSResult;
|
|
8
8
|
accessor open: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Queries any slotted header-flyout.
|
|
11
|
+
* @ignore
|
|
12
|
+
*/
|
|
13
|
+
accessor _slottedFlyouts: Array<any>;
|
|
9
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
10
15
|
private _toggleOpen;
|
|
11
16
|
private _handleClickOut;
|
|
17
|
+
private _handleFlyoutToggle;
|
|
18
|
+
private _emitFlyoutsToggle;
|
|
12
19
|
willUpdate(changedProps: any): void;
|
|
13
20
|
connectedCallback(): void;
|
|
14
21
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyouts.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"headerFlyouts.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAUlD;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAgC;IAItD,QAAQ,CAAC,IAAI,UAAS;IAEtB;;;OAGG;IAEH,QAAQ,CAAC,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B,MAAM;IAmBf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,kBAAkB;IAYjB,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IASjB,oBAAoB;CAQ9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
|