@kyndryl-design-system/shidoka-applications 1.23.0 → 1.23.2
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/headerLink.d.ts +2 -0
- package/components/global/header/headerLink.d.ts.map +1 -1
- package/components/global/header/headerLink.js +2 -2
- package/components/global/header/headerLink.js.map +1 -1
- package/components/reusable/widget/sample-layout.d.ts +0 -14
- package/components/reusable/widget/sample-layout.d.ts.map +1 -1
- package/components/reusable/widget/widgetGridstack.d.ts +3 -1
- package/components/reusable/widget/widgetGridstack.d.ts.map +1 -1
- package/components/reusable/widget/widgetGridstack.js +2 -2
- package/components/reusable/widget/widgetGridstack.js.map +1 -1
- package/package.json +1 -1
|
@@ -59,6 +59,8 @@ export declare class HeaderLink extends LitElement {
|
|
|
59
59
|
private handleClickOut;
|
|
60
60
|
private determineLevel;
|
|
61
61
|
private _positionMenu;
|
|
62
|
+
/** @internal */
|
|
63
|
+
private _debounceResize;
|
|
62
64
|
firstUpdated(): void;
|
|
63
65
|
willUpdate(changedProps: any): void;
|
|
64
66
|
connectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2DAA2D,CAAC;AAKnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,qCAAqC;IAErC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IAwEf,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,aAAa;
|
|
1
|
+
{"version":3,"file":"headerLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2DAA2D,CAAC;AAKnE;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC,uBAAuB;IAEvB,IAAI,UAAS;IAEb,gBAAgB;IAEhB,IAAI,SAAM;IAEV,oIAAoI;IAEpI,MAAM,UAAoB;IAE1B,oIAAoI;IAEpI,GAAG,SAAM;IAET,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,SAAK;IAEV,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,iFAAiF;IAEjF,WAAW,SAAY;IAEvB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,qCAAqC;IAErC,WAAW,SAAM;IAEjB;;;OAGG;IAEH,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAE,GAAG,CAAC;IAEjB;;OAEG;IAEH,YAAY,EAAE,GAAG,CAAM;IAEd,MAAM;IAwEf,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,aAAa;IAuBrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,UAAU,CAAC;KACnC;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 i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}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 l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{debounce as d}from"../../../common/helpers/helpers.js";import h from"./headerLink.scss.js";import"../../reusable/textInput/textInput.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/chevron--right/16.js';import c from'./../../../external/@carbon/icons/es/arrow--left/16.js';import p from'./../../../external/@carbon/icons/es/search/24.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this._searchTerm="",this.menuPosition={}}render(){const e={menu:this.slottedEls.length,"level--1":1==this.level,"level--2":2==this.level,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level},o={menu__content:!0,slotted:this.slottedEls.length},s=this.querySelectorAll("kyn-header-link");return t`
|
|
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 i}from'./../../../external/lit-element/lit-element.js';import{customElement as o}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 l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import{debounce as d}from"../../../common/helpers/helpers.js";import h from"./headerLink.scss.js";import"../../reusable/textInput/textInput.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/chevron--right/16.js';import c from'./../../../external/@carbon/icons/es/arrow--left/16.js';import p from'./../../../external/@carbon/icons/es/search/24.js';let m=class extends i{constructor(){super(...arguments),this.open=!1,this.href="",this.target="_self",this.rel="",this.isActive=!1,this.level=1,this.divider=!1,this.searchLabel="Search",this.backText="Back",this._searchTerm="",this.menuPosition={},this._debounceResize=d((()=>{this.determineLevel()}))}render(){const e={menu:this.slottedEls.length,"level--1":1==this.level,"level--2":2==this.level,divider:this.divider,open:this.open},i={"nav-link":!0,active:this.isActive,interactive:1==this.level},o={menu__content:!0,slotted:this.slottedEls.length},s=this.querySelectorAll("kyn-header-link");return t`
|
|
2
2
|
<div
|
|
3
3
|
class="${r(e)}"
|
|
4
4
|
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
@@ -41,5 +41,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
41
41
|
<slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
|
|
42
42
|
</div>
|
|
43
43
|
</div>
|
|
44
|
-
`}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll("kyn-header-link").forEach((e=>{var t,i;const o=null===(i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("slot"))||void 0===i?void 0:i.assignedNodes({flatten:!0});let s="";for(let e=0;e<o.length;e++)s+=o[e].textContent.trim();s.toLowerCase().includes(this._searchTerm)?e.style.display="block":e.style.display="none"})),this._positionMenu()}_handleBack(){this.open=!1}_handleLinksSlotChange(){this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&this.slottedEls.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this.open=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&this.slottedEls.length&&""===this._searchTerm&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this.open=!1}),150))}handleClick(e){let t=!1;this.slottedEls.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._searchTerm="",this._searchFilter())}determineLevel(){
|
|
44
|
+
`}_handleSearch(e){this._searchTerm=e.detail.value.toLowerCase(),this._searchFilter()}_searchFilter(){this.querySelectorAll("kyn-header-link").forEach((e=>{var t,i;const o=null===(i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("slot"))||void 0===i?void 0:i.assignedNodes({flatten:!0});let s="";for(let e=0;e<o.length;e++)s+=o[e].textContent.trim();s.toLowerCase().includes(this._searchTerm)?e.style.display="block":e.style.display="none"})),this._positionMenu()}_handleBack(){this.open=!1}_handleLinksSlotChange(){this.requestUpdate()}handlePointerEnter(e){"mouse"===e.pointerType&&this.slottedEls.length&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this.open=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&this.slottedEls.length&&""===this._searchTerm&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this.open=!1}),150))}handleClick(e){let t=!1;this.slottedEls.length&&(t=!0,e.preventDefault(),this.open=!this.open);const i=new CustomEvent("on-click",{detail:{origEvent:e,defaultPrevented:t}});this.dispatchEvent(i)}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1,this._searchTerm="",this._searchFilter())}determineLevel(){const e=this.parentNode;"KYN-HEADER-LINK"===e.nodeName||"links"===e.slot||window.innerWidth<672&&"KYN-HEADER-FLYOUT"===e.nodeName?this.level=2:this.level=1}_positionMenu(){var e,t;const i=this.getBoundingClientRect(),o=null===(t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".menu__content"))||void 0===t?void 0:t.getBoundingClientRect(),s=i.top+i.height/2,n=o.height/2,l=s+n>window.innerHeight?s-n-(s+n-window.innerHeight):s-n;this.menuPosition={top:l<56?56:l,left:i.right+8}}firstUpdated(){this.determineLevel()}willUpdate(e){e.has("open")&&this.open&&this._positionMenu()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}};m.styles=h,e([s({type:Boolean})],m.prototype,"open",void 0),e([s({type:String})],m.prototype,"href",void 0),e([s({type:String})],m.prototype,"target",void 0),e([s({type:String})],m.prototype,"rel",void 0),e([s({type:Boolean})],m.prototype,"isActive",void 0),e([n()],m.prototype,"level",void 0),e([s({type:Boolean})],m.prototype,"divider",void 0),e([s({type:String})],m.prototype,"searchLabel",void 0),e([s({type:String})],m.prototype,"backText",void 0),e([n()],m.prototype,"_searchTerm",void 0),e([l({slot:"links"})],m.prototype,"slottedEls",void 0),e([n()],m.prototype,"_leaveTimer",void 0),e([n()],m.prototype,"menuPosition",void 0),m=e([o("kyn-header-link")],m);export{m as HeaderLink};
|
|
45
45
|
//# sourceMappingURL=headerLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.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 { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '../../reusable/textInput';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\nimport searchIcon from '@carbon/icons/es/search/24';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n static override styles = HeaderLinkScss;\n\n /** Link open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n @property({ type: String })\n target = '_self' as const;\n\n /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n @property({ type: String })\n rel = '';\n\n /** Link active state, for example when URL path matches link href. */\n @property({ type: Boolean })\n isActive = false;\n\n /** Link level, supports two levels.\n * @ignore\n */\n @state()\n level = 1;\n\n /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n @property({ type: Boolean })\n divider = false;\n\n /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n @property({ type: String })\n searchLabel = 'Search';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /** Text for mobile \"Back\" button. */\n @state()\n _searchTerm = '';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links' })\n slottedEls!: Array<HTMLElement>;\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 menu: this.slottedEls.length,\n 'level--1': this.level == 1,\n 'level--2': this.level == 2,\n divider: this.divider,\n open: this.open,\n };\n\n const linkClasses = {\n 'nav-link': true,\n active: this.isActive,\n interactive: this.level == 1,\n };\n\n const menuClasses = {\n menu__content: true,\n slotted: this.slottedEls.length,\n };\n\n const Links = this.querySelectorAll('kyn-header-link');\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\n target=${this.target}\n rel=${this.rel}\n href=${this.href}\n class=${classMap(linkClasses)}\n @click=${(e: Event) => this.handleClick(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <slot></slot>\n\n ${this.slottedEls.length\n ? html` <kd-icon class=\"arrow\" .icon=${arrowIcon}></kd-icon> `\n : null}\n </a>\n\n <div\n class=${classMap(menuClasses)}\n style=${`top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`}\n >\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <kd-icon .icon=${backIcon}></kd-icon>\n ${this.backText}\n </button>\n\n ${Links.length > 5\n ? html`\n <kyn-text-input\n hideLabel\n placeholder=${this.searchLabel}\n value=${this._searchTerm}\n @on-input=${(e: Event) => this._handleSearch(e)}\n >\n <kd-icon .icon=${searchIcon} slot=\"icon\"></kd-icon>\n ${this.searchLabel}\n </kyn-text-input>\n `\n : null}\n\n <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _handleSearch(e: any) {\n this._searchTerm = e.detail.value.toLowerCase();\n this._searchFilter();\n }\n\n private _searchFilter() {\n const Links: any = this.querySelectorAll('kyn-header-link');\n\n Links.forEach((link: any) => {\n // get link text\n const nodes: any = link.shadowRoot?.querySelector('slot')?.assignedNodes({\n flatten: true,\n });\n let linkText = '';\n for (let i = 0; i < nodes.length; i++) {\n linkText += nodes[i].textContent.trim();\n }\n\n if (linkText.toLowerCase().includes(this._searchTerm)) {\n link.style.display = 'block';\n } else {\n link.style.display = 'none';\n }\n });\n\n this._positionMenu();\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private _handleLinksSlotChange() {\n this.requestUpdate();\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse' && this.slottedEls.length) {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this.open = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (\n e.pointerType === 'mouse' &&\n this.slottedEls.length &&\n this._searchTerm === ''\n ) {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this.open = false;\n }, 150);\n }\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.slottedEls.length) {\n preventDefault = true;\n e.preventDefault();\n this.open = !this.open;\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e, defaultPrevented: preventDefault },\n });\n this.dispatchEvent(event);\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n this._searchTerm = '';\n this._searchFilter();\n }\n }\n\n private determineLevel() {\n const ParentNode: any = this.shadowRoot?.host.parentNode;\n\n if (\n ParentNode.nodeName === 'KYN-HEADER-LINK' ||\n ParentNode.slot === 'links'\n ) {\n this.level = 2;\n } else {\n if (\n window.innerWidth < 672 &&\n ParentNode.nodeName === 'KYN-HEADER-FLYOUT'\n ) {\n this.level = 2;\n } else {\n this.level = 1;\n }\n }\n }\n\n private _positionMenu() {\n // determine submenu positioning\n const LinkBounds: any = this.getBoundingClientRect();\n const MenuBounds: any = this.shadowRoot\n ?.querySelector('.menu__content')\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\n this.menuPosition = {\n top: Top < HeaderHeight ? HeaderHeight : Top,\n left: LinkBounds.right + Padding,\n };\n }\n\n override firstUpdated() {\n this.determineLevel();\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('open') && this.open) {\n this._positionMenu();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n\n window?.addEventListener(\n 'resize',\n debounce(() => {\n this.determineLevel();\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.determineLevel();\n })\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav-link': HeaderLink;\n }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","_searchTerm","menuPosition","render","classes","menu","slottedEls","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","value","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","determineLevel","ParentNode","host","parentNode","nodeName","slot","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","debounce","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"headerLink.js","sources":["../../../../src/components/global/header/headerLink.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 { debounce } from '../../../common/helpers/helpers';\nimport HeaderLinkScss from './headerLink.scss';\nimport '../../reusable/textInput';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport arrowIcon from '@carbon/icons/es/chevron--right/16';\nimport backIcon from '@carbon/icons/es/arrow--left/16';\nimport searchIcon from '@carbon/icons/es/search/24';\n\n/**\n * Component for navigation links within the Header.\n * @fires on-click - Captures the click event and emits the original event details.\n * @slot unnamed - Slot for link text/content.\n * @slot links - Slot for sublinks (up to two levels).\n */\n@customElement('kyn-header-link')\nexport class HeaderLink extends LitElement {\n static override styles = HeaderLinkScss;\n\n /** Link open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Defines a target attribute for where to load the URL. Possible options include \"_self\" (default), \"_blank\", \"_parent\", \"_top\" */\n @property({ type: String })\n target = '_self' as const;\n\n /** Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship */\n @property({ type: String })\n rel = '';\n\n /** Link active state, for example when URL path matches link href. */\n @property({ type: Boolean })\n isActive = false;\n\n /** Link level, supports two levels.\n * @ignore\n */\n @state()\n level = 1;\n\n /** DEPRECATED. Adds a 1px shadow to the bottom of the link. */\n @property({ type: Boolean })\n divider = false;\n\n /** Label for sub-menu link search input, which is visible with > 5 sub-links. */\n @property({ type: String })\n searchLabel = 'Search';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /** Text for mobile \"Back\" button. */\n @state()\n _searchTerm = '';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links' })\n slottedEls!: Array<HTMLElement>;\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 menu: this.slottedEls.length,\n 'level--1': this.level == 1,\n 'level--2': this.level == 2,\n divider: this.divider,\n open: this.open,\n };\n\n const linkClasses = {\n 'nav-link': true,\n active: this.isActive,\n interactive: this.level == 1,\n };\n\n const menuClasses = {\n menu__content: true,\n slotted: this.slottedEls.length,\n };\n\n const Links = this.querySelectorAll('kyn-header-link');\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\n target=${this.target}\n rel=${this.rel}\n href=${this.href}\n class=${classMap(linkClasses)}\n @click=${(e: Event) => this.handleClick(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <slot></slot>\n\n ${this.slottedEls.length\n ? html` <kd-icon class=\"arrow\" .icon=${arrowIcon}></kd-icon> `\n : null}\n </a>\n\n <div\n class=${classMap(menuClasses)}\n style=${`top: ${this.menuPosition.top}px; left: ${this.menuPosition.left}px;`}\n >\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <kd-icon .icon=${backIcon}></kd-icon>\n ${this.backText}\n </button>\n\n ${Links.length > 5\n ? html`\n <kyn-text-input\n hideLabel\n placeholder=${this.searchLabel}\n value=${this._searchTerm}\n @on-input=${(e: Event) => this._handleSearch(e)}\n >\n <kd-icon .icon=${searchIcon} slot=\"icon\"></kd-icon>\n ${this.searchLabel}\n </kyn-text-input>\n `\n : null}\n\n <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _handleSearch(e: any) {\n this._searchTerm = e.detail.value.toLowerCase();\n this._searchFilter();\n }\n\n private _searchFilter() {\n const Links: any = this.querySelectorAll('kyn-header-link');\n\n Links.forEach((link: any) => {\n // get link text\n const nodes: any = link.shadowRoot?.querySelector('slot')?.assignedNodes({\n flatten: true,\n });\n let linkText = '';\n for (let i = 0; i < nodes.length; i++) {\n linkText += nodes[i].textContent.trim();\n }\n\n if (linkText.toLowerCase().includes(this._searchTerm)) {\n link.style.display = 'block';\n } else {\n link.style.display = 'none';\n }\n });\n\n this._positionMenu();\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private _handleLinksSlotChange() {\n this.requestUpdate();\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse' && this.slottedEls.length) {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this.open = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (\n e.pointerType === 'mouse' &&\n this.slottedEls.length &&\n this._searchTerm === ''\n ) {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this.open = false;\n }, 150);\n }\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.slottedEls.length) {\n preventDefault = true;\n e.preventDefault();\n this.open = !this.open;\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e, defaultPrevented: preventDefault },\n });\n this.dispatchEvent(event);\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n this._searchTerm = '';\n this._searchFilter();\n }\n }\n\n private determineLevel() {\n const ParentNode: any = this.parentNode;\n\n if (\n ParentNode.nodeName === 'KYN-HEADER-LINK' ||\n ParentNode.slot === 'links'\n ) {\n this.level = 2;\n } else {\n if (\n window.innerWidth < 672 &&\n ParentNode.nodeName === 'KYN-HEADER-FLYOUT'\n ) {\n this.level = 2;\n } else {\n this.level = 1;\n }\n }\n }\n\n private _positionMenu() {\n // determine submenu positioning\n const LinkBounds: any = this.getBoundingClientRect();\n const MenuBounds: any = this.shadowRoot\n ?.querySelector('.menu__content')\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\n this.menuPosition = {\n top: Top < HeaderHeight ? HeaderHeight : Top,\n left: LinkBounds.right + Padding,\n };\n }\n\n /** @internal */\n private _debounceResize = debounce(() => {\n this.determineLevel();\n });\n\n override firstUpdated() {\n this.determineLevel();\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('open') && this.open) {\n this._positionMenu();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n\n window?.addEventListener('resize', this._debounceResize);\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n window?.removeEventListener('resize', this._debounceResize);\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-nav-link': HeaderLink;\n }\n}\n"],"names":["HeaderLink","LitElement","constructor","this","open","href","target","rel","isActive","level","divider","searchLabel","backText","_searchTerm","menuPosition","_debounceResize","debounce","determineLevel","render","classes","menu","slottedEls","length","linkClasses","active","interactive","menuClasses","menu__content","slotted","Links","querySelectorAll","html","classMap","e","handlePointerLeave","handlePointerEnter","handleClick","arrowIcon","top","left","_handleBack","backIcon","_handleSearch","searchIcon","_handleLinksSlotChange","detail","value","toLowerCase","_searchFilter","forEach","link","nodes","_b","_a","shadowRoot","querySelector","assignedNodes","flatten","linkText","i","textContent","trim","includes","style","display","_positionMenu","requestUpdate","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","preventDefault","event","CustomEvent","origEvent","defaultPrevented","dispatchEvent","handleClickOut","composedPath","ParentNode","parentNode","nodeName","slot","window","innerWidth","LinkBounds","getBoundingClientRect","MenuBounds","LinkHalf","height","MenuHalf","Top","innerHeight","right","firstUpdated","willUpdate","changedProps","has","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderLinkScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"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"}
|
|
@@ -6,20 +6,6 @@ declare const _default: {
|
|
|
6
6
|
h: number;
|
|
7
7
|
id: string;
|
|
8
8
|
}[];
|
|
9
|
-
xl: {
|
|
10
|
-
minW: number;
|
|
11
|
-
minH: number;
|
|
12
|
-
w: number;
|
|
13
|
-
h: number;
|
|
14
|
-
id: string;
|
|
15
|
-
}[];
|
|
16
|
-
lg: {
|
|
17
|
-
minW: number;
|
|
18
|
-
minH: number;
|
|
19
|
-
w: number;
|
|
20
|
-
h: number;
|
|
21
|
-
id: string;
|
|
22
|
-
}[];
|
|
23
9
|
md: {
|
|
24
10
|
minW: number;
|
|
25
11
|
minH: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sample-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/sample-layout.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sample-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/sample-layout.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAmNE"}
|
|
@@ -8,7 +8,7 @@ export declare class WidgetGridstack extends LitElement {
|
|
|
8
8
|
static styles: import("lit").CSSResultGroup;
|
|
9
9
|
/** GridStack layout/widget size/position definitions for each breakpoint. */
|
|
10
10
|
layout: any;
|
|
11
|
-
/** GridStack
|
|
11
|
+
/** GridStack config. */
|
|
12
12
|
gridstackConfig: any;
|
|
13
13
|
/** GridStack instance. */
|
|
14
14
|
grid: any;
|
|
@@ -21,6 +21,8 @@ export declare class WidgetGridstack extends LitElement {
|
|
|
21
21
|
willUpdate(changedProps: any): void;
|
|
22
22
|
private _saveLayout;
|
|
23
23
|
private _updateLayout;
|
|
24
|
+
/** @internal */
|
|
25
|
+
private _debounceResize;
|
|
24
26
|
connectedCallback(): void;
|
|
25
27
|
disconnectedCallback(): void;
|
|
26
28
|
private _setBreakpoint;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widgetGridstack.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAU;IAEhC,6EAA6E;IAE7E,MAAM,EAAE,GAAG,CAAM;IAEjB,wBAAwB;IAExB,eAAe,EAAE,GAAG,CAAmB;IAEvC,0BAA0B;IAE1B,IAAI,EAAG,GAAG,CAAC;IAEX;;OAEG;IAEH,WAAW,SAAM;IAER,MAAM;IAQN,YAAY;IA6BZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAWrC,OAAO,CAAC,WAAW;
|
|
1
|
+
{"version":3,"file":"widgetGridstack.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAU;IAEhC,6EAA6E;IAE7E,MAAM,EAAE,GAAG,CAAM;IAEjB,wBAAwB;IAExB,eAAe,EAAE,GAAG,CAAmB;IAEvC,0BAA0B;IAE1B,IAAI,EAAG,GAAG,CAAC;IAEX;;OAEG;IAEH,WAAW,SAAM;IAER,MAAM;IAQN,YAAY;IA6BZ,UAAU,CAAC,YAAY,EAAE,GAAG;IAWrC,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,aAAa;IAarB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,iBAAiB;IAMjB,oBAAoB;IAM7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,eAAe,CAAC;KACzC;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}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 r}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import
|
|
1
|
+
import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}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 r}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import d from"./widgetGridstack.scss.js";import{querySelectorDeep as a}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as n}from"../../../common/helpers/helpers.js";import{Config as l}from"../../../common/helpers/gridstack.js";import{GridStack as m}from'./../../../external/gridstack/dist/gridstack.js';let c=class extends o{constructor(){super(...arguments),this.layout={},this.gridstackConfig=l,this._breakpoint="",this._debounceResize=n((()=>{this._setBreakpoint()}))}render(){return e`
|
|
2
2
|
<div class="grid-wrapper">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</div>
|
|
5
|
-
`}firstUpdated(){this._setBreakpoint();const t=this.querySelector(".grid-stack");this.grid=m.init(this.gridstackConfig,t),this.grid.on("dragstart",(t=>{const e=t.target;
|
|
5
|
+
`}firstUpdated(){this._setBreakpoint();const t=this.querySelector(".grid-stack");this.grid=m.init(this.gridstackConfig,t),this.grid.on("dragstart",(t=>{const e=t.target;a("kyn-widget",e).dragActive=!0})),this.grid.on("dragstop",(t=>{const e=t.target;a("kyn-widget",e).dragActive=!1,this._saveLayout()})),this.grid.on("resizestop",(()=>{this._saveLayout()}))}willUpdate(t){this.layout&&this._breakpoint&&(t.has("_breakpoint")||t.has("layout"))&&this._updateLayout()}_saveLayout(){let t=this.grid.save(!1);t=t.map((t=>({...t,w:t.w||t.minW,h:t.h||t.minH}))),this.layout[this._breakpoint]=t;const e=new CustomEvent("on-grid-save",{detail:{layout:this.layout}});this.dispatchEvent(e)}_updateLayout(){const t=this.layout[this._breakpoint]||this.layout.max;this.grid&&(this.grid.load(t),this.grid.setAnimation(!0))}connectedCallback(){super.connectedCallback(),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}_setBreakpoint(){this._breakpoint=getComputedStyle(document.documentElement).getPropertyValue("--kd-current-breakpoint")}};c.styles=d,t([s({type:Object})],c.prototype,"layout",void 0),t([s({type:Object})],c.prototype,"gridstackConfig",void 0),t([s({attribute:!1})],c.prototype,"grid",void 0),t([r()],c.prototype,"_breakpoint",void 0),c=t([i("kyn-widget-gridstack")],c);export{c as WidgetGridstack};
|
|
6
6
|
//# sourceMappingURL=widgetGridstack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widgetGridstack.js","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport Styles from './widgetGridstack.scss';\nimport { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport GridstackConfig from '../../../common/helpers/gridstack';\nimport { GridStack } from 'gridstack';\n\n/**\n * GridStack wrapper that includes Shidoka default config and styles.\n * @fires on-grid-save - Emits the GridStack save() method results (new layout) on dragstop and resizestop.\n * @slot unnamed - Slot for .grid-stack container element.\n */\n@customElement('kyn-widget-gridstack')\nexport class WidgetGridstack extends LitElement {\n static override styles = Styles;\n\n /** GridStack layout/widget size/position definitions for each breakpoint. */\n @property({ type: Object })\n layout: any = {};\n\n /** GridStack
|
|
1
|
+
{"version":3,"file":"widgetGridstack.js","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport Styles from './widgetGridstack.scss';\nimport { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport GridstackConfig from '../../../common/helpers/gridstack';\nimport { GridStack } from 'gridstack';\n\n/**\n * GridStack wrapper that includes Shidoka default config and styles.\n * @fires on-grid-save - Emits the GridStack save() method results (new layout) on dragstop and resizestop.\n * @slot unnamed - Slot for .grid-stack container element.\n */\n@customElement('kyn-widget-gridstack')\nexport class WidgetGridstack extends LitElement {\n static override styles = Styles;\n\n /** GridStack layout/widget size/position definitions for each breakpoint. */\n @property({ type: Object })\n layout: any = {};\n\n /** GridStack config. */\n @property({ type: Object })\n gridstackConfig: any = GridstackConfig;\n\n /** GridStack instance. */\n @property({ attribute: false })\n grid!: any;\n\n /** Current breakpoint.\n * @internal\n */\n @state()\n _breakpoint = '';\n\n override render() {\n return html`\n <div class=\"grid-wrapper\">\n <slot></slot>\n </div>\n `;\n }\n\n override firstUpdated() {\n this._setBreakpoint();\n\n // initialize the GridStack with Shidoka default options\n const GridstackEl: any = this.querySelector('.grid-stack');\n this.grid = GridStack.init(this.gridstackConfig, GridstackEl);\n\n // set widget drag state on dragstart\n this.grid.on('dragstart', (e: Event) => {\n const El: any = e.target;\n const Widget: any = querySelectorDeep('kyn-widget', El);\n Widget.dragActive = true;\n });\n\n // unset widget drag state and save layout on dragstop\n this.grid.on('dragstop', (e: Event) => {\n const El: any = e.target;\n const Widget: any = querySelectorDeep('kyn-widget', El);\n Widget.dragActive = false;\n\n this._saveLayout();\n });\n\n // save layout on resizestop\n this.grid.on('resizestop', () => {\n this._saveLayout();\n });\n }\n\n override willUpdate(changedProps: any) {\n if (\n this.layout &&\n this._breakpoint &&\n (changedProps.has('_breakpoint') || changedProps.has('layout'))\n ) {\n // update the gridstack size/position of each widget when breakpoint or layout changes\n this._updateLayout();\n }\n }\n\n private _saveLayout() {\n // get new grid layout\n let NewLayout = this.grid.save(false);\n\n // manually update each widget's properties because GridStack drops \"w\" or \"h\" if they match their respective min values and freezes the browser\n NewLayout = NewLayout.map((Widget: any) => {\n return {\n ...Widget,\n w: Widget.w || Widget.minW,\n h: Widget.h || Widget.minH,\n };\n });\n\n // update layout for current breakpoint\n this.layout[this._breakpoint] = NewLayout;\n\n // emit save event with new layout in detail\n const event = new CustomEvent('on-grid-save', {\n detail: { layout: this.layout },\n });\n this.dispatchEvent(event);\n }\n\n private _updateLayout() {\n // get layout for current breakpoint\n const Layout = this.layout[this._breakpoint] || this.layout['max'];\n\n if (this.grid) {\n // load grid layout\n this.grid.load(Layout);\n\n // enable gridstack animations\n this.grid.setAnimation(true);\n }\n }\n\n /** @internal */\n private _debounceResize = debounce(() => {\n this._setBreakpoint();\n });\n\n override connectedCallback() {\n super.connectedCallback();\n\n window?.addEventListener('resize', this._debounceResize);\n }\n\n override disconnectedCallback() {\n window?.removeEventListener('resize', this._debounceResize);\n\n super.disconnectedCallback();\n }\n\n private _setBreakpoint() {\n // get and set current breakpoint variable\n this._breakpoint = getComputedStyle(\n document.documentElement\n ).getPropertyValue('--kd-current-breakpoint');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-widget-gridstack': WidgetGridstack;\n }\n}\n"],"names":["WidgetGridstack","LitElement","constructor","this","layout","gridstackConfig","GridstackConfig","_breakpoint","_debounceResize","debounce","_setBreakpoint","render","html","firstUpdated","GridstackEl","querySelector","grid","GridStack","init","on","e","El","target","querySelectorDeep","dragActive","_saveLayout","willUpdate","changedProps","has","_updateLayout","NewLayout","save","map","Widget","w","minW","h","minH","event","CustomEvent","detail","dispatchEvent","Layout","load","setAnimation","connectedCallback","super","window","addEventListener","disconnectedCallback","removeEventListener","getComputedStyle","document","documentElement","getPropertyValue","styles","Styles","__decorate","property","type","Object","prototype","attribute","state","customElement"],"mappings":"0+BAcO,IAAMA,EAAN,cAA8BC,EAA9B,WAAAC,uBAKLC,KAAMC,OAAQ,GAIdD,KAAeE,gBAAQC,EAUvBH,KAAWI,YAAG,GAuFNJ,KAAAK,gBAAkBC,GAAS,KACjCN,KAAKO,gBAAgB,GAqBxB,CA3GU,MAAAC,GACP,OAAOC,CAAI;;;;KAKZ,CAEQ,YAAAC,GACPV,KAAKO,iBAGL,MAAMI,EAAmBX,KAAKY,cAAc,eAC5CZ,KAAKa,KAAOC,EAAUC,KAAKf,KAAKE,gBAAiBS,GAGjDX,KAAKa,KAAKG,GAAG,aAAcC,IACzB,MAAMC,EAAUD,EAAEE,OACEC,EAAkB,aAAcF,GAC7CG,YAAa,CAAI,IAI1BrB,KAAKa,KAAKG,GAAG,YAAaC,IACxB,MAAMC,EAAUD,EAAEE,OACEC,EAAkB,aAAcF,GAC7CG,YAAa,EAEpBrB,KAAKsB,aAAa,IAIpBtB,KAAKa,KAAKG,GAAG,cAAc,KACzBhB,KAAKsB,aAAa,GAErB,CAEQ,UAAAC,CAAWC,GAEhBxB,KAAKC,QACLD,KAAKI,cACJoB,EAAaC,IAAI,gBAAkBD,EAAaC,IAAI,YAGrDzB,KAAK0B,eAER,CAEO,WAAAJ,GAEN,IAAIK,EAAY3B,KAAKa,KAAKe,MAAK,GAG/BD,EAAYA,EAAUE,KAAKC,IAClB,IACFA,EACHC,EAAGD,EAAOC,GAAKD,EAAOE,KACtBC,EAAGH,EAAOG,GAAKH,EAAOI,SAK1BlC,KAAKC,OAAOD,KAAKI,aAAeuB,EAGhC,MAAMQ,EAAQ,IAAIC,YAAY,eAAgB,CAC5CC,OAAQ,CAAEpC,OAAQD,KAAKC,UAEzBD,KAAKsC,cAAcH,EACpB,CAEO,aAAAT,GAEN,MAAMa,EAASvC,KAAKC,OAAOD,KAAKI,cAAgBJ,KAAKC,OAAY,IAE7DD,KAAKa,OAEPb,KAAKa,KAAK2B,KAAKD,GAGfvC,KAAKa,KAAK4B,cAAa,GAE1B,CAOQ,iBAAAC,GACPC,MAAMD,oBAEN,OAAAE,aAAA,IAAAA,QAAAA,OAAQC,iBAAiB,SAAU7C,KAAKK,gBACzC,CAEQ,oBAAAyC,GACP,OAAAF,aAAA,IAAAA,QAAAA,OAAQG,oBAAoB,SAAU/C,KAAKK,iBAE3CsC,MAAMG,sBACP,CAEO,cAAAvC,GAENP,KAAKI,YAAc4C,iBACjBC,SAASC,iBACTC,iBAAiB,0BACpB,GA9HetD,EAAMuD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACD5D,EAAA6D,UAAA,cAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACqB5D,EAAA6D,UAAA,uBAAA,GAIvCJ,EAAA,CADCC,EAAS,CAAEI,WAAW,KACZ9D,EAAA6D,UAAA,YAAA,GAMXJ,EAAA,CADCM,KACgB/D,EAAA6D,UAAA,mBAAA,GAnBN7D,EAAeyD,EAAA,CAD3BO,EAAc,yBACFhE"}
|