@kyndryl-design-system/shidoka-applications 1.1.2 → 1.1.3
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/reusable/overflowMenu/overflowMenu.d.ts +2 -0
- package/components/reusable/overflowMenu/overflowMenu.d.ts.map +1 -1
- package/components/reusable/overflowMenu/overflowMenu.js +1 -1
- package/components/reusable/overflowMenu/overflowMenu.js.map +1 -1
- package/components/reusable/table/story-helpers/action-menu.d.ts +5 -3
- package/components/reusable/table/story-helpers/action-menu.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import '@kyndryl-design-system/shidoka-foundation/components/icon';
|
|
|
3
3
|
/**
|
|
4
4
|
* Overflow Menu.
|
|
5
5
|
* @slot unnamed - Slot for overflow menu items.
|
|
6
|
+
* @fires on-toggle - Capture the open/close event and emits the new state.
|
|
6
7
|
*/
|
|
7
8
|
export declare class OverflowMenu extends LitElement {
|
|
8
9
|
static styles: import("lit").CSSResultGroup;
|
|
@@ -22,6 +23,7 @@ export declare class OverflowMenu extends LitElement {
|
|
|
22
23
|
*/
|
|
23
24
|
private _id;
|
|
24
25
|
render(): import("lit-html").TemplateResult<1>;
|
|
26
|
+
private _emitToggleEvent;
|
|
25
27
|
private toggleMenu;
|
|
26
28
|
private handleSlotChange;
|
|
27
29
|
willUpdate(changedProps: any): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflowMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAGnE
|
|
1
|
+
{"version":3,"file":"overflowMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAGnE;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAQ;IAE9B,uBAAuB;IAEvB,IAAI,UAAS;IAEb,mDAAmD;IAEnD,WAAW,UAAS;IAEpB,8BAA8B;IAE9B,aAAa,SAAiB;IAE9B;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;;OAGG;IACM,OAAO,CAAC,GAAG,CAAuB;IAElC,MAAM;IAgCf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,gBAAgB;IAMf,UAAU,CAAC,YAAY,EAAE,GAAG;IAQrC,OAAO,CAAC,cAAc;IAOb,iBAAiB;IAMjB,oBAAoB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
|
|
@@ -15,5 +15,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
15
15
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
|
-
`}toggleMenu(){this.open=!this.open}handleSlotChange(){this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}willUpdate(e){e.has("anchorRight")&&this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),super.disconnectedCallback()}};c.styles=a,e([i({type:Boolean})],c.prototype,"open",void 0),e([i({type:Boolean})],c.prototype,"anchorRight",void 0),e([i({type:String})],c.prototype,"assistiveText",void 0),e([l({selector:"kyn-overflow-menu-item"})],c.prototype,"menuItems",void 0),e([n()],c.prototype,"_id",void 0),c=e([s("kyn-overflow-menu")],c);export{c as OverflowMenu};
|
|
18
|
+
`}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{detail:{open:this.open}});this.dispatchEvent(e)}toggleMenu(){this.open=!this.open,this._emitToggleEvent()}handleSlotChange(){this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}willUpdate(e){e.has("anchorRight")&&this.menuItems.forEach((e=>{e.anchorRight=this.anchorRight}))}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._emitToggleEvent())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),super.disconnectedCallback()}};c.styles=a,e([i({type:Boolean})],c.prototype,"open",void 0),e([i({type:Boolean})],c.prototype,"anchorRight",void 0),e([i({type:String})],c.prototype,"assistiveText",void 0),e([l({selector:"kyn-overflow-menu-item"})],c.prototype,"menuItems",void 0),e([n()],c.prototype,"_id",void 0),c=e([s("kyn-overflow-menu")],c);export{c as OverflowMenu};
|
|
19
19
|
//# sourceMappingURL=overflowMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.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 SCSS from './overflowMenu.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--horizontal/16';\n\n/**\n * Overflow Menu.\n * @slot unnamed - Slot for overflow menu items.\n */\n@customElement('kyn-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = SCSS;\n\n /** Menu open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchors the menu to the right of the button. */\n @property({ type: Boolean })\n anchorRight = false;\n\n /** Button assistive text.. */\n @property({ type: String })\n assistiveText = 'Toggle Menu';\n\n /** Queries for slotted menu items.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-overflow-menu-item' })\n menuItems!: any;\n\n /**\n * A generated unique id\n * @ignore\n */\n @state() private _id = crypto.randomUUID();\n\n override render() {\n const buttonClasses = {\n btn: true,\n open: this.open,\n };\n\n const menuClasses = {\n menu: true,\n open: this.open,\n right: this.anchorRight,\n };\n\n return html`\n <div class=\"overflow-menu\">\n <button\n class=${classMap(buttonClasses)}\n @click=${this.toggleMenu}\n aria-controls=${this._id}\n aria-expanded=${this.open}\n title=${this.assistiveText}\n aria-label=${this.assistiveText}\n >\n <kd-icon .icon=${overflowIcon}></kd-icon>\n </button>\n\n <div id=${this._id} class=${classMap(menuClasses)}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private toggleMenu() {\n this.open = !this.open;\n }\n\n private handleSlotChange() {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('anchorRight')) {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\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\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-overflow-menu': OverflowMenu;\n }\n}\n"],"names":["OverflowMenu","LitElement","constructor","this","open","anchorRight","assistiveText","_id","crypto","randomUUID","render","buttonClasses","btn","menuClasses","menu","right","html","classMap","toggleMenu","overflowIcon","handleSlotChange","menuItems","forEach","item","willUpdate","changedProps","has","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","SCSS","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","selector","state","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/reusable/overflowMenu/overflowMenu.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 SCSS from './overflowMenu.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport overflowIcon from '@carbon/icons/es/overflow-menu--horizontal/16';\n\n/**\n * Overflow Menu.\n * @slot unnamed - Slot for overflow menu items.\n * @fires on-toggle - Capture the open/close event and emits the new state.\n */\n@customElement('kyn-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = SCSS;\n\n /** Menu open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchors the menu to the right of the button. */\n @property({ type: Boolean })\n anchorRight = false;\n\n /** Button assistive text.. */\n @property({ type: String })\n assistiveText = 'Toggle Menu';\n\n /** Queries for slotted menu items.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-overflow-menu-item' })\n menuItems!: any;\n\n /**\n * A generated unique id\n * @ignore\n */\n @state() private _id = crypto.randomUUID();\n\n override render() {\n const buttonClasses = {\n btn: true,\n open: this.open,\n };\n\n const menuClasses = {\n menu: true,\n open: this.open,\n right: this.anchorRight,\n };\n\n return html`\n <div class=\"overflow-menu\">\n <button\n class=${classMap(buttonClasses)}\n @click=${this.toggleMenu}\n aria-controls=${this._id}\n aria-expanded=${this.open}\n title=${this.assistiveText}\n aria-label=${this.assistiveText}\n >\n <kd-icon .icon=${overflowIcon}></kd-icon>\n </button>\n\n <div id=${this._id} class=${classMap(menuClasses)}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _emitToggleEvent() {\n const event = new CustomEvent('on-toggle', {\n detail: {\n open: this.open,\n },\n });\n this.dispatchEvent(event);\n }\n\n private toggleMenu() {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n\n private handleSlotChange() {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('anchorRight')) {\n this.menuItems.forEach((item: any) => {\n item.anchorRight = this.anchorRight;\n });\n }\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n this._emitToggleEvent();\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-overflow-menu': OverflowMenu;\n }\n}\n"],"names":["OverflowMenu","LitElement","constructor","this","open","anchorRight","assistiveText","_id","crypto","randomUUID","render","buttonClasses","btn","menuClasses","menu","right","html","classMap","toggleMenu","overflowIcon","handleSlotChange","_emitToggleEvent","event","CustomEvent","detail","dispatchEvent","menuItems","forEach","item","willUpdate","changedProps","has","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","SCSS","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","selector","state","customElement"],"mappings":"07BAkBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAWE,aAAG,EAIdF,KAAaG,cAAG,cAYCH,KAAAI,IAAMC,OAAOC,YAgF/B,CA9EUC,SACP,MAAMC,EAAgB,CACpBC,KAAK,EACLR,KAAMD,KAAKC,MAGPS,EAAc,CAClBC,MAAM,EACNV,KAAMD,KAAKC,KACXW,MAAOZ,KAAKE,aAGd,OAAOW,CAAI;;;kBAGGC,EAASN;mBACRR,KAAKe;0BACEf,KAAKI;0BACLJ,KAAKC;kBACbD,KAAKG;uBACAH,KAAKG;;2BAEDa;;;kBAGThB,KAAKI,aAAaU,EAASJ;8BACfV,KAAKiB;;;KAIhC,CAEOC,mBACN,MAAMC,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNpB,KAAMD,KAAKC,QAGfD,KAAKsB,cAAcH,EACpB,CAEOJ,aACNf,KAAKC,MAAQD,KAAKC,KAClBD,KAAKkB,kBACN,CAEOD,mBACNjB,KAAKuB,UAAUC,SAASC,IACtBA,EAAKvB,YAAcF,KAAKE,WAAW,GAEtC,CAEQwB,WAAWC,GACdA,EAAaC,IAAI,gBACnB5B,KAAKuB,UAAUC,SAASC,IACtBA,EAAKvB,YAAcF,KAAKE,WAAW,GAGxC,CAEO2B,eAAeC,GAChBA,EAAEC,eAAeC,SAAShC,QAC7BA,KAAKC,MAAO,EACZD,KAAKkB,mBAER,CAEQe,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUN,GAAM9B,KAAK6B,eAAeC,IAC/D,CAEQO,uBACPF,SAASG,oBAAoB,SAAUR,GAAM9B,KAAK6B,eAAeC,KAEjEI,MAAMG,sBACP,GAvGexC,EAAM0C,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL/C,EAAAgD,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE/C,EAAAgD,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACYjD,EAAAgD,UAAA,qBAAA,GAM9BJ,EAAA,CADCM,EAAsB,CAAEC,SAAU,4BACnBnD,EAAAgD,UAAA,iBAAA,GAMPJ,EAAA,CAARQ,KAA0CpD,EAAAgD,UAAA,WAAA,GAzBhChD,EAAY4C,EAAA,CADxBS,EAAc,sBACFrD"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import '../../overflowMenu';
|
|
2
3
|
export declare class ActionMenu extends LitElement {
|
|
3
4
|
static styles: import("lit").CSSResultGroup[];
|
|
4
5
|
opened: boolean;
|
|
5
6
|
handleDelete: (id: number) => void;
|
|
6
7
|
itemId: number;
|
|
7
|
-
toggleMenu(
|
|
8
|
-
deleteHandler: (itemId: number, e:
|
|
9
|
-
actionHandler: (itemId: number, e:
|
|
8
|
+
toggleMenu(): void;
|
|
9
|
+
deleteHandler: (itemId: number, e: any) => void;
|
|
10
|
+
actionHandler: (itemId: number, e: any) => void;
|
|
11
|
+
_handleToggle: (e: any) => void;
|
|
10
12
|
render(): import("lit-html").TemplateResult<1>;
|
|
11
13
|
}
|
|
12
14
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/reusable/table/story-helpers/action-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/reusable/table/story-helpers/action-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,oBAAoB,CAAC;AAI5B,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAAY;IAGlC,MAAM,UAAS;IAGf,YAAY,OAAQ,MAAM,UAExB;IAGF,MAAM,SAAK;IAEX,UAAU;IAIV,aAAa,WAAY,MAAM,KAAK,GAAG,UAIrC;IAEF,aAAa,WAAY,MAAM,KAAK,GAAG,UAIrC;IAEF,aAAa,MAAO,GAAG,UAErB;IAEO,MAAM;CAmChB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|