@kyndryl-design-system/shidoka-applications 1.18.2 → 1.18.4
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/localNav/localNav.d.ts.map +1 -1
- package/components/global/localNav/localNav.js +2 -2
- package/components/global/localNav/localNav.js.map +1 -1
- package/components/reusable/sideDrawer/sideDrawer.js +2 -2
- package/components/reusable/sideDrawer/sideDrawer.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAInE;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,yCAAyC;IAEzC,WAAW;;;;MAIT;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,eAAe,EAAG,MAAM,CAAC;IAEzB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAC;IAEF,MAAM;IA2Bf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"localNav.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,2DAA2D,CAAC;AAInE;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,yCAAyC;IAEzC,WAAW;;;;MAIT;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,eAAe,EAAG,MAAM,CAAC;IAEzB;;OAEG;IAEH,SAAS,EAAG,GAAG,CAAC;IAEhB;;OAEG;IAEH,KAAK,EAAE,GAAG,CAAC;IAEF,MAAM;IA2Bf,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,iBAAiB;IAIhB,UAAU,CAAC,YAAY,EAAE,GAAG;IAMrC,OAAO,CAAC,eAAe;IAMd,iBAAiB;IAOjB,oBAAoB;CAQ9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;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
|
|
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 n}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as o}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 a}from'./../../../external/lit-html/directives/class-map.js';import d from"./localNav.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import r from'./../../../external/@carbon/icons/es/chevron--down/16.js';let c=class extends i{constructor(){super(...arguments),this.textStrings={toggleMenu:"Toggle Menu",collapse:"Collapse",menu:"Menu"},this._expanded=!1}render(){return t`
|
|
2
2
|
<nav
|
|
3
3
|
class=${a({"nav--expanded":this._expanded})}
|
|
4
4
|
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
@@ -19,5 +19,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
19
19
|
</div>
|
|
20
20
|
</nav>
|
|
21
21
|
<div class="overlay"></div>
|
|
22
|
-
`}_handleNavToggle(e){this._expanded=!this._expanded;const t=new CustomEvent("on-toggle",{detail:{open:this._expanded,pinned:this._expanded,origEvent:e}});this.dispatchEvent(t)}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this.timer),this._expanded=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&document.activeElement!==this&&(this.timer=setTimeout((()=>{this._expanded=!1,clearTimeout(this.timer)}),100))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){
|
|
22
|
+
`}_handleNavToggle(e){this._expanded=!this._expanded;const t=new CustomEvent("on-toggle",{detail:{open:this._expanded,pinned:this._expanded,origEvent:e}});this.dispatchEvent(t)}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this.timer),this._expanded=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&document.activeElement!==this&&(this.timer=setTimeout((()=>{this._expanded=!1,clearTimeout(this.timer)}),100))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){e.has("_expanded")&&this._updateChildren()}_handleClickOut(e){e.composedPath().includes(this)||(this._expanded=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e))),this.addEventListener("on-link-active",(e=>this._handleLinkActive(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),this.removeEventListener("on-link-active",(e=>this._handleLinkActive(e))),super.disconnectedCallback()}};c.styles=d,e([s({type:Object})],c.prototype,"textStrings",void 0),e([o()],c.prototype,"_expanded",void 0),e([o()],c.prototype,"_activeLinkText",void 0),e([l({selector:"kyn-local-nav-link"})],c.prototype,"_navLinks",void 0),e([o()],c.prototype,"timer",void 0),c=e([n("kyn-local-nav")],c);export{c as LocalNav};
|
|
23
23
|
//# sourceMappingURL=localNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.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 LocalNavScss from './localNav.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--down/16';\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @fires on-toggle - Captures the click event and emits the open state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n static override styles = LocalNavScss;\n\n /** Menu toggle button assistive text. */\n @property({ type: Object })\n textStrings = {\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n };\n\n /** Local nav expanded state.\n * @internal\n */\n @state()\n _expanded = false;\n\n /** Active Link text.\n * @internal\n */\n @state()\n _activeLinkText!: string;\n\n /** Queries top-level slotted links.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-local-nav-link' })\n _navLinks!: any;\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n timer: any;\n\n override render() {\n return html`\n <nav\n class=${classMap({ 'nav--expanded': this._expanded })}\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <button\n class=\"mobile-toggle\"\n title=${this.textStrings.toggleMenu}\n aria-label=${this.textStrings.toggleMenu}\n @click=${(e: Event) => this._handleNavToggle(e)}\n >\n ${this._expanded\n ? this.textStrings.collapse\n : this._activeLinkText || this.textStrings.menu}\n <kd-icon .icon=${arrowIcon}></kd-icon>\n </button>\n\n <div class=\"links\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </nav>\n <div class=\"overlay\"></div>\n `;\n }\n\n private _handleNavToggle(e: Event) {\n this._expanded = !this._expanded;\n\n const event = new CustomEvent('on-toggle', {\n detail: { open: this._expanded, pinned: this._expanded, origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this.timer);\n this._expanded = true;\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse' && document.activeElement !== this) {\n this.timer = setTimeout(() => {\n this._expanded = false;\n clearTimeout(this.timer);\n }, 100);\n }\n }\n\n private _updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._navExpanded = this._expanded;\n });\n }\n\n private handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _handleLinkActive(e: any) {\n
|
|
1
|
+
{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.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 LocalNavScss from './localNav.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport arrowIcon from '@carbon/icons/es/chevron--down/16';\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @fires on-toggle - Captures the click event and emits the open state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n static override styles = LocalNavScss;\n\n /** Menu toggle button assistive text. */\n @property({ type: Object })\n textStrings = {\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n };\n\n /** Local nav expanded state.\n * @internal\n */\n @state()\n _expanded = false;\n\n /** Active Link text.\n * @internal\n */\n @state()\n _activeLinkText!: string;\n\n /** Queries top-level slotted links.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-local-nav-link' })\n _navLinks!: any;\n\n /** Timeout function to delay modal close.\n * @internal\n */\n @state()\n timer: any;\n\n override render() {\n return html`\n <nav\n class=${classMap({ 'nav--expanded': this._expanded })}\n @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n >\n <button\n class=\"mobile-toggle\"\n title=${this.textStrings.toggleMenu}\n aria-label=${this.textStrings.toggleMenu}\n @click=${(e: Event) => this._handleNavToggle(e)}\n >\n ${this._expanded\n ? this.textStrings.collapse\n : this._activeLinkText || this.textStrings.menu}\n <kd-icon .icon=${arrowIcon}></kd-icon>\n </button>\n\n <div class=\"links\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </nav>\n <div class=\"overlay\"></div>\n `;\n }\n\n private _handleNavToggle(e: Event) {\n this._expanded = !this._expanded;\n\n const event = new CustomEvent('on-toggle', {\n detail: { open: this._expanded, pinned: this._expanded, origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this.timer);\n this._expanded = true;\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse' && document.activeElement !== this) {\n this.timer = setTimeout(() => {\n this._expanded = false;\n clearTimeout(this.timer);\n }, 100);\n }\n }\n\n private _updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._navExpanded = this._expanded;\n });\n }\n\n private handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _handleLinkActive(e: any) {\n this._activeLinkText = e.detail.text;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('_expanded')) {\n this._updateChildren();\n }\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this._expanded = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n this.addEventListener('on-link-active', (e) => this._handleLinkActive(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n this.removeEventListener('on-link-active', (e) =>\n this._handleLinkActive(e)\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-local-nav': LocalNav;\n }\n}\n"],"names":["LocalNav","LitElement","constructor","this","textStrings","toggleMenu","collapse","menu","_expanded","render","html","classMap","e","handlePointerLeave","handlePointerEnter","_handleNavToggle","_activeLinkText","arrowIcon","handleSlotChange","event","CustomEvent","detail","open","pinned","origEvent","dispatchEvent","pointerType","clearTimeout","timer","document","activeElement","setTimeout","_updateChildren","_navLinks","forEach","link","_navExpanded","requestUpdate","_handleLinkActive","text","willUpdate","changedProps","has","_handleClickOut","composedPath","includes","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavScss","__decorate","property","type","Object","prototype","state","queryAssignedElements","selector","customElement"],"mappings":"06BAmBO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAAC,YAAc,CACZC,WAAY,cACZC,SAAU,WACVC,KAAM,QAORJ,KAASK,WAAG,CAkHb,CA9FU,MAAAC,GACP,OAAOC,CAAI;;gBAECC,EAAS,CAAE,gBAAiBR,KAAKK;wBACxBI,GAAoBT,KAAKU,mBAAmBD;wBAC5CA,GAAoBT,KAAKW,mBAAmBF;;;;kBAInDT,KAAKC,YAAYC;uBACZF,KAAKC,YAAYC;mBACpBO,GAAaT,KAAKY,iBAAiBH;;YAE3CT,KAAKK,UACHL,KAAKC,YAAYE,SACjBH,KAAKa,iBAAmBb,KAAKC,YAAYG;2BAC5BU;;;;8BAIGd,KAAKe;;;;KAKhC,CAEO,gBAAAH,CAAiBH,GACvBT,KAAKK,WAAaL,KAAKK,UAEvB,MAAMW,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CAAEC,KAAMnB,KAAKK,UAAWe,OAAQpB,KAAKK,UAAWgB,UAAWZ,KAErET,KAAKsB,cAAcN,EACpB,CAEO,kBAAAL,CAAmBF,GACH,UAAlBA,EAAEc,cACJC,aAAaxB,KAAKyB,OAClBzB,KAAKK,WAAY,EAEpB,CAEO,kBAAAK,CAAmBD,GACH,UAAlBA,EAAEc,aAA2BG,SAASC,gBAAkB3B,OAC1DA,KAAKyB,MAAQG,YAAW,KACtB5B,KAAKK,WAAY,EACjBmB,aAAaxB,KAAKyB,MAAM,GACvB,KAEN,CAEO,eAAAI,GACN7B,KAAK8B,UAAUC,SAASC,IACtBA,EAAKC,aAAejC,KAAKK,SAAS,GAErC,CAEO,gBAAAU,GACNf,KAAK6B,kBACL7B,KAAKkC,eACN,CAEO,iBAAAC,CAAkB1B,GACxBT,KAAKa,gBAAkBJ,EAAES,OAAOkB,IACjC,CAEQ,UAAAC,CAAWC,GACdA,EAAaC,IAAI,cACnBvC,KAAK6B,iBAER,CAEO,eAAAW,CAAgB/B,GACjBA,EAAEgC,eAAeC,SAAS1C,QAC7BA,KAAKK,WAAY,EAEpB,CAEQ,iBAAAsC,GACPC,MAAMD,oBAENjB,SAASmB,iBAAiB,SAAUpC,GAAMT,KAAKwC,gBAAgB/B,KAC/DT,KAAK6C,iBAAiB,kBAAmBpC,GAAMT,KAAKmC,kBAAkB1B,IACvE,CAEQ,oBAAAqC,GACPpB,SAASqB,oBAAoB,SAAUtC,GAAMT,KAAKwC,gBAAgB/B,KAClET,KAAK+C,oBAAoB,kBAAmBtC,GAC1CT,KAAKmC,kBAAkB1B,KAGzBmC,MAAME,sBACP,GA/HejD,EAAMmD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAKhBxD,EAAAyD,UAAA,mBAAA,GAMFJ,EAAA,CADCK,KACiB1D,EAAAyD,UAAA,iBAAA,GAMlBJ,EAAA,CADCK,KACwB1D,EAAAyD,UAAA,uBAAA,GAMzBJ,EAAA,CADCM,EAAsB,CAAEC,SAAU,wBACnB5D,EAAAyD,UAAA,iBAAA,GAMhBJ,EAAA,CADCK,KACU1D,EAAAyD,UAAA,aAAA,GAjCAzD,EAAQqD,EAAA,CADpBQ,EAAc,kBACF7D"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
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 s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import a from"./sideDrawer.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/close/32.js';import{css as d}from'./../../../external/@lit/reactive-element/css-tag.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1}render(){const e={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--sm":"sm"===this.size};return t`
|
|
2
|
-
<
|
|
2
|
+
<span class="anchor" @click=${this._openDrawer}>
|
|
3
3
|
<slot name="anchor"></slot>
|
|
4
|
-
</
|
|
4
|
+
</span>
|
|
5
5
|
|
|
6
6
|
<dialog
|
|
7
7
|
class="${r(e)}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n static override styles = [\n SideDrawerScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n transform: translateX(100%);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /**\n * Drawer open state.\n */\n @property({ type: Boolean })\n open = false;\n\n /**\n * Drawer size. `'md'`, or `'sm'`.\n */\n @property({ type: String })\n size = 'md';\n\n /**\n * Title / Heading text, required.\n */\n @property({ type: String })\n titleText = '';\n\n /**\n * Label text, optional.\n */\n @property({ type: String })\n labelText = '';\n\n /**\n * Submit button text.\n */\n @property({ type: String })\n submitBtnText = 'Ok';\n\n /**\n * Cancel button text.\n */\n @property({ type: String })\n cancelBtnText = 'Cancel';\n\n /** Disables the primary button. */\n @property({ type: Boolean })\n submitBtnDisabled = false;\n\n /** Determine whether needs footer */\n @property({ type: Boolean })\n hideFooter = false;\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n dialog: true,\n 'size--md': this.size === 'md',\n 'size--sm': this.size === 'sm',\n };\n\n return html`\n <
|
|
1
|
+
{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n static override styles = [\n SideDrawerScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n transform: translateX(100%);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /**\n * Drawer open state.\n */\n @property({ type: Boolean })\n open = false;\n\n /**\n * Drawer size. `'md'`, or `'sm'`.\n */\n @property({ type: String })\n size = 'md';\n\n /**\n * Title / Heading text, required.\n */\n @property({ type: String })\n titleText = '';\n\n /**\n * Label text, optional.\n */\n @property({ type: String })\n labelText = '';\n\n /**\n * Submit button text.\n */\n @property({ type: String })\n submitBtnText = 'Ok';\n\n /**\n * Cancel button text.\n */\n @property({ type: String })\n cancelBtnText = 'Cancel';\n\n /** Disables the primary button. */\n @property({ type: Boolean })\n submitBtnDisabled = false;\n\n /** Determine whether needs footer */\n @property({ type: Boolean })\n hideFooter = false;\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n dialog: true,\n 'size--md': this.size === 'md',\n 'size--sm': this.size === 'sm',\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openDrawer}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <!-- Header -->\n <header>\n <div class=\"header-label-title\">\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n\n <div class=\"close-wrapper\">\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n </div>\n </header>\n\n <!-- Body -->\n <div class=\"body\">\n <slot></slot>\n </div>\n\n <!-- footer -->\n ${!this.hideFooter\n ? html`\n <div class=\"dialog-footer\">\n <div class=\"actions\">\n <kd-button\n value=\"Ok\"\n ?disabled=${this.submitBtnDisabled}\n ?destructive=${this.destructive}\n @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n >\n ${this.submitBtnText}\n </kd-button>\n\n <kd-button\n value=\"Cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n ${this.cancelBtnText}\n </kd-button>\n </div>\n </div>\n `\n : null}\n </dialog>\n `;\n }\n\n private _openDrawer() {\n this.open = true;\n }\n\n private _closeDrawer(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-side-drawer': SideDrawer;\n }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","submitBtnDisabled","hideFooter","destructive","render","classes","modal","dialog","html","_openDrawer","classMap","e","_closeDrawer","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"qhCAiBO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAwBLC,KAAIC,MAAG,EAMPD,KAAIE,KAAG,KAMPF,KAASG,UAAG,GAMZH,KAASI,UAAG,GAMZJ,KAAaK,cAAG,KAMhBL,KAAaM,cAAG,SAIhBN,KAAiBO,mBAAG,EAIpBP,KAAUQ,YAAG,EAIbR,KAAWS,aAAG,CAsHf,CA1GU,MAAAC,GACP,MAAMC,EAAU,CACdC,OAAO,EACPC,QAAQ,EACR,WAA0B,OAAdb,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOY,CAAI;oCACqBd,KAAKe;;;;;iBAKxBC,EAASL;;;kBAGPM,GAAajB,KAAKkB,aAAaD,EAAG;;;;;cAKpB,KAAnBjB,KAAKI,UACHU,CAAI,uBAAuBd,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;uBAMhBc,GAAajB,KAAKkB,aAAaD,EAAG;;+BAE3BE;;;;;;;;;;;UAWpBnB,KAAKQ,WAuBJ,KAtBAM,CAAI;;;;;gCAKgBd,KAAKO;mCACFP,KAAKS;6BACVQ,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKK;;;;;;6BAMGY,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKM;;;;;;KAQxB,CAEO,WAAAS,GACNf,KAAKC,MAAO,CACb,CAEO,YAAAiB,CAAaD,EAAUG,KAE1BpB,KAAKqB,aACLrB,KAAKqB,aAAerB,KAAKqB,YAAYD,MAEtCpB,KAAKC,MAAO,EACZD,KAAKsB,QAAQF,YAAcA,EAC3BpB,KAAKuB,gBAAgBN,GAExB,CAEO,eAAAM,CAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAapB,KAAKsB,QAAQF,YAC1BO,UAAWV,KAGfjB,KAAK4B,cAAcJ,EACpB,CAEQ,OAAAK,CAAQC,GACXA,EAAaC,IAAI,UACf/B,KAAKC,KACPD,KAAKsB,QAAQU,YAEbhC,KAAKsB,QAAQW,QAGlB,GAtLepC,EAAAqC,OAAS,CACvBC,EACAC,CAAG;;;;;;;;;;;;;;OAqBLC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3C,EAAA4C,UAAA,YAAA,GAMbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACN7C,EAAA4C,UAAA,YAAA,GAMZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACG7C,EAAA4C,UAAA,qBAAA,GAMrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACO7C,EAAA4C,UAAA,qBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACQ3C,EAAA4C,UAAA,yBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC3C,EAAA4C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3C,EAAA4C,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA9C,EAAA4C,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO/C,EAAA4C,UAAA,eAAA,GA5EH5C,EAAUwC,EAAA,CADtBQ,EAAc,oBACFhD"}
|