@kyndryl-design-system/shidoka-applications 1.1.13 → 1.1.14
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 +4 -0
- package/components/reusable/overflowMenu/overflowMenu.d.ts.map +1 -1
- package/components/reusable/overflowMenu/overflowMenu.js +5 -5
- package/components/reusable/overflowMenu/overflowMenu.js.map +1 -1
- package/components/reusable/overflowMenu/overflowMenu.scss.js +11 -2
- package/components/reusable/overflowMenu/overflowMenu.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,12 +11,16 @@ export declare class OverflowMenu extends LitElement {
|
|
|
11
11
|
open: boolean;
|
|
12
12
|
/** Anchors the menu to the right of the button. */
|
|
13
13
|
anchorRight: boolean;
|
|
14
|
+
/** Use fixed instead of absolute position. Useful when placed within elements with overflow scroll. */
|
|
15
|
+
fixed: boolean;
|
|
14
16
|
/** Button assistive text.. */
|
|
15
17
|
assistiveText: string;
|
|
16
18
|
/** Queries for slotted menu items.
|
|
17
19
|
* @internal
|
|
18
20
|
*/
|
|
19
21
|
menuItems: any;
|
|
22
|
+
_btnEl: any;
|
|
23
|
+
_menuEl: any;
|
|
20
24
|
/**
|
|
21
25
|
* A generated unique id
|
|
22
26
|
* @ignore
|
|
@@ -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;
|
|
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;AAUvC,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,uGAAuG;IAEvG,KAAK,UAAS;IAEd,8BAA8B;IAE9B,aAAa,SAAiB;IAE9B;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAGhB,MAAM,EAAG,GAAG,CAAC;IAGb,OAAO,EAAG,GAAG,CAAC;IAEd;;;OAGG;IACM,OAAO,CAAC,GAAG,CAAuB;IAElC,MAAM;IAiCf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IAyBlB,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"}
|
|
@@ -1,19 +1,19 @@
|
|
|
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
|
|
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{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as m}from'./../../../external/lit-html/directives/class-map.js';import a from"./overflowMenu.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/overflow-menu--horizontal/16.js';let h=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorRight=!1,this.fixed=!1,this.assistiveText="Toggle Menu",this._id=crypto.randomUUID()}render(){const e={btn:!0,open:this.open},o={menu:!0,open:this.open,right:this.anchorRight,fixed:this.fixed};return t`
|
|
2
2
|
<div class="overflow-menu">
|
|
3
3
|
<button
|
|
4
|
-
class=${
|
|
4
|
+
class=${m(e)}
|
|
5
5
|
@click=${this.toggleMenu}
|
|
6
6
|
aria-controls=${this._id}
|
|
7
7
|
aria-expanded=${this.open}
|
|
8
8
|
title=${this.assistiveText}
|
|
9
9
|
aria-label=${this.assistiveText}
|
|
10
10
|
>
|
|
11
|
-
<kd-icon .icon=${
|
|
11
|
+
<kd-icon .icon=${d}></kd-icon>
|
|
12
12
|
</button>
|
|
13
13
|
|
|
14
|
-
<div id=${this._id} class=${
|
|
14
|
+
<div id=${this._id} class=${m(o)}>
|
|
15
15
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
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()}};
|
|
18
|
+
`}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{detail:{open:this.open}});this.dispatchEvent(e)}toggleMenu(){if(this.open=!this.open,this._emitToggleEvent(),this.open)if(this.fixed){const e=this._btnEl.getBoundingClientRect().top+this._btnEl.getBoundingClientRect().height;e+48*this.menuItems.length>window.innerHeight?(this._menuEl.style.top="initial",this._menuEl.style.bottom="0px"):(this._menuEl.style.top=e+"px",this._menuEl.style.bottom="initial")}else this._menuEl.style.top="initial"}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()}};h.styles=a,e([s({type:Boolean})],h.prototype,"open",void 0),e([s({type:Boolean})],h.prototype,"anchorRight",void 0),e([s({type:Boolean})],h.prototype,"fixed",void 0),e([s({type:String})],h.prototype,"assistiveText",void 0),e([r({selector:"kyn-overflow-menu-item"})],h.prototype,"menuItems",void 0),e([l(".btn")],h.prototype,"_btnEl",void 0),e([l(".menu")],h.prototype,"_menuEl",void 0),e([n()],h.prototype,"_id",void 0),h=e([i("kyn-overflow-menu")],h);export{h 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 * @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":"
|
|
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 query,\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 /** Use fixed instead of absolute position. Useful when placed within elements with overflow scroll. */\n @property({ type: Boolean })\n fixed = 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 @query('.btn')\n _btnEl!: any;\n\n @query('.menu')\n _menuEl!: 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 fixed: this.fixed,\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 // set menu position on open\n if (this.open) {\n if (this.fixed) {\n const Top =\n this._btnEl.getBoundingClientRect().top +\n this._btnEl.getBoundingClientRect().height;\n const MenuHeight = this.menuItems.length * 48;\n\n if (Top + MenuHeight > window.innerHeight) {\n this._menuEl.style.top = 'initial';\n this._menuEl.style.bottom = '0px';\n } else {\n this._menuEl.style.top = Top + 'px';\n this._menuEl.style.bottom = 'initial';\n }\n } else {\n this._menuEl.style.top = 'initial';\n }\n }\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","fixed","assistiveText","_id","crypto","randomUUID","render","buttonClasses","btn","menuClasses","menu","right","html","classMap","toggleMenu","overflowIcon","handleSlotChange","_emitToggleEvent","event","CustomEvent","detail","dispatchEvent","Top","_btnEl","getBoundingClientRect","top","height","menuItems","length","window","innerHeight","_menuEl","style","bottom","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","query","state","customElement"],"mappings":"khCAmBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAWE,aAAG,EAIdF,KAAKG,OAAG,EAIRH,KAAaI,cAAG,cAkBCJ,KAAAK,IAAMC,OAAOC,YAqG/B,CAnGUC,SACP,MAAMC,EAAgB,CACpBC,KAAK,EACLT,KAAMD,KAAKC,MAGPU,EAAc,CAClBC,MAAM,EACNX,KAAMD,KAAKC,KACXY,MAAOb,KAAKE,YACZC,MAAOH,KAAKG,OAGd,OAAOW,CAAI;;;kBAGGC,EAASN;mBACRT,KAAKgB;0BACEhB,KAAKK;0BACLL,KAAKC;kBACbD,KAAKI;uBACAJ,KAAKI;;2BAEDa;;;kBAGTjB,KAAKK,aAAaU,EAASJ;8BACfX,KAAKkB;;;KAIhC,CAEOC,mBACN,MAAMC,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNrB,KAAMD,KAAKC,QAGfD,KAAKuB,cAAcH,EACpB,CAEOJ,aAKN,GAJAhB,KAAKC,MAAQD,KAAKC,KAClBD,KAAKmB,mBAGDnB,KAAKC,KACP,GAAID,KAAKG,MAAO,CACd,MAAMqB,EACJxB,KAAKyB,OAAOC,wBAAwBC,IACpC3B,KAAKyB,OAAOC,wBAAwBE,OAGlCJ,EAFuC,GAAxBxB,KAAK6B,UAAUC,OAEXC,OAAOC,aAC5BhC,KAAKiC,QAAQC,MAAMP,IAAM,UACzB3B,KAAKiC,QAAQC,MAAMC,OAAS,QAE5BnC,KAAKiC,QAAQC,MAAMP,IAAMH,EAAM,KAC/BxB,KAAKiC,QAAQC,MAAMC,OAAS,UAE/B,MACCnC,KAAKiC,QAAQC,MAAMP,IAAM,SAG9B,CAEOT,mBACNlB,KAAK6B,UAAUO,SAASC,IACtBA,EAAKnC,YAAcF,KAAKE,WAAW,GAEtC,CAEQoC,WAAWC,GACdA,EAAaC,IAAI,gBACnBxC,KAAK6B,UAAUO,SAASC,IACtBA,EAAKnC,YAAcF,KAAKE,WAAW,GAGxC,CAEOuC,eAAeC,GAChBA,EAAEC,eAAeC,SAAS5C,QAC7BA,KAAKC,MAAO,EACZD,KAAKmB,mBAER,CAEQ0B,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUN,GAAM1C,KAAKyC,eAAeC,IAC/D,CAEQO,uBACPF,SAASG,oBAAoB,SAAUR,GAAM1C,KAAKyC,eAAeC,KAEjEI,MAAMG,sBACP,GAtIepD,EAAMsD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3D,EAAA4D,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3D,EAAA4D,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACJ3D,EAAA4D,UAAA,aAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACY7D,EAAA4D,UAAA,qBAAA,GAM9BJ,EAAA,CADCM,EAAsB,CAAEC,SAAU,4BACnB/D,EAAA4D,UAAA,iBAAA,GAGhBJ,EAAA,CADCQ,EAAM,SACMhE,EAAA4D,UAAA,cAAA,GAGbJ,EAAA,CADCQ,EAAM,UACOhE,EAAA4D,UAAA,eAAA,GAMLJ,EAAA,CAARS,KAA0CjE,EAAA4D,UAAA,WAAA,GAnChC5D,EAAYwD,EAAA,CADxBU,EAAc,sBACFlE"}
|
|
@@ -45,14 +45,23 @@ button:focus {
|
|
|
45
45
|
transition: transform 150ms ease-out, opacity 150ms ease-out, visibility 150ms ease-out;
|
|
46
46
|
opacity: 0;
|
|
47
47
|
visibility: hidden;
|
|
48
|
-
transform:
|
|
48
|
+
transform: scale(0);
|
|
49
|
+
transform-origin: top left;
|
|
49
50
|
}
|
|
50
51
|
.menu.open {
|
|
51
52
|
opacity: 1;
|
|
52
53
|
visibility: visible;
|
|
53
|
-
transform:
|
|
54
|
+
transform: scale(1);
|
|
55
|
+
}
|
|
56
|
+
.menu.fixed {
|
|
57
|
+
position: fixed;
|
|
54
58
|
}
|
|
55
59
|
.menu.right {
|
|
56
60
|
right: 0;
|
|
61
|
+
transform-origin: top right;
|
|
62
|
+
}
|
|
63
|
+
.menu.right.fixed {
|
|
64
|
+
right: initial;
|
|
65
|
+
margin-left: -168px;
|
|
57
66
|
}`;export{e as default};
|
|
58
67
|
//# sourceMappingURL=overflowMenu.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflowMenu.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"overflowMenu.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|