@kyndryl-design-system/shidoka-applications 1.0.3 → 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/components/reusable/dropdown/dropdownOption.d.ts.map +1 -1
- package/components/reusable/dropdown/dropdownOption.js +2 -2
- package/components/reusable/dropdown/dropdownOption.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,+BAAsB;IAE5C,oBAAoB;IAEpB,KAAK,SAAM;IAEX,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,EAAE,GAAG,CAAM;IAEN,MAAM;IAoCf,OAAO,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"dropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,+BAAsB;IAE5C,oBAAoB;IAEpB,KAAK,SAAM;IAEX,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,EAAE,GAAG,CAAM;IAEN,MAAM;IAoCf,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,UAAU;CAWnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
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 s}from'./../../../external/lit-element/lit-element.js';import{customElement as
|
|
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 s}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import d from"./dropdownOption.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/checkmark/20.js';let r=class extends s{constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1,this.highlighted=!1,this.multiple=!1,this.text=""}render(){return t`
|
|
2
2
|
<li
|
|
3
3
|
role="option"
|
|
4
4
|
?highlighted=${this.highlighted}
|
|
@@ -26,5 +26,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
26
26
|
|
|
27
27
|
${this.selected&&!this.multiple?t`<kd-icon .icon=${n}></kd-icon>`:null}
|
|
28
28
|
</li>
|
|
29
|
-
`}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});
|
|
29
|
+
`}handleSlotChange(e){const t=e.target.assignedNodes({flatten:!0});let s="";for(let e=0;e<t.length;e++)s+=t[e].textContent.trim();this.text=s}handleClick(e){if(this.disabled)return;this.multiple?this.selected=!this.selected:this.selected=!0;const t=new CustomEvent("on-click",{bubbles:!0,composed:!0,detail:{selected:this.selected,value:this.value,origEvent:e}});this.dispatchEvent(t)}handleBlur(e){const t=new CustomEvent("on-blur",{bubbles:!0,composed:!0,detail:{origEvent:e}});this.dispatchEvent(t)}};r.styles=d,e([l({type:String})],r.prototype,"value",void 0),e([l({type:Boolean,reflect:!0})],r.prototype,"selected",void 0),e([l({type:Boolean})],r.prototype,"disabled",void 0),e([o()],r.prototype,"highlighted",void 0),e([o()],r.prototype,"multiple",void 0),e([l()],r.prototype,"text",void 0),r=e([i("kyn-dropdown-option")],r);export{r as DropdownOption};
|
|
30
30
|
//# sourceMappingURL=dropdownOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DropdownOptionScss from './dropdownOption.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport checkmarkIcon from '@carbon/icons/es/checkmark/20';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @slot unnamed - Slot for option text.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = DropdownOptionScss;\n\n /** Option value. */\n @property({ type: String })\n value = '';\n\n /** Option selected state. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @state()\n multiple = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @property()\n text: any = '';\n\n override render() {\n return html`\n <li\n role=\"option\"\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n ?multiple=${this.multiple}\n @click=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n tabindex=\"-1\"\n >\n <span>\n ${this.multiple\n ? html`\n <input\n type=\"checkbox\"\n tabindex=\"-1\"\n @mousedown=${(e: any) => e.preventDefault()}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n />\n `\n : null}\n\n <slot @slotchange=${(e: any) => this.handleSlotChange(e)}></slot>\n </span>\n\n ${this.selected && !this.multiple\n ? html`<kd-icon .icon=${checkmarkIcon}></kd-icon>`\n : null}\n </li>\n `;\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n
|
|
1
|
+
{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DropdownOptionScss from './dropdownOption.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport checkmarkIcon from '@carbon/icons/es/checkmark/20';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @slot unnamed - Slot for option text.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = DropdownOptionScss;\n\n /** Option value. */\n @property({ type: String })\n value = '';\n\n /** Option selected state. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @state()\n multiple = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @property()\n text: any = '';\n\n override render() {\n return html`\n <li\n role=\"option\"\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n ?multiple=${this.multiple}\n @click=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n tabindex=\"-1\"\n >\n <span>\n ${this.multiple\n ? html`\n <input\n type=\"checkbox\"\n tabindex=\"-1\"\n @mousedown=${(e: any) => e.preventDefault()}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n />\n `\n : null}\n\n <slot @slotchange=${(e: any) => this.handleSlotChange(e)}></slot>\n </span>\n\n ${this.selected && !this.multiple\n ? html`<kd-icon .icon=${checkmarkIcon}></kd-icon>`\n : null}\n </li>\n `;\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n let text = '';\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 handleClick(e: Event) {\n // prevent click if disabled\n if (this.disabled) {\n return;\n }\n\n // update selected state\n if (this.multiple) {\n this.selected = !this.selected;\n } else {\n this.selected = true;\n }\n\n // emit selected value, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: {\n selected: this.selected,\n value: this.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleBlur(e: any) {\n // emit blur event, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: {\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown-option': DropdownOption;\n }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","highlighted","multiple","text","render","html","e","handleClick","handleBlur","preventDefault","handleSlotChange","checkmarkIcon","nodes","target","assignedNodes","flatten","i","length","textContent","trim","event","CustomEvent","bubbles","composed","detail","origEvent","dispatchEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":"0zBAYO,IAAMA,EAAN,cAA6BC,EAA7BC,kCAKLC,KAAKC,MAAG,GAIRD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAOXH,KAAWI,aAAG,EAMdJ,KAAQK,UAAG,EAOXL,KAAIM,KAAQ,EAuFb,CArFUC,SACP,OAAOC,CAAI;;;uBAGQR,KAAKI;oBACRJ,KAAKE;oBACLF,KAAKG;oBACLH,KAAKK;iBACPI,GAAWT,KAAKU,YAAYD;gBAC7BA,GAAWT,KAAKW,WAAWF;;;;YAIhCT,KAAKK,SACHG,CAAI;;;;+BAIcC,GAAWA,EAAEG;6BAChBZ,KAAKE;6BACLF,KAAKE;8BACJF,KAAKG;;gBAGrB;;8BAEiBM,GAAWT,KAAKa,iBAAiBJ;;;UAGtDT,KAAKE,WAAaF,KAAKK,SACrBG,CAAI,kBAAkBM,eACtB;;KAGT,CAEOD,iBAAiBJ,GAEvB,MAAMM,EAAQN,EAAEO,OAAOC,cAAc,CAAEC,SAAS,IAChD,IAAIZ,EAAO,GAEX,IAAK,IAAIa,EAAI,EAAGA,EAAIJ,EAAMK,OAAQD,IAChCb,GAAQS,EAAMI,GAAGE,YAAYC,OAG/BtB,KAAKM,KAAOA,CACb,CAEOI,YAAYD,GAElB,GAAIT,KAAKG,SACP,OAIEH,KAAKK,SACPL,KAAKE,UAAYF,KAAKE,SAEtBF,KAAKE,UAAW,EAIlB,MAAMqB,EAAQ,IAAIC,YAAY,WAAY,CACxCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNzB,SAAUF,KAAKE,SACfD,MAAOD,KAAKC,MACZ2B,UAAWnB,KAGfT,KAAK6B,cAAcN,EACpB,CAEOZ,WAAWF,GAEjB,MAAMc,EAAQ,IAAIC,YAAY,UAAW,CACvCC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNC,UAAWnB,KAGfT,KAAK6B,cAAcN,EACpB,GAtHe1B,EAAMiC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPtC,EAAAuC,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACnBzC,EAAAuC,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDxC,EAAAuC,UAAA,gBAAA,GAOjBJ,EAAA,CADCO,KACmB1C,EAAAuC,UAAA,mBAAA,GAMpBJ,EAAA,CADCO,KACgB1C,EAAAuC,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,KACcpC,EAAAuC,UAAA,YAAA,GAjCJvC,EAAcmC,EAAA,CAD1BQ,EAAc,wBACF3C"}
|