@kyndryl-design-system/shidoka-applications 2.76.0 → 2.77.0
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/header/headerCategory.d.ts +2 -0
- package/components/global/header/headerCategory.d.ts.map +1 -1
- package/components/global/header/headerCategory.js +17 -6
- package/components/global/header/headerCategory.js.map +1 -1
- package/components/global/header/headerLink.js +2 -2
- package/components/global/header/headerNav.js +7 -3
- package/components/global/header/headerNav.js.map +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,8 @@ export declare class HeaderCategory extends LitElement {
|
|
|
10
10
|
accessor heading: string;
|
|
11
11
|
/** Add left padding when icon is not provided to align text with links that do have icons. */
|
|
12
12
|
accessor leftPadding: boolean;
|
|
13
|
+
/** Show bottom border/divider. */
|
|
14
|
+
accessor showDivider: boolean;
|
|
13
15
|
render(): import("lit-html").TemplateResult<1>;
|
|
14
16
|
}
|
|
15
17
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerCategory.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerCategory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAiC;IAEvD,qBAAqB;IAErB,QAAQ,CAAC,OAAO,SAAM;IAEtB,8FAA8F;IAE9F,QAAQ,CAAC,WAAW,UAAS;IAEpB,MAAM;
|
|
1
|
+
{"version":3,"file":"headerCategory.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerCategory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAiC;IAEvD,qBAAqB;IAErB,QAAQ,CAAC,OAAO,SAAM;IAEtB,8FAA8F;IAE9F,QAAQ,CAAC,WAAW,UAAS;IAE7B,kCAAkC;IAElC,QAAQ,CAAC,WAAW,UAAS;IAEpB,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as a,__classPrivateFieldSet as n}from"tslib";import{css as
|
|
1
|
+
import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPrivateFieldGet as a,__classPrivateFieldSet as n}from"tslib";import{css as r,LitElement as d,unsafeCSS as l,html as o}from"lit";import{customElement as s,property as h}from"lit/decorators.js";var g=r`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -41,6 +41,15 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
41
41
|
flex-direction: column;
|
|
42
42
|
gap: 2px;
|
|
43
43
|
}
|
|
44
|
+
.category.divider::after {
|
|
45
|
+
content: "";
|
|
46
|
+
display: block;
|
|
47
|
+
background: none;
|
|
48
|
+
border: none;
|
|
49
|
+
margin: 6px 8px;
|
|
50
|
+
height: 1px;
|
|
51
|
+
background: var(--kd-color-border-level-tertiary);
|
|
52
|
+
}
|
|
44
53
|
|
|
45
54
|
.category__links {
|
|
46
55
|
display: flex;
|
|
@@ -60,7 +69,7 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
60
69
|
color: var(--kd-color-text-variant-brand);
|
|
61
70
|
font-weight: var(--kd-font-weight-medium);
|
|
62
71
|
text-transform: uppercase;
|
|
63
|
-
padding:
|
|
72
|
+
padding: 7px 6px 7px 8px;
|
|
64
73
|
}
|
|
65
74
|
@media (min-width: 42rem) {
|
|
66
75
|
.heading {
|
|
@@ -96,9 +105,11 @@ slot[name=icon]::slotted(*) {
|
|
|
96
105
|
justify-content: center;
|
|
97
106
|
width: 16px;
|
|
98
107
|
height: 16px;
|
|
99
|
-
}`;let m=(()=>{var
|
|
100
|
-
<div class="category">
|
|
101
|
-
<div
|
|
108
|
+
}`;let m=(()=>{var r,m,c;let p,f,v,u,k,y=[s("kyn-header-category")],x=[],b=d,w=[],z=[],P=[],D=[],S=[],j=[];return f=class extends b{get heading(){return a(this,r,"f")}set heading(e){n(this,r,e,"f")}get leftPadding(){return a(this,m,"f")}set leftPadding(e){n(this,m,e,"f")}get showDivider(){return a(this,c,"f")}set showDivider(e){n(this,c,e,"f")}render(){return o`
|
|
109
|
+
<div class="category ${this.showDivider?"divider":""}"">
|
|
110
|
+
<div
|
|
111
|
+
class="heading ${this.leftPadding?"left-padding":""}
|
|
112
|
+
>
|
|
102
113
|
<slot name="icon"></slot>
|
|
103
114
|
${this.heading}
|
|
104
115
|
</div>
|
|
@@ -106,5 +117,5 @@ slot[name=icon]::slotted(*) {
|
|
|
106
117
|
<slot></slot>
|
|
107
118
|
</div>
|
|
108
119
|
</div>
|
|
109
|
-
`}constructor(){super(...arguments),
|
|
120
|
+
`}constructor(){super(...arguments),r.set(this,i(this,w,"")),m.set(this,(i(this,z),i(this,P,!1))),c.set(this,(i(this,D),i(this,S,!1))),i(this,j)}},r=new WeakMap,m=new WeakMap,c=new WeakMap,e(f,"HeaderCategory"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=b[Symbol.metadata])&&void 0!==e?e:null):void 0;v=[h({type:String})],u=[h({type:Boolean})],k=[h({type:Boolean})],t(f,null,v,{kind:"accessor",name:"heading",static:!1,private:!1,access:{has:e=>"heading"in e,get:e=>e.heading,set:(e,t)=>{e.heading=t}},metadata:i},w,z),t(f,null,u,{kind:"accessor",name:"leftPadding",static:!1,private:!1,access:{has:e=>"leftPadding"in e,get:e=>e.leftPadding,set:(e,t)=>{e.leftPadding=t}},metadata:i},P,D),t(f,null,k,{kind:"accessor",name:"showDivider",static:!1,private:!1,access:{has:e=>"showDivider"in e,get:e=>e.showDivider,set:(e,t)=>{e.showDivider=t}},metadata:i},S,j),t(null,p={value:f},y,{kind:"class",name:f.name,metadata:i},null,x),f=p.value,i&&Object.defineProperty(f,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),f.styles=l(g),i(f,x),f})();export{m as HeaderCategory};
|
|
110
121
|
//# sourceMappingURL=headerCategory.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerCategory.js","sources":["../../../../src/components/global/header/headerCategory.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderCategoryScss from './headerCategory.scss?inline';\n\n/**\n * Header link category\n * @slot unnamed - Slot for links.\n * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-category')\nexport class HeaderCategory extends LitElement {\n static override styles = unsafeCSS(HeaderCategoryScss);\n\n /** Category text. */\n @property({ type: String })\n accessor heading = '';\n\n /** Add left padding when icon is not provided to align text with links that do have icons. */\n @property({ type: Boolean })\n accessor leftPadding = false;\n\n override render() {\n return html`\n <div class=\"category\">\n <div
|
|
1
|
+
{"version":3,"file":"headerCategory.js","sources":["../../../../src/components/global/header/headerCategory.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderCategoryScss from './headerCategory.scss?inline';\n\n/**\n * Header link category\n * @slot unnamed - Slot for links.\n * @slot icon - Slot for icon.\n */\n@customElement('kyn-header-category')\nexport class HeaderCategory extends LitElement {\n static override styles = unsafeCSS(HeaderCategoryScss);\n\n /** Category text. */\n @property({ type: String })\n accessor heading = '';\n\n /** Add left padding when icon is not provided to align text with links that do have icons. */\n @property({ type: Boolean })\n accessor leftPadding = false;\n\n /** Show bottom border/divider. */\n @property({ type: Boolean })\n accessor showDivider = false;\n\n override render() {\n return html`\n <div class=\"category ${this.showDivider ? 'divider' : ''}\"\">\n <div\n class=\"heading ${this.leftPadding ? 'left-padding' : ''}\n >\n <slot name=\"icon\"></slot>\n ${this.heading}\n </div>\n <div class=\"category__links\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-category': HeaderCategory;\n }\n}\n"],"names":["HeaderCategory","customElement","LitElement","_classThis","_classSuper","heading","__classPrivateFieldGet","this","_HeaderCategory_heading_accessor_storage","value","__classPrivateFieldSet","leftPadding","_HeaderCategory_leftPadding_accessor_storage","showDivider","_HeaderCategory_showDivider_accessor_storage","render","html","set","__runInitializers","_heading_initializers","_heading_extraInitializers","_leftPadding_initializers","_leftPadding_extraInitializers","_showDivider_initializers","_heading_decorators","property","type","String","_leftPadding_decorators","Boolean","_showDivider_decorators","__esDecorate","kind","name","static","private","access","has","obj","get","metadata","_metadata","_showDivider_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderCategoryScss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAUaA,EAAc,iCAD1BC,EAAc,+BACqBC,uCAARC,EAAA,cAAQC,EAKlC,WAASC,GAAO,OAAAC,EAAAC,KAAAC,EAAA,IAAA,CAAhB,WAASH,CAAOI,GAAAC,EAAAH,KAAAC,EAAAC,EAAA,IAAA,CAIhB,eAASE,GAAW,OAAAL,EAAAC,KAAAK,EAAA,IAAA,CAApB,eAASD,CAAWF,GAAAC,EAAAH,KAAAK,EAAAH,EAAA,IAAA,CAIpB,eAASI,GAAW,OAAAP,EAAAC,KAAAO,EAAA,IAAA,CAApB,eAASD,CAAWJ,GAAAC,EAAAH,KAAAO,EAAAL,EAAA,IAAA,CAEX,MAAAM,GACP,OAAOC,CAAI;6BACcT,KAAKM,YAAc,UAAY;;2BAEjCN,KAAKI,YAAc,eAAiB;;;YAGnDJ,KAAKF;;;;;;wCAjBNG,EAAAS,IAAAV,KAAAW,EAAAX,KAAAY,EAAU,KAIVP,EAAAK,IAAAV,MAAAW,EAAAX,KAAAa,GAAAF,EAAAX,KAAAc,GAAc,KAIdP,EAAAG,IAAAV,MAAAW,EAAAX,KAAAe,GAAAJ,EAAAX,KAAAgB,GAAc,uNATtBC,EAAA,CAAAC,EAAS,CAAEC,KAAMC,UAIjBC,EAAA,CAAAH,EAAS,CAAEC,KAAMG,WAIjBC,EAAA,CAAAL,EAAS,CAAEC,KAAMG,WAPlBE,EAAA5B,EAAA,KAAAqB,EAAA,CAAAQ,KAAA,WAAAC,KAAA,UAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,YAAAA,EAAAC,IAAAD,GAAAA,EAASjC,QAAOY,IAAA,CAAAqB,EAAA7B,KAAA6B,EAAPjC,QAAOI,CAAA,GAAA+B,SAAAC,GAAAtB,EAAAC,GAIhBW,EAAA5B,EAAA,KAAAyB,EAAA,CAAAI,KAAA,WAAAC,KAAA,cAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,gBAAAA,EAAAC,IAAAD,GAAAA,EAAS3B,YAAWM,IAAA,CAAAqB,EAAA7B,KAAA6B,EAAX3B,YAAWF,CAAA,GAAA+B,SAAAC,GAAApB,EAAAC,GAIpBS,EAAA5B,EAAA,KAAA2B,EAAA,CAAAE,KAAA,WAAAC,KAAA,cAAAC,QAAA,EAAAC,SAAA,EAAAC,OAAA,CAAAC,IAAAC,GAAA,gBAAAA,EAAAC,IAAAD,GAAAA,EAASzB,YAAWI,IAAA,CAAAqB,EAAA7B,KAAA6B,EAAXzB,YAAWJ,CAAA,GAAA+B,SAAAC,GAAAlB,EAAAmB,GAbtBX,EAAA,KAAAY,EAAA,CAAAlC,MAAAN,GAAAyC,EAAA,CAAAZ,KAAA,QAAAC,KAAA9B,EAAA8B,KAAAO,SAAAC,GAAA,KAAAI,iHACkB1C,EAAA2C,OAASC,EAAUC,GADxB9B,EAAAf,EAAA0C,MAAc"}
|
|
@@ -240,12 +240,10 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
240
240
|
gap: 8px;
|
|
241
241
|
text-decoration: none;
|
|
242
242
|
color: var(--kd-color-text-level-primary);
|
|
243
|
-
white-space: nowrap;
|
|
244
243
|
border-radius: 4px;
|
|
245
244
|
transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
|
|
246
245
|
outline: 2px solid transparent;
|
|
247
246
|
outline-offset: -2px;
|
|
248
|
-
height: 30px;
|
|
249
247
|
padding: 6px 12px 6px 8px;
|
|
250
248
|
font-family: var(--kd-font-family-secondary);
|
|
251
249
|
font-size: var(--kd-font-size-utility-2-sm);
|
|
@@ -290,6 +288,7 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
290
288
|
justify-content: center;
|
|
291
289
|
width: 16px;
|
|
292
290
|
height: 16px;
|
|
291
|
+
flex-shrink: 0;
|
|
293
292
|
}
|
|
294
293
|
@media (min-width: 42rem) {
|
|
295
294
|
.nav-link {
|
|
@@ -359,6 +358,7 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
359
358
|
padding: 16px;
|
|
360
359
|
background-color: var(--kd-color-background-opacity-1);
|
|
361
360
|
border-radius: 8px;
|
|
361
|
+
flex-grow: 1;
|
|
362
362
|
}
|
|
363
363
|
}
|
|
364
364
|
.menu__content {
|
|
@@ -246,8 +246,12 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
246
246
|
|
|
247
247
|
.menu__content {
|
|
248
248
|
padding: 8px 12px;
|
|
249
|
-
|
|
250
|
-
|
|
249
|
+
}
|
|
250
|
+
@media (min-width: 42rem) {
|
|
251
|
+
.menu__content {
|
|
252
|
+
width: 230px;
|
|
253
|
+
}
|
|
254
|
+
}`;let f=(()=>{var n,f,x;let y,_,w,O,C,z=[c("kyn-header-nav")],j=[],M=s,S=[],$=[],E=[],H=[],L=[],V=[];return _=class extends M{constructor(){super(...arguments),n.set(this,i(this,S,!1)),f.set(this,(i(this,$),i(this,E,"left"))),x.set(this,(i(this,H),i(this,L,!1))),this._attrObserver=i(this,V),this._boundHandleClickOut=e=>this._handleClickOut(e)}get menuOpen(){return o(this,n,"f")}set menuOpen(e){r(this,n,e,"f")}get slot(){return o(this,f,"f")}set slot(e){r(this,f,e,"f")}get hasCategories(){return o(this,x,"f")}set hasCategories(e){r(this,x,e,"f")}get _isDesktop(){return"undefined"==typeof window||window.innerWidth>=672}render(){const e={"header-nav":!0,menu:!0,open:this.menuOpen},t={menu__content:!0,left:!0,"categories-open":this.hasCategories};return d`
|
|
251
255
|
<div class=${h(e)}>
|
|
252
256
|
<button
|
|
253
257
|
class="btn interactive"
|
|
@@ -262,5 +266,5 @@ import{__setFunctionName as e,__esDecorate as t,__runInitializers as i,__classPr
|
|
|
262
266
|
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
263
267
|
</div>
|
|
264
268
|
</div>
|
|
265
|
-
`}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_updateCategoriesVisibility(){const e=p("kyn-header-link",this),t=Array.from(e).some((e=>e.hasAttribute("open")||e.hasAttribute("isactive"))),i=Boolean(g("kyn-header-categories",this)),o=t||i;this.hasCategories!==o&&(this.hasCategories=o)}_handleSlotChange(){this._updateCategoriesVisibility()}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}firstUpdated(e){this._updateCategoriesVisibility()}willUpdate(e){var t;if(e.has("menuOpen")){const e={open:this.menuOpen};this.dispatchEvent(new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:e})),null===(t=this.ownerDocument)||void 0===t||t.dispatchEvent(new CustomEvent("on-nav-toggle",{detail:e}))}}updated(e){e.has("hasCategories")&&this.classList.toggle("categories-open",this.hasCategories)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._boundHandleClickOut),this._attrObserver=new MutationObserver((()=>{this._updateCategoriesVisibility()})),this._attrObserver.observe(this,{attributes:!0,subtree:!0,attributeFilter:["open"],childList:!0})}disconnectedCallback(){document.removeEventListener("click",this._boundHandleClickOut),this._attrObserver&&(this._attrObserver.disconnect(),this._attrObserver=void 0),super.disconnectedCallback()}},n=new WeakMap,f=new WeakMap,x=new WeakMap,e(
|
|
269
|
+
`}_toggleMenuOpen(){this.menuOpen=!this.menuOpen}_updateCategoriesVisibility(){const e=p("kyn-header-link",this),t=Array.from(e).some((e=>e.hasAttribute("open")||e.hasAttribute("isactive"))),i=Boolean(g("kyn-header-categories",this)),o=t||i;this.hasCategories!==o&&(this.hasCategories=o)}_handleSlotChange(){this._updateCategoriesVisibility()}_handleClickOut(e){e.composedPath().includes(this)||(this.menuOpen=!1)}firstUpdated(e){this._updateCategoriesVisibility()}willUpdate(e){var t;if(e.has("menuOpen")){const e={open:this.menuOpen};this.dispatchEvent(new CustomEvent("on-nav-toggle",{composed:!0,bubbles:!0,detail:e})),null===(t=this.ownerDocument)||void 0===t||t.dispatchEvent(new CustomEvent("on-nav-toggle",{detail:e}))}}updated(e){e.has("hasCategories")&&this.classList.toggle("categories-open",this.hasCategories)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._boundHandleClickOut),this._attrObserver=new MutationObserver((()=>{this._updateCategoriesVisibility()})),this._attrObserver.observe(this,{attributes:!0,subtree:!0,attributeFilter:["open"],childList:!0})}disconnectedCallback(){document.removeEventListener("click",this._boundHandleClickOut),this._attrObserver&&(this._attrObserver.disconnect(),this._attrObserver=void 0),super.disconnectedCallback()}},n=new WeakMap,f=new WeakMap,x=new WeakMap,e(_,"HeaderNav"),(()=>{var e;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=M[Symbol.metadata])&&void 0!==e?e:null):void 0;w=[u()],O=[m({type:String,reflect:!0})],C=[u()],t(_,null,w,{kind:"accessor",name:"menuOpen",static:!1,private:!1,access:{has:e=>"menuOpen"in e,get:e=>e.menuOpen,set:(e,t)=>{e.menuOpen=t}},metadata:i},S,$),t(_,null,O,{kind:"accessor",name:"slot",static:!1,private:!1,access:{has:e=>"slot"in e,get:e=>e.slot,set:(e,t)=>{e.slot=t}},metadata:i},E,H),t(_,null,C,{kind:"accessor",name:"hasCategories",static:!1,private:!1,access:{has:e=>"hasCategories"in e,get:e=>e.hasCategories,set:(e,t)=>{e.hasCategories=t}},metadata:i},L,V),t(null,y={value:_},z,{kind:"class",name:_.name,metadata:i},null,j),_=y.value,i&&Object.defineProperty(_,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),_.styles=l(k),i(_,j),_})();export{f as HeaderNav};
|
|
266
270
|
//# sourceMappingURL=headerNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS, type PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n querySelectorAllDeep,\n querySelectorDeep,\n} from 'query-selector-shadow-dom';\nimport HeaderNavScss from './headerNav.scss?inline';\n\nimport menuIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/hamburger-menu.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n static override styles = unsafeCSS(HeaderNavScss);\n\n /** Small screen header nav visibility.\n * @ignore\n */\n @state()\n accessor menuOpen = false;\n\n /** Force correct slot\n * @internal\n */\n @property({ type: String, reflect: true })\n override accessor slot = 'left';\n\n /** Boolean value reflecting whether the navigation has categories.\n * @internal\n */\n @state()\n accessor hasCategories = false;\n\n /** Mutation observer for attribute changes.\n * @internal\n */\n private _attrObserver?: MutationObserver;\n\n /** Bound document click handler to allow proper add/remove of listener\n * @internal\n */\n private _boundHandleClickOut = (e: Event) => this._handleClickOut(e);\n\n /** @internal */\n private get _isDesktop(): boolean {\n if (typeof window === 'undefined') return true;\n return window.innerWidth >= 672;\n }\n\n override render() {\n const classes = {\n 'header-nav': true,\n menu: true,\n open: this.menuOpen,\n };\n\n const menuContentClasses = {\n menu__content: true,\n left: true,\n 'categories-open': this.hasCategories,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleMenuOpen()}\n >\n ${this.menuOpen\n ? html`<span>${unsafeSVG(closeIcon)}</span>`\n : html`<span>${unsafeSVG(menuIcon)}</span>`}\n </button>\n\n <div class=${classMap(menuContentClasses)}>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _toggleMenuOpen() {\n this.menuOpen = !this.menuOpen;\n }\n\n private _updateCategoriesVisibility(): void {\n const links = querySelectorAllDeep('kyn-header-link', this);\n\n const hasOpenCategory = Array.from(links).some((link) => {\n return link.hasAttribute('open') || link.hasAttribute('isactive');\n });\n\n const hasCategoriesElement = Boolean(\n querySelectorDeep('kyn-header-categories', this)\n );\n\n const nextHasCategories = hasOpenCategory || hasCategoriesElement;\n\n if (this.hasCategories !== nextHasCategories) {\n this.hasCategories = nextHasCategories;\n }\n }\n\n private _handleSlotChange() {\n this._updateCategoriesVisibility();\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.menuOpen = false;\n }\n }\n\n protected override firstUpdated(_changed: PropertyValueMap<this>): void {\n this._updateCategoriesVisibility();\n }\n\n override willUpdate(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('menuOpen')) {\n const detail = { open: this.menuOpen };\n\n this.dispatchEvent(\n new CustomEvent('on-nav-toggle', {\n composed: true,\n bubbles: true,\n detail,\n })\n );\n\n // dispatch to document for other components to listen\n this.ownerDocument?.dispatchEvent(\n new CustomEvent('on-nav-toggle', { detail })\n );\n }\n }\n\n override updated(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('hasCategories')) {\n this.classList.toggle('categories-open', this.hasCategories);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n document.addEventListener('click', this._boundHandleClickOut);\n\n this._attrObserver = new MutationObserver(() => {\n this._updateCategoriesVisibility();\n });\n\n this._attrObserver.observe(this, {\n attributes: true,\n subtree: true,\n attributeFilter: ['open'],\n childList: true,\n });\n }\n\n override disconnectedCallback(): void {\n document.removeEventListener('click', this._boundHandleClickOut);\n\n if (this._attrObserver) {\n this._attrObserver.disconnect();\n this._attrObserver = undefined;\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav': HeaderNav;\n }\n}\n"],"names":["HeaderNav","customElement","LitElement","_classThis","_classSuper","_HeaderNav_menuOpen_accessor_storage","set","this","__runInitializers","_menuOpen_initializers","_HeaderNav_slot_accessor_storage","_menuOpen_extraInitializers","_slot_initializers","_HeaderNav_hasCategories_accessor_storage","_slot_extraInitializers","_hasCategories_initializers","_attrObserver","_hasCategories_extraInitializers","_boundHandleClickOut","e","_handleClickOut","menuOpen","__classPrivateFieldGet","value","__classPrivateFieldSet","slot","hasCategories","_isDesktop","window","innerWidth","render","classes","menu","open","menuContentClasses","menu__content","left","html","classMap","_toggleMenuOpen","unsafeSVG","closeIcon","menuIcon","_handleSlotChange","_updateCategoriesVisibility","links","querySelectorAllDeep","hasOpenCategory","Array","from","some","link","hasAttribute","hasCategoriesElement","Boolean","querySelectorDeep","nextHasCategories","composedPath","includes","firstUpdated","_changed","willUpdate","changedProps","has","detail","dispatchEvent","CustomEvent","composed","bubbles","_a","ownerDocument","updated","classList","toggle","connectedCallback","super","document","addEventListener","MutationObserver","observe","attributes","subtree","attributeFilter","childList","disconnectedCallback","removeEventListener","disconnect","undefined","_menuOpen_decorators","state","property","type","String","reflect","_hasCategories_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_slot_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderNavScss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerNav.js","sources":["../../../../src/components/global/header/headerNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS, type PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n querySelectorAllDeep,\n querySelectorDeep,\n} from 'query-selector-shadow-dom';\nimport HeaderNavScss from './headerNav.scss?inline';\n\nimport menuIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/hamburger-menu.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\n/**\n * Container for header navigation links.\n * @slot unnamed - This element has a slot.\n */\n@customElement('kyn-header-nav')\nexport class HeaderNav extends LitElement {\n static override styles = unsafeCSS(HeaderNavScss);\n\n /** Small screen header nav visibility.\n * @ignore\n */\n @state()\n accessor menuOpen = false;\n\n /** Force correct slot\n * @internal\n */\n @property({ type: String, reflect: true })\n override accessor slot = 'left';\n\n /** Boolean value reflecting whether the navigation has categories.\n * @internal\n */\n @state()\n accessor hasCategories = false;\n\n /** Mutation observer for attribute changes.\n * @internal\n */\n private _attrObserver?: MutationObserver;\n\n /** Bound document click handler to allow proper add/remove of listener\n * @internal\n */\n private _boundHandleClickOut = (e: Event) => this._handleClickOut(e);\n\n /** @internal */\n private get _isDesktop(): boolean {\n if (typeof window === 'undefined') return true;\n return window.innerWidth >= 672;\n }\n\n override render() {\n const classes = {\n 'header-nav': true,\n menu: true,\n open: this.menuOpen,\n };\n\n const menuContentClasses = {\n menu__content: true,\n left: true,\n 'categories-open': this.hasCategories,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleMenuOpen()}\n >\n ${this.menuOpen\n ? html`<span>${unsafeSVG(closeIcon)}</span>`\n : html`<span>${unsafeSVG(menuIcon)}</span>`}\n </button>\n\n <div class=${classMap(menuContentClasses)}>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _toggleMenuOpen() {\n this.menuOpen = !this.menuOpen;\n }\n\n private _updateCategoriesVisibility(): void {\n const links = querySelectorAllDeep('kyn-header-link', this);\n\n const hasOpenCategory = Array.from(links).some((link) => {\n return link.hasAttribute('open') || link.hasAttribute('isactive');\n });\n\n const hasCategoriesElement = Boolean(\n querySelectorDeep('kyn-header-categories', this)\n );\n\n const nextHasCategories = hasOpenCategory || hasCategoriesElement;\n\n if (this.hasCategories !== nextHasCategories) {\n this.hasCategories = nextHasCategories;\n }\n }\n\n private _handleSlotChange() {\n this._updateCategoriesVisibility();\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.menuOpen = false;\n }\n }\n\n protected override firstUpdated(_changed: PropertyValueMap<this>): void {\n this._updateCategoriesVisibility();\n }\n\n override willUpdate(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('menuOpen')) {\n const detail = { open: this.menuOpen };\n\n this.dispatchEvent(\n new CustomEvent('on-nav-toggle', {\n composed: true,\n bubbles: true,\n detail,\n })\n );\n\n // dispatch to document for other components to listen\n this.ownerDocument?.dispatchEvent(\n new CustomEvent('on-nav-toggle', { detail })\n );\n }\n }\n\n override updated(changedProps: PropertyValueMap<this>): void {\n if (changedProps.has('hasCategories')) {\n this.classList.toggle('categories-open', this.hasCategories);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n document.addEventListener('click', this._boundHandleClickOut);\n\n this._attrObserver = new MutationObserver(() => {\n this._updateCategoriesVisibility();\n });\n\n this._attrObserver.observe(this, {\n attributes: true,\n subtree: true,\n attributeFilter: ['open'],\n childList: true,\n });\n }\n\n override disconnectedCallback(): void {\n document.removeEventListener('click', this._boundHandleClickOut);\n\n if (this._attrObserver) {\n this._attrObserver.disconnect();\n this._attrObserver = undefined;\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav': HeaderNav;\n }\n}\n"],"names":["HeaderNav","customElement","LitElement","_classThis","_classSuper","_HeaderNav_menuOpen_accessor_storage","set","this","__runInitializers","_menuOpen_initializers","_HeaderNav_slot_accessor_storage","_menuOpen_extraInitializers","_slot_initializers","_HeaderNav_hasCategories_accessor_storage","_slot_extraInitializers","_hasCategories_initializers","_attrObserver","_hasCategories_extraInitializers","_boundHandleClickOut","e","_handleClickOut","menuOpen","__classPrivateFieldGet","value","__classPrivateFieldSet","slot","hasCategories","_isDesktop","window","innerWidth","render","classes","menu","open","menuContentClasses","menu__content","left","html","classMap","_toggleMenuOpen","unsafeSVG","closeIcon","menuIcon","_handleSlotChange","_updateCategoriesVisibility","links","querySelectorAllDeep","hasOpenCategory","Array","from","some","link","hasAttribute","hasCategoriesElement","Boolean","querySelectorDeep","nextHasCategories","composedPath","includes","firstUpdated","_changed","willUpdate","changedProps","has","detail","dispatchEvent","CustomEvent","composed","bubbles","_a","ownerDocument","updated","classList","toggle","connectedCallback","super","document","addEventListener","MutationObserver","observe","attributes","subtree","attributeFilter","childList","disconnectedCallback","removeEventListener","disconnect","undefined","_menuOpen_decorators","state","property","type","String","reflect","_hasCategories_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_slot_decorators","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","HeaderNavScss"],"mappings":"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"}
|