@kyndryl-design-system/shidoka-applications 1.0.4 → 1.0.5
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/headerFlyout.d.ts +2 -0
- package/components/global/header/headerFlyout.d.ts.map +1 -1
- package/components/global/header/headerFlyout.js +32 -12
- package/components/global/header/headerFlyout.js.map +1 -1
- package/components/global/header/headerFlyout.scss.js +1 -0
- package/components/global/header/headerFlyout.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,6 +14,8 @@ export declare class HeaderFlyout extends LitElement {
|
|
|
14
14
|
hideArrow: boolean;
|
|
15
15
|
/** Button assistive text, title + aria-label. */
|
|
16
16
|
assistiveText: string;
|
|
17
|
+
/** Turns the button into a link. */
|
|
18
|
+
href: string;
|
|
17
19
|
/**
|
|
18
20
|
* Determines if menu should be a small flyout or large flyout for small screens.
|
|
19
21
|
* @ignore
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,iDAAiD;IAEjD,aAAa,SAAM;IAEnB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;
|
|
1
|
+
{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,iDAAiD;IAEjD,aAAa,SAAM;IAEnB,oCAAoC;IAEpC,IAAI,SAAM;IAEV;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IA4Df,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
|
|
@@ -1,20 +1,40 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as l}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as a}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as d}from"../../../common/helpers/helpers.js";import
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as l}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as a}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as d}from"../../../common/helpers/helpers.js";import c from"./headerFlyout.scss.js";import m from'./../../../external/@carbon/icons/es/caret--down/16.js';let p=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.assistiveText="",this.href="",this.breakpointHit=!1}render(){const e={menu:!0,"breakpoint-hit":this.breakpointHit,open:this.open},o={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return t`
|
|
2
2
|
<div
|
|
3
3
|
class="${l(e)}"
|
|
4
4
|
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
5
5
|
>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
${""!==this.href?t`
|
|
7
|
+
<a
|
|
8
|
+
class="btn interactive"
|
|
9
|
+
href=${this.href}
|
|
10
|
+
title=${this.assistiveText}
|
|
11
|
+
aria-label=${this.assistiveText}
|
|
12
|
+
@click=${this.handleClick}
|
|
13
|
+
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
14
|
+
>
|
|
15
|
+
<slot name="button"></slot>
|
|
16
|
+
|
|
17
|
+
${this.hideArrow?null:t`
|
|
18
|
+
<kd-icon slot="button" .icon="${m}"></kd-icon>
|
|
19
|
+
`}
|
|
20
|
+
</a>
|
|
21
|
+
`:t`
|
|
22
|
+
<button
|
|
23
|
+
class="btn interactive"
|
|
24
|
+
title=${this.assistiveText}
|
|
25
|
+
aria-label=${this.assistiveText}
|
|
26
|
+
@click=${this.handleClick}
|
|
27
|
+
@pointerenter=${e=>this.handlePointerEnter(e)}
|
|
28
|
+
>
|
|
29
|
+
<slot name="button"></slot>
|
|
30
|
+
|
|
31
|
+
${this.hideArrow?null:t`
|
|
32
|
+
<kd-icon slot="button" .icon="${m}"></kd-icon>
|
|
33
|
+
`}
|
|
34
|
+
</button>
|
|
35
|
+
`}
|
|
14
36
|
|
|
15
|
-
${this.hideArrow?null:t` <kd-icon slot="button" .icon="${p}"></kd-icon> `}
|
|
16
|
-
</button>
|
|
17
37
|
<div class=${l(o)}><slot></slot></div>
|
|
18
38
|
</div>
|
|
19
|
-
`}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&null!==e.relatedTarget&&(this.open=!1)}handleClick(){this.open=!this.open}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",d((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=a("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};
|
|
39
|
+
`}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&null!==e.relatedTarget&&(this.open=!1)}handleClick(){this.open=!this.open}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",d((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=a("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};p.styles=c,e([s({type:Boolean})],p.prototype,"open",void 0),e([s({type:Boolean})],p.prototype,"anchorLeft",void 0),e([s({type:Boolean})],p.prototype,"hideArrow",void 0),e([s({type:String})],p.prototype,"assistiveText",void 0),e([s({type:String})],p.prototype,"href",void 0),e([n()],p.prototype,"breakpointHit",void 0),e([r()],p.prototype,"slottedElements",void 0),p=e([i("kyn-header-flyout")],p);export{p as HeaderFlyout};
|
|
20
40
|
//# sourceMappingURL=headerFlyout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.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 { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderFlyoutScss from './headerFlyout.scss';\nimport caratDownIcon from '@carbon/icons/es/caret--down/16';\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 = HeaderFlyoutScss;\n\n /** Flyout open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n hideArrow = false;\n\n /** Button assistive text, title + aria-label. */\n @property({ type: String })\n assistiveText = '';\n\n /**\n * Determines if menu should be a small flyout or large flyout for small screens.\n * @ignore\n */\n @state()\n breakpointHit = false;\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n 'breakpoint-hit': this.breakpointHit,\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\n class=\"${classMap(classes)}\"\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n >\n <button\n class=\"btn interactive\"\n
|
|
1
|
+
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.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 { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderFlyoutScss from './headerFlyout.scss';\nimport caratDownIcon from '@carbon/icons/es/caret--down/16';\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 = HeaderFlyoutScss;\n\n /** Flyout open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n hideArrow = false;\n\n /** Button assistive text, title + aria-label. */\n @property({ type: String })\n assistiveText = '';\n\n /** Turns the button into a link. */\n @property({ type: String })\n href = '';\n\n /**\n * Determines if menu should be a small flyout or large flyout for small screens.\n * @ignore\n */\n @state()\n breakpointHit = false;\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n 'breakpoint-hit': this.breakpointHit,\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\n class=\"${classMap(classes)}\"\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n >\n ${this.href !== ''\n ? html`\n <a\n class=\"btn interactive\"\n href=${this.href}\n title=${this.assistiveText}\n aria-label=${this.assistiveText}\n @click=${this.handleClick}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideArrow\n ? html`\n <kd-icon slot=\"button\" .icon=\"${caratDownIcon}\"></kd-icon>\n `\n : null}\n </a>\n `\n : html`\n <button\n class=\"btn interactive\"\n title=${this.assistiveText}\n aria-label=${this.assistiveText}\n @click=${this.handleClick}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideArrow\n ? html`\n <kd-icon slot=\"button\" .icon=\"${caratDownIcon}\"></kd-icon>\n `\n : null}\n </button>\n `}\n\n <div class=${classMap(contentClasses)}><slot></slot></div>\n </div>\n `;\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n this.open = true;\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse' && e.relatedTarget !== null) {\n this.open = false;\n }\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 connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n\n this.testBreakpoint();\n window?.addEventListener(\n 'resize',\n debounce(() => {\n this.testBreakpoint();\n })\n );\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n window?.removeEventListener(\n 'resize',\n debounce(() => {\n this.testBreakpoint();\n })\n );\n\n super.disconnectedCallback();\n }\n\n private testBreakpoint() {\n const nav = querySelectorDeep('kyn-header');\n if (nav) {\n this.breakpointHit = nav!.breakpointHit;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyout': HeaderFlyout;\n }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","assistiveText","href","breakpointHit","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","e","handlePointerLeave","handleClick","handlePointerEnter","caratDownIcon","pointerType","relatedTarget","handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","nav","querySelectorDeep","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"qhCAmBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAUE,YAAG,EAIbF,KAASG,WAAG,EAIZH,KAAaI,cAAG,GAIhBJ,KAAIK,KAAG,GAOPL,KAAaM,eAAG,CA4HjB,CAnHUC,SACP,MAAMC,EAAU,CACdC,MAAM,EACN,iBAAkBT,KAAKM,cACvBL,KAAMD,KAAKC,MAGPS,EAAiB,CACrBC,eAAe,EACf,sBAAuBX,KAAKE,WAC5BU,QAASZ,KAAKa,gBAAgBC,QAGhC,OAAOC,CAAI;;iBAEEC,EAASR;wBACDS,GAAoBjB,KAAKkB,mBAAmBD;;UAE7C,KAAdjB,KAAKK,KACHU,CAAI;;;uBAGOf,KAAKK;wBACJL,KAAKI;6BACAJ,KAAKI;yBACTJ,KAAKmB;gCACGF,GAAoBjB,KAAKoB,mBAAmBH;;;;kBAI1DjB,KAAKG,UAIJ,KAHAY,CAAI;sDAC8BM;;;cAK1CN,CAAI;;;wBAGQf,KAAKI;6BACAJ,KAAKI;yBACTJ,KAAKmB;gCACGF,GAAoBjB,KAAKoB,mBAAmBH;;;;kBAI1DjB,KAAKG,UAIJ,KAHAY,CAAI;sDAC8BM;;;;;qBAMjCL,EAASN;;KAG3B,CAEOU,mBAAmBH,GACH,UAAlBA,EAAEK,cACJtB,KAAKC,MAAO,EAEf,CAEOiB,mBAAmBD,GACH,UAAlBA,EAAEK,aAA+C,OAApBL,EAAEM,gBACjCvB,KAAKC,MAAO,EAEf,CAEOkB,cACNnB,KAAKC,MAAQD,KAAKC,IACnB,CAEOuB,eAAeP,GAChBA,EAAEQ,eAAeC,SAAS1B,QAC7BA,KAAKC,MAAO,EAEf,CAEQ0B,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUb,GAAMjB,KAAKwB,eAAeP,KAE9DjB,KAAK+B,iBACL,OAAAC,aAAA,IAAAA,QAAAA,OAAQF,iBACN,SACAG,GAAS,KACPjC,KAAK+B,gBAAgB,IAG1B,CAEQG,uBACPL,SAASM,oBAAoB,SAAUlB,GAAMjB,KAAKwB,eAAeP,KAEjE,OAAAe,aAAA,IAAAA,QAAAA,OAAQG,oBACN,SACAF,GAAS,KACPjC,KAAK+B,gBAAgB,KAIzBH,MAAMM,sBACP,CAEOH,iBACN,MAAMK,EAAMC,EAAkB,cAC1BD,IACFpC,KAAKM,cAAgB8B,EAAK9B,cAE7B,GAtJeT,EAAMyC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL9C,EAAA+C,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC9C,EAAA+C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACA9C,EAAA+C,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACChD,EAAA+C,UAAA,qBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACRhD,EAAA+C,UAAA,YAAA,GAOVJ,EAAA,CADCM,KACqBjD,EAAA+C,UAAA,qBAAA,GAOtBJ,EAAA,CADCO,KACoClD,EAAA+C,UAAA,uBAAA,GAnC1B/C,EAAY2C,EAAA,CADxBQ,EAAc,sBACFnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerFlyout.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|