@kyndryl-design-system/shidoka-applications 2.20.0 → 2.20.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/headerFlyout.js +1 -1
- package/components/global/localNav/localNav.js +14 -5
- package/components/global/localNav/localNav.js.map +1 -1
- package/components/global/localNav/localNavLink.d.ts.map +1 -1
- package/components/global/localNav/localNavLink.js +19 -8
- package/components/global/localNav/localNavLink.js.map +1 -1
- package/components/reusable/daterangepicker/daterangepicker.d.ts.map +1 -1
- package/components/reusable/daterangepicker/daterangepicker.js +1 -1
- package/components/reusable/daterangepicker/daterangepicker.js.map +1 -1
- package/components/reusable/tabs/tab.d.ts +0 -1
- package/components/reusable/tabs/tab.d.ts.map +1 -1
- package/components/reusable/tabs/tab.js +41 -101
- package/components/reusable/tabs/tab.js.map +1 -1
- package/components/reusable/tabs/tabs.d.ts +0 -2
- package/components/reusable/tabs/tabs.d.ts.map +1 -1
- package/components/reusable/tabs/tabs.js +22 -15
- package/components/reusable/tabs/tabs.js.map +1 -1
- package/package.json +2 -2
|
@@ -296,7 +296,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
|
|
|
296
296
|
color: var(--kd-color-text-title-secondary);
|
|
297
297
|
font-weight: 500;
|
|
298
298
|
text-transform: uppercase;
|
|
299
|
-
padding:
|
|
299
|
+
padding: 12px 12px 0px 12px;
|
|
300
300
|
}
|
|
301
301
|
@media (min-width: 42rem) {
|
|
302
302
|
.menu-label {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../../vendor/lit-html-29220869.js";import{n as t,t as n,l as o,o as a,e as d}from"../../../vendor/lit-446874c7.js";import{i as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as i}from"../../../vendor/lit-html-29220869.js";import{n as t,t as n,l as o,o as a,e as d}from"../../../vendor/lit-446874c7.js";import{i as r,s,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{d as p}from"../../../vendor/deepmerge-ts-e62363e6.js";import"../../reusable/button/button.js";import{f as h,p as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var m=r`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -194,11 +194,20 @@ slot[name=search]::slotted(*) {
|
|
|
194
194
|
align-items: center;
|
|
195
195
|
justify-content: space-between;
|
|
196
196
|
width: 100%;
|
|
197
|
-
height:
|
|
197
|
+
height: 40px;
|
|
198
|
+
transition: background-color 150ms ease-out, color 150ms ease-out, outline-color 150ms ease-out;
|
|
199
|
+
}
|
|
200
|
+
.mobile-toggle:hover {
|
|
201
|
+
background: var(--kd-color-background-menu-state-hover);
|
|
202
|
+
color: var(--kd-color-text-button-dark-primary);
|
|
198
203
|
}
|
|
199
204
|
.mobile-toggle:focus-visible {
|
|
200
205
|
outline-color: var(--kd-color-border-variants-focus);
|
|
201
206
|
}
|
|
207
|
+
.mobile-toggle:active {
|
|
208
|
+
background-color: var(--kd-color-background-menu-state-pressed);
|
|
209
|
+
color: var(--kd-color-text-button-dark-primary);
|
|
210
|
+
}
|
|
202
211
|
.mobile-toggle svg {
|
|
203
212
|
display: block;
|
|
204
213
|
transition: transform 150ms ease-out;
|
|
@@ -228,7 +237,7 @@ slot[name=search]::slotted(*) {
|
|
|
228
237
|
}
|
|
229
238
|
.pinned .pin-icon {
|
|
230
239
|
transform: rotate(180deg);
|
|
231
|
-
}`;const
|
|
240
|
+
}`;const v={pin:"Pin",unpin:"Unpin",toggleMenu:"Toggle Menu",collapse:"Collapse",menu:"Menu"};let g=class extends s{constructor(){super(...arguments),this.pinned=!1,this.textStrings=v,this._textStrings=v,this._expanded=!1,this._mobileExpanded=!1}render(){return l`
|
|
232
241
|
<nav
|
|
233
242
|
class=${a({"nav--expanded":this._expanded||this.pinned,"nav--expanded-mobile":this._mobileExpanded,pinned:this.pinned})}
|
|
234
243
|
@pointerleave=${e=>this.handlePointerLeave(e)}
|
|
@@ -259,11 +268,11 @@ slot[name=search]::slotted(*) {
|
|
|
259
268
|
description=${this.pinned?this._textStrings.unpin:this._textStrings.pin}
|
|
260
269
|
@on-click=${e=>this._handleNavToggle(e)}
|
|
261
270
|
>
|
|
262
|
-
<span class="pin-icon" slot="icon"> ${i(
|
|
271
|
+
<span class="pin-icon" slot="icon"> ${i(c)} </span>
|
|
263
272
|
</kyn-button>
|
|
264
273
|
</div>
|
|
265
274
|
</nav>
|
|
266
275
|
|
|
267
276
|
<div class="overlay ${this.pinned?"pinned":""}"></div>
|
|
268
|
-
`}_handleNavToggle(e){this.pinned=!this.pinned;const i=new CustomEvent("on-toggle",{detail:{pinned:this.pinned,origEvent:e}});this.dispatchEvent(i)}_handleMobileNavToggle(){this._mobileExpanded=!this._mobileExpanded}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded||this.pinned,e._navExpandedMobile=this._mobileExpanded})),this._dividers.forEach((e=>{e._navExpanded=this._expanded||this.pinned||this._mobileExpanded}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){(e.has("_expanded")||e.has("pinned")||e.has("_mobileExpanded"))&&this._updateChildren(),e.has("textStrings")&&(this._textStrings=p(
|
|
277
|
+
`}_handleNavToggle(e){this.pinned=!this.pinned;const i=new CustomEvent("on-toggle",{detail:{pinned:this.pinned,origEvent:e}});this.dispatchEvent(i)}_handleMobileNavToggle(){this._mobileExpanded=!this._mobileExpanded}handlePointerEnter(e){"mouse"===e.pointerType&&(clearTimeout(this._leaveTimer),this._enterTimer=setTimeout((()=>{this._expanded=!0}),150))}handlePointerLeave(e){"mouse"===e.pointerType&&(clearTimeout(this._enterTimer),this._leaveTimer=setTimeout((()=>{this._expanded=!1}),150))}_updateChildren(){this._navLinks.forEach((e=>{e._navExpanded=this._expanded||this.pinned,e._navExpandedMobile=this._mobileExpanded})),this._dividers.forEach((e=>{e._navExpanded=this._expanded||this.pinned||this._mobileExpanded}))}handleSlotChange(){this._updateChildren(),this.requestUpdate()}_handleLinkActive(e){this._activeLinkText=e.detail.text}willUpdate(e){(e.has("_expanded")||e.has("pinned")||e.has("_mobileExpanded"))&&this._updateChildren(),e.has("textStrings")&&(this._textStrings=p(v,this.textStrings))}_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()}};g.styles=m,e([t({type:Boolean})],g.prototype,"pinned",void 0),e([t({type:Object})],g.prototype,"textStrings",void 0),e([n()],g.prototype,"_textStrings",void 0),e([n()],g.prototype,"_expanded",void 0),e([n()],g.prototype,"_mobileExpanded",void 0),e([n()],g.prototype,"_activeLinkText",void 0),e([o({selector:"kyn-local-nav-link"})],g.prototype,"_navLinks",void 0),e([o({selector:"kyn-local-nav-divider"})],g.prototype,"_dividers",void 0),e([n()],g.prototype,"_leaveTimer",void 0),g=e([d("kyn-local-nav")],g);export{g as LocalNav};
|
|
269
278
|
//# sourceMappingURL=localNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { deepmerge } from 'deepmerge-ts';\nimport '../../reusable/button';\nimport LocalNavScss from './localNav.scss';\n\nimport arrowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport pinIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/side-drawer-out.svg';\n\nconst _defaultTextStrings = {\n pin: 'Pin',\n unpin: 'Unpin',\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n};\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @slot search - Slot for a search input\n * @fires on-toggle - Captures the click event and emits the pinned state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n static override styles = LocalNavScss;\n\n /** Local nav pinned state. */\n @property({ type: Boolean })\n pinned = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /** Local nav desktop expanded state.\n * @internal\n */\n @state()\n _expanded = false;\n\n /** Local nav mobile expanded state.\n * @internal\n */\n @state()\n _mobileExpanded = 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 /** Queries top-level slotted dividers.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-local-nav-divider' })\n _dividers!: any;\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 override render() {\n return html`\n <nav\n class=${classMap({\n 'nav--expanded': this._expanded || this.pinned,\n 'nav--expanded-mobile': this._mobileExpanded,\n pinned: this.pinned,\n })}\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=${this._handleMobileNavToggle}\n >\n ${this._mobileExpanded\n ? this._textStrings.collapse\n : this._activeLinkText || this._textStrings.menu}\n ${unsafeSVG(arrowIcon)}\n </button>\n\n <div class=\"search\">\n <slot name=\"search\"></slot>\n </div>\n\n <div class=\"links\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n\n <div class=\"toggle-container\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n description=${this.pinned\n ? this._textStrings.unpin\n : this._textStrings.pin}\n @on-click=${(e: Event) => this._handleNavToggle(e)}\n >\n <span class=\"pin-icon\" slot=\"icon\"> ${unsafeSVG(pinIcon)} </span>\n </kyn-button>\n </div>\n </nav>\n\n <div class=\"overlay ${this.pinned ? 'pinned' : ''}\"></div>\n `;\n }\n\n private _handleNavToggle(e: Event) {\n this.pinned = !this.pinned;\n\n const event = new CustomEvent('on-toggle', {\n detail: { pinned: this.pinned, origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _handleMobileNavToggle() {\n this._mobileExpanded = !this._mobileExpanded;\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this._expanded = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this._expanded = false;\n }, 150);\n }\n }\n\n private _updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._navExpanded = this._expanded || this.pinned;\n link._navExpandedMobile = this._mobileExpanded;\n });\n\n this._dividers.forEach((divider: any) => {\n divider._navExpanded =\n this._expanded || this.pinned || this._mobileExpanded;\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 (\n changedProps.has('_expanded') ||\n changedProps.has('pinned') ||\n changedProps.has('_mobileExpanded')\n ) {\n this._updateChildren();\n }\n\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\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":["_defaultTextStrings","pin","unpin","toggleMenu","collapse","menu","LocalNav","LitElement","constructor","this","pinned","textStrings","_textStrings","_expanded","_mobileExpanded","render","html","classMap","e","handlePointerLeave","handlePointerEnter","_handleMobileNavToggle","_activeLinkText","unsafeSVG","arrowIcon","handleSlotChange","_handleNavToggle","pinIcon","event","CustomEvent","detail","origEvent","dispatchEvent","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","_updateChildren","_navLinks","forEach","link","_navExpanded","_navExpandedMobile","_dividers","divider","requestUpdate","_handleLinkActive","text","willUpdate","changedProps","has","deepmerge","_handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavScss","__decorate","property","type","Boolean","prototype","Object","state","queryAssignedElements","selector","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"localNav.js","sources":["../../../../src/components/global/localNav/localNav.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 { deepmerge } from 'deepmerge-ts';\nimport '../../reusable/button';\nimport LocalNavScss from './localNav.scss';\n\nimport arrowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport pinIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/side-drawer-out.svg';\n\nconst _defaultTextStrings = {\n pin: 'Pin',\n unpin: 'Unpin',\n toggleMenu: 'Toggle Menu',\n collapse: 'Collapse',\n menu: 'Menu',\n};\n\n/**\n * The global Side Navigation component.\n * @slot unnamed - The default slot, for local nav links.\n * @slot search - Slot for a search input\n * @fires on-toggle - Captures the click event and emits the pinned state and original event details.\n */\n@customElement('kyn-local-nav')\nexport class LocalNav extends LitElement {\n static override styles = LocalNavScss;\n\n /** Local nav pinned state. */\n @property({ type: Boolean })\n pinned = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /** Local nav desktop expanded state.\n * @internal\n */\n @state()\n _expanded = false;\n\n /** Local nav mobile expanded state.\n * @internal\n */\n @state()\n _mobileExpanded = 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 /** Queries top-level slotted dividers.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-local-nav-divider' })\n _dividers!: any;\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 override render() {\n return html`\n <nav\n class=${classMap({\n 'nav--expanded': this._expanded || this.pinned,\n 'nav--expanded-mobile': this._mobileExpanded,\n pinned: this.pinned,\n })}\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=${this._handleMobileNavToggle}\n >\n ${this._mobileExpanded\n ? this._textStrings.collapse\n : this._activeLinkText || this._textStrings.menu}\n ${unsafeSVG(arrowIcon)}\n </button>\n\n <div class=\"search\">\n <slot name=\"search\"></slot>\n </div>\n\n <div class=\"links\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n\n <div class=\"toggle-container\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n description=${this.pinned\n ? this._textStrings.unpin\n : this._textStrings.pin}\n @on-click=${(e: Event) => this._handleNavToggle(e)}\n >\n <span class=\"pin-icon\" slot=\"icon\"> ${unsafeSVG(pinIcon)} </span>\n </kyn-button>\n </div>\n </nav>\n\n <div class=\"overlay ${this.pinned ? 'pinned' : ''}\"></div>\n `;\n }\n\n private _handleNavToggle(e: Event) {\n this.pinned = !this.pinned;\n\n const event = new CustomEvent('on-toggle', {\n detail: { pinned: this.pinned, origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _handleMobileNavToggle() {\n this._mobileExpanded = !this._mobileExpanded;\n }\n\n private handlePointerEnter(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this._leaveTimer);\n\n this._enterTimer = setTimeout(() => {\n this._expanded = true;\n }, 150);\n }\n }\n\n private handlePointerLeave(e: PointerEvent) {\n if (e.pointerType === 'mouse') {\n clearTimeout(this._enterTimer);\n\n this._leaveTimer = setTimeout(() => {\n this._expanded = false;\n }, 150);\n }\n }\n\n private _updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._navExpanded = this._expanded || this.pinned;\n link._navExpandedMobile = this._mobileExpanded;\n });\n\n this._dividers.forEach((divider: any) => {\n divider._navExpanded =\n this._expanded || this.pinned || this._mobileExpanded;\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 (\n changedProps.has('_expanded') ||\n changedProps.has('pinned') ||\n changedProps.has('_mobileExpanded')\n ) {\n this._updateChildren();\n }\n\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\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":["_defaultTextStrings","pin","unpin","toggleMenu","collapse","menu","LocalNav","LitElement","constructor","this","pinned","textStrings","_textStrings","_expanded","_mobileExpanded","render","html","classMap","e","handlePointerLeave","handlePointerEnter","_handleMobileNavToggle","_activeLinkText","unsafeSVG","arrowIcon","handleSlotChange","_handleNavToggle","pinIcon","event","CustomEvent","detail","origEvent","dispatchEvent","pointerType","clearTimeout","_leaveTimer","_enterTimer","setTimeout","_updateChildren","_navLinks","forEach","link","_navExpanded","_navExpandedMobile","_dividers","divider","requestUpdate","_handleLinkActive","text","willUpdate","changedProps","has","deepmerge","_handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","LocalNavScss","__decorate","property","type","Boolean","prototype","Object","state","queryAssignedElements","selector","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgBA,MAAMA,EAAsB,CAC1BC,IAAK,MACLC,MAAO,QACPC,WAAY,cACZC,SAAU,WACVC,KAAM,QAUD,IAAMC,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAMC,QAAG,EAITD,KAAWE,YAAGX,EAMdS,KAAYG,aAAGZ,EAMfS,KAASI,WAAG,EAMZJ,KAAeK,iBAAG,CAyKnB,CA1IU,MAAAC,GACP,OAAOC,CAAI;;gBAECC,EAAS,CACf,gBAAiBR,KAAKI,WAAaJ,KAAKC,OACxC,uBAAwBD,KAAKK,gBAC7BJ,OAAQD,KAAKC;wBAEEQ,GAAoBT,KAAKU,mBAAmBD;wBAC5CA,GAAoBT,KAAKW,mBAAmBF;;;;kBAInDT,KAAKG,aAAaT;uBACbM,KAAKG,aAAaT;mBACtBM,KAAKY;;YAEZZ,KAAKK,gBACHL,KAAKG,aAAaR,SAClBK,KAAKa,iBAAmBb,KAAKG,aAAaP;YAC5CkB,EAAUC;;;;;;;;8BAQQf,KAAKgB;;;;;;;0BAOThB,KAAKC,OACfD,KAAKG,aAAaV,MAClBO,KAAKG,aAAaX;wBACTiB,GAAaT,KAAKiB,iBAAiBR;;kDAEVK,EAAUI;;;;;4BAKhClB,KAAKC,OAAS,SAAW;KAElD,CAEO,gBAAAgB,CAAiBR,GACvBT,KAAKC,QAAUD,KAAKC,OAEpB,MAAMkB,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CAAEpB,OAAQD,KAAKC,OAAQqB,UAAWb,KAE5CT,KAAKuB,cAAcJ,EACpB,CAEO,sBAAAP,GACNZ,KAAKK,iBAAmBL,KAAKK,eAC9B,CAEO,kBAAAM,CAAmBF,GACH,UAAlBA,EAAEe,cACJC,aAAazB,KAAK0B,aAElB1B,KAAK2B,YAAcC,YAAW,KAC5B5B,KAAKI,WAAY,CAAI,GACpB,KAEN,CAEO,kBAAAM,CAAmBD,GACH,UAAlBA,EAAEe,cACJC,aAAazB,KAAK2B,aAElB3B,KAAK0B,YAAcE,YAAW,KAC5B5B,KAAKI,WAAY,CAAK,GACrB,KAEN,CAEO,eAAAyB,GACN7B,KAAK8B,UAAUC,SAASC,IACtBA,EAAKC,aAAejC,KAAKI,WAAaJ,KAAKC,OAC3C+B,EAAKE,mBAAqBlC,KAAKK,eAAe,IAGhDL,KAAKmC,UAAUJ,SAASK,IACtBA,EAAQH,aACNjC,KAAKI,WAAaJ,KAAKC,QAAUD,KAAKK,eAAe,GAE1D,CAEO,gBAAAW,GACNhB,KAAK6B,kBACL7B,KAAKqC,eACN,CAEO,iBAAAC,CAAkB7B,GACxBT,KAAKa,gBAAkBJ,EAAEY,OAAOkB,IACjC,CAEQ,UAAAC,CAAWC,IAEhBA,EAAaC,IAAI,cACjBD,EAAaC,IAAI,WACjBD,EAAaC,IAAI,qBAEjB1C,KAAK6B,kBAGHY,EAAaC,IAAI,iBACnB1C,KAAKG,aAAewC,EAAUpD,EAAqBS,KAAKE,aAE3D,CAEO,eAAA0C,CAAgBnC,GACjBA,EAAEoC,eAAeC,SAAS9C,QAC7BA,KAAKI,WAAY,EAEpB,CAEQ,iBAAA2C,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUzC,GAAMT,KAAK4C,gBAAgBnC,KAC/DT,KAAKkD,iBAAiB,kBAAmBzC,GAAMT,KAAKsC,kBAAkB7B,IACvE,CAEQ,oBAAA0C,GACPF,SAASG,oBAAoB,SAAU3C,GAAMT,KAAK4C,gBAAgBnC,KAClET,KAAKoD,oBAAoB,kBAAmB3C,GAC1CT,KAAKsC,kBAAkB7B,KAGzBuC,MAAMG,sBACP,GAlMetD,EAAMwD,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACH7D,EAAA8D,UAAA,cAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACgB/D,EAAA8D,UAAA,mBAAA,GAMlCJ,EAAA,CADCM,KACkChE,EAAA8D,UAAA,oBAAA,GAMnCJ,EAAA,CADCM,KACiBhE,EAAA8D,UAAA,iBAAA,GAMlBJ,EAAA,CADCM,KACuBhE,EAAA8D,UAAA,uBAAA,GAMxBJ,EAAA,CADCM,KACwBhE,EAAA8D,UAAA,uBAAA,GAMzBJ,EAAA,CADCO,EAAsB,CAAEC,SAAU,wBACnBlE,EAAA8D,UAAA,iBAAA,GAMhBJ,EAAA,CADCO,EAAsB,CAAEC,SAAU,2BACnBlE,EAAA8D,UAAA,iBAAA,GAWhBJ,EAAA,CADCM,KACgBhE,EAAA8D,UAAA,mBAAA,GAxDN9D,EAAQ0D,EAAA,CADpBS,EAAc,kBACFnE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,yHAAyH;IAEzH,WAAW,UAAS;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;
|
|
1
|
+
{"version":3,"file":"localNavLink.d.ts","sourceRoot":"","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,MAAoB;IAE1C,gBAAgB;IAEhB,IAAI,SAAM;IAEV,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,MAAM,UAAS;IAEf,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,SAAU;IAElB,yHAAyH;IAEzH,WAAW,UAAS;IAEpB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvB;;;OAGG;IAEH,KAAK,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEV,MAAM;IAiDN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;CA2BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,YAAY,CAAC;KACpC;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as i,t as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as i,t as n,l as o,o as a,e as d}from"../../../vendor/lit-446874c7.js";import{i as l,s as r,x as s}from"../../../vendor/lit-element-c6c02f24.js";import{f as p,d as h}from"../../../vendor/@kyndryl-design-system/shidoka-icons-ab960376.js";var c=l`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -53,7 +53,7 @@ a {
|
|
|
53
53
|
padding: 8px;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
|
-
a
|
|
56
|
+
.has-icon a .icon {
|
|
57
57
|
display: flex;
|
|
58
58
|
align-items: center;
|
|
59
59
|
justify-content: center;
|
|
@@ -61,8 +61,18 @@ a ::slotted(*) {
|
|
|
61
61
|
width: 24px;
|
|
62
62
|
height: 24px;
|
|
63
63
|
}
|
|
64
|
+
a slot[name=icon]::slotted(span),
|
|
65
|
+
a slot[name=icon]::slotted(svg) {
|
|
66
|
+
width: 16px;
|
|
67
|
+
height: 16px;
|
|
68
|
+
}
|
|
64
69
|
.left-padding a {
|
|
65
|
-
padding-left:
|
|
70
|
+
padding-left: 28px;
|
|
71
|
+
}
|
|
72
|
+
@media screen and (min-width: 42rem) {
|
|
73
|
+
.left-padding a {
|
|
74
|
+
padding-left: 32px;
|
|
75
|
+
}
|
|
66
76
|
}
|
|
67
77
|
.link-active a {
|
|
68
78
|
background-color: var(--kd-color-background-menu-state-active);
|
|
@@ -266,8 +276,7 @@ a:active {
|
|
|
266
276
|
font-weight: 500;
|
|
267
277
|
color: var(--kd-color-text-level-tertiary-bold);
|
|
268
278
|
text-transform: uppercase;
|
|
269
|
-
padding: 20px 8px
|
|
270
|
-
border-bottom: 1px solid var(--kd-color-border-variants-light);
|
|
279
|
+
padding: 20px 8px 0;
|
|
271
280
|
}
|
|
272
281
|
@media (min-width: 42rem) {
|
|
273
282
|
.category {
|
|
@@ -343,14 +352,16 @@ a:active {
|
|
|
343
352
|
}
|
|
344
353
|
.expand-icon svg {
|
|
345
354
|
display: block;
|
|
346
|
-
}`;let v=class extends
|
|
355
|
+
}`;let v=class extends r{constructor(){super(...arguments),this.href="",this.expanded=!1,this.active=!1,this.disabled=!1,this.backText="Back",this.leftPadding=!1,this._level=1,this._navExpanded=!1,this._navExpandedMobile=!1,this._text=""}render(){const e={link:!0,"top-level":1===this._level,"sub-level":this._level>1,"nav-expanded":this._navExpanded||this._navExpandedMobile,"link-expanded":this.expanded,"link-active":this.active,"link-disabled":this.disabled,"has-links":this._navLinks.length,"has-icon":this._icon.length,"left-padding":this.leftPadding&&this._level>1};return s`
|
|
347
356
|
<div class=${a(e)}>
|
|
348
357
|
<a href=${this.href} @click=${e=>this.handleClick(e)}>
|
|
349
358
|
${this._navLinks.length?s`
|
|
350
359
|
<span class="expand-icon"> ${t(p)} </span>
|
|
351
360
|
`:null}
|
|
352
361
|
|
|
353
|
-
<
|
|
362
|
+
<div class="icon">
|
|
363
|
+
<slot name="icon"></slot>
|
|
364
|
+
</div>
|
|
354
365
|
|
|
355
366
|
<span class="text">
|
|
356
367
|
<slot @slotchange=${this._handleTextSlotChange}></slot>
|
|
@@ -369,5 +380,5 @@ a:active {
|
|
|
369
380
|
<slot name="links" @slotchange=${this._handleLinksSlotChange}></slot>
|
|
370
381
|
</div>
|
|
371
382
|
</div>
|
|
372
|
-
`}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this._navLinks.forEach((e=>{e._level=this._level+1,e._navExpanded=this._navExpanded||this._navExpandedMobile})),this._dividers.forEach((e=>{e._navExpanded=this._navExpanded||this._navExpandedMobile}))}_handleBack(){this.expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this._navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}};v.styles=c,e([i({type:String})],v.prototype,"href",void 0),e([i({type:Boolean})],v.prototype,"expanded",void 0),e([i({type:Boolean,reflect:!0})],v.prototype,"active",void 0),e([i({type:Boolean})],v.prototype,"disabled",void 0),e([i({type:String})],v.prototype,"backText",void 0),e([i({type:Boolean})],v.prototype,"leftPadding",void 0),e([
|
|
383
|
+
`}willUpdate(e){e.has("_navExpanded")&&this.updateChildren()}updated(e){if(e.has("active")&&this.active){this._getSlotText();const e=new CustomEvent("on-link-active",{composed:!0,bubbles:!0,detail:{text:this._text}});this.dispatchEvent(e)}}_handleTextSlotChange(){this._getSlotText(),this.requestUpdate()}_getSlotText(){var e;let t="";const i=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".text slot")).assignedNodes({flatten:!0});for(let e=0;e<i.length;e++)t+=i[e].textContent.trim();this._text=t}_handleLinksSlotChange(){this.updateChildren(),this.requestUpdate()}updateChildren(){this._navLinks.forEach((e=>{e._level=this._level+1,e._navExpanded=this._navExpanded||this._navExpandedMobile})),this._dividers.forEach((e=>{e._navExpanded=this._navExpanded||this._navExpandedMobile}))}_handleBack(){this.expanded=!1}handleClick(e){let t=!1;this.disabled&&(t=!0),this._navLinks.length&&(t=!0,this.expanded=!this.expanded),t&&e.preventDefault(),this.requestUpdate();const i=new CustomEvent("on-click",{detail:{origEvent:e,level:this._level,defaultPrevented:t}});this.dispatchEvent(i)}};v.styles=c,e([i({type:String})],v.prototype,"href",void 0),e([i({type:Boolean})],v.prototype,"expanded",void 0),e([i({type:Boolean,reflect:!0})],v.prototype,"active",void 0),e([i({type:Boolean})],v.prototype,"disabled",void 0),e([i({type:String})],v.prototype,"backText",void 0),e([i({type:Boolean})],v.prototype,"leftPadding",void 0),e([n()],v.prototype,"_level",void 0),e([n()],v.prototype,"_navExpanded",void 0),e([n()],v.prototype,"_navExpandedMobile",void 0),e([n()],v.prototype,"_text",void 0),e([o({slot:"links",selector:"kyn-local-nav-link"})],v.prototype,"_navLinks",void 0),e([o({slot:"links",selector:"kyn-local-nav-divider"})],v.prototype,"_dividers",void 0),e([o({slot:"icon"})],v.prototype,"_icon",void 0),v=e([d("kyn-local-nav-link")],v);export{v as LocalNavLink};
|
|
373
384
|
//# sourceMappingURL=localNavLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 LocalNavLinkScss from './localNavLink.scss';\n\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size. Required for level 1.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n static override styles = LocalNavLinkScss;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Expanded state. */\n @property({ type: Boolean })\n expanded = false;\n\n /** Active state. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /** Disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /** Add left padding when icon is not provided to align text with links that do have icons. Does not apply to level 1. */\n @property({ type: Boolean })\n leftPadding = false;\n\n /** Link level, supports three levels.\n * @ignore\n */\n @state()\n _level = 1;\n\n /** The local nav desktop expanded state.\n * @internal\n */\n @state()\n _navExpanded = false;\n\n /** The local nav mobile expanded state.\n * @internal\n */\n @state()\n _navExpandedMobile = false;\n\n /** The slotted text.\n * @internal\n */\n @state()\n _text = '';\n\n /**\n * Queries slotted links.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n _navLinks!: Array<any>;\n\n /**\n * Queries slotted dividers.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-divider' })\n _dividers!: Array<any>;\n\n /**\n * Queries slotted icon.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n _icon!: Array<any>;\n\n override render() {\n const classes = {\n link: true,\n 'top-level': this._level === 1,\n 'sub-level': this._level > 1,\n 'nav-expanded': this._navExpanded || this._navExpandedMobile,\n 'link-expanded': this.expanded,\n 'link-active': this.active,\n 'link-disabled': this.disabled,\n 'has-links': this._navLinks.length,\n 'has-icon': this._icon.length,\n 'left-padding': this.leftPadding && this._level > 1,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n ${this._navLinks.length\n ? html`\n <span class=\"expand-icon\"> ${unsafeSVG(chevronIcon)} </span>\n `\n : null}\n\n <slot name=\"icon\"></slot>\n\n <span class=\"text\">\n <slot @slotchange=${this._handleTextSlotChange}></slot>\n </span>\n </a>\n\n <div class=\"sub-menu\">\n ${this._navLinks.length\n ? html`\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n ${unsafeSVG(backIcon)} ${this.backText}\n </button>\n `\n : null}\n\n <div class=\"category\">${this._text}</div>\n\n <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('_navExpanded')) {\n this.updateChildren();\n }\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('active') && this.active) {\n this._getSlotText();\n\n const event = new CustomEvent('on-link-active', {\n composed: true,\n bubbles: true,\n detail: {\n text: this._text,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private _handleTextSlotChange() {\n this._getSlotText();\n this.requestUpdate();\n }\n\n private _getSlotText() {\n const Slot: any = this.shadowRoot?.querySelector('.text slot');\n let text = '';\n\n const nodes = Slot.assignedNodes({\n flatten: true,\n });\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this._text = text;\n }\n\n private _handleLinksSlotChange() {\n this.updateChildren();\n this.requestUpdate();\n }\n\n private updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._level = this._level + 1;\n link._navExpanded = this._navExpanded || this._navExpandedMobile;\n });\n\n this._dividers.forEach((divider: any) => {\n divider._navExpanded = this._navExpanded || this._navExpandedMobile;\n });\n }\n\n private _handleBack() {\n this.expanded = false;\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.disabled) {\n preventDefault = true;\n }\n\n if (this._navLinks.length) {\n preventDefault = true;\n this.expanded = !this.expanded;\n }\n\n if (preventDefault) {\n e.preventDefault();\n }\n\n this.requestUpdate();\n\n const event = new CustomEvent('on-click', {\n detail: {\n origEvent: e,\n level: this._level,\n defaultPrevented: preventDefault,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-local-nav-link': LocalNavLink;\n }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","expanded","active","disabled","backText","leftPadding","_level","_navExpanded","_navExpandedMobile","_text","render","classes","link","_navLinks","length","_icon","html","classMap","e","handleClick","unsafeSVG","chevronIcon","_handleTextSlotChange","_handleBack","backIcon","_handleLinksSlotChange","willUpdate","changedProps","has","updateChildren","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","_dividers","divider","preventDefault","origEvent","level","defaultPrevented","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","Boolean","reflect","state","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"localNavLink.js","sources":["../../../../src/components/global/localNav/localNavLink.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 LocalNavLinkScss from './localNavLink.scss';\n\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\n\n/**\n * Link component for use in the global Side Navigation component.\n * @fires on-click - Captures the click event and emits the original event, level, and if default was prevented.\n * @slot unnamed - The default slot, for the link text.\n * @slot icon - Slot for an icon. Use 16px size. Required for level 1.\n * @slot links - Slot for the next level of links, supports three levels.\n */\n@customElement('kyn-local-nav-link')\nexport class LocalNavLink extends LitElement {\n static override styles = LocalNavLinkScss;\n\n /** Link url. */\n @property({ type: String })\n href = '';\n\n /** Expanded state. */\n @property({ type: Boolean })\n expanded = false;\n\n /** Active state. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /** Disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /** Add left padding when icon is not provided to align text with links that do have icons. Does not apply to level 1. */\n @property({ type: Boolean })\n leftPadding = false;\n\n /** Link level, supports three levels.\n * @ignore\n */\n @state()\n _level = 1;\n\n /** The local nav desktop expanded state.\n * @internal\n */\n @state()\n _navExpanded = false;\n\n /** The local nav mobile expanded state.\n * @internal\n */\n @state()\n _navExpandedMobile = false;\n\n /** The slotted text.\n * @internal\n */\n @state()\n _text = '';\n\n /**\n * Queries slotted links.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-link' })\n _navLinks!: Array<any>;\n\n /**\n * Queries slotted dividers.\n * @ignore\n */\n @queryAssignedElements({ slot: 'links', selector: 'kyn-local-nav-divider' })\n _dividers!: Array<any>;\n\n /**\n * Queries slotted icon.\n * @ignore\n */\n @queryAssignedElements({ slot: 'icon' })\n _icon!: Array<any>;\n\n override render() {\n const classes = {\n link: true,\n 'top-level': this._level === 1,\n 'sub-level': this._level > 1,\n 'nav-expanded': this._navExpanded || this._navExpandedMobile,\n 'link-expanded': this.expanded,\n 'link-active': this.active,\n 'link-disabled': this.disabled,\n 'has-links': this._navLinks.length,\n 'has-icon': this._icon.length,\n 'left-padding': this.leftPadding && this._level > 1,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <a href=${this.href} @click=${(e: Event) => this.handleClick(e)}>\n ${this._navLinks.length\n ? html`\n <span class=\"expand-icon\"> ${unsafeSVG(chevronIcon)} </span>\n `\n : null}\n\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n </div>\n\n <span class=\"text\">\n <slot @slotchange=${this._handleTextSlotChange}></slot>\n </span>\n </a>\n\n <div class=\"sub-menu\">\n ${this._navLinks.length\n ? html`\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n ${unsafeSVG(backIcon)} ${this.backText}\n </button>\n `\n : null}\n\n <div class=\"category\">${this._text}</div>\n\n <slot name=\"links\" @slotchange=${this._handleLinksSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('_navExpanded')) {\n this.updateChildren();\n }\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('active') && this.active) {\n this._getSlotText();\n\n const event = new CustomEvent('on-link-active', {\n composed: true,\n bubbles: true,\n detail: {\n text: this._text,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n private _handleTextSlotChange() {\n this._getSlotText();\n this.requestUpdate();\n }\n\n private _getSlotText() {\n const Slot: any = this.shadowRoot?.querySelector('.text slot');\n let text = '';\n\n const nodes = Slot.assignedNodes({\n flatten: true,\n });\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this._text = text;\n }\n\n private _handleLinksSlotChange() {\n this.updateChildren();\n this.requestUpdate();\n }\n\n private updateChildren() {\n this._navLinks.forEach((link: any) => {\n link._level = this._level + 1;\n link._navExpanded = this._navExpanded || this._navExpandedMobile;\n });\n\n this._dividers.forEach((divider: any) => {\n divider._navExpanded = this._navExpanded || this._navExpandedMobile;\n });\n }\n\n private _handleBack() {\n this.expanded = false;\n }\n\n private handleClick(e: Event) {\n let preventDefault = false;\n\n if (this.disabled) {\n preventDefault = true;\n }\n\n if (this._navLinks.length) {\n preventDefault = true;\n this.expanded = !this.expanded;\n }\n\n if (preventDefault) {\n e.preventDefault();\n }\n\n this.requestUpdate();\n\n const event = new CustomEvent('on-click', {\n detail: {\n origEvent: e,\n level: this._level,\n defaultPrevented: preventDefault,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-local-nav-link': LocalNavLink;\n }\n}\n"],"names":["LocalNavLink","LitElement","constructor","this","href","expanded","active","disabled","backText","leftPadding","_level","_navExpanded","_navExpandedMobile","_text","render","classes","link","_navLinks","length","_icon","html","classMap","e","handleClick","unsafeSVG","chevronIcon","_handleTextSlotChange","_handleBack","backIcon","_handleLinksSlotChange","willUpdate","changedProps","has","updateChildren","updated","_getSlotText","event","CustomEvent","composed","bubbles","detail","text","dispatchEvent","requestUpdate","nodes","_a","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","forEach","_dividers","divider","preventDefault","origEvent","level","defaultPrevented","styles","LocalNavLinkScss","__decorate","property","type","String","prototype","Boolean","reflect","state","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAgB5D,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAU3D,KAAK,eAAe,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;;AAanD;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,oBAAqB;IACxD,OAAgB,MAAM,QAAkD;IAExE,kBAAkB;IAElB,KAAK,SAAM;IAEX,wEAAwE;IAExE,MAAM,EAAE,eAAe,GAAG,MAAM,CAAQ;IAExC,wGAAwG;IAExG,UAAU,SAAW;IAErB,mJAAmJ;IAEnJ,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI,CAAQ;IAEpC,kCAAkC;IAElC,mBAAmB,SAAM;IAEzB,kCAAkC;IAEzB,KAAK,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAgB;IAE1D,yCAAyC;IAEzC,QAAQ,SAAM;IAEd,qIAAqI;IAErI,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAEzC,mDAAmD;IAEnD,OAAO,CAAC,sBAAsB,CAAkC;IAEhE,+DAA+D;IAE/D,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAExC,uEAAuE;IAEvE,OAAO,SAAM;IAEb,oEAAoE;IAEpE,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,sEAAsE;IAEtE,uBAAuB,UAAS;IAEhC;;OAEG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C,+DAA+D;IAE/D,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAM;IAErC,+DAA+D;IAE/D,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAM;IAErC,mDAAmD;IAEnD,cAAc,SAAM;IAEpB,8CAA8C;IAE9C,UAAU,SAAM;IAEhB,qDAAqD;IAErD,gBAAgB,SAAM;IAEtB,gDAAgD;IAEhD,YAAY,SAAM;IAElB,4EAA4E;IAE5E,cAAc,UAAS;IAEvB;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAS;IAE5B;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAC,CAAW;IAErC;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAAC,CAAmB;IAEpC;;;OAGG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,iCAAiC;IAEjC,WAAW;;;;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;;;;MAAuB;IAEnC;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAS;IAE5B;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAS;IAErC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,eAAe,CAOf;IAER,OAAO,CAAC,YAAY,CAQZ;IAEC,oBAAoB;IAQpB,iBAAiB;IAO1B,OAAO,CAAC,QAAQ;IAkBP,MAAM;IAmFf,OAAO,CAAC,uBAAuB;IAsC/B,yBAAyB;;;;;IAQV,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAUpD,OAAO,CAAC,iBAAiB,EAAE,cAAc;
|
|
1
|
+
{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"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"}
|
|
@@ -582,5 +582,5 @@ input {
|
|
|
582
582
|
@click=${this.preventFlatpickrOpen}
|
|
583
583
|
>
|
|
584
584
|
${this.warnText}
|
|
585
|
-
</div>`:null}getDateRangePickerClasses(){return{"date-range-picker":!0,"date-range-picker__enable-time":this._enableTime,"date-range-picker__disabled":this.dateRangePickerDisabled}}async firstUpdated(t){super.firstUpdated(t),this._initialized||(h(z.toString()),this._initialized=!0,await this.updateComplete,this.setupAnchor())}updated(t){var e,i;if(super.updated(t),t.has("value")&&this.flatpickrInstance&&!this._isClearing){const t=this.value;if(Array.isArray(t)&&t.every((t=>null===t)))this._isClearing=!0,this.flatpickrInstance.clear(),this._isClearing=!1,this._inputEl&&(this._inputEl.value="");else{const
|
|
585
|
+
</div>`:null}getDateRangePickerClasses(){return{"date-range-picker":!0,"date-range-picker__enable-time":this._enableTime,"date-range-picker__disabled":this.dateRangePickerDisabled}}async firstUpdated(t){super.firstUpdated(t),this._initialized||(h(z.toString()),this._initialized=!0,await this.updateComplete,this.setupAnchor())}updated(t){var e,i,a;if(super.updated(t),t.has("dateRangePickerDisabled")){if(this.dateRangePickerDisabled)return void(null===(e=this.flatpickrInstance)||void 0===e||e.close());this.value[0]&&this.value[1]&&this.setInitialDates()}if(t.has("value")&&!this.dateRangePickerDisabled&&this.flatpickrInstance&&!this._isClearing){const t=this.value;if(Array.isArray(t)&&t.every((t=>null===t)))this._isClearing=!0,this.flatpickrInstance.clear(),this._isClearing=!1,this._inputEl&&(this._inputEl.value="");else{const e=this.flatpickrInstance.selectedDates;2===e.length&&e[0]&&e[1]&&e[0].getTime()===(null===(i=t[0])||void 0===i?void 0:i.getTime())&&e[1].getTime()===(null===(a=t[1])||void 0===a?void 0:a.getTime())||this.setInitialDates()}}t.has("defaultDate")&&this.flatpickrInstance&&!this._isClearing&&this.initializeFlatpickr(),t.has("disable")&&(Array.isArray(this.disable)?this._processedDisableDates=this.disable.map((t=>{if(t instanceof Date)return t;if("number"==typeof t)return new Date(t);if("string"==typeof t){const[e,i,a]=t.split("-").map(Number);if(!isNaN(e)&&!isNaN(i)&&!isNaN(a))return new Date(e,i-1,a)}return t})):(this._processedDisableDates=[],console.warn("Disable prop must be an array")),this.flatpickrInstance&&this.updateFlatpickrOptions()),(t.has("dateFormat")||t.has("minDate")||t.has("maxDate")||t.has("locale"))&&this.flatpickrInstance&&!this._isClearing?(this._enableTime=u(this.dateFormat),t.has("dateFormat")?this.initializeFlatpickr():this.updateFlatpickrOptions()):t.has("twentyFourHourFormat")&&(this._enableTime=u(this.dateFormat),this.flatpickrInstance&&this._initialized&&!this._isClearing&&(this.flatpickrInstance.destroy(),this.initializeFlatpickr()))}async setupAnchor(){if(this._inputEl)try{await this.initializeFlatpickr()}catch(t){console.error("Error setting up flatpickr:",t)}else console.warn("Input element not found during setup")}async _clearInput(t={reinitFlatpickr:!0}){var e;this.value=[null,null],this.defaultDate=null,this.flatpickrInstance&&this.flatpickrInstance.clear(),this._inputEl&&(this._inputEl.value=""),v(this,"on-change",{dates:this.value,dateString:null===(e=this._inputEl)||void 0===e?void 0:e.value,source:"clear"}),this._validate(!0,!1),await this.updateComplete,t.reinitFlatpickr&&(await this.initializeFlatpickr(),this.requestUpdate())}async _handleClear(t){t.preventDefault(),t.stopPropagation(),this._isClearing=!0;try{await this._clearInput()}finally{this._isClearing=!1}}async handleClose(){this._hasInteracted=!0,this._validate(!0,!1),await this.updateComplete}async initializeFlatpickr(){if(this._inputEl)try{if(this.flatpickrInstance&&this.flatpickrInstance.destroy(),this.flatpickrInstance=await m({inputEl:this._inputEl,getFlatpickrOptions:()=>this.getComponentFlatpickrOptions(),setCalendarAttributes:t=>{try{if(!(null==t?void 0:t.calendarContainer))throw new Error("Calendar container not available");const e=g(this);k(t,e!==document.body),t.calendarContainer.setAttribute("aria-label","Date range calendar")}catch(t){console.warn("Error setting calendar attributes:",t)}},setInitialDates:this.setInitialDates.bind(this)}),!this.flatpickrInstance)throw new Error("Failed to initialize Flatpickr instance");f(),this._validate(!1,!1)}catch(t){console.error("Error initializing Flatpickr:",t),t instanceof Error&&console.error("Error details:",t.message)}else console.warn("Cannot initialize Flatpickr: input element not available")}async getComponentFlatpickrOptions(){var t;const e=g(this);return await b({locale:this.locale,dateFormat:this.dateFormat,defaultDate:this.defaultDate?this.defaultDate:void 0,enableTime:this._enableTime,twentyFourHourFormat:null!==(t=this.twentyFourHourFormat)&&void 0!==t?t:void 0,inputEl:this._inputEl,minDate:this.minDate,maxDate:this.maxDate,enable:this.enable,disable:this._processedDisableDates,mode:"range",closeOnSelect:!this._enableTime,loadLocale:y,onOpen:this.handleOpen.bind(this),onClose:this.handleClose.bind(this),onChange:this.handleDateChange.bind(this),appendTo:e,noCalendar:!1,static:this.staticPosition})}async updateFlatpickrOptions(){this.flatpickrInstance?await this.debouncedUpdate():console.warn("Cannot update options: Flatpickr instance not available")}setInitialDates(){if(this.flatpickrInstance)try{if(Array.isArray(this.defaultDate)){const t=this.defaultDate.filter((t=>"string"==typeof t&&""!==t.trim())).map((t=>{const e=t.trim();if(e.includes("T")){const t=new Date(e);return isNaN(t.getTime())?null:t}{const t=e.split("-").map(Number);if(3===t.length){const[e,i,a]=t;if(!isNaN(e)&&!isNaN(i)&&!isNaN(a)){const t=new Date;return t.setFullYear(e,i-1,a),t.setHours(0,0,0,0),t}}}return null})).filter((t=>null!==t));2===t.length?(this.flatpickrInstance.setDate(t,!0),this.value=t):console.warn("Invalid or incomplete date range provided in defaultDate")}else if(Array.isArray(this.value)&&2===this.value.length){const t=this.value.map((t=>{if("string"==typeof t){const e=t.trim(),i=new Date(e);return isNaN(i.getTime())?null:i}return t instanceof Date&&!isNaN(t.getTime())?t:(console.warn("Invalid date in value array:",t),null)})).filter((t=>null!==t));2===t.length?this.flatpickrInstance.setDate(t,!0):console.warn("Invalid or incomplete date range provided in value")}}catch(t){console.warn("Error setting initial dates:",t),t instanceof Error&&console.warn("Error details:",t.message)}else console.warn("Cannot set initial dates: Flatpickr instance not available")}handleOpen(){var t;this._shouldFlatpickrOpen||(null===(t=this.flatpickrInstance)||void 0===t||t.close(),this._shouldFlatpickrOpen=!0)}async handleDateChange(t){var e;if(this._hasInteracted=!0,!this._isClearing)if(0===t.length)this.value=[null,null],v(this,"on-change",{dates:this.value,source:"clear"});else if(1===t.length)this.value=[t[0],null];else{this.value=[t[0],t[1]];const i=t.map((t=>t.toISOString())),a=(null===(e=this._inputEl)||void 0===e?void 0:e.value)||i.join(" to ");v(this,"on-change",{dates:i,dateString:a})}this.updateSelectedDateRangeAria(t),this._validate(!0,!1),await this.updateComplete}updateSelectedDateRangeAria(t){if(!this._inputEl)return;let e=this._textStrings.dateRange;if(0===t.length)e=this._textStrings.noDateSelected;else if(1===t.length)e=this._textStrings.startDateSelected.replace("{0}",t[0].toLocaleDateString(this.locale));else if(2===t.length){const[i,a]=t;e=this._textStrings.dateRangeSelected.replace("{0}",i.toLocaleDateString(this.locale)).replace("{1}",a.toLocaleDateString(this.locale))}this._inputEl.setAttribute("aria-label",e)}setShouldFlatpickrOpen(t){this._shouldFlatpickrOpen=t}closeFlatpickr(){var t;null===(t=this.flatpickrInstance)||void 0===t||t.close()}preventFlatpickrOpen(t){x(t,this.setShouldFlatpickrOpen.bind(this))}handleInputClickEvent(){w(this.setShouldFlatpickrOpen.bind(this))}handleInputFocusEvent(){_(this._shouldFlatpickrOpen,this.closeFlatpickr.bind(this),this.setShouldFlatpickrOpen.bind(this))}_validate(t,e){if(!(this._inputEl&&this._inputEl instanceof HTMLInputElement))return;t&&(this._hasInteracted=!0);const i=!this._inputEl.value.trim()||!this.value[0]||!this.value[1],a=this.required;let r=this._inputEl.validity,n=this._inputEl.validationMessage;a&&i&&(r={...r,valueMissing:!0},n=this.defaultErrorMessage||this._textStrings.pleaseSelectDate),this.invalidText&&(r={...r,customError:!0},n=this.invalidText);const l=!r.valueMissing&&!r.customError;l||n||(n=this._textStrings.pleaseSelectValidDate),this._internals.setValidity(r,n,this._inputEl),this._isInvalid=!l&&(this._hasInteracted||""!==this.invalidText),this._internalValidationMsg=n,e&&this._internals.reportValidity(),this.requestUpdate()}_onChange(){this._validate(!0,!1)}_handleFormReset(){this.value=[null,null],this.flatpickrInstance&&this.flatpickrInstance.clear(),this._hasInteracted=!1,this._validate(!1,!1)}};E.styles=[S,z],t([i({type:String})],E.prototype,"label",void 0),t([i({type:String})],E.prototype,"locale",void 0),t([i({type:String})],E.prototype,"dateFormat",void 0),t([i({type:Array})],E.prototype,"defaultDate",void 0),t([i({type:String})],E.prototype,"defaultErrorMessage",void 0),t([i({type:Array})],E.prototype,"value",void 0),t([i({type:String})],E.prototype,"warnText",void 0),t([i({type:Array})],E.prototype,"disable",void 0),t([a()],E.prototype,"_processedDisableDates",void 0),t([i({type:Array})],E.prototype,"enable",void 0),t([i({type:String})],E.prototype,"caption",void 0),t([i({type:Boolean})],E.prototype,"required",void 0),t([i({type:String})],E.prototype,"size",void 0),t([i({type:Boolean})],E.prototype,"dateRangePickerDisabled",void 0),t([i({type:Boolean})],E.prototype,"twentyFourHourFormat",void 0),t([i({type:String})],E.prototype,"minDate",void 0),t([i({type:String})],E.prototype,"maxDate",void 0),t([i({type:String})],E.prototype,"errorAriaLabel",void 0),t([i({type:String})],E.prototype,"errorTitle",void 0),t([i({type:String})],E.prototype,"warningAriaLabel",void 0),t([i({type:String})],E.prototype,"warningTitle",void 0),t([i({type:Boolean})],E.prototype,"staticPosition",void 0),t([a()],E.prototype,"_enableTime",void 0),t([a()],E.prototype,"flatpickrInstance",void 0),t([r("input")],E.prototype,"_inputEl",void 0),t([a()],E.prototype,"_hasInteracted",void 0),t([i({type:Object})],E.prototype,"textStrings",void 0),t([a()],E.prototype,"_textStrings",void 0),t([a()],E.prototype,"_isClearing",void 0),t([a()],E.prototype,"_shouldFlatpickrOpen",void 0),E=t([n("kyn-date-range-picker")],E);export{E as DateRangePicker};
|
|
586
586
|
//# sourceMappingURL=daterangepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { langsArray } from '../../../common/flatpickrLangs';\nimport {\n injectFlatpickrStyles,\n initializeSingleAnchorFlatpickr,\n getFlatpickrOptions,\n getPlaceholder,\n preventFlatpickrOpen,\n handleInputClick,\n handleInputFocus,\n setCalendarAttributes,\n loadLocale,\n emitValue,\n updateEnableTime,\n hideEmptyYear,\n getModalContainer,\n} from '../../../common/helpers/flatpickr';\nimport '../../reusable/button';\n\nimport { BaseOptions } from 'flatpickr/dist/types/options';\nimport type { Instance } from 'flatpickr/dist/types/instance';\n\nimport DateRangePickerStyles from './daterangepicker.scss';\nimport ShidokaFlatpickrTheme from '../../../common/scss/shidoka-flatpickr-theme.scss';\n\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-filled.svg';\nimport calendarIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/24/calendar.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\ntype SupportedLocale = (typeof langsArray)[number];\n\nconst _defaultTextStrings = {\n requiredText: 'Required',\n clearAll: 'Clear',\n pleaseSelectDate: 'Please select a date',\n pleaseSelectValidDate: 'Please select a valid date',\n dateRange: 'Date range',\n noDateSelected: 'No dates selected',\n startDateSelected: 'Start date selected: {0}. Please select end date.',\n dateRangeSelected: 'Selected date range: {0} to {1}',\n};\n\n/**\n * Date Range Picker: uses Flatpickr library, range picker implementation -- `https://flatpickr.js.org/examples/#range-calendar`\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends FormMixin(LitElement) {\n static override styles = [DateRangePickerStyles, ShidokaFlatpickrTheme];\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Sets and dynamically imports specific l10n calendar localization. */\n @property({ type: String })\n locale: SupportedLocale | string = 'en';\n\n /** Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`). */\n @property({ type: String })\n dateFormat = 'Y-m-d';\n\n /** Sets the initial selected date(s). For range mode, provide an array of date strings matching dateFormat (e.g. [\"2024-01-01\", \"2024-01-07\"]). */\n @property({ type: Array })\n defaultDate: string[] | null = null;\n\n /** Sets default error message. */\n @property({ type: String })\n defaultErrorMessage = '';\n\n /** Sets date/time range value. */\n @property({ type: Array })\n override value: [Date | null, Date | null] = [null, null];\n\n /** Sets validation warning messaging. */\n @property({ type: String })\n warnText = '';\n\n /** Sets flatpickr options setting to disable specific dates. Accepts array of dates in Y-m-d format, timestamps, or Date objects. */\n @property({ type: Array })\n disable: (string | number | Date)[] = [];\n\n /** Internal storage for processed disable dates */\n @state()\n private _processedDisableDates: (string | number | Date)[] = [];\n\n /** Sets flatpickr options setting to enable specific dates. */\n @property({ type: Array })\n enable: (string | number | Date)[] = [];\n\n /** Sets caption to be displayed under primary date picker elements. */\n @property({ type: String })\n caption = '';\n\n /** Sets date range picker form input value to required/required. */\n @property({ type: Boolean })\n required = false;\n\n /** Input size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Sets entire date range picker form element to enabled/disabled. */\n @property({ type: Boolean })\n dateRangePickerDisabled = false;\n\n /** Sets 24 hour formatting true/false.\n * Defaults to 12H for all `en-` locales and 24H for all other locales.\n */\n @property({ type: Boolean })\n twentyFourHourFormat: boolean | null = null;\n\n /** Sets lower boundary of date range picker date selection. */\n @property({ type: String })\n minDate: string | number | Date = '';\n\n /** Sets upper boundary of date range picker date selection. */\n @property({ type: String })\n maxDate: string | number | Date = '';\n\n /** Sets aria label attribute for error message. */\n @property({ type: String })\n errorAriaLabel = '';\n\n /** Sets title attribute for error message. */\n @property({ type: String })\n errorTitle = '';\n\n /** Sets aria label attribute for warning message. */\n @property({ type: String })\n warningAriaLabel = '';\n\n /** Sets title attribute for warning message. */\n @property({ type: String })\n warningTitle = '';\n\n /** Sets whether the Flatpickr calendar UI should use static positioning. */\n @property({ type: Boolean })\n staticPosition = false;\n\n /** Sets flatpickr enableTime value based on detected dateFormat.\n * @internal\n */\n @state()\n private _enableTime = false;\n\n /** Flatpickr instantiation.\n * @internal\n */\n @state()\n private flatpickrInstance?: Instance;\n\n /**\n * Queries the input DOM element.\n * @internal\n */\n @query('input')\n private _inputEl?: HTMLInputElement;\n\n /**\n * Sets whether user has interacted with datepicker for error handling.\n * @internal\n */\n @state()\n private _hasInteracted = false;\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /** Tracks if we're in a clear operation to prevent duplicate events\n * @internal\n */\n @state()\n private _isClearing = false;\n\n /** Control flag to prevent Flatpickr from opening when clicking caption, error, label, or warning elements.\n * @internal\n */\n @state()\n private _shouldFlatpickrOpen = false;\n\n /** Track initialization state\n * @internal\n */\n private _initialized = false;\n\n private debounce<T extends (...args: any[]) => any>(\n func: T,\n wait: number\n ): (...args: Parameters<T>) => void {\n let timeout: number | null = null;\n\n return (...args: Parameters<T>) => {\n if (timeout !== null) {\n window.clearTimeout(timeout);\n }\n\n timeout = window.setTimeout(() => {\n func.apply(this, args);\n timeout = null;\n }, wait);\n };\n }\n\n private debouncedUpdate = this.debounce(async () => {\n if (!this.flatpickrInstance) return;\n try {\n await this.initializeFlatpickr();\n } catch (error) {\n console.error('Error in debounced update:', error);\n }\n }, 100);\n\n private handleResize = this.debounce(async () => {\n if (this.flatpickrInstance) {\n try {\n await this.initializeFlatpickr();\n } catch (error) {\n console.error('Error handling resize:', error);\n }\n }\n }, 250);\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('change', this._onChange);\n this.removeEventListener('reset', this._handleFormReset);\n window.removeEventListener('resize', this.handleResize);\n this.flatpickrInstance?.destroy();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('change', this._onChange);\n this.addEventListener('reset', this._handleFormReset);\n window.addEventListener('resize', this.handleResize);\n }\n\n private hasValue(): boolean {\n if (this._inputEl?.value) return true;\n if (this.value && Array.isArray(this.value) && this.value.length === 2) {\n return this.value[0] !== null && this.value[1] !== null;\n }\n if (this.defaultDate) {\n if (Array.isArray(this.defaultDate)) {\n return (\n this.defaultDate.length === 2 &&\n this.defaultDate[0] !== '' &&\n this.defaultDate[1] !== ''\n );\n }\n return false;\n }\n return false;\n }\n\n override render() {\n const errorId = `${this.name}-error-message`;\n const warningId = `${this.name}-warning-message`;\n const anchorId = this.name\n ? `${this.name}-${Math.random().toString(36).slice(2, 11)}`\n : `date-range-picker-${Math.random().toString(36).slice(2, 11)}`;\n const descriptionId = this.name ?? '';\n const placeholder = getPlaceholder(this.dateFormat, true);\n\n return html`\n <div class=${classMap(this.getDateRangePickerClasses())}>\n <div\n class=\"label-text\"\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n aria-disabled=${this.dateRangePickerDisabled ? 'true' : 'false'}\n id=${`label-${anchorId}`}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings?.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText}\n >*</abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </div>\n\n <div class=\"input-wrapper\">\n <input\n class=\"${classMap({\n [`size--${this.size}`]: true,\n 'input-custom': true,\n })}\"\n type=\"text\"\n id=${anchorId}\n name=${this.name}\n placeholder=${placeholder}\n ?disabled=${this.dateRangePickerDisabled}\n ?required=${this.required}\n ?invalid=${this._isInvalid}\n aria-invalid=${this._isInvalid ? 'true' : 'false'}\n aria-labelledby=${`label-${anchorId}`}\n @click=${this.handleInputClickEvent}\n @focus=${this.handleInputFocusEvent}\n />\n ${this.hasValue()\n ? html`\n <kyn-button\n ?disabled=${this.dateRangePickerDisabled}\n class=\"clear-button\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${this._handleClear}\n >\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : html`<span class=\"input-icon\">${unsafeSVG(calendarIcon)}</span>`}\n </div>\n\n ${this.caption\n ? html`<div\n id=${descriptionId}\n class=\"caption\"\n aria-disabled=${this.dateRangePickerDisabled ? 'true' : 'false'}\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n >\n ${this.caption}\n </div>`\n : ''}\n ${this.renderValidationMessage(errorId, warningId)}\n </div>\n `;\n }\n\n private renderValidationMessage(errorId: string, warningId: string) {\n if (this.invalidText || (this._isInvalid && this._hasInteracted)) {\n return html`<div\n id=${errorId}\n class=\"error error-text\"\n role=\"alert\"\n title=${this.errorTitle || 'Error'}\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n >\n <span\n class=\"error-icon\"\n aria-label=${`${this.errorAriaLabel}` || 'Error message icon'}\n role=\"button\"\n >${unsafeSVG(errorIcon)}</span\n >${this.invalidText ||\n this._internalValidationMsg ||\n this.defaultErrorMessage}\n </div>`;\n }\n\n if (this.warnText) {\n return html`<div\n id=${warningId}\n class=\"warn warn-text\"\n role=\"alert\"\n aria-label=${this.warningAriaLabel || 'Warning message'}\n title=${this.warningTitle || 'Warning'}\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n >\n ${this.warnText}\n </div>`;\n }\n\n return null;\n }\n\n getDateRangePickerClasses() {\n return {\n 'date-range-picker': true,\n 'date-range-picker__enable-time': this._enableTime,\n 'date-range-picker__disabled': this.dateRangePickerDisabled,\n };\n }\n\n override async firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n if (!this._initialized) {\n injectFlatpickrStyles(ShidokaFlatpickrTheme.toString());\n this._initialized = true;\n await this.updateComplete;\n this.setupAnchor();\n }\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n if (\n changedProperties.has('value') &&\n this.flatpickrInstance &&\n !this._isClearing\n ) {\n const newValue = this.value;\n if (Array.isArray(newValue) && newValue.every((v) => v === null)) {\n this._isClearing = true;\n this.flatpickrInstance.clear();\n this._isClearing = false;\n if (this._inputEl) {\n this._inputEl.value = '';\n }\n } else {\n const currentDates = this.flatpickrInstance.selectedDates;\n if (\n currentDates.length !== 2 ||\n !currentDates[0] ||\n !currentDates[1] ||\n currentDates[0].getTime() !== newValue[0]?.getTime() ||\n currentDates[1].getTime() !== newValue[1]?.getTime()\n ) {\n this.setInitialDates();\n }\n }\n }\n\n if (\n changedProperties.has('defaultDate') &&\n this.flatpickrInstance &&\n !this._isClearing\n ) {\n this.initializeFlatpickr();\n }\n\n if (changedProperties.has('disable')) {\n if (Array.isArray(this.disable)) {\n this._processedDisableDates = this.disable.map((date) => {\n if (date instanceof Date) return date;\n if (typeof date === 'number') return new Date(date);\n if (typeof date === 'string') {\n const [year, month, day] = date.split('-').map(Number);\n if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {\n return new Date(year, month - 1, day);\n }\n }\n return date;\n });\n } else {\n this._processedDisableDates = [];\n console.warn('Disable prop must be an array');\n }\n if (this.flatpickrInstance) {\n this.updateFlatpickrOptions();\n }\n }\n\n if (\n (changedProperties.has('dateFormat') ||\n changedProperties.has('minDate') ||\n changedProperties.has('maxDate') ||\n changedProperties.has('locale')) &&\n this.flatpickrInstance &&\n !this._isClearing\n ) {\n this._enableTime = updateEnableTime(this.dateFormat);\n if (changedProperties.has('dateFormat')) {\n this.initializeFlatpickr();\n } else {\n this.updateFlatpickrOptions();\n }\n } else if (changedProperties.has('twentyFourHourFormat')) {\n this._enableTime = updateEnableTime(this.dateFormat);\n if (this.flatpickrInstance && this._initialized && !this._isClearing) {\n this.flatpickrInstance.destroy();\n this.initializeFlatpickr();\n }\n }\n\n if (\n changedProperties.has('dateRangePickerDisabled') &&\n this.dateRangePickerDisabled &&\n this.flatpickrInstance\n ) {\n this.flatpickrInstance.close();\n }\n }\n\n private async setupAnchor() {\n if (!this._inputEl) {\n console.warn('Input element not found during setup');\n return;\n }\n\n try {\n await this.initializeFlatpickr();\n } catch (error) {\n console.error('Error setting up flatpickr:', error);\n }\n }\n\n private async _clearInput(\n options: { reinitFlatpickr?: boolean } = { reinitFlatpickr: true }\n ) {\n this.value = [null, null];\n this.defaultDate = null;\n\n if (this.flatpickrInstance) {\n this.flatpickrInstance.clear();\n }\n if (this._inputEl) {\n this._inputEl.value = '';\n }\n\n emitValue(this, 'on-change', {\n dates: this.value,\n dateString: (this._inputEl as HTMLInputElement)?.value,\n source: 'clear',\n });\n\n this._validate(true, false);\n await this.updateComplete;\n\n if (options.reinitFlatpickr) {\n await this.initializeFlatpickr();\n this.requestUpdate();\n }\n }\n\n private async _handleClear(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this._isClearing = true;\n try {\n await this._clearInput();\n } finally {\n this._isClearing = false;\n }\n }\n\n async handleClose(): Promise<void> {\n this._hasInteracted = true;\n this._validate(true, false);\n await this.updateComplete;\n }\n\n async initializeFlatpickr(): Promise<void> {\n if (!this._inputEl) {\n console.warn('Cannot initialize Flatpickr: input element not available');\n return;\n }\n try {\n if (this.flatpickrInstance) {\n this.flatpickrInstance.destroy();\n }\n\n this.flatpickrInstance = await initializeSingleAnchorFlatpickr({\n inputEl: this._inputEl,\n getFlatpickrOptions: () => this.getComponentFlatpickrOptions(),\n setCalendarAttributes: (instance) => {\n try {\n if (!instance?.calendarContainer) {\n throw new Error('Calendar container not available');\n }\n const container = getModalContainer(this);\n setCalendarAttributes(instance, container !== document.body);\n instance.calendarContainer.setAttribute(\n 'aria-label',\n 'Date range calendar'\n );\n } catch (error) {\n console.warn('Error setting calendar attributes:', error);\n }\n },\n setInitialDates: this.setInitialDates.bind(this),\n });\n\n if (!this.flatpickrInstance) {\n throw new Error('Failed to initialize Flatpickr instance');\n }\n\n hideEmptyYear();\n this._validate(false, false);\n } catch (error) {\n console.error('Error initializing Flatpickr:', error);\n\n if (error instanceof Error) {\n console.error('Error details:', error.message);\n }\n }\n }\n\n async getComponentFlatpickrOptions(): Promise<Partial<BaseOptions>> {\n const container = getModalContainer(this);\n const options = await getFlatpickrOptions({\n locale: this.locale,\n dateFormat: this.dateFormat,\n defaultDate: this.defaultDate ? this.defaultDate : undefined,\n enableTime: this._enableTime,\n twentyFourHourFormat: this.twentyFourHourFormat ?? undefined,\n inputEl: this._inputEl!,\n minDate: this.minDate,\n maxDate: this.maxDate,\n enable: this.enable,\n disable: this._processedDisableDates,\n mode: 'range',\n closeOnSelect: !this._enableTime,\n loadLocale,\n onOpen: this.handleOpen.bind(this),\n onClose: this.handleClose.bind(this),\n onChange: this.handleDateChange.bind(this),\n appendTo: container,\n noCalendar: false,\n static: this.staticPosition,\n });\n return options;\n }\n\n async updateFlatpickrOptions(): Promise<void> {\n if (!this.flatpickrInstance) {\n console.warn('Cannot update options: Flatpickr instance not available');\n return;\n }\n await this.debouncedUpdate();\n }\n\n setInitialDates(): void {\n if (!this.flatpickrInstance) {\n console.warn(\n 'Cannot set initial dates: Flatpickr instance not available'\n );\n return;\n }\n\n try {\n if (Array.isArray(this.defaultDate)) {\n const validDates = this.defaultDate\n .filter(\n (date): date is string =>\n typeof date === 'string' && date.trim() !== ''\n )\n .map((date) => {\n const trimmed = date.trim();\n if (trimmed.includes('T')) {\n const parsedISO = new Date(trimmed);\n return isNaN(parsedISO.getTime()) ? null : parsedISO;\n } else {\n const parts = trimmed.split('-').map(Number);\n if (parts.length === 3) {\n const [year, month, day] = parts;\n if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {\n const localDate = new Date();\n localDate.setFullYear(year, month - 1, day);\n localDate.setHours(0, 0, 0, 0);\n return localDate;\n }\n }\n }\n return null;\n })\n .filter((date): date is Date => date !== null);\n\n if (validDates.length === 2) {\n this.flatpickrInstance.setDate(validDates, true);\n this.value = validDates as [Date, Date];\n } else {\n console.warn(\n 'Invalid or incomplete date range provided in defaultDate'\n );\n }\n } else if (Array.isArray(this.value) && this.value.length === 2) {\n const validDates = (this.value as (string | Date)[])\n .map((date) => {\n if (typeof date === 'string') {\n const trimmed = date.trim();\n const parsed = new Date(trimmed);\n return isNaN(parsed.getTime()) ? null : parsed;\n }\n if (date instanceof Date && !isNaN(date.getTime())) {\n return date;\n }\n console.warn('Invalid date in value array:', date);\n return null;\n })\n .filter((date): date is Date => date !== null);\n\n if (validDates.length === 2) {\n this.flatpickrInstance.setDate(validDates, true);\n } else {\n console.warn('Invalid or incomplete date range provided in value');\n }\n }\n } catch (error) {\n console.warn('Error setting initial dates:', error);\n if (error instanceof Error) {\n console.warn('Error details:', error.message);\n }\n }\n }\n\n handleOpen(): void {\n if (!this._shouldFlatpickrOpen) {\n this.flatpickrInstance?.close();\n this._shouldFlatpickrOpen = true;\n }\n }\n\n async handleDateChange(selectedDates: Date[]): Promise<void> {\n this._hasInteracted = true;\n\n if (!this._isClearing) {\n if (selectedDates.length === 0) {\n this.value = [null, null];\n emitValue(this, 'on-change', {\n dates: this.value,\n source: 'clear',\n });\n } else if (selectedDates.length === 1) {\n this.value = [selectedDates[0], null];\n } else {\n this.value = [selectedDates[0], selectedDates[1]];\n const formattedDates = selectedDates.map((date) => date.toISOString());\n const dateString = this._inputEl?.value || formattedDates.join(' to ');\n emitValue(this, 'on-change', {\n dates: formattedDates,\n dateString,\n });\n }\n }\n\n this.updateSelectedDateRangeAria(selectedDates);\n this._validate(true, false);\n await this.updateComplete;\n }\n\n updateSelectedDateRangeAria(selectedDates: Date[]) {\n if (!this._inputEl) return;\n\n let ariaLabel = this._textStrings.dateRange;\n\n if (selectedDates.length === 0) {\n ariaLabel = this._textStrings.noDateSelected;\n } else if (selectedDates.length === 1) {\n ariaLabel = this._textStrings.startDateSelected.replace(\n '{0}',\n selectedDates[0].toLocaleDateString(this.locale)\n );\n } else if (selectedDates.length === 2) {\n const [startDate, endDate] = selectedDates;\n ariaLabel = this._textStrings.dateRangeSelected\n .replace('{0}', startDate.toLocaleDateString(this.locale))\n .replace('{1}', endDate.toLocaleDateString(this.locale));\n }\n\n this._inputEl.setAttribute('aria-label', ariaLabel);\n }\n\n private setShouldFlatpickrOpen(value: boolean) {\n this._shouldFlatpickrOpen = value;\n }\n\n private closeFlatpickr() {\n this.flatpickrInstance?.close();\n }\n\n private preventFlatpickrOpen(event: Event) {\n preventFlatpickrOpen(event, this.setShouldFlatpickrOpen.bind(this));\n }\n\n private handleInputClickEvent() {\n handleInputClick(this.setShouldFlatpickrOpen.bind(this));\n }\n\n private handleInputFocusEvent() {\n handleInputFocus(\n this._shouldFlatpickrOpen,\n this.closeFlatpickr.bind(this),\n this.setShouldFlatpickrOpen.bind(this)\n );\n }\n\n private _validate(interacted: boolean, report: boolean): void {\n if (!this._inputEl || !(this._inputEl instanceof HTMLInputElement)) {\n return;\n }\n\n if (interacted) {\n this._hasInteracted = true;\n }\n\n const isEmpty =\n !this._inputEl.value.trim() || !this.value[0] || !this.value[1];\n const isRequired = this.required;\n\n let validity = this._inputEl.validity;\n let validationMessage = this._inputEl.validationMessage;\n\n if (isRequired && isEmpty) {\n validity = { ...validity, valueMissing: true };\n validationMessage =\n this.defaultErrorMessage || this._textStrings.pleaseSelectDate;\n }\n\n if (this.invalidText) {\n validity = { ...validity, customError: true };\n validationMessage = this.invalidText;\n }\n\n const isValid = !validity.valueMissing && !validity.customError;\n\n if (!isValid && !validationMessage) {\n validationMessage = this._textStrings.pleaseSelectValidDate;\n }\n\n this._internals.setValidity(validity, validationMessage, this._inputEl);\n this._isInvalid =\n !isValid && (this._hasInteracted || this.invalidText !== '');\n this._internalValidationMsg = validationMessage;\n\n if (report) {\n this._internals.reportValidity();\n }\n\n this.requestUpdate();\n }\n\n private _onChange() {\n this._validate(true, false);\n }\n\n private _handleFormReset() {\n this.value = [null, null];\n if (this.flatpickrInstance) {\n this.flatpickrInstance.clear();\n }\n this._hasInteracted = false;\n this._validate(false, false);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-date-range-picker': DateRangePicker;\n }\n}\n"],"names":["_defaultTextStrings","requiredText","clearAll","pleaseSelectDate","pleaseSelectValidDate","dateRange","noDateSelected","startDateSelected","dateRangeSelected","DateRangePicker","FormMixin","LitElement","constructor","this","label","locale","dateFormat","defaultDate","defaultErrorMessage","value","warnText","disable","_processedDisableDates","enable","caption","required","size","dateRangePickerDisabled","twentyFourHourFormat","minDate","maxDate","errorAriaLabel","errorTitle","warningAriaLabel","warningTitle","staticPosition","_enableTime","_hasInteracted","textStrings","_textStrings","_isClearing","_shouldFlatpickrOpen","_initialized","debouncedUpdate","debounce","async","flatpickrInstance","initializeFlatpickr","error","console","handleResize","func","wait","timeout","args","window","clearTimeout","setTimeout","apply","disconnectedCallback","super","removeEventListener","_onChange","_handleFormReset","_a","destroy","connectedCallback","addEventListener","hasValue","_inputEl","Array","isArray","length","render","errorId","name","warningId","anchorId","Math","random","toString","slice","descriptionId","placeholder","getPlaceholder","html","classMap","getDateRangePickerClasses","preventFlatpickrOpen","_b","_c","_isInvalid","handleInputClickEvent","handleInputFocusEvent","_handleClear","unsafeSVG","clearIcon","calendarIcon","renderValidationMessage","invalidText","errorIcon","_internalValidationMsg","firstUpdated","changedProperties","injectFlatpickrStyles","ShidokaFlatpickrTheme","updateComplete","setupAnchor","updated","has","newValue","every","v","clear","currentDates","selectedDates","getTime","setInitialDates","map","date","Date","year","month","day","split","Number","isNaN","warn","updateFlatpickrOptions","updateEnableTime","close","_clearInput","options","reinitFlatpickr","emitValue","dates","dateString","source","_validate","requestUpdate","event","preventDefault","stopPropagation","handleClose","initializeSingleAnchorFlatpickr","inputEl","getFlatpickrOptions","getComponentFlatpickrOptions","setCalendarAttributes","instance","calendarContainer","Error","container","getModalContainer","document","body","setAttribute","bind","hideEmptyYear","message","undefined","enableTime","mode","closeOnSelect","loadLocale","onOpen","handleOpen","onClose","onChange","handleDateChange","appendTo","noCalendar","static","validDates","filter","trim","trimmed","includes","parsedISO","parts","localDate","setFullYear","setHours","setDate","parsed","formattedDates","toISOString","join","updateSelectedDateRangeAria","ariaLabel","replace","toLocaleDateString","startDate","endDate","setShouldFlatpickrOpen","closeFlatpickr","handleInputClick","handleInputFocus","interacted","report","HTMLInputElement","isEmpty","isRequired","validity","validationMessage","valueMissing","customError","isValid","_internals","setValidity","reportValidity","styles","DateRangePickerStyles","__decorate","property","type","String","prototype","state","Boolean","query","Object","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { langsArray } from '../../../common/flatpickrLangs';\nimport {\n injectFlatpickrStyles,\n initializeSingleAnchorFlatpickr,\n getFlatpickrOptions,\n getPlaceholder,\n preventFlatpickrOpen,\n handleInputClick,\n handleInputFocus,\n setCalendarAttributes,\n loadLocale,\n emitValue,\n updateEnableTime,\n hideEmptyYear,\n getModalContainer,\n} from '../../../common/helpers/flatpickr';\nimport '../../reusable/button';\n\nimport { BaseOptions } from 'flatpickr/dist/types/options';\nimport type { Instance } from 'flatpickr/dist/types/instance';\n\nimport DateRangePickerStyles from './daterangepicker.scss';\nimport ShidokaFlatpickrTheme from '../../../common/scss/shidoka-flatpickr-theme.scss';\n\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-filled.svg';\nimport calendarIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/24/calendar.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\ntype SupportedLocale = (typeof langsArray)[number];\n\nconst _defaultTextStrings = {\n requiredText: 'Required',\n clearAll: 'Clear',\n pleaseSelectDate: 'Please select a date',\n pleaseSelectValidDate: 'Please select a valid date',\n dateRange: 'Date range',\n noDateSelected: 'No dates selected',\n startDateSelected: 'Start date selected: {0}. Please select end date.',\n dateRangeSelected: 'Selected date range: {0} to {1}',\n};\n\n/**\n * Date Range Picker: uses Flatpickr library, range picker implementation -- `https://flatpickr.js.org/examples/#range-calendar`\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends FormMixin(LitElement) {\n static override styles = [DateRangePickerStyles, ShidokaFlatpickrTheme];\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Sets and dynamically imports specific l10n calendar localization. */\n @property({ type: String })\n locale: SupportedLocale | string = 'en';\n\n /** Sets flatpickr value to define how the date will be displayed in the input box (ex: `Y-m-d H:i`). */\n @property({ type: String })\n dateFormat = 'Y-m-d';\n\n /** Sets the initial selected date(s). For range mode, provide an array of date strings matching dateFormat (e.g. [\"2024-01-01\", \"2024-01-07\"]). */\n @property({ type: Array })\n defaultDate: string[] | null = null;\n\n /** Sets default error message. */\n @property({ type: String })\n defaultErrorMessage = '';\n\n /** Sets date/time range value. */\n @property({ type: Array })\n override value: [Date | null, Date | null] = [null, null];\n\n /** Sets validation warning messaging. */\n @property({ type: String })\n warnText = '';\n\n /** Sets flatpickr options setting to disable specific dates. Accepts array of dates in Y-m-d format, timestamps, or Date objects. */\n @property({ type: Array })\n disable: (string | number | Date)[] = [];\n\n /** Internal storage for processed disable dates */\n @state()\n private _processedDisableDates: (string | number | Date)[] = [];\n\n /** Sets flatpickr options setting to enable specific dates. */\n @property({ type: Array })\n enable: (string | number | Date)[] = [];\n\n /** Sets caption to be displayed under primary date picker elements. */\n @property({ type: String })\n caption = '';\n\n /** Sets date range picker form input value to required/required. */\n @property({ type: Boolean })\n required = false;\n\n /** Input size. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Sets entire date range picker form element to enabled/disabled. */\n @property({ type: Boolean })\n dateRangePickerDisabled = false;\n\n /** Sets 24 hour formatting true/false.\n * Defaults to 12H for all `en-` locales and 24H for all other locales.\n */\n @property({ type: Boolean })\n twentyFourHourFormat: boolean | null = null;\n\n /** Sets lower boundary of date range picker date selection. */\n @property({ type: String })\n minDate: string | number | Date = '';\n\n /** Sets upper boundary of date range picker date selection. */\n @property({ type: String })\n maxDate: string | number | Date = '';\n\n /** Sets aria label attribute for error message. */\n @property({ type: String })\n errorAriaLabel = '';\n\n /** Sets title attribute for error message. */\n @property({ type: String })\n errorTitle = '';\n\n /** Sets aria label attribute for warning message. */\n @property({ type: String })\n warningAriaLabel = '';\n\n /** Sets title attribute for warning message. */\n @property({ type: String })\n warningTitle = '';\n\n /** Sets whether the Flatpickr calendar UI should use static positioning. */\n @property({ type: Boolean })\n staticPosition = false;\n\n /** Sets flatpickr enableTime value based on detected dateFormat.\n * @internal\n */\n @state()\n private _enableTime = false;\n\n /** Flatpickr instantiation.\n * @internal\n */\n @state()\n private flatpickrInstance?: Instance;\n\n /**\n * Queries the input DOM element.\n * @internal\n */\n @query('input')\n private _inputEl?: HTMLInputElement;\n\n /**\n * Sets whether user has interacted with datepicker for error handling.\n * @internal\n */\n @state()\n private _hasInteracted = false;\n\n /** Customizable text strings. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /** Tracks if we're in a clear operation to prevent duplicate events\n * @internal\n */\n @state()\n private _isClearing = false;\n\n /** Control flag to prevent Flatpickr from opening when clicking caption, error, label, or warning elements.\n * @internal\n */\n @state()\n private _shouldFlatpickrOpen = false;\n\n /** Track initialization state\n * @internal\n */\n private _initialized = false;\n\n private debounce<T extends (...args: any[]) => any>(\n func: T,\n wait: number\n ): (...args: Parameters<T>) => void {\n let timeout: number | null = null;\n\n return (...args: Parameters<T>) => {\n if (timeout !== null) {\n window.clearTimeout(timeout);\n }\n\n timeout = window.setTimeout(() => {\n func.apply(this, args);\n timeout = null;\n }, wait);\n };\n }\n\n private debouncedUpdate = this.debounce(async () => {\n if (!this.flatpickrInstance) return;\n try {\n await this.initializeFlatpickr();\n } catch (error) {\n console.error('Error in debounced update:', error);\n }\n }, 100);\n\n private handleResize = this.debounce(async () => {\n if (this.flatpickrInstance) {\n try {\n await this.initializeFlatpickr();\n } catch (error) {\n console.error('Error handling resize:', error);\n }\n }\n }, 250);\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('change', this._onChange);\n this.removeEventListener('reset', this._handleFormReset);\n window.removeEventListener('resize', this.handleResize);\n this.flatpickrInstance?.destroy();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('change', this._onChange);\n this.addEventListener('reset', this._handleFormReset);\n window.addEventListener('resize', this.handleResize);\n }\n\n private hasValue(): boolean {\n if (this._inputEl?.value) return true;\n if (this.value && Array.isArray(this.value) && this.value.length === 2) {\n return this.value[0] !== null && this.value[1] !== null;\n }\n if (this.defaultDate) {\n if (Array.isArray(this.defaultDate)) {\n return (\n this.defaultDate.length === 2 &&\n this.defaultDate[0] !== '' &&\n this.defaultDate[1] !== ''\n );\n }\n return false;\n }\n return false;\n }\n\n override render() {\n const errorId = `${this.name}-error-message`;\n const warningId = `${this.name}-warning-message`;\n const anchorId = this.name\n ? `${this.name}-${Math.random().toString(36).slice(2, 11)}`\n : `date-range-picker-${Math.random().toString(36).slice(2, 11)}`;\n const descriptionId = this.name ?? '';\n const placeholder = getPlaceholder(this.dateFormat, true);\n\n return html`\n <div class=${classMap(this.getDateRangePickerClasses())}>\n <div\n class=\"label-text\"\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n aria-disabled=${this.dateRangePickerDisabled ? 'true' : 'false'}\n id=${`label-${anchorId}`}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings?.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText}\n >*</abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </div>\n\n <div class=\"input-wrapper\">\n <input\n class=\"${classMap({\n [`size--${this.size}`]: true,\n 'input-custom': true,\n })}\"\n type=\"text\"\n id=${anchorId}\n name=${this.name}\n placeholder=${placeholder}\n ?disabled=${this.dateRangePickerDisabled}\n ?required=${this.required}\n ?invalid=${this._isInvalid}\n aria-invalid=${this._isInvalid ? 'true' : 'false'}\n aria-labelledby=${`label-${anchorId}`}\n @click=${this.handleInputClickEvent}\n @focus=${this.handleInputFocusEvent}\n />\n ${this.hasValue()\n ? html`\n <kyn-button\n ?disabled=${this.dateRangePickerDisabled}\n class=\"clear-button\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${this._handleClear}\n >\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : html`<span class=\"input-icon\">${unsafeSVG(calendarIcon)}</span>`}\n </div>\n\n ${this.caption\n ? html`<div\n id=${descriptionId}\n class=\"caption\"\n aria-disabled=${this.dateRangePickerDisabled ? 'true' : 'false'}\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n >\n ${this.caption}\n </div>`\n : ''}\n ${this.renderValidationMessage(errorId, warningId)}\n </div>\n `;\n }\n\n private renderValidationMessage(errorId: string, warningId: string) {\n if (this.invalidText || (this._isInvalid && this._hasInteracted)) {\n return html`<div\n id=${errorId}\n class=\"error error-text\"\n role=\"alert\"\n title=${this.errorTitle || 'Error'}\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n >\n <span\n class=\"error-icon\"\n aria-label=${`${this.errorAriaLabel}` || 'Error message icon'}\n role=\"button\"\n >${unsafeSVG(errorIcon)}</span\n >${this.invalidText ||\n this._internalValidationMsg ||\n this.defaultErrorMessage}\n </div>`;\n }\n\n if (this.warnText) {\n return html`<div\n id=${warningId}\n class=\"warn warn-text\"\n role=\"alert\"\n aria-label=${this.warningAriaLabel || 'Warning message'}\n title=${this.warningTitle || 'Warning'}\n @mousedown=${this.preventFlatpickrOpen}\n @click=${this.preventFlatpickrOpen}\n >\n ${this.warnText}\n </div>`;\n }\n\n return null;\n }\n\n getDateRangePickerClasses() {\n return {\n 'date-range-picker': true,\n 'date-range-picker__enable-time': this._enableTime,\n 'date-range-picker__disabled': this.dateRangePickerDisabled,\n };\n }\n\n override async firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n if (!this._initialized) {\n injectFlatpickrStyles(ShidokaFlatpickrTheme.toString());\n this._initialized = true;\n await this.updateComplete;\n this.setupAnchor();\n }\n }\n\n override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n\n if (changedProperties.has('dateRangePickerDisabled')) {\n if (this.dateRangePickerDisabled) {\n this.flatpickrInstance?.close();\n return;\n } else {\n if (this.value[0] && this.value[1]) {\n this.setInitialDates();\n }\n }\n }\n\n if (\n changedProperties.has('value') &&\n !this.dateRangePickerDisabled &&\n this.flatpickrInstance &&\n !this._isClearing\n ) {\n const newValue = this.value;\n if (Array.isArray(newValue) && newValue.every((v) => v === null)) {\n this._isClearing = true;\n this.flatpickrInstance.clear();\n this._isClearing = false;\n if (this._inputEl) {\n this._inputEl.value = '';\n }\n } else {\n const currentDates = this.flatpickrInstance.selectedDates;\n if (\n currentDates.length !== 2 ||\n !currentDates[0] ||\n !currentDates[1] ||\n currentDates[0].getTime() !== newValue[0]?.getTime() ||\n currentDates[1].getTime() !== newValue[1]?.getTime()\n ) {\n this.setInitialDates();\n }\n }\n }\n\n if (\n changedProperties.has('defaultDate') &&\n this.flatpickrInstance &&\n !this._isClearing\n ) {\n this.initializeFlatpickr();\n }\n\n if (changedProperties.has('disable')) {\n if (Array.isArray(this.disable)) {\n this._processedDisableDates = this.disable.map((date) => {\n if (date instanceof Date) return date;\n if (typeof date === 'number') return new Date(date);\n if (typeof date === 'string') {\n const [year, month, day] = date.split('-').map(Number);\n if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {\n return new Date(year, month - 1, day);\n }\n }\n return date;\n });\n } else {\n this._processedDisableDates = [];\n console.warn('Disable prop must be an array');\n }\n if (this.flatpickrInstance) {\n this.updateFlatpickrOptions();\n }\n }\n\n if (\n (changedProperties.has('dateFormat') ||\n changedProperties.has('minDate') ||\n changedProperties.has('maxDate') ||\n changedProperties.has('locale')) &&\n this.flatpickrInstance &&\n !this._isClearing\n ) {\n this._enableTime = updateEnableTime(this.dateFormat);\n if (changedProperties.has('dateFormat')) {\n this.initializeFlatpickr();\n } else {\n this.updateFlatpickrOptions();\n }\n } else if (changedProperties.has('twentyFourHourFormat')) {\n this._enableTime = updateEnableTime(this.dateFormat);\n if (this.flatpickrInstance && this._initialized && !this._isClearing) {\n this.flatpickrInstance.destroy();\n this.initializeFlatpickr();\n }\n }\n }\n\n private async setupAnchor() {\n if (!this._inputEl) {\n console.warn('Input element not found during setup');\n return;\n }\n\n try {\n await this.initializeFlatpickr();\n } catch (error) {\n console.error('Error setting up flatpickr:', error);\n }\n }\n\n private async _clearInput(\n options: { reinitFlatpickr?: boolean } = { reinitFlatpickr: true }\n ) {\n this.value = [null, null];\n this.defaultDate = null;\n\n if (this.flatpickrInstance) {\n this.flatpickrInstance.clear();\n }\n if (this._inputEl) {\n this._inputEl.value = '';\n }\n\n emitValue(this, 'on-change', {\n dates: this.value,\n dateString: (this._inputEl as HTMLInputElement)?.value,\n source: 'clear',\n });\n\n this._validate(true, false);\n await this.updateComplete;\n\n if (options.reinitFlatpickr) {\n await this.initializeFlatpickr();\n this.requestUpdate();\n }\n }\n\n private async _handleClear(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this._isClearing = true;\n try {\n await this._clearInput();\n } finally {\n this._isClearing = false;\n }\n }\n\n async handleClose(): Promise<void> {\n this._hasInteracted = true;\n this._validate(true, false);\n await this.updateComplete;\n }\n\n async initializeFlatpickr(): Promise<void> {\n if (!this._inputEl) {\n console.warn('Cannot initialize Flatpickr: input element not available');\n return;\n }\n try {\n if (this.flatpickrInstance) {\n this.flatpickrInstance.destroy();\n }\n\n this.flatpickrInstance = await initializeSingleAnchorFlatpickr({\n inputEl: this._inputEl,\n getFlatpickrOptions: () => this.getComponentFlatpickrOptions(),\n setCalendarAttributes: (instance) => {\n try {\n if (!instance?.calendarContainer) {\n throw new Error('Calendar container not available');\n }\n const container = getModalContainer(this);\n setCalendarAttributes(instance, container !== document.body);\n instance.calendarContainer.setAttribute(\n 'aria-label',\n 'Date range calendar'\n );\n } catch (error) {\n console.warn('Error setting calendar attributes:', error);\n }\n },\n setInitialDates: this.setInitialDates.bind(this),\n });\n\n if (!this.flatpickrInstance) {\n throw new Error('Failed to initialize Flatpickr instance');\n }\n\n hideEmptyYear();\n this._validate(false, false);\n } catch (error) {\n console.error('Error initializing Flatpickr:', error);\n\n if (error instanceof Error) {\n console.error('Error details:', error.message);\n }\n }\n }\n\n async getComponentFlatpickrOptions(): Promise<Partial<BaseOptions>> {\n const container = getModalContainer(this);\n const options = await getFlatpickrOptions({\n locale: this.locale,\n dateFormat: this.dateFormat,\n defaultDate: this.defaultDate ? this.defaultDate : undefined,\n enableTime: this._enableTime,\n twentyFourHourFormat: this.twentyFourHourFormat ?? undefined,\n inputEl: this._inputEl!,\n minDate: this.minDate,\n maxDate: this.maxDate,\n enable: this.enable,\n disable: this._processedDisableDates,\n mode: 'range',\n closeOnSelect: !this._enableTime,\n loadLocale,\n onOpen: this.handleOpen.bind(this),\n onClose: this.handleClose.bind(this),\n onChange: this.handleDateChange.bind(this),\n appendTo: container,\n noCalendar: false,\n static: this.staticPosition,\n });\n return options;\n }\n\n async updateFlatpickrOptions(): Promise<void> {\n if (!this.flatpickrInstance) {\n console.warn('Cannot update options: Flatpickr instance not available');\n return;\n }\n await this.debouncedUpdate();\n }\n\n setInitialDates(): void {\n if (!this.flatpickrInstance) {\n console.warn(\n 'Cannot set initial dates: Flatpickr instance not available'\n );\n return;\n }\n\n try {\n if (Array.isArray(this.defaultDate)) {\n const validDates = this.defaultDate\n .filter(\n (date): date is string =>\n typeof date === 'string' && date.trim() !== ''\n )\n .map((date) => {\n const trimmed = date.trim();\n if (trimmed.includes('T')) {\n const parsedISO = new Date(trimmed);\n return isNaN(parsedISO.getTime()) ? null : parsedISO;\n } else {\n const parts = trimmed.split('-').map(Number);\n if (parts.length === 3) {\n const [year, month, day] = parts;\n if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {\n const localDate = new Date();\n localDate.setFullYear(year, month - 1, day);\n localDate.setHours(0, 0, 0, 0);\n return localDate;\n }\n }\n }\n return null;\n })\n .filter((date): date is Date => date !== null);\n\n if (validDates.length === 2) {\n this.flatpickrInstance.setDate(validDates, true);\n this.value = validDates as [Date, Date];\n } else {\n console.warn(\n 'Invalid or incomplete date range provided in defaultDate'\n );\n }\n } else if (Array.isArray(this.value) && this.value.length === 2) {\n const validDates = (this.value as (string | Date)[])\n .map((date) => {\n if (typeof date === 'string') {\n const trimmed = date.trim();\n const parsed = new Date(trimmed);\n return isNaN(parsed.getTime()) ? null : parsed;\n }\n if (date instanceof Date && !isNaN(date.getTime())) {\n return date;\n }\n console.warn('Invalid date in value array:', date);\n return null;\n })\n .filter((date): date is Date => date !== null);\n\n if (validDates.length === 2) {\n this.flatpickrInstance.setDate(validDates, true);\n } else {\n console.warn('Invalid or incomplete date range provided in value');\n }\n }\n } catch (error) {\n console.warn('Error setting initial dates:', error);\n if (error instanceof Error) {\n console.warn('Error details:', error.message);\n }\n }\n }\n\n handleOpen(): void {\n if (!this._shouldFlatpickrOpen) {\n this.flatpickrInstance?.close();\n this._shouldFlatpickrOpen = true;\n }\n }\n\n async handleDateChange(selectedDates: Date[]): Promise<void> {\n this._hasInteracted = true;\n\n if (!this._isClearing) {\n if (selectedDates.length === 0) {\n this.value = [null, null];\n emitValue(this, 'on-change', {\n dates: this.value,\n source: 'clear',\n });\n } else if (selectedDates.length === 1) {\n this.value = [selectedDates[0], null];\n } else {\n this.value = [selectedDates[0], selectedDates[1]];\n const formattedDates = selectedDates.map((date) => date.toISOString());\n const dateString = this._inputEl?.value || formattedDates.join(' to ');\n emitValue(this, 'on-change', {\n dates: formattedDates,\n dateString,\n });\n }\n }\n\n this.updateSelectedDateRangeAria(selectedDates);\n this._validate(true, false);\n await this.updateComplete;\n }\n\n updateSelectedDateRangeAria(selectedDates: Date[]) {\n if (!this._inputEl) return;\n\n let ariaLabel = this._textStrings.dateRange;\n\n if (selectedDates.length === 0) {\n ariaLabel = this._textStrings.noDateSelected;\n } else if (selectedDates.length === 1) {\n ariaLabel = this._textStrings.startDateSelected.replace(\n '{0}',\n selectedDates[0].toLocaleDateString(this.locale)\n );\n } else if (selectedDates.length === 2) {\n const [startDate, endDate] = selectedDates;\n ariaLabel = this._textStrings.dateRangeSelected\n .replace('{0}', startDate.toLocaleDateString(this.locale))\n .replace('{1}', endDate.toLocaleDateString(this.locale));\n }\n\n this._inputEl.setAttribute('aria-label', ariaLabel);\n }\n\n private setShouldFlatpickrOpen(value: boolean) {\n this._shouldFlatpickrOpen = value;\n }\n\n private closeFlatpickr() {\n this.flatpickrInstance?.close();\n }\n\n private preventFlatpickrOpen(event: Event) {\n preventFlatpickrOpen(event, this.setShouldFlatpickrOpen.bind(this));\n }\n\n private handleInputClickEvent() {\n handleInputClick(this.setShouldFlatpickrOpen.bind(this));\n }\n\n private handleInputFocusEvent() {\n handleInputFocus(\n this._shouldFlatpickrOpen,\n this.closeFlatpickr.bind(this),\n this.setShouldFlatpickrOpen.bind(this)\n );\n }\n\n private _validate(interacted: boolean, report: boolean): void {\n if (!this._inputEl || !(this._inputEl instanceof HTMLInputElement)) {\n return;\n }\n\n if (interacted) {\n this._hasInteracted = true;\n }\n\n const isEmpty =\n !this._inputEl.value.trim() || !this.value[0] || !this.value[1];\n const isRequired = this.required;\n\n let validity = this._inputEl.validity;\n let validationMessage = this._inputEl.validationMessage;\n\n if (isRequired && isEmpty) {\n validity = { ...validity, valueMissing: true };\n validationMessage =\n this.defaultErrorMessage || this._textStrings.pleaseSelectDate;\n }\n\n if (this.invalidText) {\n validity = { ...validity, customError: true };\n validationMessage = this.invalidText;\n }\n\n const isValid = !validity.valueMissing && !validity.customError;\n\n if (!isValid && !validationMessage) {\n validationMessage = this._textStrings.pleaseSelectValidDate;\n }\n\n this._internals.setValidity(validity, validationMessage, this._inputEl);\n this._isInvalid =\n !isValid && (this._hasInteracted || this.invalidText !== '');\n this._internalValidationMsg = validationMessage;\n\n if (report) {\n this._internals.reportValidity();\n }\n\n this.requestUpdate();\n }\n\n private _onChange() {\n this._validate(true, false);\n }\n\n private _handleFormReset() {\n this.value = [null, null];\n if (this.flatpickrInstance) {\n this.flatpickrInstance.clear();\n }\n this._hasInteracted = false;\n this._validate(false, false);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-date-range-picker': DateRangePicker;\n }\n}\n"],"names":["_defaultTextStrings","requiredText","clearAll","pleaseSelectDate","pleaseSelectValidDate","dateRange","noDateSelected","startDateSelected","dateRangeSelected","DateRangePicker","FormMixin","LitElement","constructor","this","label","locale","dateFormat","defaultDate","defaultErrorMessage","value","warnText","disable","_processedDisableDates","enable","caption","required","size","dateRangePickerDisabled","twentyFourHourFormat","minDate","maxDate","errorAriaLabel","errorTitle","warningAriaLabel","warningTitle","staticPosition","_enableTime","_hasInteracted","textStrings","_textStrings","_isClearing","_shouldFlatpickrOpen","_initialized","debouncedUpdate","debounce","async","flatpickrInstance","initializeFlatpickr","error","console","handleResize","func","wait","timeout","args","window","clearTimeout","setTimeout","apply","disconnectedCallback","super","removeEventListener","_onChange","_handleFormReset","_a","destroy","connectedCallback","addEventListener","hasValue","_inputEl","Array","isArray","length","render","errorId","name","warningId","anchorId","Math","random","toString","slice","descriptionId","placeholder","getPlaceholder","html","classMap","getDateRangePickerClasses","preventFlatpickrOpen","_b","_c","_isInvalid","handleInputClickEvent","handleInputFocusEvent","_handleClear","unsafeSVG","clearIcon","calendarIcon","renderValidationMessage","invalidText","errorIcon","_internalValidationMsg","firstUpdated","changedProperties","injectFlatpickrStyles","ShidokaFlatpickrTheme","updateComplete","setupAnchor","updated","has","close","setInitialDates","newValue","every","v","clear","currentDates","selectedDates","getTime","map","date","Date","year","month","day","split","Number","isNaN","warn","updateFlatpickrOptions","updateEnableTime","_clearInput","options","reinitFlatpickr","emitValue","dates","dateString","source","_validate","requestUpdate","event","preventDefault","stopPropagation","handleClose","initializeSingleAnchorFlatpickr","inputEl","getFlatpickrOptions","getComponentFlatpickrOptions","setCalendarAttributes","instance","calendarContainer","Error","container","getModalContainer","document","body","setAttribute","bind","hideEmptyYear","message","undefined","enableTime","mode","closeOnSelect","loadLocale","onOpen","handleOpen","onClose","onChange","handleDateChange","appendTo","noCalendar","static","validDates","filter","trim","trimmed","includes","parsedISO","parts","localDate","setFullYear","setHours","setDate","parsed","formattedDates","toISOString","join","updateSelectedDateRangeAria","ariaLabel","replace","toLocaleDateString","startDate","endDate","setShouldFlatpickrOpen","closeFlatpickr","handleInputClick","handleInputFocus","interacted","report","HTMLInputElement","isEmpty","isRequired","validity","validationMessage","valueMissing","customError","isValid","_internals","setValidity","reportValidity","styles","DateRangePickerStyles","__decorate","property","type","String","prototype","state","Boolean","query","Object","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAGxB,EAAE,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,CAAC,KAAK,CAAQ;IAGrB,QAAQ,UAAS;IAIjB,OAAO,KAAK,SAAS,GAEpB;IAWD,WAAW,UAAS;
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAGxB,EAAE,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,CAAC,KAAK,CAAQ;IAGrB,QAAQ,UAAS;IAIjB,OAAO,KAAK,SAAS,GAEpB;IAWD,WAAW,UAAS;IAGX,IAAI,SAAS;IAGb,QAAQ,SAAK;IAGtB,eAAe,SAAW;IAG1B,eAAe,SAAM;IAGrB,eAAe,SAAW;IAEjB,MAAM;IAkBN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAetD,OAAO,CAAC,YAAY,CASlB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as
|
|
1
|
+
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as o,o as r,e as i}from"../../../vendor/lit-446874c7.js";import{i as a,s as d,x as l}from"../../../vendor/lit-element-c6c02f24.js";var s=a`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -37,10 +37,6 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
|
|
|
37
37
|
outline: 2px solid transparent;
|
|
38
38
|
outline-offset: -2px;
|
|
39
39
|
transition: outline-color 150ms ease-out;
|
|
40
|
-
border-radius: 0 0 4px 4px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
:host([data-tab-style=line]) {
|
|
44
40
|
border-radius: 4px 4px 0 0;
|
|
45
41
|
}
|
|
46
42
|
|
|
@@ -56,9 +52,6 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
|
|
|
56
52
|
:host([vertical]) {
|
|
57
53
|
border-radius: 0 4px 4px 0;
|
|
58
54
|
}
|
|
59
|
-
:host([vertical][data-tab-style=line]) {
|
|
60
|
-
border-radius: 0 4px 4px 0;
|
|
61
|
-
}
|
|
62
55
|
}
|
|
63
56
|
.tab {
|
|
64
57
|
display: flex;
|
|
@@ -67,15 +60,21 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
|
|
|
67
60
|
cursor: pointer;
|
|
68
61
|
white-space: nowrap;
|
|
69
62
|
text-align: center;
|
|
63
|
+
border-radius: 4px 4px 0 0;
|
|
64
|
+
border-bottom: 1px solid var(--kd-color-border-accent-secondary);
|
|
70
65
|
transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
|
|
71
66
|
}
|
|
72
67
|
.tab ::slotted(svg) {
|
|
73
68
|
display: flex;
|
|
74
69
|
}
|
|
70
|
+
.tab.size--md {
|
|
71
|
+
height: 48px;
|
|
72
|
+
padding: 12px 14px;
|
|
73
|
+
}
|
|
75
74
|
.tab.size--sm {
|
|
76
75
|
font-family: var(--kd-font-family-secondary);
|
|
77
|
-
font-size: var(--kd-font-size-utility-
|
|
78
|
-
line-height: var(--kd-line-height-utility-
|
|
76
|
+
font-size: var(--kd-font-size-utility-3-sm);
|
|
77
|
+
line-height: var(--kd-line-height-utility-3-sm);
|
|
79
78
|
font-weight: var(--kd-font-weight-regular);
|
|
80
79
|
letter-spacing: var(--kd-letter-spacing-5);
|
|
81
80
|
height: 30px;
|
|
@@ -83,143 +82,84 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
|
|
|
83
82
|
}
|
|
84
83
|
@media (min-width: 42rem) {
|
|
85
84
|
.tab.size--sm {
|
|
86
|
-
font-size: var(--kd-font-size-utility-
|
|
87
|
-
line-height: var(--kd-line-height-utility-
|
|
85
|
+
font-size: var(--kd-font-size-utility-3-md);
|
|
86
|
+
line-height: var(--kd-line-height-utility-3-md);
|
|
88
87
|
}
|
|
89
88
|
}
|
|
90
89
|
@media (min-width: 74rem) {
|
|
91
90
|
.tab.size--sm {
|
|
92
|
-
font-size: var(--kd-font-size-utility-
|
|
93
|
-
line-height: var(--kd-line-height-utility-
|
|
91
|
+
font-size: var(--kd-font-size-utility-3-lg);
|
|
92
|
+
line-height: var(--kd-line-height-utility-3-lg);
|
|
94
93
|
}
|
|
95
94
|
}
|
|
96
95
|
@media (min-width: 82rem) {
|
|
97
96
|
.tab.size--sm {
|
|
98
|
-
font-size: var(--kd-font-size-utility-
|
|
99
|
-
line-height: var(--kd-line-height-utility-
|
|
97
|
+
font-size: var(--kd-font-size-utility-3-xlg);
|
|
98
|
+
line-height: var(--kd-line-height-utility-3-xlg);
|
|
100
99
|
}
|
|
101
100
|
}
|
|
102
101
|
@media (min-width: 99rem) {
|
|
103
102
|
.tab.size--sm {
|
|
104
|
-
font-size: var(--kd-font-size-utility-
|
|
105
|
-
line-height: var(--kd-line-height-utility-
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
.tab.size--md {
|
|
109
|
-
height: 48px;
|
|
110
|
-
padding: 12px 14px;
|
|
111
|
-
}
|
|
112
|
-
@media (min-width: 42rem) {
|
|
113
|
-
.tab.vertical {
|
|
114
|
-
border-bottom: none;
|
|
115
|
-
border-left: 2px solid var(--kd-color-border-accent-secondary);
|
|
116
|
-
white-space: initial;
|
|
117
|
-
text-align: left;
|
|
103
|
+
font-size: var(--kd-font-size-utility-3-max);
|
|
104
|
+
line-height: var(--kd-line-height-utility-3-max);
|
|
118
105
|
}
|
|
119
106
|
}
|
|
120
|
-
.tab.primary {
|
|
121
|
-
border-radius: 0 0 4px 4px;
|
|
122
|
-
border-top: 2px solid var(--kd-color-border-accent-secondary);
|
|
123
|
-
}
|
|
124
|
-
.tab.secondary {
|
|
125
|
-
border-radius: 4px 4px 0 0;
|
|
126
|
-
border-bottom: 2px solid var(--kd-color-border-accent-secondary);
|
|
127
|
-
}
|
|
128
107
|
.tab.selected {
|
|
129
108
|
font-weight: 500;
|
|
109
|
+
border-width: 2px;
|
|
110
|
+
}
|
|
111
|
+
.tab.vertical.selected {
|
|
112
|
+
border-width: 2px;
|
|
130
113
|
}
|
|
131
114
|
@media (min-width: 42rem) {
|
|
132
115
|
.tab.vertical {
|
|
133
116
|
border-radius: 0 4px 4px 0;
|
|
134
|
-
border-top: none;
|
|
135
117
|
border-bottom: none;
|
|
136
|
-
border-left:
|
|
118
|
+
border-left: 1px solid var(--kd-color-border-accent-secondary);
|
|
119
|
+
white-space: initial;
|
|
120
|
+
text-align: left;
|
|
137
121
|
}
|
|
138
122
|
}
|
|
139
|
-
.tab.
|
|
140
|
-
background: transparent;
|
|
123
|
+
.tab.tab:not(.disabled) {
|
|
141
124
|
color: var(--kd-color-text-level-primary);
|
|
142
125
|
}
|
|
143
|
-
.tab.
|
|
144
|
-
color: var(--kd-color-text-level-primary);
|
|
145
|
-
background: var(--kd-color-background-button-tertiary-state-default);
|
|
126
|
+
.tab.tab:not(.disabled).selected {
|
|
146
127
|
border-color: var(--kd-color-border-button-tertiary-state-focused);
|
|
128
|
+
color: var(--kd-color-text-link-level-default);
|
|
147
129
|
}
|
|
148
|
-
.tab.
|
|
130
|
+
.tab.tab:not(.disabled):hover, .tab.tab:not(.disabled).selected:hover {
|
|
149
131
|
background: var(--kd-color-background-button-tertiary-state-hover);
|
|
150
|
-
border-color: var(--kd-color-border-button-
|
|
132
|
+
border-color: var(--kd-color-border-button-secondary-state-hover);
|
|
151
133
|
color: var(--kd-color-text-level-primary);
|
|
152
134
|
}
|
|
153
|
-
.tab.
|
|
154
|
-
background: var(--kd-color-background-button-
|
|
155
|
-
border-color: var(--kd-color-border-button-
|
|
135
|
+
.tab.tab:not(.disabled):active, .tab.tab:not(.disabled).selected:active {
|
|
136
|
+
background: var(--kd-color-background-button-primary-state-pressed);
|
|
137
|
+
border-color: var(--kd-color-border-button-secondary-state-hover);
|
|
156
138
|
color: var(--kd-color-text-level-light);
|
|
157
139
|
}
|
|
158
|
-
.tab.
|
|
140
|
+
.tab.tab.ai-connected--true:not(.disabled) {
|
|
159
141
|
color: var(--kd-color-text-button-ai-default);
|
|
160
142
|
border-color: var(--kd-color-border-level-ai-tertiary);
|
|
161
143
|
}
|
|
162
|
-
.tab.
|
|
163
|
-
border-color: var(--kd-color-border-
|
|
164
|
-
background: var(--kd-color-background-button-secondary-ai-default);
|
|
144
|
+
.tab.tab.ai-connected--true:not(.disabled).selected {
|
|
145
|
+
border-color: var(--kd-color-border-button-ai-state-focused);
|
|
165
146
|
}
|
|
166
|
-
.tab.
|
|
147
|
+
.tab.tab.ai-connected--true:not(.disabled):hover, .tab.tab.ai-connected--true:not(.disabled).selected:hover {
|
|
167
148
|
background: var(--kd-color-background-button-secondary-ai-hover);
|
|
168
|
-
border-color: var(--kd-color-border-level-ai-primary);
|
|
169
|
-
color: var(--kd-color-text-level-light);
|
|
170
|
-
}
|
|
171
|
-
.tab.primary.ai-connected--true:not(.disabled):active, .tab.primary.ai-connected--true:not(.disabled).selected:active {
|
|
172
|
-
background: var(--kd-color-background-button-primary-ai-hover);
|
|
173
149
|
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
174
|
-
color: var(--kd-color-text-button-dark-primary);
|
|
175
|
-
}
|
|
176
|
-
.tab.secondary:not(.disabled) {
|
|
177
|
-
color: var(--kd-color-text-level-primary);
|
|
178
|
-
}
|
|
179
|
-
.tab.secondary:not(.disabled).selected {
|
|
180
|
-
background: var(--kd-color-background-button-tertiary-state-default);
|
|
181
|
-
border-color: var(--kd-color-border-button-tertiary-state-focused);
|
|
182
|
-
}
|
|
183
|
-
.tab.secondary:not(.disabled):hover, .tab.secondary:not(.disabled).selected:hover {
|
|
184
|
-
background: var(--kd-color-background-button-tertiary-state-hover);
|
|
185
|
-
border-color: var(--kd-color-border-button-tertiary-state-hover);
|
|
186
|
-
}
|
|
187
|
-
.tab.secondary:not(.disabled):active, .tab.secondary:not(.disabled).selected:active {
|
|
188
|
-
background: var(--kd-color-background-button-tertiary-state-pressed);
|
|
189
|
-
border-color: var(--kd-color-border-button-tertiary-state-pressed);
|
|
190
150
|
color: var(--kd-color-text-level-light);
|
|
191
151
|
}
|
|
192
|
-
.tab.
|
|
193
|
-
color: var(--kd-color-text-button-ai-default);
|
|
194
|
-
border-color: var(--kd-color-border-level-ai-tertiary);
|
|
195
|
-
}
|
|
196
|
-
.tab.secondary.ai-connected--true:not(.disabled).selected {
|
|
197
|
-
border-color: var(--kd-color-border-level-ai-primary);
|
|
198
|
-
background: var(--kd-color-background-button-secondary-ai-default);
|
|
199
|
-
}
|
|
200
|
-
.tab.secondary.ai-connected--true:not(.disabled):hover, .tab.secondary.ai-connected--true:not(.disabled).selected:hover {
|
|
201
|
-
background: var(--kd-color-background-button-secondary-ai-hover);
|
|
202
|
-
color: var(--kd-color-text-level-light);
|
|
203
|
-
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
204
|
-
}
|
|
205
|
-
.tab.secondary.ai-connected--true:not(.disabled):active, .tab.secondary.ai-connected--true:not(.disabled).selected:active {
|
|
152
|
+
.tab.tab.ai-connected--true:not(.disabled):active, .tab.tab.ai-connected--true:not(.disabled).selected:active {
|
|
206
153
|
background: var(--kd-color-background-button-primary-ai-hover);
|
|
154
|
+
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
207
155
|
color: var(--kd-color-text-button-dark-primary);
|
|
208
|
-
border-color: var(--kd-color-border-button-ai-state-focused);
|
|
209
156
|
}
|
|
210
157
|
.tab.disabled {
|
|
211
158
|
color: var(--kd-color-text-link-level-disabled);
|
|
212
159
|
cursor: not-allowed;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
border-top: 2px solid var(--kd-color-border-variants-light);
|
|
216
|
-
background: var(--kd-color-background-ui-default-disabled);
|
|
217
|
-
}
|
|
218
|
-
.tab.disabled.secondary {
|
|
219
|
-
border-bottom: 2px solid var(--kd-color-border-variants-light);
|
|
220
|
-
}`;let c=class extends i{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this.vertical=!1,this.aiConnected=!1,this.tabStyle="primary",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false",this._handleClick=e=>{if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}}get _vertical(){return this.vertical}render(){const e={tab:!0,primary:"primary"===this.tabStyle||"contained"===this.tabStyle,secondary:"secondary"===this.tabStyle||"line"===this.tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled,[`ai-connected--${this.aiConnected}`]:!0};return l`
|
|
221
|
-
<div class=${o(e)}>
|
|
160
|
+
}`;let n=class extends d{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this.vertical=!1,this.aiConnected=!1,this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false",this._handleClick=t=>{if(!this.selected&&!this.disabled){const e=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:t,tabId:this.id}});this.dispatchEvent(e)}}}get _vertical(){return this.vertical}render(){const t={tab:!0,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled,[`ai-connected--${this.aiConnected}`]:!0};return l`
|
|
161
|
+
<div class=${r(t)}>
|
|
222
162
|
<slot></slot>
|
|
223
163
|
</div>
|
|
224
|
-
`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}willUpdate(
|
|
164
|
+
`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}willUpdate(t){t.has("id")&&(this["aria-controls"]=`${this.id}-panel`),t.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),t.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}};n.styles=s,t([e({type:String,reflect:!0})],n.prototype,"id",void 0),t([e({type:Boolean,reflect:!0})],n.prototype,"selected",void 0),t([e({type:Boolean})],n.prototype,"disabled",void 0),t([o()],n.prototype,"_size",void 0),t([e({type:Boolean,reflect:!0,attribute:"vertical"})],n.prototype,"vertical",void 0),t([o()],n.prototype,"_vertical",null),t([e({type:Boolean,reflect:!0,attribute:"data-aiconnected",converter:{fromAttribute:t=>"true"===t,toAttribute:t=>t?"true":"false"}})],n.prototype,"aiConnected",void 0),t([e({type:String,reflect:!0})],n.prototype,"role",void 0),t([e({type:Number,reflect:!0})],n.prototype,"tabIndex",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-selected",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-controls",void 0),t([e({type:String,reflect:!0})],n.prototype,"aria-disabled",void 0),n=t([i("kyn-tab")],n);export{n as Tab};
|
|
225
165
|
//# sourceMappingURL=tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n static override styles = TabScss;\n\n @property({ type: String, reflect: true })\n override id = '';\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @state()\n private _size = 'md';\n\n @property({ type: Boolean, reflect: true, attribute: 'vertical' })\n vertical = false;\n\n // Keep private state for backward compatibility\n @state()\n private get _vertical(): boolean {\n return this.vertical;\n }\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'data-aiconnected',\n converter: {\n fromAttribute: (value: string | null) => value === 'true',\n toAttribute: (value: boolean) => (value ? 'true' : 'false'),\n },\n })\n aiConnected = false;\n\n @property({ type: String, reflect: true
|
|
1
|
+
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n static override styles = TabScss;\n\n @property({ type: String, reflect: true })\n override id = '';\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @state()\n private _size = 'md';\n\n @property({ type: Boolean, reflect: true, attribute: 'vertical' })\n vertical = false;\n\n // Keep private state for backward compatibility\n @state()\n private get _vertical(): boolean {\n return this.vertical;\n }\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'data-aiconnected',\n converter: {\n fromAttribute: (value: string | null) => value === 'true',\n toAttribute: (value: boolean) => (value ? 'true' : 'false'),\n },\n })\n aiConnected = false;\n\n @property({ type: String, reflect: true })\n override role = 'tab';\n\n @property({ type: Number, reflect: true })\n override tabIndex = 0;\n\n @property({ type: String, reflect: true })\n 'aria-selected' = 'false';\n\n @property({ type: String, reflect: true })\n 'aria-controls' = '';\n\n @property({ type: String, reflect: true })\n 'aria-disabled' = 'false';\n\n override render() {\n const classes = {\n tab: true,\n 'size--sm': this._size === 'sm',\n 'size--md': this._size === 'md',\n vertical: this._vertical,\n selected: this.selected,\n disabled: this.disabled,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <slot></slot>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this._handleClick);\n }\n\n override disconnectedCallback() {\n this.removeEventListener('click', this._handleClick);\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: Map<string, unknown>) {\n if (changedProps.has('id')) {\n this['aria-controls'] = `${this.id}-panel`;\n }\n\n if (changedProps.has('selected')) {\n this['aria-selected'] = this.selected.toString();\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n if (changedProps.has('disabled')) {\n this['aria-disabled'] = this.disabled.toString();\n }\n }\n\n private _handleClick = (e: Event) => {\n if (!this.selected && !this.disabled) {\n const event = new CustomEvent('tab-activated', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e, tabId: this.id },\n });\n this.dispatchEvent(event);\n }\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tab': Tab;\n }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","vertical","aiConnected","role","tabIndex","_handleClick","e","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","_vertical","render","classes","tab","html","classMap","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","attribute","converter","fromAttribute","value","toAttribute","Number","customElement"],"mappings":"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"}
|
|
@@ -7,8 +7,6 @@ import { LitElement } from 'lit';
|
|
|
7
7
|
*/
|
|
8
8
|
export declare class Tabs extends LitElement {
|
|
9
9
|
static styles: any;
|
|
10
|
-
/** Tab style. `'primary'` or `'secondary'`. `'contained'` and `'line'` are now deprecated. */
|
|
11
|
-
tabStyle: string;
|
|
12
10
|
/** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */
|
|
13
11
|
tabSize: string;
|
|
14
12
|
/** Vertical orientation. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,WAAW,UAAS;IAEpB,2FAA2F;IAE3F,sBAAsB,UAAS;IAE/B,kDAAkD;IAElD,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;IA8BN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG;IAUrC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;IAYvB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IAahC;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;CA4DxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-446874c7.js";import{i as s,s as r,x as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-446874c7.js";import{i as s,s as r,x as l}from"../../../vendor/lit-element-c6c02f24.js";var n=s`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -53,28 +53,35 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
|
|
|
53
53
|
.tabs {
|
|
54
54
|
display: flex;
|
|
55
55
|
flex-shrink: 0;
|
|
56
|
+
gap: 4px;
|
|
56
57
|
overflow-x: auto;
|
|
58
|
+
position: relative;
|
|
57
59
|
}
|
|
58
|
-
.tabs
|
|
60
|
+
.tabs::after {
|
|
59
61
|
content: "";
|
|
60
|
-
border-bottom:
|
|
61
|
-
|
|
62
|
+
border-bottom: 1px solid var(--kd-color-border-accent-secondary);
|
|
63
|
+
position: absolute;
|
|
64
|
+
bottom: 0;
|
|
65
|
+
left: 0;
|
|
66
|
+
right: 0;
|
|
67
|
+
z-index: -1;
|
|
62
68
|
}
|
|
63
|
-
.tabs.
|
|
64
|
-
|
|
65
|
-
border-bottom: 2px solid var(--kd-color-border-level-ai-tertiary);
|
|
66
|
-
flex-grow: 1;
|
|
69
|
+
.tabs.ai-connected--true::after {
|
|
70
|
+
border-color: var(--kd-color-border-level-ai-tertiary);
|
|
67
71
|
}
|
|
68
72
|
@media (min-width: 42rem) {
|
|
69
73
|
.vertical .tabs {
|
|
70
74
|
flex-direction: column;
|
|
71
75
|
overflow-x: initial;
|
|
72
76
|
}
|
|
73
|
-
.vertical .tabs.
|
|
74
|
-
content:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
.vertical .tabs.tabs::after {
|
|
78
|
+
content: "";
|
|
79
|
+
border-bottom: 0;
|
|
80
|
+
border-left: 1px solid var(--kd-color-border-accent-secondary);
|
|
81
|
+
position: absolute;
|
|
82
|
+
left: 0;
|
|
83
|
+
top: 0;
|
|
84
|
+
bottom: 0;
|
|
78
85
|
}
|
|
79
86
|
}
|
|
80
87
|
|
|
@@ -89,7 +96,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
|
|
|
89
96
|
}
|
|
90
97
|
.panels:focus-visible {
|
|
91
98
|
outline-color: var(--kd-color-border-variants-focus);
|
|
92
|
-
}`;let d=class extends r{constructor(){super(...arguments),this.
|
|
99
|
+
}`;let d=class extends r{constructor(){super(...arguments),this.tabSize="md",this.vertical=!1,this.aiConnected=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const e={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels,[`ai-connected--${this.aiConnected}`]:!0},t={tabs:!0,[`ai-connected--${this.aiConnected}`]:!0};return l`
|
|
93
100
|
<div class=${i(e)}>
|
|
94
101
|
<div
|
|
95
102
|
class=${i(t)}
|
|
@@ -103,5 +110,5 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
|
|
|
103
110
|
<slot></slot>
|
|
104
111
|
</div>
|
|
105
112
|
</div>
|
|
106
|
-
`}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("
|
|
113
|
+
`}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("aiConnected"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e.vertical=this.vertical,e.aiConnected=this.aiConnected})),this._tabPanels.forEach((e=>{e.vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e,t=!0){this._tabs.forEach((t=>{t.selected=t.id===e})),t&&this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const a=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(a)}_handleKeyboard(e){const t=this._tabs.length,a=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?t-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?t-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}case 39:case 40:{let i=a===t-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===t-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}default:return}}};d.styles=n,e([t({type:String})],d.prototype,"tabSize",void 0),e([t({type:Boolean})],d.prototype,"vertical",void 0),e([t({type:Boolean})],d.prototype,"aiConnected",void 0),e([t({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),e([t({type:Boolean})],d.prototype,"scrollablePanels",void 0),e([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([o("kyn-tabs")],d);export{d as Tabs};
|
|
107
114
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n static override styles = TabsScss;\n\n /** Tab style. `'primary'` or `'secondary'`. `'contained'` and `'line'` are now deprecated. */\n @property({ type: String })\n tabStyle = 'primary';\n\n /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n @property({ type: String })\n tabSize = 'md';\n\n /** Vertical orientation. */\n @property({ type: Boolean })\n vertical = false;\n\n /** AI specifier. */\n @property({ type: Boolean })\n aiConnected = false;\n\n /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n @property({ type: Boolean })\n disableAutoFocusUpdate = false;\n\n /** Adds scrollable overflow to the tab panels. */\n @property({ type: Boolean })\n scrollablePanels = false;\n\n /** Queries for slotted tabs.\n * @internal\n */\n @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n _tabs!: any;\n\n /** Queries for slotted tab panels.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-tab-panel' })\n _tabPanels!: any;\n\n override render() {\n const wrapperClasses = {\n wrapper: true,\n vertical: this.vertical,\n scrollable: this.scrollablePanels,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n const tabsClasses = {\n tabs: true,\n primary: this.tabStyle === 'primary' || this.tabStyle === 'contained',\n secondary: this.tabStyle === 'secondary' || this.tabStyle === 'line',\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n return html`\n <div class=${classMap(wrapperClasses)}>\n <div\n class=${classMap(tabsClasses)}\n role=\"tablist\"\n @keydown=${(e: any) => this._handleKeyboard(e)}\n >\n <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n </div>\n\n <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('tab-activated', (e) => this._handleChange(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: any) {\n if (\n changedProps.has('tabSize') ||\n changedProps.has('vertical') ||\n changedProps.has('tabStyle') ||\n changedProps.has('aiConnected')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChangeTabs() {\n this._updateChildren();\n }\n\n private _updateChildren() {\n this._tabs.forEach((tab: any) => {\n tab._size = this.tabSize;\n tab.vertical = this.vertical;\n tab.tabStyle = this.tabStyle;\n tab.aiConnected = this.aiConnected;\n });\n\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.vertical = this.vertical;\n });\n }\n\n /**\n * Updates children and emits a change event based on the provided\n * event details when a child kyn-tab is clicked.\n * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n * that triggered the handleChange function.\n */\n private _handleChange(e: any) {\n e.stopPropagation();\n this._updateChildrenSelection(e.detail.tabId);\n this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n }\n\n /**\n * Updates the selected property of tabs and the visible property of tab panels based on\n * the selected tab ID.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the tab that is currently selected.\n */\n private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n // update tabs selected prop\n this._tabs.forEach((tab: any) => {\n tab.selected = tab.id === selectedTabId;\n });\n\n // update tab-panels visible prop\n if (!updatePanel) return;\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.visible = tabPanel.tabId === selectedTabId;\n });\n }\n\n /**\n * Creates and dispatches a custom event called 'on-change' with the provided original event and\n * selected tab ID as details.\n * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n * change event. It could be any type of event object, such as a click event or a keydown event.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the selected tab.\n */\n private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n const event = new CustomEvent('on-change', {\n detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handles keyboard events for navigating between tabs.\n * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n * contains information about the keyboard event, such as the key code of the pressed key.\n * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n * except when the `keyCode` matches the left or right arrow key codes.\n */\n private _handleKeyboard(e: any) {\n const LEFT_ARROW_KEY_CODE = 37;\n const UP_ARROW_KEY_CODE = 38;\n const RIGHT_ARROW_KEY_CODE = 39;\n const DOWN_ARROW_KEY_CODE = 40;\n const ENTER_KEY_CODE = 13;\n const SPACE_KEY_CODE = 32;\n const TabCount = this._tabs.length;\n const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n switch (e.keyCode) {\n case ENTER_KEY_CODE:\n case SPACE_KEY_CODE: {\n this._updateChildrenSelection(\n this._tabs[SelectedTabIndex].id,\n this.disableAutoFocusUpdate\n );\n return;\n }\n case LEFT_ARROW_KEY_CODE:\n case UP_ARROW_KEY_CODE: {\n // activate previous tab\n let prevIndex =\n SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n let prevTab = this._tabs[prevIndex];\n\n if (prevTab.disabled) {\n prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n prevTab = this._tabs[prevIndex];\n }\n\n prevTab.focus();\n\n this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, prevTab.id);\n return;\n }\n case RIGHT_ARROW_KEY_CODE:\n case DOWN_ARROW_KEY_CODE: {\n // activate next tab\n let nextIndex =\n SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n let nextTab = this._tabs[nextIndex];\n\n if (nextTab.disabled) {\n nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n nextTab = this._tabs[nextIndex];\n }\n\n nextTab.focus();\n\n this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, nextTab.id);\n return;\n }\n default: {\n return;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tabs': Tabs;\n }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabStyle","tabSize","vertical","aiConnected","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","primary","secondary","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n static override styles = TabsScss;\n\n /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n @property({ type: String })\n tabSize = 'md';\n\n /** Vertical orientation. */\n @property({ type: Boolean })\n vertical = false;\n\n /** AI specifier. */\n @property({ type: Boolean })\n aiConnected = false;\n\n /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n @property({ type: Boolean })\n disableAutoFocusUpdate = false;\n\n /** Adds scrollable overflow to the tab panels. */\n @property({ type: Boolean })\n scrollablePanels = false;\n\n /** Queries for slotted tabs.\n * @internal\n */\n @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n _tabs!: any;\n\n /** Queries for slotted tab panels.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-tab-panel' })\n _tabPanels!: any;\n\n override render() {\n const wrapperClasses = {\n wrapper: true,\n vertical: this.vertical,\n scrollable: this.scrollablePanels,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n const tabsClasses = {\n tabs: true,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n return html`\n <div class=${classMap(wrapperClasses)}>\n <div\n class=${classMap(tabsClasses)}\n role=\"tablist\"\n @keydown=${(e: any) => this._handleKeyboard(e)}\n >\n <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n </div>\n\n <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('tab-activated', (e) => this._handleChange(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: any) {\n if (\n changedProps.has('tabSize') ||\n changedProps.has('vertical') ||\n changedProps.has('aiConnected')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChangeTabs() {\n this._updateChildren();\n }\n\n private _updateChildren() {\n this._tabs.forEach((tab: any) => {\n tab._size = this.tabSize;\n tab.vertical = this.vertical;\n tab.aiConnected = this.aiConnected;\n });\n\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.vertical = this.vertical;\n });\n }\n\n /**\n * Updates children and emits a change event based on the provided\n * event details when a child kyn-tab is clicked.\n * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n * that triggered the handleChange function.\n */\n private _handleChange(e: any) {\n e.stopPropagation();\n this._updateChildrenSelection(e.detail.tabId);\n this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n }\n\n /**\n * Updates the selected property of tabs and the visible property of tab panels based on\n * the selected tab ID.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the tab that is currently selected.\n */\n private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n // update tabs selected prop\n this._tabs.forEach((tab: any) => {\n tab.selected = tab.id === selectedTabId;\n });\n\n // update tab-panels visible prop\n if (!updatePanel) return;\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.visible = tabPanel.tabId === selectedTabId;\n });\n }\n\n /**\n * Creates and dispatches a custom event called 'on-change' with the provided original event and\n * selected tab ID as details.\n * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n * change event. It could be any type of event object, such as a click event or a keydown event.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the selected tab.\n */\n private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n const event = new CustomEvent('on-change', {\n detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handles keyboard events for navigating between tabs.\n * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n * contains information about the keyboard event, such as the key code of the pressed key.\n * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n * except when the `keyCode` matches the left or right arrow key codes.\n */\n private _handleKeyboard(e: any) {\n const LEFT_ARROW_KEY_CODE = 37;\n const UP_ARROW_KEY_CODE = 38;\n const RIGHT_ARROW_KEY_CODE = 39;\n const DOWN_ARROW_KEY_CODE = 40;\n const ENTER_KEY_CODE = 13;\n const SPACE_KEY_CODE = 32;\n const TabCount = this._tabs.length;\n const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n switch (e.keyCode) {\n case ENTER_KEY_CODE:\n case SPACE_KEY_CODE: {\n this._updateChildrenSelection(\n this._tabs[SelectedTabIndex].id,\n this.disableAutoFocusUpdate\n );\n return;\n }\n case LEFT_ARROW_KEY_CODE:\n case UP_ARROW_KEY_CODE: {\n // activate previous tab\n let prevIndex =\n SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n let prevTab = this._tabs[prevIndex];\n\n if (prevTab.disabled) {\n prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n prevTab = this._tabs[prevIndex];\n }\n\n prevTab.focus();\n\n this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, prevTab.id);\n return;\n }\n case RIGHT_ARROW_KEY_CODE:\n case DOWN_ARROW_KEY_CODE: {\n // activate next tab\n let nextIndex =\n SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n let nextTab = this._tabs[nextIndex];\n\n if (nextTab.disabled) {\n nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n nextTab = this._tabs[nextIndex];\n }\n\n nextTab.focus();\n\n this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, nextTab.id);\n return;\n }\n default: {\n return;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tabs': Tabs;\n }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabSize","vertical","aiConnected","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "2.20.
|
|
3
|
+
"version": "2.20.2",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prepare": "npx husky install"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@kyndryl-design-system/shidoka-foundation": "^2.4.
|
|
30
|
+
"@kyndryl-design-system/shidoka-foundation": "^2.4.4",
|
|
31
31
|
"@kyndryl-design-system/shidoka-icons": "^2.4.0",
|
|
32
32
|
"@lit/context": "^1.1.0",
|
|
33
33
|
"deepmerge-ts": "^7.1.0",
|