@kyndryl-design-system/shidoka-applications 1.48.3 → 1.48.4
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/README.md +0 -3
- package/components/global/localNav/localNavLink.d.ts +5 -0
- package/components/global/localNav/localNavLink.d.ts.map +1 -1
- package/components/global/localNav/localNavLink.js +14 -13
- package/components/global/localNav/localNavLink.js.map +1 -1
- package/package.json +4 -5
- package/common/css/root.css +0 -1
- package/common/scss/root.scss +0 -1
- package/common/scss/variables/index.scss +0 -2
- package/common/scss/variables/misc.scss +0 -5
- package/common/scss/variables/zindex.scss +0 -5
package/README.md
CHANGED
|
@@ -24,21 +24,18 @@ The method used (SCSS @use, CSS @import, JS import, or <style> tag) will v
|
|
|
24
24
|
|
|
25
25
|
```css
|
|
26
26
|
@use '~@kyndryl-design-system/shidoka-foundation/scss/root.scss';
|
|
27
|
-
@use '~@kyndryl-design-system/shidoka-applications/common/scss/root.scss';
|
|
28
27
|
```
|
|
29
28
|
|
|
30
29
|
### CSS
|
|
31
30
|
|
|
32
31
|
```css
|
|
33
32
|
@import '@kyndryl-design-system/shidoka-foundation/css/root.css';
|
|
34
|
-
@import '@kyndryl-design-system/shidoka-applications/common/css/root.css';
|
|
35
33
|
```
|
|
36
34
|
|
|
37
35
|
### JS
|
|
38
36
|
|
|
39
37
|
```js
|
|
40
38
|
import '@kyndryl-design-system/shidoka-foundation/css/root.css';
|
|
41
|
-
import '@kyndryl-design-system/shidoka-applications/common/css/root.css';
|
|
42
39
|
```
|
|
43
40
|
|
|
44
41
|
### Use CSS tokens/variables
|
|
@@ -52,6 +52,11 @@ export declare class LocalNavLink extends LitElement {
|
|
|
52
52
|
* @internal
|
|
53
53
|
*/
|
|
54
54
|
menuPosition: any;
|
|
55
|
+
/**
|
|
56
|
+
* Queries slotted icon.
|
|
57
|
+
* @ignore
|
|
58
|
+
*/
|
|
59
|
+
_icon: Array<any>;
|
|
55
60
|
render(): import("lit").TemplateResult<1>;
|
|
56
61
|
firstUpdated(): void;
|
|
57
62
|
willUpdate(changedProps: any): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAKnE;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,SAAS,UAAS;IAElB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;
|
|
1
|
+
{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAKnE;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,SAAS,UAAS;IAElB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEvB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;IA0DN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAc5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}
|
|
@@ -45,13 +45,18 @@ a {
|
|
|
45
45
|
color: var(--kd-color-text-secondary);
|
|
46
46
|
transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
|
|
47
47
|
}
|
|
48
|
-
a
|
|
49
|
-
|
|
48
|
+
a .icon.slotted {
|
|
49
|
+
width: 24px;
|
|
50
|
+
height: 24px;
|
|
51
|
+
flex-shrink: 0;
|
|
50
52
|
display: flex;
|
|
51
53
|
align-items: center;
|
|
52
54
|
justify-content: center;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
}
|
|
56
|
+
@media (min-width: 42rem) {
|
|
57
|
+
a .icon.slotted {
|
|
58
|
+
width: 32px;
|
|
59
|
+
}
|
|
55
60
|
}
|
|
56
61
|
.link-active a {
|
|
57
62
|
color: var(--kd-color-text-tertiary);
|
|
@@ -276,13 +281,6 @@ a:active {
|
|
|
276
281
|
}
|
|
277
282
|
.arrow-icon kd-icon {
|
|
278
283
|
display: block;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
@media (min-width: 42rem) {
|
|
282
|
-
slot[name=icon]::slotted(*) {
|
|
283
|
-
flex-shrink: 0;
|
|
284
|
-
margin: 0 4px;
|
|
285
|
-
}
|
|
286
284
|
}`;let p=class extends r{constructor(){super(...arguments),this.href="",this._expanded=!1,this.active=!1,this.disabled=!1,this.backText="Back",this._level=1,this._navExpanded=!1,this._navExpandedMobile=!1,this._text="",this.menuPosition={}}render(){const e={"level--1":1==this._level,"level--2":2==this._level,"level--3":3==this._level,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this._expanded,"link-active":this.active,"link-disabled":this.disabled};return l`
|
|
287
285
|
<div
|
|
288
286
|
class=${o(e)}
|
|
@@ -290,7 +288,10 @@ a:active {
|
|
|
290
288
|
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
291
289
|
>
|
|
292
290
|
<a href=${this.href} @click=${e=>this.handleClick(e)}>
|
|
293
|
-
<
|
|
291
|
+
<span class="icon ${this._icon.length?"slotted":""}">
|
|
292
|
+
<slot name="icon"></slot>
|
|
293
|
+
</span>
|
|
294
|
+
|
|
294
295
|
<span class="text">
|
|
295
296
|
<slot @slotchange=${this._handleTextSlotChange}></slot>
|
|
296
297
|
</span>
|
|
@@ -318,5 +319,5 @@ a:active {
|
|
|
318
319
|
<slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
|
|
319
320
|
</div>
|
|
320
321
|
</div>
|
|
321
|
-
`}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("_navExpanded")&&this.updateChildren(),e.has("_expanded")&&this._expanded&&this.navLinks.length&&this._positionMenu()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this.navLinks.forEach((e=>{e._navExpanded=this._navExpanded}))}determineLevel(){const e=this.shadowRoot.host.parentNode;"KYN-LOCAL-NAV"===e.nodeName?this._level=1:"KYN-LOCAL-NAV"===e.parentNode.nodeName?this._level=2:this._level=3}handlePointerEnter(e){"mouse"===e.pointerType&&this.navLinks.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&document.activeElement!==this&&this.navLinks.length&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),n=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".sub-menu"))||void 0===t?void 0:t.getBoundingClientRect(),o=i.top+i.height/2,a=n.height/2,d=o+a>window.innerHeight?o-a-(o+a-window.innerHeight):o-a,r=i.right+8;this.menuPosition={top:d<56?56:d,left:r<320?320:r}}_handleBack(){this._expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this.navLinks.length&&(t=!0,this._expanded=!this._expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};p.styles=c,e([t({type:String})],p.prototype,"href",void 0),e([i()],p.prototype,"_expanded",void 0),e([t({type:Boolean,reflect:!0})],p.prototype,"active",void 0),e([t({type:Boolean})],p.prototype,"disabled",void 0),e([t({type:String})],p.prototype,"backText",void 0),e([i()],p.prototype,"_level",void 0),e([i()],p.prototype,"_navExpanded",void 0),e([i()],p.prototype,"_navExpandedMobile",void 0),e([i()],p.prototype,"_text",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],p.prototype,"navLinks",void 0),e([i()],p.prototype,"_leaveTimer",void 0),e([i()],p.prototype,"menuPosition",void 0),p=e([a("kyn-local-nav-link")],p);export{p as LocalNavLink};
|
|
322
|
+
`}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("_navExpanded")&&this.updateChildren(),e.has("_expanded")&&this._expanded&&this.navLinks.length&&this._positionMenu()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this.navLinks.forEach((e=>{e._navExpanded=this._navExpanded}))}determineLevel(){const e=this.shadowRoot.host.parentNode;"KYN-LOCAL-NAV"===e.nodeName?this._level=1:"KYN-LOCAL-NAV"===e.parentNode.nodeName?this._level=2:this._level=3}handlePointerEnter(e){"mouse"===e.pointerType&&this.navLinks.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&document.activeElement!==this&&this.navLinks.length&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),n=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".sub-menu"))||void 0===t?void 0:t.getBoundingClientRect(),o=i.top+i.height/2,a=n.height/2,d=o+a>window.innerHeight?o-a-(o+a-window.innerHeight):o-a,r=i.right+8;this.menuPosition={top:d<56?56:d,left:r<320?320:r}}_handleBack(){this._expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this.navLinks.length&&(t=!0,this._expanded=!this._expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};p.styles=c,e([t({type:String})],p.prototype,"href",void 0),e([i()],p.prototype,"_expanded",void 0),e([t({type:Boolean,reflect:!0})],p.prototype,"active",void 0),e([t({type:Boolean})],p.prototype,"disabled",void 0),e([t({type:String})],p.prototype,"backText",void 0),e([i()],p.prototype,"_level",void 0),e([i()],p.prototype,"_navExpanded",void 0),e([i()],p.prototype,"_navExpandedMobile",void 0),e([i()],p.prototype,"_text",void 0),e([n({slot:"links",selector:"kyn-local-nav-link"})],p.prototype,"navLinks",void 0),e([i()],p.prototype,"_leaveTimer",void 0),e([i()],p.prototype,"menuPosition",void 0),e([n({slot:"icon"})],p.prototype,"_icon",void 0),p=e([a("kyn-local-nav-link")],p);export{p as LocalNavLink};
|
|
322
323
|
//# sourceMappingURL=localNavLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { LitElement, html } 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 LocalNavLinkScss from './localNavLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n static override styles = LocalNavLinkScss;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Expanded state. */\n @state()\n _expanded = false;\n\n /** Active state. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /** Disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /** Link level, supports three levels.\n * @ignore\n */\n @state()\n _level = 1;\n\n /** The local nav desktop expanded state.\n * @internal\n */\n @state()\n _navExpanded = false;\n\n /** The local nav mobile expanded state.\n * @internal\n */\n @state()\n _navExpandedMobile = false;\n\n /** The slotted text.\n * @internal\n */\n @state()\n _text = '';\n\n /**\n * Queries slotted links.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n navLinks!: Array<any>;\n\n /** Timeout function to delay flyout open.\n * @internal\n */\n _enterTimer: any;\n\n /** Timeout function to delay flyout close.\n * @internal\n */\n @state()\n _leaveTimer: any;\n\n /** Menu positioning\n * @internal\n */\n @state()\n menuPosition: any = {};\n\n override render() {\n const classes = {\n 'level--1': this._level == 1,\n 'level--2': this._level == 2,\n 'level--3': this._level == 3,\n 'nav-expanded': this._navExpanded || this._navExpandedMobile,\n 'link-expanded': this._expanded,\n 'link-active': this.active,\n 'link-disabled': this.disabled,\n };\n\n return html`\n <div\n class=${classMap(classes)}\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n <slot name=\"icon\"></slot>\n <span class=\"text\">\n <slot @slotchange=${this._handleTextSlotChange}></slot>\n </span>\n\n ${this.navLinks.length\n ? html`\n <span class=\"arrow-icon\">\n <kd-icon .icon=${arrowIcon}></kd-icon>\n </span>\n `\n : null}\n </a>\n\n <div\n class=\"sub-menu ${this.navLinks.length ? 'has-links' : ''}\"\n style=${this.navLinks.length\n ? `top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`\n : ''}\n >\n ${this.navLinks.length\n ? html`\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <kd-icon .icon=${backIcon}></kd-icon>\n ${this.backText}\n </button>\n `\n : null}\n\n <div class=\"category\">${this._text}</div>\n\n <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n override firstUpdated() {\n this.determineLevel();\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('_navExpanded')) {\n this.updateChildren();\n }\n\n if (\n changedProps.has('_expanded') &&\n this._expanded &&\n this.navLinks.length\n ) {\n this._positionMenu();\n }\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('active') && this.active) {\n this._getSlotText();\n\n const event = new CustomEvent('on-link-active', {\n composed: true,\n bubbles: true,\n detail: {\n text: this._text,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private _handleTextSlotChange() {\n this._getSlotText();\n this.requestUpdate();\n }\n\n private _getSlotText() {\n const Slot: any = this.shadowRoot?.querySelector('.text slot');\n let text = '';\n\n const nodes = Slot.assignedNodes({\n flatten: true,\n });\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this._text = text;\n }\n\n private _handleLinksSlotChange() {\n this.updateChildren();\n this.requestUpdate();\n }\n\n private updateChildren() {\n this.navLinks.forEach((link: any) => {\n link._navExpanded = this._navExpanded;\n });\n }\n\n private determineLevel() {\n const parentNode = this.shadowRoot!.host.parentNode;\n if (parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n this._level = 1;\n } else if (parentNode!.parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n this._level = 2;\n } else {\n this._level = 3;\n }\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse' && this.navLinks.length) {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this._expanded = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (\n e.pointerType === 'mouse' &&\n document.activeElement !== this &&\n this.navLinks.length\n ) {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this._expanded = false;\n }, 150);\n }\n }\n\n private _positionMenu() {\n // determine submenu positioning\n const LinkBounds: any = this.getBoundingClientRect();\n const MenuBounds: any = this.shadowRoot\n ?.querySelector('.sub-menu')\n ?.getBoundingClientRect();\n const Padding = 8;\n const HeaderHeight = 56;\n\n const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n const MenuHalf = MenuBounds.height / 2;\n\n const Top =\n LinkHalf + MenuHalf > window.innerHeight\n ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n : LinkHalf - MenuHalf;\n const Left = LinkBounds.right + Padding;\n\n this.menuPosition = {\n top: Top < HeaderHeight ? HeaderHeight : Top,\n left: Left < 320 ? 320 : Left,\n };\n }\n\n private _handleBack() {\n this._expanded = false;\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.disabled) {\n preventDefault = true;\n }\n\n if (this.navLinks.length) {\n preventDefault = true;\n this._expanded = !this._expanded;\n }\n\n if (preventDefault) {\n e.preventDefault();\n }\n\n this.requestUpdate();\n\n const event = new CustomEvent('on-click', {\n detail: {\n origEvent: e,\n level: this._level,\n defaultPrevented: preventDefault,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this._expanded = false;\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-local-nav-link': LocalNavLink;\n }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","_expanded","active","disabled","backText","_level","_navExpanded","_navExpandedMobile","_text","menuPosition","render","classes","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","_handleTextSlotChange","navLinks","length","arrowIcon","top","left","_handleBack","backIcon","_handleLinksSlotChange","firstUpdated","determineLevel","willUpdate","changedProps","has","updateChildren","_positionMenu","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","link","parentNode","host","nodeName","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","document","activeElement","LinkBounds","getBoundingClientRect","MenuBounds","_b","LinkHalf","height","MenuHalf","Top","window","innerHeight","Left","right","preventDefault","origEvent","level","defaultPrevented","_handleClickOut","composedPath","includes","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","state","Boolean","reflect","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { LitElement, html } 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 LocalNavLinkScss from './localNavLink.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n static override styles = LocalNavLinkScss;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Expanded state. */\n @state()\n _expanded = false;\n\n /** Active state. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /** Disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /** Link level, supports three levels.\n * @ignore\n */\n @state()\n _level = 1;\n\n /** The local nav desktop expanded state.\n * @internal\n */\n @state()\n _navExpanded = false;\n\n /** The local nav mobile expanded state.\n * @internal\n */\n @state()\n _navExpandedMobile = false;\n\n /** The slotted text.\n * @internal\n */\n @state()\n _text = '';\n\n /**\n * Queries slotted links.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n navLinks!: Array<any>;\n\n /** Timeout function to delay flyout open.\n * @internal\n */\n _enterTimer: any;\n\n /** Timeout function to delay flyout close.\n * @internal\n */\n @state()\n _leaveTimer: any;\n\n /** Menu positioning\n * @internal\n */\n @state()\n menuPosition: any = {};\n\n /**\n * Queries slotted icon.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n _icon!: Array<any>;\n\n override render() {\n const classes = {\n 'level--1': this._level == 1,\n 'level--2': this._level == 2,\n 'level--3': this._level == 3,\n 'nav-expanded': this._navExpanded || this._navExpandedMobile,\n 'link-expanded': this._expanded,\n 'link-active': this.active,\n 'link-disabled': this.disabled,\n };\n\n return html`\n <div\n class=${classMap(classes)}\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n <span class=\"icon ${this._icon.length ? 'slotted' : ''}\">\n <slot name=\"icon\"></slot>\n </span>\n\n <span class=\"text\">\n <slot @slotchange=${this._handleTextSlotChange}></slot>\n </span>\n\n ${this.navLinks.length\n ? html`\n <span class=\"arrow-icon\">\n <kd-icon .icon=${arrowIcon}></kd-icon>\n </span>\n `\n : null}\n </a>\n\n <div\n class=\"sub-menu ${this.navLinks.length ? 'has-links' : ''}\"\n style=${this.navLinks.length\n ? `top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`\n : ''}\n >\n ${this.navLinks.length\n ? html`\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <kd-icon .icon=${backIcon}></kd-icon>\n ${this.backText}\n </button>\n `\n : null}\n\n <div class=\"category\">${this._text}</div>\n\n <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n override firstUpdated() {\n this.determineLevel();\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('_navExpanded')) {\n this.updateChildren();\n }\n\n if (\n changedProps.has('_expanded') &&\n this._expanded &&\n this.navLinks.length\n ) {\n this._positionMenu();\n }\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('active') && this.active) {\n this._getSlotText();\n\n const event = new CustomEvent('on-link-active', {\n composed: true,\n bubbles: true,\n detail: {\n text: this._text,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private _handleTextSlotChange() {\n this._getSlotText();\n this.requestUpdate();\n }\n\n private _getSlotText() {\n const Slot: any = this.shadowRoot?.querySelector('.text slot');\n let text = '';\n\n const nodes = Slot.assignedNodes({\n flatten: true,\n });\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this._text = text;\n }\n\n private _handleLinksSlotChange() {\n this.updateChildren();\n this.requestUpdate();\n }\n\n private updateChildren() {\n this.navLinks.forEach((link: any) => {\n link._navExpanded = this._navExpanded;\n });\n }\n\n private determineLevel() {\n const parentNode = this.shadowRoot!.host.parentNode;\n if (parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n this._level = 1;\n } else if (parentNode!.parentNode!.nodeName === 'KYN-LOCAL-NAV') {\n this._level = 2;\n } else {\n this._level = 3;\n }\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse' && this.navLinks.length) {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this._expanded = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (\n e.pointerType === 'mouse' &&\n document.activeElement !== this &&\n this.navLinks.length\n ) {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this._expanded = false;\n }, 150);\n }\n }\n\n private _positionMenu() {\n // determine submenu positioning\n const LinkBounds: any = this.getBoundingClientRect();\n const MenuBounds: any = this.shadowRoot\n ?.querySelector('.sub-menu')\n ?.getBoundingClientRect();\n const Padding = 8;\n const HeaderHeight = 56;\n\n const LinkHalf = LinkBounds.top + LinkBounds.height / 2;\n const MenuHalf = MenuBounds.height / 2;\n\n const Top =\n LinkHalf + MenuHalf > window.innerHeight\n ? LinkHalf - MenuHalf - (LinkHalf + MenuHalf - window.innerHeight)\n : LinkHalf - MenuHalf;\n const Left = LinkBounds.right + Padding;\n\n this.menuPosition = {\n top: Top < HeaderHeight ? HeaderHeight : Top,\n left: Left < 320 ? 320 : Left,\n };\n }\n\n private _handleBack() {\n this._expanded = false;\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.disabled) {\n preventDefault = true;\n }\n\n if (this.navLinks.length) {\n preventDefault = true;\n this._expanded = !this._expanded;\n }\n\n if (preventDefault) {\n e.preventDefault();\n }\n\n this.requestUpdate();\n\n const event = new CustomEvent('on-click', {\n detail: {\n origEvent: e,\n level: this._level,\n defaultPrevented: preventDefault,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this._expanded = false;\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-local-nav-link': LocalNavLink;\n }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","_expanded","active","disabled","backText","_level","_navExpanded","_navExpandedMobile","_text","menuPosition","render","classes","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","_icon","length","_handleTextSlotChange","navLinks","arrowIcon","top","left","_handleBack","backIcon","_handleLinksSlotChange","firstUpdated","determineLevel","willUpdate","changedProps","has","updateChildren","_positionMenu","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","link","parentNode","host","nodeName","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","document","activeElement","LinkBounds","getBoundingClientRect","MenuBounds","_b","LinkHalf","height","MenuHalf","Top","window","innerHeight","Left","right","preventDefault","origEvent","level","defaultPrevented","_handleClickOut","composedPath","includes","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","state","Boolean","reflect","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "1.48.
|
|
3
|
+
"version": "1.48.4",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
"build-storybook": "storybook build",
|
|
18
18
|
"build": "rollup -c && npm run sass-build",
|
|
19
19
|
"sass-utility": "sass --no-source-map --style=compressed src/common/scss/utility:dist/common/css",
|
|
20
|
-
"sass-
|
|
21
|
-
"sass-build": "npm run sass-utility && npm run sass-root",
|
|
20
|
+
"sass-build": "npm run sass-utility",
|
|
22
21
|
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
|
23
22
|
"lint:eslint": "eslint . --ext .js,.ts",
|
|
24
23
|
"lint:lit-analyzer": "lit-analyzer",
|
|
@@ -89,8 +88,8 @@
|
|
|
89
88
|
"chromatic": "^11.2.0",
|
|
90
89
|
"clean-webpack-plugin": "^4.0.0",
|
|
91
90
|
"css-loader": "^6.7.3",
|
|
92
|
-
"eslint": "^8.
|
|
93
|
-
"eslint-plugin-storybook": "^0.
|
|
91
|
+
"eslint": "^8.57.0",
|
|
92
|
+
"eslint-plugin-storybook": "^0.11.1",
|
|
94
93
|
"husky": "^8.0.3",
|
|
95
94
|
"lint-staged": "^13.1.2",
|
|
96
95
|
"lit-analyzer": "^2.0.3",
|
package/common/css/root.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--kd-z-overlay: 100000;--kd-z-header: 10000;--kd-z-local-nav: 9000}:root{--kd-header-height: 56px;--kd-local-nav-width: 56px;--kd-local-nav-width-expanded: 320px}
|
package/common/scss/root.scss
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@use './variables/index.scss';
|