@kyndryl-design-system/shidoka-applications 2.16.0 → 2.16.1
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/{cardSample-e92af385.js → cardSample-a67570dc.js} +5 -1
- package/{cardSample-e92af385.js.map → cardSample-a67570dc.js.map} +1 -1
- package/common/scss/global.scss +4 -0
- package/components/ai/aiLaunchButton/aiLaunchButton.js +4 -0
- package/components/ai/aiLaunchButton/aiLaunchButton.js.map +1 -1
- package/components/ai/sourcesFeedback/aiSourcesFeedback.js +5 -1
- package/components/ai/sourcesFeedback/aiSourcesFeedback.js.map +1 -1
- package/components/ai/sourcesFeedback/index.js +1 -1
- package/components/global/footer/footer.js +4 -0
- package/components/global/footer/footer.js.map +1 -1
- package/components/global/header/header.js +4 -0
- package/components/global/header/header.js.map +1 -1
- package/components/global/header/headerCategory.js +4 -0
- package/components/global/header/headerCategory.js.map +1 -1
- package/components/global/header/headerDivider.js +6 -2
- package/components/global/header/headerDivider.js.map +1 -1
- package/components/global/header/headerFlyout.js +8 -4
- package/components/global/header/headerFlyout.js.map +1 -1
- package/components/global/header/headerFlyouts.js +8 -4
- package/components/global/header/headerFlyouts.js.map +1 -1
- package/components/global/header/headerLink.js +4 -0
- package/components/global/header/headerLink.js.map +1 -1
- package/components/global/header/headerNav.js +4 -0
- package/components/global/header/headerNav.js.map +1 -1
- package/components/global/header/headerNotificationPanel.js +4 -0
- package/components/global/header/headerNotificationPanel.js.map +1 -1
- package/components/global/header/headerPanelLink.js +7 -3
- package/components/global/header/headerPanelLink.js.map +1 -1
- package/components/global/header/headerUserProfile.js +4 -0
- package/components/global/header/headerUserProfile.js.map +1 -1
- package/components/global/localNav/localNav.js +4 -0
- package/components/global/localNav/localNav.js.map +1 -1
- package/components/global/localNav/localNavDivider.js +8 -4
- package/components/global/localNav/localNavDivider.js.map +1 -1
- package/components/global/localNav/localNavLink.js +4 -0
- package/components/global/localNav/localNavLink.js.map +1 -1
- package/components/global/uiShell/uiShell.js +4 -0
- package/components/global/uiShell/uiShell.js.map +1 -1
- package/components/reusable/accordion/accordion.js +4 -0
- package/components/reusable/accordion/accordion.js.map +1 -1
- package/components/reusable/accordion/accordionItem.js +4 -0
- package/components/reusable/accordion/accordionItem.js.map +1 -1
- package/components/reusable/avatar/avatar.js +4 -0
- package/components/reusable/avatar/avatar.js.map +1 -1
- package/components/reusable/blockCodeView/blockCodeView.js +4 -0
- package/components/reusable/blockCodeView/blockCodeView.js.map +1 -1
- package/components/reusable/breadcrumbs/breadcrumbs.js +6 -2
- package/components/reusable/breadcrumbs/breadcrumbs.js.map +1 -1
- package/components/reusable/button/button.js +4 -0
- package/components/reusable/button/button.js.map +1 -1
- package/components/reusable/card/card.js +4 -0
- package/components/reusable/card/card.js.map +1 -1
- package/components/reusable/card/index.js +1 -1
- package/components/reusable/card/informationalCard.skeleton.js +1 -1
- package/components/reusable/card/vitalCard.skeleton.js +5 -1
- package/components/reusable/card/vitalCard.skeleton.js.map +1 -1
- package/components/reusable/checkbox/checkbox.js +4 -0
- package/components/reusable/checkbox/checkbox.js.map +1 -1
- package/components/reusable/checkbox/checkboxGroup.js +4 -0
- package/components/reusable/checkbox/checkboxGroup.js.map +1 -1
- package/components/reusable/checkbox/checkboxSubgroup.js +6 -2
- package/components/reusable/checkbox/checkboxSubgroup.js.map +1 -1
- package/components/reusable/datePicker/datepicker.js +4 -0
- package/components/reusable/datePicker/datepicker.js.map +1 -1
- package/components/reusable/daterangepicker/daterangepicker.js +4 -0
- package/components/reusable/daterangepicker/daterangepicker.js.map +1 -1
- package/components/reusable/dropdown/dropdown.js +5 -1
- package/components/reusable/dropdown/dropdown.js.map +1 -1
- package/components/reusable/dropdown/dropdownCategory.js +6 -2
- package/components/reusable/dropdown/dropdownCategory.js.map +1 -1
- package/components/reusable/dropdown/dropdownOption.js +8 -4
- package/components/reusable/dropdown/dropdownOption.js.map +1 -1
- package/components/reusable/dropdown/index.js +1 -1
- package/components/reusable/errorBlock/errorBlock.js +6 -2
- package/components/reusable/errorBlock/errorBlock.js.map +1 -1
- package/components/reusable/globalFilter/globalFilter.js +4 -0
- package/components/reusable/globalFilter/globalFilter.js.map +1 -1
- package/components/reusable/inlineCodeView/inlineCodeView.js +8 -4
- package/components/reusable/inlineCodeView/inlineCodeView.js.map +1 -1
- package/components/reusable/inlineConfirm/inlineConfirm.js +4 -0
- package/components/reusable/inlineConfirm/inlineConfirm.js.map +1 -1
- package/components/reusable/link/link.js +4 -0
- package/components/reusable/link/link.js.map +1 -1
- package/components/reusable/loaders/inline.js +7 -3
- package/components/reusable/loaders/inline.js.map +1 -1
- package/components/reusable/loaders/loader.js +4 -0
- package/components/reusable/loaders/loader.js.map +1 -1
- package/components/reusable/loaders/skeleton.js +4 -0
- package/components/reusable/loaders/skeleton.js.map +1 -1
- package/components/reusable/modal/modal.js +4 -0
- package/components/reusable/modal/modal.js.map +1 -1
- package/components/reusable/notification/index.js +1 -1
- package/components/reusable/notification/notification.js +5 -1
- package/components/reusable/notification/notification.js.map +1 -1
- package/components/reusable/notification/notificationContainer.js +6 -2
- package/components/reusable/notification/notificationContainer.js.map +1 -1
- package/components/reusable/numberInput/numberInput.js +4 -0
- package/components/reusable/numberInput/numberInput.js.map +1 -1
- package/components/reusable/overflowMenu/overflowMenu.js +4 -0
- package/components/reusable/overflowMenu/overflowMenu.js.map +1 -1
- package/components/reusable/overflowMenu/overflowMenuItem.js +6 -2
- package/components/reusable/overflowMenu/overflowMenuItem.js.map +1 -1
- package/components/reusable/pagetitle/pageTitle.js +6 -2
- package/components/reusable/pagetitle/pageTitle.js.map +1 -1
- package/components/reusable/pagination/Pagination.js +1 -1
- package/components/reusable/pagination/index.js +1 -1
- package/components/reusable/pagination/pagination-items-range.js +7 -3
- package/components/reusable/pagination/pagination-items-range.js.map +1 -1
- package/components/reusable/pagination/pagination-navigation-buttons.js +4 -0
- package/components/reusable/pagination/pagination-navigation-buttons.js.map +1 -1
- package/components/reusable/pagination/pagination-page-size-dropdown.js +7 -3
- package/components/reusable/pagination/pagination-page-size-dropdown.js.map +1 -1
- package/components/reusable/pagination/pagination.skeleton.js +1 -1
- package/components/reusable/progressBar/progressBar.js +4 -0
- package/components/reusable/progressBar/progressBar.js.map +1 -1
- package/components/reusable/radioButton/radioButton.js +4 -0
- package/components/reusable/radioButton/radioButton.js.map +1 -1
- package/components/reusable/radioButton/radioButtonGroup.js +4 -0
- package/components/reusable/radioButton/radioButtonGroup.js.map +1 -1
- package/components/reusable/search/search.js +7 -3
- package/components/reusable/search/search.js.map +1 -1
- package/components/reusable/sideDrawer/sideDrawer.js +7 -3
- package/components/reusable/sideDrawer/sideDrawer.js.map +1 -1
- package/components/reusable/splitButton/splitButton.js +7 -3
- package/components/reusable/splitButton/splitButton.js.map +1 -1
- package/components/reusable/splitButton/splitButtonOption.js +7 -3
- package/components/reusable/splitButton/splitButtonOption.js.map +1 -1
- package/components/reusable/stepper/stepper.js +4 -0
- package/components/reusable/stepper/stepper.js.map +1 -1
- package/components/reusable/stepper/stepperItem.js +4 -0
- package/components/reusable/stepper/stepperItem.js.map +1 -1
- package/components/reusable/stepper/stepperItemChild.js +4 -0
- package/components/reusable/stepper/stepperItemChild.js.map +1 -1
- package/components/reusable/table/index.js +1 -1
- package/components/reusable/table/table-body.js +6 -2
- package/components/reusable/table/table-body.js.map +1 -1
- package/components/reusable/table/table-cell.js +4 -0
- package/components/reusable/table/table-cell.js.map +1 -1
- package/components/reusable/table/table-container.js +6 -2
- package/components/reusable/table/table-container.js.map +1 -1
- package/components/reusable/table/table-foot.js +6 -2
- package/components/reusable/table/table-foot.js.map +1 -1
- package/components/reusable/table/table-footer.js +5 -1
- package/components/reusable/table/table-footer.js.map +1 -1
- package/components/reusable/table/table-head.js +6 -2
- package/components/reusable/table/table-head.js.map +1 -1
- package/components/reusable/table/table-header-row.js +6 -2
- package/components/reusable/table/table-header-row.js.map +1 -1
- package/components/reusable/table/table-header.js +4 -0
- package/components/reusable/table/table-header.js.map +1 -1
- package/components/reusable/table/table-legend-item.js +6 -2
- package/components/reusable/table/table-legend-item.js.map +1 -1
- package/components/reusable/table/table-legend.js +6 -2
- package/components/reusable/table/table-legend.js.map +1 -1
- package/components/reusable/table/table-row.js +4 -0
- package/components/reusable/table/table-row.js.map +1 -1
- package/components/reusable/table/table-toolbar.js +4 -0
- package/components/reusable/table/table-toolbar.js.map +1 -1
- package/components/reusable/table/table.js +1 -1
- package/components/reusable/table/table.skeleton.js +1 -1
- package/components/reusable/tabs/tab.js +4 -0
- package/components/reusable/tabs/tab.js.map +1 -1
- package/components/reusable/tabs/tabPanel.js +4 -0
- package/components/reusable/tabs/tabPanel.js.map +1 -1
- package/components/reusable/tabs/tabs.js +10 -6
- package/components/reusable/tabs/tabs.js.map +1 -1
- package/components/reusable/tag/index.js +1 -1
- package/components/reusable/tag/tag.js +1 -1
- package/components/reusable/tag/tag.skeleton.js +1 -1
- package/components/reusable/tag/tagGroup.js +7 -3
- package/components/reusable/tag/tagGroup.js.map +1 -1
- package/components/reusable/textArea/textArea.js +4 -0
- package/components/reusable/textArea/textArea.js.map +1 -1
- package/components/reusable/textInput/textInput.js +6 -2
- package/components/reusable/textInput/textInput.js.map +1 -1
- package/components/reusable/timepicker/timepicker.js +4 -0
- package/components/reusable/timepicker/timepicker.js.map +1 -1
- package/components/reusable/toggleButton/toggleButton.js +4 -0
- package/components/reusable/toggleButton/toggleButton.js.map +1 -1
- package/components/reusable/tooltip/tooltip.js +4 -0
- package/components/reusable/tooltip/tooltip.js.map +1 -1
- package/components/reusable/widget/widget.js +8 -4
- package/components/reusable/widget/widget.js.map +1 -1
- package/components/reusable/widget/widgetDragHandle.js +7 -3
- package/components/reusable/widget/widgetDragHandle.js.map +1 -1
- package/components/reusable/widget/widgetGridstack.js +6 -2
- package/components/reusable/widget/widgetGridstack.js.map +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/{pagination-3789b83b.js → pagination-4beb25e6.js} +5 -1
- package/pagination-4beb25e6.js.map +1 -0
- package/{table-2fa7d061.js → table-df4b0c75.js} +5 -1
- package/{table-2fa7d061.js.map → table-df4b0c75.js.map} +1 -1
- package/{tag-308649e2.js → tag-0a167058.js} +5 -1
- package/{tag-308649e2.js.map → tag-0a167058.js.map} +1 -1
- package/pagination-3789b83b.js.map +0 -1
|
@@ -4,6 +4,10 @@ import"./vendor/lit-446874c7.js";import{i}from"./vendor/lit-element-c6c02f24.js"
|
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
* {
|
|
8
|
+
-webkit-tap-highlight-color: transparent;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
:root {
|
|
8
12
|
--kd-current-breakpoint: sm;
|
|
9
13
|
}
|
|
@@ -166,4 +170,4 @@ import"./vendor/lit-446874c7.js";import{i}from"./vendor/lit-element-c6c02f24.js"
|
|
|
166
170
|
.tags {
|
|
167
171
|
margin-bottom: 16px;
|
|
168
172
|
}`;export{t as c};
|
|
169
|
-
//# sourceMappingURL=cardSample-
|
|
173
|
+
//# sourceMappingURL=cardSample-a67570dc.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cardSample-
|
|
1
|
+
{"version":3,"file":"cardSample-a67570dc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/common/scss/global.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aiLaunchButton.js","sources":["../../../../src/components/ai/aiLaunchButton/aiLaunchButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport lottie from 'lottie-web';\nimport animationData from './json/ai_assist.json';\nimport aiLaunchButtonDisabled from './json/ai_assist_disabled.json';\nimport Styles from './aiLaunchButton.scss';\n\n/**\n * AI Assistant Launch Button.\n * @fires on-click - Emits when the button is clicked.\n */\n@customElement('kyn-ai-launch-btn')\nexport class AILaunchButton extends LitElement {\n static override styles = Styles;\n\n /** Whether the button is disabled. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Animation container element.\n * @internal\n */\n @query('.container')\n private _containerEl!: any;\n\n /** Instance of animation.\n * @internal\n */\n @state()\n private _animation!: any;\n\n /** Whether to stop at next loop completion\n * @internal\n */\n @state()\n private _shouldStop = false;\n\n override render() {\n const Classes = {\n 'ai-launch-button': true,\n disabled: this.disabled,\n };\n\n return html`\n <button\n type=\"button\"\n class=\"${classMap(Classes)}\"\n aria-label=\"AI Assistant\"\n ?disabled=\"${this.disabled}\"\n @click=${() => this._emitClick()}\n @mouseenter=${() => this._startHoverAnimation()}\n @mouseleave=${() => this._stopHoverAnimation()}\n >\n <div class=\"container\"></div>\n </button>\n `;\n }\n\n override firstUpdated() {\n this._initAnimation();\n }\n\n /// loop the animation on mouseenter. on mouseleave, complete the current loop and then stop.\n private _initAnimation() {\n this._animation = lottie.loadAnimation({\n container: this._containerEl,\n renderer: 'svg',\n loop: true,\n autoplay: false,\n animationData: this.disabled ? aiLaunchButtonDisabled : animationData,\n });\n this._animation.setSpeed(2);\n this._animation.goToAndStop(0, true);\n\n this._animation.addEventListener('loopComplete', () => {\n if (this._shouldStop) {\n this._animation.goToAndStop(0, true);\n this._shouldStop = false;\n }\n });\n }\n\n private _startHoverAnimation() {\n if (!this.disabled) {\n this._shouldStop = false;\n this._animation.goToAndStop(0, true);\n this._animation.setDirection(1);\n this._animation.play();\n }\n }\n\n private _stopHoverAnimation() {\n if (!this.disabled) {\n this._shouldStop = true;\n }\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('disabled')) {\n this._animation.destroy();\n this._initAnimation();\n }\n }\n\n private _emitClick() {\n if (!this.disabled) {\n const event = new CustomEvent('on-click');\n this.dispatchEvent(event);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-ai-launch-btn': AILaunchButton;\n }\n}\n"],"names":["AILaunchButton","LitElement","constructor","this","disabled","_shouldStop","render","Classes","html","classMap","_emitClick","_startHoverAnimation","_stopHoverAnimation","firstUpdated","_initAnimation","_animation","lottie","loadAnimation","container","_containerEl","renderer","loop","autoplay","animationData","aiLaunchButtonDisabled","setSpeed","goToAndStop","addEventListener","setDirection","play","updated","changedProps","has","destroy","event","CustomEvent","dispatchEvent","styles","Styles","__decorate","property","type","Boolean","prototype","query","state","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"aiLaunchButton.js","sources":["../../../../src/components/ai/aiLaunchButton/aiLaunchButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport lottie from 'lottie-web';\nimport animationData from './json/ai_assist.json';\nimport aiLaunchButtonDisabled from './json/ai_assist_disabled.json';\nimport Styles from './aiLaunchButton.scss';\n\n/**\n * AI Assistant Launch Button.\n * @fires on-click - Emits when the button is clicked.\n */\n@customElement('kyn-ai-launch-btn')\nexport class AILaunchButton extends LitElement {\n static override styles = Styles;\n\n /** Whether the button is disabled. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Animation container element.\n * @internal\n */\n @query('.container')\n private _containerEl!: any;\n\n /** Instance of animation.\n * @internal\n */\n @state()\n private _animation!: any;\n\n /** Whether to stop at next loop completion\n * @internal\n */\n @state()\n private _shouldStop = false;\n\n override render() {\n const Classes = {\n 'ai-launch-button': true,\n disabled: this.disabled,\n };\n\n return html`\n <button\n type=\"button\"\n class=\"${classMap(Classes)}\"\n aria-label=\"AI Assistant\"\n ?disabled=\"${this.disabled}\"\n @click=${() => this._emitClick()}\n @mouseenter=${() => this._startHoverAnimation()}\n @mouseleave=${() => this._stopHoverAnimation()}\n >\n <div class=\"container\"></div>\n </button>\n `;\n }\n\n override firstUpdated() {\n this._initAnimation();\n }\n\n /// loop the animation on mouseenter. on mouseleave, complete the current loop and then stop.\n private _initAnimation() {\n this._animation = lottie.loadAnimation({\n container: this._containerEl,\n renderer: 'svg',\n loop: true,\n autoplay: false,\n animationData: this.disabled ? aiLaunchButtonDisabled : animationData,\n });\n this._animation.setSpeed(2);\n this._animation.goToAndStop(0, true);\n\n this._animation.addEventListener('loopComplete', () => {\n if (this._shouldStop) {\n this._animation.goToAndStop(0, true);\n this._shouldStop = false;\n }\n });\n }\n\n private _startHoverAnimation() {\n if (!this.disabled) {\n this._shouldStop = false;\n this._animation.goToAndStop(0, true);\n this._animation.setDirection(1);\n this._animation.play();\n }\n }\n\n private _stopHoverAnimation() {\n if (!this.disabled) {\n this._shouldStop = true;\n }\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('disabled')) {\n this._animation.destroy();\n this._initAnimation();\n }\n }\n\n private _emitClick() {\n if (!this.disabled) {\n const event = new CustomEvent('on-click');\n this.dispatchEvent(event);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-ai-launch-btn': AILaunchButton;\n }\n}\n"],"names":["AILaunchButton","LitElement","constructor","this","disabled","_shouldStop","render","Classes","html","classMap","_emitClick","_startHoverAnimation","_stopHoverAnimation","firstUpdated","_initAnimation","_animation","lottie","loadAnimation","container","_containerEl","renderer","loop","autoplay","animationData","aiLaunchButtonDisabled","setSpeed","goToAndStop","addEventListener","setDirection","play","updated","changedProps","has","destroy","event","CustomEvent","dispatchEvent","styles","Styles","__decorate","property","type","Boolean","prototype","query","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAaO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,uBAKLC,KAAQC,UAAG,EAkBHD,KAAWE,aAAG,CA2EvB,CAzEU,MAAAC,GACP,MAAMC,EAAU,CACd,oBAAoB,EACpBH,SAAUD,KAAKC,UAGjB,OAAOI,CAAI;;;iBAGEC,EAASF;;qBAELJ,KAAKC;iBACT,IAAMD,KAAKO;sBACN,IAAMP,KAAKQ;sBACX,IAAMR,KAAKS;;;;KAK9B,CAEQ,YAAAC,GACPV,KAAKW,gBACN,CAGO,cAAAA,GACNX,KAAKY,WAAaC,EAAOC,cAAc,CACrCC,UAAWf,KAAKgB,aAChBC,SAAU,MACVC,MAAM,EACNC,UAAU,EACVC,cAAepB,KAAKC,SAAWoB,EAAyBD,IAE1DpB,KAAKY,WAAWU,SAAS,GACzBtB,KAAKY,WAAWW,YAAY,GAAG,GAE/BvB,KAAKY,WAAWY,iBAAiB,gBAAgB,KAC3CxB,KAAKE,cACPF,KAAKY,WAAWW,YAAY,GAAG,GAC/BvB,KAAKE,aAAc,EACpB,GAEJ,CAEO,oBAAAM,GACDR,KAAKC,WACRD,KAAKE,aAAc,EACnBF,KAAKY,WAAWW,YAAY,GAAG,GAC/BvB,KAAKY,WAAWa,aAAa,GAC7BzB,KAAKY,WAAWc,OAEnB,CAEO,mBAAAjB,GACDT,KAAKC,WACRD,KAAKE,aAAc,EAEtB,CAEQ,OAAAyB,CAAQC,GACXA,EAAaC,IAAI,cACnB7B,KAAKY,WAAWkB,UAChB9B,KAAKW,iBAER,CAEO,UAAAJ,GACN,IAAKP,KAAKC,SAAU,CAClB,MAAM8B,EAAQ,IAAIC,YAAY,YAC9BhC,KAAKiC,cAAcF,EACpB,CACF,GAhGelC,EAAMqC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACD1C,EAAA2C,UAAA,gBAAA,GAMjBJ,EAAA,CADCK,EAAM,eACoB5C,EAAA2C,UAAA,oBAAA,GAM3BJ,EAAA,CADCM,KACwB7C,EAAA2C,UAAA,kBAAA,GAMzBJ,EAAA,CADCM,KAC2B7C,EAAA2C,UAAA,mBAAA,GAvBjB3C,EAAcuC,EAAA,CAD1BO,EAAc,sBACF9C"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as s,l as i,c as o,e as n}from"../../../vendor/lit-446874c7.js";import{i as d,s as a,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{d as r}from"../../../vendor/deepmerge-ts-e62363e6.js";import{e as c}from"../../../vendor/lit-html-29220869.js";import{f as p,F as h,G as u,H as b,I as k,c as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";import"../../reusable/link/link.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../reusable/link/defs.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as s,l as i,c as o,e as n}from"../../../vendor/lit-446874c7.js";import{i as d,s as a,x as l}from"../../../vendor/lit-element-c6c02f24.js";import{d as r}from"../../../vendor/deepmerge-ts-e62363e6.js";import{e as c}from"../../../vendor/lit-html-29220869.js";import{f as p,F as h,G as u,H as b,I as k,c as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";import"../../reusable/link/link.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../reusable/link/defs.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-a67570dc.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";var v=d`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
* {
|
|
8
|
+
-webkit-tap-highlight-color: transparent;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
:root {
|
|
8
12
|
--kd-current-breakpoint: sm;
|
|
9
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aiSourcesFeedback.js","sources":["../../../../src/components/ai/sourcesFeedback/aiSourcesFeedback.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\nimport stylesheet from './aiSourcesFeedback.scss';\n\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport thumbsUpIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up.svg';\nimport thumbsDownIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down.svg';\nimport thumbsUpFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up-filled.svg';\nimport thumbsDownFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down-filled.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport '../../reusable/link';\nimport '../../reusable/card';\nimport '../../reusable/button';\n\nconst _defaultTextStrings = {\n sourcesText: 'Sources used',\n foundSources: 'Found sources',\n showMore: 'Show more',\n showLess: 'Show less',\n positiveFeedback: 'Share what you liked',\n negativeFeedback: 'Help us improve',\n};\n\n/**\n * AISourcesFeedback Component.\n *\n * @slot copy - copy button\n * @slot sources - source cards in source panel.\n * @slot feedback-form - Positive feedback form.\n * @fires on-toggle - Emits the `opened` state when the panel item opens/closes.\n * @fires on-feedback-deselected - Emits when thumbs-up or thumbs-down button is deselected.\n */\n\n@customElement('kyn-ai-sources-feedback')\nexport class AISourcesFeedback extends LitElement {\n static override styles = [stylesheet];\n\n /** expandable anchor opened state for Sources used. */\n @property({ type: Boolean })\n sourcesOpened = false;\n\n /** expandable anchor opened state for Feedback buttons. */\n @property({ type: Boolean })\n feedbackOpened = false;\n\n /** expandable anchor disabled state for Sources used.. */\n @property({ type: Boolean })\n sourcesDisabled = false;\n\n /** expandable anchor disabled state for Feedback buttons. */\n @property({ type: Boolean })\n feedbackDisabled = false;\n\n /** Limits visible sources behind a \"Show more\" button. */\n @property({ type: Boolean })\n revealAllSources = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Close button text. */\n @property({ type: String })\n closeText = 'Close';\n\n /** Number of sources visible when limited.\n * @internal\n */\n @state()\n _limitCount = 4;\n\n /** Sources limit visibility.\n * @internal\n */\n @state()\n limitRevealed = false;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /** Selecting Positive or Negative Feedback\n * @internal\n */\n @state()\n _selectedFeedbackType: any = null;\n\n /**\n * Queries slotted sources.\n * @ignore\n */\n @queryAssignedElements({ slot: 'sources' })\n _sourceEls!: any;\n\n /** Sources anchor text\n * @internal\n */\n @state()\n sourcesOriginalText: any;\n\n /** Tracks the number of clicks on thumbs up icon\n * @internal\n */\n @state() thumbsUpClickCount = 0;\n\n /** Tracks the number of clicks on thumbs down icon\n * @internal\n */\n @state() thumbsDownClickCount = 0;\n\n override render() {\n const classesSources: any = classMap({\n 'kyn-sources': true,\n opened: this.sourcesOpened,\n disabled: this.sourcesDisabled,\n });\n const classesFeedback1: any = classMap({\n 'kyn-pos-feedback': true,\n disabled:\n this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n });\n const classesFeedback2: any = classMap({\n 'kyn-neg-feedback': true,\n disabled:\n this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n });\n return html`\n <div class=\"action-bar\">\n <div class=\"left-div\">\n <slot name=\"copy\"></slot>\n\n <div class=\"${classesSources}\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n class=\"kyn-sources-title\"\n iconPosition=\"right\"\n aria-controls=\"kyn-sources-body\"\n aria-expanded=${this.sourcesOpened}\n ?disabled=${this.sourcesDisabled}\n @on-click=\"${(e: Event) => this._handleClick(e, 'sources')}\"\n id=\"kyn-sources-title\"\n >\n ${this._textStrings.sourcesText}\n <span class=\"expand-icon\" slot=\"icon\"\n >${unsafeSVG(chevronIcon)}</span\n >\n </kyn-button>\n </div>\n </div>\n\n <div class=\"right-div\">\n <div class=\"${classesFeedback1}\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n id=\"kyn-feedback-title-positive\"\n class=\"kyn-feedback-title\"\n aria-controls=\"kyn-feedback-body\"\n aria-expanded=${this.feedbackOpened}\n ?disabled=${this.feedbackDisabled}\n description=${this._textStrings.positiveFeedback}\n @on-click=${(e: Event) =>\n this._handleClick(e, 'feedback', 'positive')}\n >\n <span slot=\"icon\">\n ${unsafeSVG(\n this.thumbsUpClickCount % 2 === 0\n ? thumbsUpIcon\n : thumbsUpFilledIcon\n )}\n </span>\n </kyn-button>\n </div>\n\n <div class=\"${classesFeedback2}\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n id=\"kyn-feedback-title-negative\"\n class=\"kyn-feedback-title\"\n aria-controls=\"kyn-feedback-body\"\n aria-expanded=${this.feedbackOpened}\n ?disabled=${this.feedbackDisabled}\n description=${this._textStrings.negativeFeedback}\n @on-click=\"${(e: Event) =>\n this._handleClick(e, 'feedback', 'negative')}\"\n >\n <span slot=\"icon\"\n >${unsafeSVG(\n this.thumbsDownClickCount % 2 === 0\n ? thumbsDownIcon\n : thumbsDownFilledIcon\n )}\n </span>\n </kyn-button>\n </div>\n </div>\n </div>\n\n <div\n class=\"${classMap({\n opened: this.sourcesOpened,\n 'kyn-sources-body': true,\n })}\"\n id=\"kyn-sources-body\"\n role=\"region\"\n aria-labelledby=\"kyn-sources-title\"\n >\n <div class=\"close-container\">\n <kyn-button\n class=\"close\"\n @on-click=${(e: Event) => this._handleClick(e, 'sources')}\n }}\n kind=\"ghost\"\n size=\"small\"\n description=${this.closeText}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n </div>\n\n <div class=\"found-sources\">\n ${this._textStrings.foundSources} (${this._sourceEls.length}) :\n </div>\n <div class=\"card-container\">\n <slot name=\"sources\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n ${!this.revealAllSources && this._sourceEls.length > this._limitCount\n ? html`\n <kyn-button\n class=\"reveal-toggle\"\n kind=\"ghost\"\n size=\"small\"\n @on-click=${() =>\n this._toggleLimitRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? html`${this._textStrings.showLess}`\n : html`\n ${this._textStrings.showMore}\n (${this._sourceEls.length - this._limitCount})\n `}\n </kyn-button>\n `\n : null}\n </div>\n\n <div\n class=\"${classMap({\n opened: this.feedbackOpened,\n 'kyn-feedback-body': true,\n })}\"\n id=\"kyn-feedback-body\"\n role=\"region\"\n aria-labelledby=\"kyn-feedback-title-${this._selectedFeedbackType\n ? 'positive'\n : 'negative'}\"\n >\n <div class=\"close-container\">\n <kyn-button\n class=\"close\"\n description=${this.closeText}\n @on-click=${(e: Event) =>\n this._handleClick(e, 'feedback', this._selectedFeedbackType)}\n }}\n kind=\"ghost\"\n size=\"small\"\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n </div>\n\n <slot name=\"feedback-form\"></slot>\n </div>\n `;\n }\n private _handleClick(\n e: Event,\n panel: 'sources' | 'feedback',\n feedbackType?: 'positive' | 'negative'\n ) {\n e.preventDefault();\n\n if (\n (panel === 'sources' && this.sourcesDisabled) ||\n (panel === 'feedback' && this.feedbackDisabled)\n ) {\n return;\n }\n\n const target = e.target as HTMLElement;\n const isFeedbackButton = target.id?.includes('kyn-feedback-title');\n\n if (isFeedbackButton && feedbackType) {\n this._updateFeedbackCounts(feedbackType);\n }\n\n if (panel === 'sources' || this._shouldEmitFeedbackEvent(feedbackType)) {\n this._emitToggleEvent(panel, feedbackType);\n }\n }\n\n private _updateFeedbackCounts(feedbackType: 'positive' | 'negative') {\n // Checks if the feedbackType was already selected before updating the counts.\n const wasSelected =\n (feedbackType === 'positive' && this.thumbsUpClickCount % 2 !== 0) ||\n (feedbackType === 'negative' && this.thumbsDownClickCount % 2 !== 0);\n\n if (feedbackType === 'positive') {\n this.thumbsUpClickCount++;\n this.thumbsDownClickCount -= this.thumbsDownClickCount % 2;\n } else {\n this.thumbsDownClickCount++;\n this.thumbsUpClickCount -= this.thumbsUpClickCount % 2;\n }\n\n if (wasSelected) {\n this.dispatchEvent(\n new CustomEvent('on-feedback-deselected', {\n detail: { feedbackType },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private _shouldEmitFeedbackEvent(\n feedbackType?: 'positive' | 'negative'\n ): boolean {\n if (!feedbackType) return false;\n const isOddClick = (count: number) => count % 2 !== 0;\n\n return (\n (feedbackType === 'positive' &&\n (isOddClick(this.thumbsUpClickCount) ||\n (this.feedbackOpened && !isOddClick(this.thumbsUpClickCount)))) ||\n (feedbackType === 'negative' &&\n (isOddClick(this.thumbsDownClickCount) ||\n (this.feedbackOpened && !isOddClick(this.thumbsDownClickCount))))\n );\n }\n\n private _emitToggleEvent(\n panel: 'sources' | 'feedback',\n feedbackType?: 'positive' | 'negative'\n ) {\n if (panel === 'sources') {\n this.sourcesOpened = !this.sourcesOpened;\n this.feedbackOpened = false;\n } else if (panel === 'feedback') {\n this.sourcesOpened = false;\n this._toggleFeedbackPanel(feedbackType);\n }\n\n this.dispatchEvent(\n new CustomEvent('on-toggle', {\n detail: {\n sourcesOpened: this.sourcesOpened,\n feedbackOpened: this.feedbackOpened,\n selectedFeedbackType: this._selectedFeedbackType,\n },\n })\n );\n }\n\n private _toggleFeedbackPanel(feedbackType?: 'positive' | 'negative') {\n if (!feedbackType) return;\n\n if (this._selectedFeedbackType === feedbackType && this.feedbackOpened) {\n this.feedbackOpened = false;\n this._selectedFeedbackType = null;\n } else {\n this.feedbackOpened = true;\n this._selectedFeedbackType = feedbackType;\n }\n }\n\n protected _handleSlotChange() {\n this._toggleLimitRevealed(this.limitRevealed);\n }\n\n private _toggleLimitRevealed(revealed: boolean) {\n this.limitRevealed = revealed;\n\n this._sourceEls.forEach((sourceEl: any, index: any) => {\n if (this.revealAllSources || this.limitRevealed) {\n sourceEl.style.display = 'block';\n } else {\n if (index < this._limitCount) {\n sourceEl.style.display = 'block';\n } else {\n sourceEl.style.display = 'none';\n }\n }\n });\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n this.sourcesOriginalText = this._textStrings.sourcesText;\n }\n }\n\n protected override updated(changedProps: any): void {\n if (\n changedProps.has('revealAllSources') &&\n changedProps.get('revealAllSources') !== undefined\n ) {\n this._toggleLimitRevealed(false);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', () => this.updateSourcesText());\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', () => this.updateSourcesText());\n super.disconnectedCallback();\n }\n\n private updateSourcesText() {\n this._textStrings.sourcesText =\n window.innerWidth > 672\n ? this.sourcesOriginalText\n : this.sourcesOriginalText.split(' ')[0];\n this.requestUpdate();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-ai-sources-feedback': AISourcesFeedback;\n }\n}\n"],"names":["_defaultTextStrings","sourcesText","foundSources","showMore","showLess","positiveFeedback","negativeFeedback","AISourcesFeedback","LitElement","constructor","this","sourcesOpened","feedbackOpened","sourcesDisabled","feedbackDisabled","revealAllSources","textStrings","closeText","_limitCount","limitRevealed","_textStrings","_selectedFeedbackType","thumbsUpClickCount","thumbsDownClickCount","render","classesSources","classMap","opened","disabled","classesFeedback1","classesFeedback2","html","e","_handleClick","unsafeSVG","chevronIcon","thumbsUpIcon","thumbsUpFilledIcon","thumbsDownIcon","thumbsDownFilledIcon","closeIcon","_sourceEls","length","_handleSlotChange","_toggleLimitRevealed","panel","feedbackType","preventDefault","_a","target","id","includes","_updateFeedbackCounts","_shouldEmitFeedbackEvent","_emitToggleEvent","wasSelected","dispatchEvent","CustomEvent","detail","bubbles","composed","isOddClick","count","_toggleFeedbackPanel","selectedFeedbackType","revealed","forEach","sourceEl","index","style","display","willUpdate","changedProps","has","deepmerge","sourcesOriginalText","updated","undefined","get","connectedCallback","super","window","addEventListener","updateSourcesText","disconnectedCallback","removeEventListener","innerWidth","split","requestUpdate","styles","stylesheet","__decorate","property","type","Boolean","prototype","Object","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"aiSourcesFeedback.js","sources":["../../../../src/components/ai/sourcesFeedback/aiSourcesFeedback.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\nimport stylesheet from './aiSourcesFeedback.scss';\n\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport thumbsUpIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up.svg';\nimport thumbsDownIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down.svg';\nimport thumbsUpFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-up-filled.svg';\nimport thumbsDownFilledIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/thumbs-down-filled.svg';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport '../../reusable/link';\nimport '../../reusable/card';\nimport '../../reusable/button';\n\nconst _defaultTextStrings = {\n sourcesText: 'Sources used',\n foundSources: 'Found sources',\n showMore: 'Show more',\n showLess: 'Show less',\n positiveFeedback: 'Share what you liked',\n negativeFeedback: 'Help us improve',\n};\n\n/**\n * AISourcesFeedback Component.\n *\n * @slot copy - copy button\n * @slot sources - source cards in source panel.\n * @slot feedback-form - Positive feedback form.\n * @fires on-toggle - Emits the `opened` state when the panel item opens/closes.\n * @fires on-feedback-deselected - Emits when thumbs-up or thumbs-down button is deselected.\n */\n\n@customElement('kyn-ai-sources-feedback')\nexport class AISourcesFeedback extends LitElement {\n static override styles = [stylesheet];\n\n /** expandable anchor opened state for Sources used. */\n @property({ type: Boolean })\n sourcesOpened = false;\n\n /** expandable anchor opened state for Feedback buttons. */\n @property({ type: Boolean })\n feedbackOpened = false;\n\n /** expandable anchor disabled state for Sources used.. */\n @property({ type: Boolean })\n sourcesDisabled = false;\n\n /** expandable anchor disabled state for Feedback buttons. */\n @property({ type: Boolean })\n feedbackDisabled = false;\n\n /** Limits visible sources behind a \"Show more\" button. */\n @property({ type: Boolean })\n revealAllSources = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Close button text. */\n @property({ type: String })\n closeText = 'Close';\n\n /** Number of sources visible when limited.\n * @internal\n */\n @state()\n _limitCount = 4;\n\n /** Sources limit visibility.\n * @internal\n */\n @state()\n limitRevealed = false;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /** Selecting Positive or Negative Feedback\n * @internal\n */\n @state()\n _selectedFeedbackType: any = null;\n\n /**\n * Queries slotted sources.\n * @ignore\n */\n @queryAssignedElements({ slot: 'sources' })\n _sourceEls!: any;\n\n /** Sources anchor text\n * @internal\n */\n @state()\n sourcesOriginalText: any;\n\n /** Tracks the number of clicks on thumbs up icon\n * @internal\n */\n @state() thumbsUpClickCount = 0;\n\n /** Tracks the number of clicks on thumbs down icon\n * @internal\n */\n @state() thumbsDownClickCount = 0;\n\n override render() {\n const classesSources: any = classMap({\n 'kyn-sources': true,\n opened: this.sourcesOpened,\n disabled: this.sourcesDisabled,\n });\n const classesFeedback1: any = classMap({\n 'kyn-pos-feedback': true,\n disabled:\n this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n });\n const classesFeedback2: any = classMap({\n 'kyn-neg-feedback': true,\n disabled:\n this.feedbackDisabled && this._selectedFeedbackType === 'positive',\n });\n return html`\n <div class=\"action-bar\">\n <div class=\"left-div\">\n <slot name=\"copy\"></slot>\n\n <div class=\"${classesSources}\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n class=\"kyn-sources-title\"\n iconPosition=\"right\"\n aria-controls=\"kyn-sources-body\"\n aria-expanded=${this.sourcesOpened}\n ?disabled=${this.sourcesDisabled}\n @on-click=\"${(e: Event) => this._handleClick(e, 'sources')}\"\n id=\"kyn-sources-title\"\n >\n ${this._textStrings.sourcesText}\n <span class=\"expand-icon\" slot=\"icon\"\n >${unsafeSVG(chevronIcon)}</span\n >\n </kyn-button>\n </div>\n </div>\n\n <div class=\"right-div\">\n <div class=\"${classesFeedback1}\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n id=\"kyn-feedback-title-positive\"\n class=\"kyn-feedback-title\"\n aria-controls=\"kyn-feedback-body\"\n aria-expanded=${this.feedbackOpened}\n ?disabled=${this.feedbackDisabled}\n description=${this._textStrings.positiveFeedback}\n @on-click=${(e: Event) =>\n this._handleClick(e, 'feedback', 'positive')}\n >\n <span slot=\"icon\">\n ${unsafeSVG(\n this.thumbsUpClickCount % 2 === 0\n ? thumbsUpIcon\n : thumbsUpFilledIcon\n )}\n </span>\n </kyn-button>\n </div>\n\n <div class=\"${classesFeedback2}\">\n <kyn-button\n kind=\"ghost\"\n size=\"small\"\n id=\"kyn-feedback-title-negative\"\n class=\"kyn-feedback-title\"\n aria-controls=\"kyn-feedback-body\"\n aria-expanded=${this.feedbackOpened}\n ?disabled=${this.feedbackDisabled}\n description=${this._textStrings.negativeFeedback}\n @on-click=\"${(e: Event) =>\n this._handleClick(e, 'feedback', 'negative')}\"\n >\n <span slot=\"icon\"\n >${unsafeSVG(\n this.thumbsDownClickCount % 2 === 0\n ? thumbsDownIcon\n : thumbsDownFilledIcon\n )}\n </span>\n </kyn-button>\n </div>\n </div>\n </div>\n\n <div\n class=\"${classMap({\n opened: this.sourcesOpened,\n 'kyn-sources-body': true,\n })}\"\n id=\"kyn-sources-body\"\n role=\"region\"\n aria-labelledby=\"kyn-sources-title\"\n >\n <div class=\"close-container\">\n <kyn-button\n class=\"close\"\n @on-click=${(e: Event) => this._handleClick(e, 'sources')}\n }}\n kind=\"ghost\"\n size=\"small\"\n description=${this.closeText}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n </div>\n\n <div class=\"found-sources\">\n ${this._textStrings.foundSources} (${this._sourceEls.length}) :\n </div>\n <div class=\"card-container\">\n <slot name=\"sources\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n ${!this.revealAllSources && this._sourceEls.length > this._limitCount\n ? html`\n <kyn-button\n class=\"reveal-toggle\"\n kind=\"ghost\"\n size=\"small\"\n @on-click=${() =>\n this._toggleLimitRevealed(!this.limitRevealed)}\n >\n ${this.limitRevealed\n ? html`${this._textStrings.showLess}`\n : html`\n ${this._textStrings.showMore}\n (${this._sourceEls.length - this._limitCount})\n `}\n </kyn-button>\n `\n : null}\n </div>\n\n <div\n class=\"${classMap({\n opened: this.feedbackOpened,\n 'kyn-feedback-body': true,\n })}\"\n id=\"kyn-feedback-body\"\n role=\"region\"\n aria-labelledby=\"kyn-feedback-title-${this._selectedFeedbackType\n ? 'positive'\n : 'negative'}\"\n >\n <div class=\"close-container\">\n <kyn-button\n class=\"close\"\n description=${this.closeText}\n @on-click=${(e: Event) =>\n this._handleClick(e, 'feedback', this._selectedFeedbackType)}\n }}\n kind=\"ghost\"\n size=\"small\"\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n </div>\n\n <slot name=\"feedback-form\"></slot>\n </div>\n `;\n }\n private _handleClick(\n e: Event,\n panel: 'sources' | 'feedback',\n feedbackType?: 'positive' | 'negative'\n ) {\n e.preventDefault();\n\n if (\n (panel === 'sources' && this.sourcesDisabled) ||\n (panel === 'feedback' && this.feedbackDisabled)\n ) {\n return;\n }\n\n const target = e.target as HTMLElement;\n const isFeedbackButton = target.id?.includes('kyn-feedback-title');\n\n if (isFeedbackButton && feedbackType) {\n this._updateFeedbackCounts(feedbackType);\n }\n\n if (panel === 'sources' || this._shouldEmitFeedbackEvent(feedbackType)) {\n this._emitToggleEvent(panel, feedbackType);\n }\n }\n\n private _updateFeedbackCounts(feedbackType: 'positive' | 'negative') {\n // Checks if the feedbackType was already selected before updating the counts.\n const wasSelected =\n (feedbackType === 'positive' && this.thumbsUpClickCount % 2 !== 0) ||\n (feedbackType === 'negative' && this.thumbsDownClickCount % 2 !== 0);\n\n if (feedbackType === 'positive') {\n this.thumbsUpClickCount++;\n this.thumbsDownClickCount -= this.thumbsDownClickCount % 2;\n } else {\n this.thumbsDownClickCount++;\n this.thumbsUpClickCount -= this.thumbsUpClickCount % 2;\n }\n\n if (wasSelected) {\n this.dispatchEvent(\n new CustomEvent('on-feedback-deselected', {\n detail: { feedbackType },\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private _shouldEmitFeedbackEvent(\n feedbackType?: 'positive' | 'negative'\n ): boolean {\n if (!feedbackType) return false;\n const isOddClick = (count: number) => count % 2 !== 0;\n\n return (\n (feedbackType === 'positive' &&\n (isOddClick(this.thumbsUpClickCount) ||\n (this.feedbackOpened && !isOddClick(this.thumbsUpClickCount)))) ||\n (feedbackType === 'negative' &&\n (isOddClick(this.thumbsDownClickCount) ||\n (this.feedbackOpened && !isOddClick(this.thumbsDownClickCount))))\n );\n }\n\n private _emitToggleEvent(\n panel: 'sources' | 'feedback',\n feedbackType?: 'positive' | 'negative'\n ) {\n if (panel === 'sources') {\n this.sourcesOpened = !this.sourcesOpened;\n this.feedbackOpened = false;\n } else if (panel === 'feedback') {\n this.sourcesOpened = false;\n this._toggleFeedbackPanel(feedbackType);\n }\n\n this.dispatchEvent(\n new CustomEvent('on-toggle', {\n detail: {\n sourcesOpened: this.sourcesOpened,\n feedbackOpened: this.feedbackOpened,\n selectedFeedbackType: this._selectedFeedbackType,\n },\n })\n );\n }\n\n private _toggleFeedbackPanel(feedbackType?: 'positive' | 'negative') {\n if (!feedbackType) return;\n\n if (this._selectedFeedbackType === feedbackType && this.feedbackOpened) {\n this.feedbackOpened = false;\n this._selectedFeedbackType = null;\n } else {\n this.feedbackOpened = true;\n this._selectedFeedbackType = feedbackType;\n }\n }\n\n protected _handleSlotChange() {\n this._toggleLimitRevealed(this.limitRevealed);\n }\n\n private _toggleLimitRevealed(revealed: boolean) {\n this.limitRevealed = revealed;\n\n this._sourceEls.forEach((sourceEl: any, index: any) => {\n if (this.revealAllSources || this.limitRevealed) {\n sourceEl.style.display = 'block';\n } else {\n if (index < this._limitCount) {\n sourceEl.style.display = 'block';\n } else {\n sourceEl.style.display = 'none';\n }\n }\n });\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n this.sourcesOriginalText = this._textStrings.sourcesText;\n }\n }\n\n protected override updated(changedProps: any): void {\n if (\n changedProps.has('revealAllSources') &&\n changedProps.get('revealAllSources') !== undefined\n ) {\n this._toggleLimitRevealed(false);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', () => this.updateSourcesText());\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', () => this.updateSourcesText());\n super.disconnectedCallback();\n }\n\n private updateSourcesText() {\n this._textStrings.sourcesText =\n window.innerWidth > 672\n ? this.sourcesOriginalText\n : this.sourcesOriginalText.split(' ')[0];\n this.requestUpdate();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-ai-sources-feedback': AISourcesFeedback;\n }\n}\n"],"names":["_defaultTextStrings","sourcesText","foundSources","showMore","showLess","positiveFeedback","negativeFeedback","AISourcesFeedback","LitElement","constructor","this","sourcesOpened","feedbackOpened","sourcesDisabled","feedbackDisabled","revealAllSources","textStrings","closeText","_limitCount","limitRevealed","_textStrings","_selectedFeedbackType","thumbsUpClickCount","thumbsDownClickCount","render","classesSources","classMap","opened","disabled","classesFeedback1","classesFeedback2","html","e","_handleClick","unsafeSVG","chevronIcon","thumbsUpIcon","thumbsUpFilledIcon","thumbsDownIcon","thumbsDownFilledIcon","closeIcon","_sourceEls","length","_handleSlotChange","_toggleLimitRevealed","panel","feedbackType","preventDefault","_a","target","id","includes","_updateFeedbackCounts","_shouldEmitFeedbackEvent","_emitToggleEvent","wasSelected","dispatchEvent","CustomEvent","detail","bubbles","composed","isOddClick","count","_toggleFeedbackPanel","selectedFeedbackType","revealed","forEach","sourceEl","index","style","display","willUpdate","changedProps","has","deepmerge","sourcesOriginalText","updated","undefined","get","connectedCallback","super","window","addEventListener","updateSourcesText","disconnectedCallback","removeEventListener","innerWidth","split","requestUpdate","styles","stylesheet","__decorate","property","type","Boolean","prototype","Object","String","state","queryAssignedElements","slot","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{AISourcesFeedback}from"./aiSourcesFeedback.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";import"../../reusable/link/link.js";import"../../reusable/link/defs.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-
|
|
1
|
+
export{AISourcesFeedback}from"./aiSourcesFeedback.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-446874c7.js";import"../../../vendor/lit-element-c6c02f24.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";import"../../reusable/link/link.js";import"../../reusable/link/defs.js";import"../../reusable/card/card.js";import"../../reusable/card/vitalCard.skeleton.js";import"../../reusable/loaders/skeleton.js";import"../../../cardSample-a67570dc.js";import"../../reusable/card/informationalCard.skeleton.js";import"../../reusable/button/button.js";import"../../../common/helpers/helpers.js";import"../../reusable/button/defs.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.js","sources":["../../../../src/components/global/footer/footer.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\nimport FooterScss from './footer.scss';\n\n/**\n * The global Footer component.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event.\n * @slot unnamed - Default slot, for links.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot copyright - Slot for the copyright text.\n */\n@customElement('kyn-footer')\nexport class Footer extends LitElement {\n static override styles = FooterScss;\n\n /** URL for the footer logo link. Should target the application home page. */\n @property({ type: String })\n rootUrl = '/';\n\n /** Sets aria label attribute for logo link. */\n @property({ type: String })\n logoAriaLabel = '';\n\n override render() {\n const classes = {\n footer: true,\n };\n\n return html`\n <footer class=\"${classMap(classes)}\">\n <div>\n <div class=\"footer-links\"><slot></slot></div>\n <div class=\"copyright\"><slot name=\"copyright\"></slot></div>\n </div>\n\n <div class=\"logo-container\">\n <a\n href=\"${this.rootUrl}\"\n class=\"logo-link\"\n @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n aria-label=${this.logoAriaLabel}\n >\n <slot name=\"logo\">${unsafeHTML(logo)}</slot>\n </a>\n </div>\n </footer>\n `;\n }\n\n private handleRootLinkClick(e: Event) {\n const event = new CustomEvent('on-root-link-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-footer': Footer;\n }\n}\n"],"names":["Footer","LitElement","constructor","this","rootUrl","logoAriaLabel","render","html","classMap","footer","e","handleRootLinkClick","unsafeHTML","logo","event","CustomEvent","detail","origEvent","dispatchEvent","styles","FooterScss","__decorate","property","type","String","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"footer.js","sources":["../../../../src/components/global/footer/footer.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\nimport FooterScss from './footer.scss';\n\n/**\n * The global Footer component.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event.\n * @slot unnamed - Default slot, for links.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot copyright - Slot for the copyright text.\n */\n@customElement('kyn-footer')\nexport class Footer extends LitElement {\n static override styles = FooterScss;\n\n /** URL for the footer logo link. Should target the application home page. */\n @property({ type: String })\n rootUrl = '/';\n\n /** Sets aria label attribute for logo link. */\n @property({ type: String })\n logoAriaLabel = '';\n\n override render() {\n const classes = {\n footer: true,\n };\n\n return html`\n <footer class=\"${classMap(classes)}\">\n <div>\n <div class=\"footer-links\"><slot></slot></div>\n <div class=\"copyright\"><slot name=\"copyright\"></slot></div>\n </div>\n\n <div class=\"logo-container\">\n <a\n href=\"${this.rootUrl}\"\n class=\"logo-link\"\n @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n aria-label=${this.logoAriaLabel}\n >\n <slot name=\"logo\">${unsafeHTML(logo)}</slot>\n </a>\n </div>\n </footer>\n `;\n }\n\n private handleRootLinkClick(e: Event) {\n const event = new CustomEvent('on-root-link-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-footer': Footer;\n }\n}\n"],"names":["Footer","LitElement","constructor","this","rootUrl","logoAriaLabel","render","html","classMap","footer","e","handleRootLinkClick","unsafeHTML","logo","event","CustomEvent","detail","origEvent","dispatchEvent","styles","FooterScss","__decorate","property","type","String","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAeO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,QAAG,IAIVD,KAAaE,cAAG,EAkCjB,CAhCU,MAAAC,GAKP,OAAOC,CAAI;uBACQC,EALH,CACdC,QAAQ;;;;;;;;oBAYMN,KAAKC;;sBAEFM,GAAaP,KAAKQ,oBAAoBD;yBACpCP,KAAKE;;gCAEEO,EAAWC;;;;KAKxC,CAEO,mBAAAF,CAAoBD,GAC1B,MAAMI,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAWP,KAEvBP,KAAKe,cAAcJ,EACpB,GAzCed,EAAMmB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxB,EAAAyB,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACCxB,EAAAyB,UAAA,qBAAA,GATRzB,EAAMqB,EAAA,CADlBK,EAAc,eACF1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n static override styles = HeaderScss;\n\n /** URL for the header logo link. Should target the application home page. */\n @property({ type: String })\n rootUrl = '/';\n\n /** App title text next to logo. Hidden on smaller screens. */\n @property({ type: String })\n appTitle = '';\n\n /** Queries for slotted header-nav.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-header-nav' })\n navEls!: any;\n\n /** Queries for all slotted elements.\n * @internal\n */\n @queryAssignedElements()\n assignedElements!: any;\n\n /** Queries for elements in left slot.\n * @internal\n */\n @queryAssignedElements({ slot: 'left' })\n leftEls!: any;\n\n /** header-nav open state\n * @internal\n */\n @state()\n _navOpen = false;\n\n /** header-flyouts open state\n * @internal\n */\n @state()\n _flyoutsOpen = false;\n\n override render() {\n const classes = {\n header: true,\n 'left-slotted': this.leftEls.length,\n 'child-open': this._navOpen || this._flyoutsOpen,\n };\n\n return html`\n <header class=\"${classMap(classes)}\">\n <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n <a\n href=\"${this.rootUrl}\"\n class=\"logo-link interactive\"\n @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n >\n <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n ${unsafeHTML(logo)}\n </slot>\n\n <span class=\"title\">${this.appTitle}</span>\n </a>\n\n <slot name=\"center\"></slot>\n\n <div class=\"header__right\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </header>\n `;\n }\n\n private handleSlotChange() {\n this.requestUpdate();\n }\n\n private handleRootLinkClick(e: Event) {\n const event = new CustomEvent('on-root-link-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _handleNavToggle(e: any) {\n this._navOpen = e.detail.open;\n }\n\n private _handleFlyoutsToggle(e: any) {\n this._flyoutsOpen = e.detail.open;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.addEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n }\n\n override disconnectedCallback() {\n document.removeEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header': Header;\n }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","_navOpen","_flyoutsOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderScss","__decorate","property","type","String","prototype","queryAssignedElements","selector","slot","state","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/components/global/header/header.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport HeaderScss from './header.scss';\nimport logo from '@kyndryl-design-system/shidoka-foundation/assets/svg/kyndryl-logo.svg';\n\n/**\n * The global Header component.\n * @fires on-menu-toggle - Captures the menu toggle click event and emits the menu open state in the detail.\n * @fires on-root-link-click - Captures the logo link click event and emits the original event details.\n * @slot unnamed - The default slot for all empty space right of the logo/title.\n * @slot logo - Slot for the logo, will overwrite the default logo.\n * @slot left - Slot left of the logo, intended for the header nav.\n * @slot center - Slot between logo/title and right flyouts.\n */\n@customElement('kyn-header')\nexport class Header extends LitElement {\n static override styles = HeaderScss;\n\n /** URL for the header logo link. Should target the application home page. */\n @property({ type: String })\n rootUrl = '/';\n\n /** App title text next to logo. Hidden on smaller screens. */\n @property({ type: String })\n appTitle = '';\n\n /** Queries for slotted header-nav.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-header-nav' })\n navEls!: any;\n\n /** Queries for all slotted elements.\n * @internal\n */\n @queryAssignedElements()\n assignedElements!: any;\n\n /** Queries for elements in left slot.\n * @internal\n */\n @queryAssignedElements({ slot: 'left' })\n leftEls!: any;\n\n /** header-nav open state\n * @internal\n */\n @state()\n _navOpen = false;\n\n /** header-flyouts open state\n * @internal\n */\n @state()\n _flyoutsOpen = false;\n\n override render() {\n const classes = {\n header: true,\n 'left-slotted': this.leftEls.length,\n 'child-open': this._navOpen || this._flyoutsOpen,\n };\n\n return html`\n <header class=\"${classMap(classes)}\">\n <slot name=\"left\" @slotchange=${this.handleSlotChange}></slot>\n\n <a\n href=\"${this.rootUrl}\"\n class=\"logo-link interactive\"\n @click=\"${(e: Event) => this.handleRootLinkClick(e)}\"\n >\n <slot name=\"logo\" @slotchange=${this.handleSlotChange}>\n ${unsafeHTML(logo)}\n </slot>\n\n <span class=\"title\">${this.appTitle}</span>\n </a>\n\n <slot name=\"center\"></slot>\n\n <div class=\"header__right\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </header>\n `;\n }\n\n private handleSlotChange() {\n this.requestUpdate();\n }\n\n private handleRootLinkClick(e: Event) {\n const event = new CustomEvent('on-root-link-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _handleNavToggle(e: any) {\n this._navOpen = e.detail.open;\n }\n\n private _handleFlyoutsToggle(e: any) {\n this._flyoutsOpen = e.detail.open;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.addEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n }\n\n override disconnectedCallback() {\n document.removeEventListener('on-nav-toggle', (e: Event) =>\n this._handleNavToggle(e)\n );\n document.removeEventListener('on-flyouts-toggle', (e: Event) =>\n this._handleFlyoutsToggle(e)\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header': Header;\n }\n}\n"],"names":["Header","LitElement","constructor","this","rootUrl","appTitle","_navOpen","_flyoutsOpen","render","classes","header","leftEls","length","html","classMap","handleSlotChange","e","handleRootLinkClick","unsafeHTML","logo","requestUpdate","event","CustomEvent","detail","origEvent","dispatchEvent","_handleNavToggle","open","_handleFlyoutsToggle","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderScss","__decorate","property","type","String","prototype","queryAssignedElements","selector","slot","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAOC,QAAG,IAIVD,KAAQE,SAAG,GAwBXF,KAAQG,UAAG,EAMXH,KAAYI,cAAG,CA0EhB,CAxEU,MAAAC,GACP,MAAMC,EAAU,CACdC,QAAQ,EACR,eAAgBP,KAAKQ,QAAQC,OAC7B,aAAcT,KAAKG,UAAYH,KAAKI,cAGtC,OAAOM,CAAI;uBACQC,EAASL;wCACQN,KAAKY;;;kBAG3BZ,KAAKC;;oBAEFY,GAAab,KAAKc,oBAAoBD;;0CAEjBb,KAAKY;cACjCG,EAAWC;;;gCAGOhB,KAAKE;;;;;;8BAMPF,KAAKY;;;KAIhC,CAEO,gBAAAA,GACNZ,KAAKiB,eACN,CAEO,mBAAAH,CAAoBD,GAC1B,MAAMK,EAAQ,IAAIC,YAAY,qBAAsB,CAClDC,OAAQ,CAAEC,UAAWR,KAEvBb,KAAKsB,cAAcJ,EACpB,CAEO,gBAAAK,CAAiBV,GACvBb,KAAKG,SAAWU,EAAEO,OAAOI,IAC1B,CAEO,oBAAAC,CAAqBZ,GAC3Bb,KAAKI,aAAeS,EAAEO,OAAOI,IAC9B,CAEQ,iBAAAE,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,iBAAkBhB,GAC1Cb,KAAKuB,iBAAiBV,KAExBe,SAASC,iBAAiB,qBAAsBhB,GAC9Cb,KAAKyB,qBAAqBZ,IAE7B,CAEQ,oBAAAiB,GACPF,SAASG,oBAAoB,iBAAkBlB,GAC7Cb,KAAKuB,iBAAiBV,KAExBe,SAASG,oBAAoB,qBAAsBlB,GACjDb,KAAKyB,qBAAqBZ,KAG5Bc,MAAMG,sBACP,GA/GejC,EAAMmC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxC,EAAAyC,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJxC,EAAAyC,UAAA,gBAAA,GAMdJ,EAAA,CADCK,EAAsB,CAAEC,SAAU,oBACtB3C,EAAAyC,UAAA,cAAA,GAMbJ,EAAA,CADCK,KACsB1C,EAAAyC,UAAA,wBAAA,GAMvBJ,EAAA,CADCK,EAAsB,CAAEE,KAAM,UACjB5C,EAAAyC,UAAA,eAAA,GAMdJ,EAAA,CADCQ,KACgB7C,EAAAyC,UAAA,gBAAA,GAMjBJ,EAAA,CADCQ,KACoB7C,EAAAyC,UAAA,oBAAA,GAvCVzC,EAAMqC,EAAA,CADlBS,EAAc,eACF9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerCategory.js","sources":["../../../../src/components/global/header/headerCategory.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderCategoryScss from './headerCategory.scss';\n\n/**\n * Header link category\n * @slot unnamed - Slot for links.\n */\n@customElement('kyn-header-category')\nexport class HeaderCategory extends LitElement {\n static override styles = HeaderCategoryScss;\n\n /** Link url. */\n @property({ type: String })\n heading = '';\n\n override render() {\n return html`\n <div class=\"category\">\n <div class=\"heading\">${this.heading}</div>\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-category': HeaderCategory;\n }\n}\n"],"names":["HeaderCategory","LitElement","constructor","this","heading","render","html","styles","HeaderCategoryScss","__decorate","property","type","String","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerCategory.js","sources":["../../../../src/components/global/header/headerCategory.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderCategoryScss from './headerCategory.scss';\n\n/**\n * Header link category\n * @slot unnamed - Slot for links.\n */\n@customElement('kyn-header-category')\nexport class HeaderCategory extends LitElement {\n static override styles = HeaderCategoryScss;\n\n /** Link url. */\n @property({ type: String })\n heading = '';\n\n override render() {\n return html`\n <div class=\"category\">\n <div class=\"heading\">${this.heading}</div>\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-category': HeaderCategory;\n }\n}\n"],"names":["HeaderCategory","LitElement","constructor","this","heading","render","html","styles","HeaderCategoryScss","__decorate","property","type","String","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GASO,IAAMA,EAAN,cAA6BC,EAA7B,WAAAC,uBAKLC,KAAOC,QAAG,EAUX,CARU,MAAAC,GACP,OAAOC,CAAI;;+BAEgBH,KAAKC;;;KAIjC,GAbeJ,EAAMO,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACLZ,EAAAa,UAAA,eAAA,GALFb,EAAcS,EAAA,CAD1BK,EAAc,wBACFd"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{e}from"../../../vendor/lit-446874c7.js";import{i as o,s as t,x as
|
|
1
|
+
import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{e}from"../../../vendor/lit-446874c7.js";import{i as o,s as t,x as i}from"../../../vendor/lit-element-c6c02f24.js";var n=o`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
* {
|
|
8
|
+
-webkit-tap-highlight-color: transparent;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
:host {
|
|
8
12
|
display: block;
|
|
9
13
|
}
|
|
@@ -15,5 +19,5 @@ hr {
|
|
|
15
19
|
width: 100%;
|
|
16
20
|
height: 1px;
|
|
17
21
|
background: var(--kd-color-border-variants-light);
|
|
18
|
-
}`;let
|
|
22
|
+
}`;let d=class extends t{render(){return i` <hr /> `}};d.styles=n,d=r([e("kyn-header-divider")],d);export{d as HeaderDivider};
|
|
19
23
|
//# sourceMappingURL=headerDivider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerDivider.js","sources":["../../../../src/components/global/header/headerDivider.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport HeaderDividerScss from './headerDivider.scss';\n\n/**\n * Header divider\n */\n@customElement('kyn-header-divider')\nexport class HeaderDivider extends LitElement {\n static override styles = HeaderDividerScss;\n\n override render() {\n return html` <hr /> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-divider': HeaderDivider;\n }\n}\n"],"names":["HeaderDivider","LitElement","render","html","styles","HeaderDividerScss","__decorate","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerDivider.js","sources":["../../../../src/components/global/header/headerDivider.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport HeaderDividerScss from './headerDivider.scss';\n\n/**\n * Header divider\n */\n@customElement('kyn-header-divider')\nexport class HeaderDivider extends LitElement {\n static override styles = HeaderDividerScss;\n\n override render() {\n return html` <hr /> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-divider': HeaderDivider;\n }\n}\n"],"names":["HeaderDivider","LitElement","render","html","styles","HeaderDividerScss","__decorate","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAQO,IAAMA,EAAN,cAA4BC,EAGxB,MAAAC,GACP,OAAOC,CAAI,UACZ,GAJeH,EAAMI,OAAGC,EADdL,EAAaM,EAAA,CADzBC,EAAc,uBACFP"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../../vendor/lit-html-29220869.js";import{n as i,l as o,o as
|
|
1
|
+
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../../vendor/lit-html-29220869.js";import{n as i,l as o,o as r,e as n}from"../../../vendor/lit-446874c7.js";import{i as a,s as l,x as d}from"../../../vendor/lit-element-c6c02f24.js";import{b as s,d as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";var h=a`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
* {
|
|
8
|
+
-webkit-tap-highlight-color: transparent;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
:root {
|
|
8
12
|
--kd-current-breakpoint: sm;
|
|
9
13
|
}
|
|
@@ -357,7 +361,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
|
|
|
357
361
|
display: none;
|
|
358
362
|
}
|
|
359
363
|
}`;let m=class extends l{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.label="",this.hideMenuLabel=!1,this.hideButtonLabel=!1,this.assistiveText="",this.href="",this.backText="Back"}render(){const t={menu:!0,open:this.open},i={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return d`
|
|
360
|
-
<div class="${
|
|
364
|
+
<div class="${r(t)}">
|
|
361
365
|
${""!==this.href?d`
|
|
362
366
|
<a
|
|
363
367
|
class="btn interactive"
|
|
@@ -399,7 +403,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
|
|
|
399
403
|
</button>
|
|
400
404
|
`}
|
|
401
405
|
|
|
402
|
-
<div class=${
|
|
406
|
+
<div class=${r(i)}>
|
|
403
407
|
<button class="go-back" @click=${()=>this._handleBack()}>
|
|
404
408
|
<span>${e(c)}</span>
|
|
405
409
|
${this.backText}
|
|
@@ -415,5 +419,5 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e}from"../../.
|
|
|
415
419
|
</div>
|
|
416
420
|
</div>
|
|
417
421
|
<div class="overlay" @click=${this._handleOverlayClick}></div>
|
|
418
|
-
`}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}};m.styles=h,t([i({type:Boolean})],m.prototype,"open",void 0),t([i({type:Boolean})],m.prototype,"anchorLeft",void 0),t([i({type:Boolean})],m.prototype,"hideArrow",void 0),t([i({type:String})],m.prototype,"label",void 0),t([i({type:Boolean})],m.prototype,"hideMenuLabel",void 0),t([i({type:Boolean})],m.prototype,"hideButtonLabel",void 0),t([i({type:String})],m.prototype,"assistiveText",void 0),t([i({type:String})],m.prototype,"href",void 0),t([i({type:String})],m.prototype,"backText",void 0),t([o()],m.prototype,"slottedElements",void 0),m=t([
|
|
422
|
+
`}_handleBack(){this.open=!1}handleClick(){this.open=!this.open}handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleOverlayClick(){this.open=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this.handleClickOut(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this.handleClickOut(t))),super.disconnectedCallback()}};m.styles=h,t([i({type:Boolean})],m.prototype,"open",void 0),t([i({type:Boolean})],m.prototype,"anchorLeft",void 0),t([i({type:Boolean})],m.prototype,"hideArrow",void 0),t([i({type:String})],m.prototype,"label",void 0),t([i({type:Boolean})],m.prototype,"hideMenuLabel",void 0),t([i({type:Boolean})],m.prototype,"hideButtonLabel",void 0),t([i({type:String})],m.prototype,"assistiveText",void 0),t([i({type:String})],m.prototype,"href",void 0),t([i({type:String})],m.prototype,"backText",void 0),t([o()],m.prototype,"slottedElements",void 0),m=t([n("kyn-header-flyout")],m);export{m as HeaderFlyout};
|
|
419
423
|
//# sourceMappingURL=headerFlyout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 HeaderFlyoutScss from './headerFlyout.scss';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n static override styles = HeaderFlyoutScss;\n\n /** Flyout open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n hideArrow = false;\n\n /** Menu & button label. */\n @property({ type: String })\n label = '';\n\n /** Hide the label at the top of the flyout menu. */\n @property({ type: Boolean })\n hideMenuLabel = false;\n\n /** Hide the label in the mobile button. */\n @property({ type: Boolean })\n hideButtonLabel = false;\n\n /**\n * DEPRECATED. Use `label` instead.\n * Button assistive text, title + aria-label.\n */\n @property({ type: String })\n assistiveText = '';\n\n /** Turns the button into a link. */\n @property({ type: String })\n href = '';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n open: this.open,\n };\n\n const contentClasses = {\n menu__content: true,\n 'menu__content--left': this.anchorLeft,\n slotted: this.slottedElements.length,\n };\n\n return html`\n <div class=\"${classMap(classes)}\">\n ${this.href !== ''\n ? html`\n <a\n class=\"btn interactive\"\n href=${this.href}\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\"\n >${unsafeSVG(chevronIcon)}</span\n >\n </a>\n `\n : html`\n <button\n class=\"btn interactive\"\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\"\n >${unsafeSVG(chevronIcon)}</span\n >\n </button>\n `}\n\n <div class=${classMap(contentClasses)}>\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <span>${unsafeSVG(backIcon)}</span>\n ${this.backText}\n </button>\n\n ${!this.hideMenuLabel\n ? html`\n <div class=\"menu-label\">\n ${this.label || this.assistiveText}\n </div>\n `\n : null}\n\n <slot></slot>\n </div>\n </div>\n <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n `;\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private handleClick() {\n this.open = !this.open;\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n private _handleOverlayClick() {\n this.open = false;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyout': HeaderFlyout;\n }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","label","hideMenuLabel","hideButtonLabel","assistiveText","href","backText","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { 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 HeaderFlyoutScss from './headerFlyout.scss';\nimport chevronIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';\nimport backIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/arrow-left.svg';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n static override styles = HeaderFlyoutScss;\n\n /** Flyout open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n @property({ type: Boolean })\n anchorLeft = false;\n\n /** Hides the arrow. */\n @property({ type: Boolean })\n hideArrow = false;\n\n /** Menu & button label. */\n @property({ type: String })\n label = '';\n\n /** Hide the label at the top of the flyout menu. */\n @property({ type: Boolean })\n hideMenuLabel = false;\n\n /** Hide the label in the mobile button. */\n @property({ type: Boolean })\n hideButtonLabel = false;\n\n /**\n * DEPRECATED. Use `label` instead.\n * Button assistive text, title + aria-label.\n */\n @property({ type: String })\n assistiveText = '';\n\n /** Turns the button into a link. */\n @property({ type: String })\n href = '';\n\n /** Text for mobile \"Back\" button. */\n @property({ type: String })\n backText = 'Back';\n\n /**\n * Queries any slotted HTML elements.\n * @ignore\n */\n @queryAssignedElements()\n slottedElements!: Array<HTMLElement>;\n\n override render() {\n const classes = {\n menu: true,\n open: this.open,\n };\n\n const contentClasses = {\n menu__content: true,\n 'menu__content--left': this.anchorLeft,\n slotted: this.slottedElements.length,\n };\n\n return html`\n <div class=\"${classMap(classes)}\">\n ${this.href !== ''\n ? html`\n <a\n class=\"btn interactive\"\n href=${this.href}\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\"\n >${unsafeSVG(chevronIcon)}</span\n >\n </a>\n `\n : html`\n <button\n class=\"btn interactive\"\n title=${this.label || this.assistiveText}\n aria-label=${this.label || this.assistiveText}\n @click=${this.handleClick}\n >\n <slot name=\"button\"></slot>\n\n ${!this.hideButtonLabel\n ? html`\n <span class=\"label\">\n ${this.label || this.assistiveText}\n </span>\n `\n : null}\n\n <span slot=\"button\" class=\"arrow\"\n >${unsafeSVG(chevronIcon)}</span\n >\n </button>\n `}\n\n <div class=${classMap(contentClasses)}>\n <button class=\"go-back\" @click=${() => this._handleBack()}>\n <span>${unsafeSVG(backIcon)}</span>\n ${this.backText}\n </button>\n\n ${!this.hideMenuLabel\n ? html`\n <div class=\"menu-label\">\n ${this.label || this.assistiveText}\n </div>\n `\n : null}\n\n <slot></slot>\n </div>\n </div>\n <div class=\"overlay\" @click=${this._handleOverlayClick}></div>\n `;\n }\n\n private _handleBack() {\n this.open = false;\n }\n\n private handleClick() {\n this.open = !this.open;\n }\n\n private handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n private _handleOverlayClick() {\n this.open = false;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this.handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyout': HeaderFlyout;\n }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","label","hideMenuLabel","hideButtonLabel","assistiveText","href","backText","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","handleClick","unsafeSVG","chevronIcon","_handleBack","backIcon","_handleOverlayClick","handleClickOut","e","composedPath","includes","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","queryAssignedElements","customElement"],"mappings":"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"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,e as i}from"../../../vendor/lit-446874c7.js";import{i as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,e as i}from"../../../vendor/lit-446874c7.js";import{i as r,s as n,x as a}from"../../../vendor/lit-element-c6c02f24.js";import{o as l}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a6eca21f.js";var d=r`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
* {
|
|
8
|
+
-webkit-tap-highlight-color: transparent;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
:root {
|
|
8
12
|
--kd-current-breakpoint: sm;
|
|
9
13
|
}
|
|
@@ -265,7 +269,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
|
|
|
265
269
|
z-index: initial;
|
|
266
270
|
padding: 0;
|
|
267
271
|
}
|
|
268
|
-
}`;let s=class extends
|
|
272
|
+
}`;let s=class extends n{constructor(){super(...arguments),this.open=!1}render(){return a`
|
|
269
273
|
<div class="header-flyouts menu ${this.open?"open":""}">
|
|
270
274
|
<button
|
|
271
275
|
class="btn interactive"
|
|
@@ -273,12 +277,12 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
|
|
|
273
277
|
title="Toggle Menu"
|
|
274
278
|
@click=${()=>this._toggleOpen()}
|
|
275
279
|
>
|
|
276
|
-
<span class="overflow-icon">${t(
|
|
280
|
+
<span class="overflow-icon">${t(l)}</span>
|
|
277
281
|
</button>
|
|
278
282
|
|
|
279
283
|
<div class="menu__content">
|
|
280
284
|
<slot></slot>
|
|
281
285
|
</div>
|
|
282
286
|
</div>
|
|
283
|
-
`}_toggleOpen(){this.open=!this.open}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}willUpdate(e){if(e.has("open")){const e=new CustomEvent("on-flyouts-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};s.styles=
|
|
287
|
+
`}_toggleOpen(){this.open=!this.open}_handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}willUpdate(e){if(e.has("open")){const e=new CustomEvent("on-flyouts-toggle",{composed:!0,bubbles:!0,detail:{open:this.open}});this.dispatchEvent(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this._handleClickOut(e)))}disconnectedCallback(){document.removeEventListener("click",(e=>this._handleClickOut(e))),super.disconnectedCallback()}};s.styles=d,e([o({type:Boolean})],s.prototype,"open",void 0),s=e([i("kyn-header-flyouts")],s);export{s as HeaderFlyouts};
|
|
284
288
|
//# sourceMappingURL=headerFlyouts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headerFlyouts.js","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderFlyoutsScss from './headerFlyouts.scss';\n\nimport overflowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overflow.svg';\n\n/**\n * Container for header-flyout components.\n * @slot unnamed - Slot for header-flyout components.\n */\n@customElement('kyn-header-flyouts')\nexport class HeaderFlyouts extends LitElement {\n static override styles = HeaderFlyoutsScss;\n\n /* Menu open state (small breakpoint). */\n @property({ type: Boolean })\n open = false;\n\n override render() {\n return html`\n <div class=\"header-flyouts menu ${this.open ? 'open' : ''}\">\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleOpen()}\n >\n <span class=\"overflow-icon\">${unsafeSVG(overflowIcon)}</span>\n </button>\n\n <div class=\"menu__content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _toggleOpen() {\n this.open = !this.open;\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('open')) {\n const event = new CustomEvent('on-flyouts-toggle', {\n composed: true,\n bubbles: true,\n detail: { open: this.open },\n });\n this.dispatchEvent(event);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyouts': HeaderFlyouts;\n }\n}\n"],"names":["HeaderFlyouts","LitElement","constructor","this","open","render","html","_toggleOpen","unsafeSVG","overflowIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutsScss","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"headerFlyouts.js","sources":["../../../../src/components/global/header/headerFlyouts.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport HeaderFlyoutsScss from './headerFlyouts.scss';\n\nimport overflowIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/overflow.svg';\n\n/**\n * Container for header-flyout components.\n * @slot unnamed - Slot for header-flyout components.\n */\n@customElement('kyn-header-flyouts')\nexport class HeaderFlyouts extends LitElement {\n static override styles = HeaderFlyoutsScss;\n\n /* Menu open state (small breakpoint). */\n @property({ type: Boolean })\n open = false;\n\n override render() {\n return html`\n <div class=\"header-flyouts menu ${this.open ? 'open' : ''}\">\n <button\n class=\"btn interactive\"\n aria-label=\"Toggle Menu\"\n title=\"Toggle Menu\"\n @click=${() => this._toggleOpen()}\n >\n <span class=\"overflow-icon\">${unsafeSVG(overflowIcon)}</span>\n </button>\n\n <div class=\"menu__content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n private _toggleOpen() {\n this.open = !this.open;\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('open')) {\n const event = new CustomEvent('on-flyouts-toggle', {\n composed: true,\n bubbles: true,\n detail: { open: this.open },\n });\n this.dispatchEvent(event);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n }\n\n override disconnectedCallback() {\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-header-flyouts': HeaderFlyouts;\n }\n}\n"],"names":["HeaderFlyouts","LitElement","constructor","this","open","render","html","_toggleOpen","unsafeSVG","overflowIcon","_handleClickOut","e","composedPath","includes","willUpdate","changedProps","has","event","CustomEvent","composed","bubbles","detail","dispatchEvent","connectedCallback","super","document","addEventListener","disconnectedCallback","removeEventListener","styles","HeaderFlyoutsScss","__decorate","property","type","Boolean","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYO,IAAMA,EAAN,cAA4BC,EAA5B,WAAAC,uBAKLC,KAAIC,MAAG,CAqDR,CAnDU,MAAAC,GACP,OAAOC,CAAI;wCACyBH,KAAKC,KAAO,OAAS;;;;;mBAK1C,IAAMD,KAAKI;;wCAEUC,EAAUC;;;;;;;KAQ/C,CAEO,WAAAF,GACNJ,KAAKC,MAAQD,KAAKC,IACnB,CAEO,eAAAM,CAAgBC,GACjBA,EAAEC,eAAeC,SAASV,QAC7BA,KAAKC,MAAO,EAEf,CAEQ,UAAAU,CAAWC,GAClB,GAAIA,EAAaC,IAAI,QAAS,CAC5B,MAAMC,EAAQ,IAAIC,YAAY,oBAAqB,CACjDC,UAAU,EACVC,SAAS,EACTC,OAAQ,CAAEjB,KAAMD,KAAKC,QAEvBD,KAAKmB,cAAcL,EACpB,CACF,CAEQ,iBAAAM,GACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUf,GAAMR,KAAKO,gBAAgBC,IAChE,CAEQ,oBAAAgB,GACPF,SAASG,oBAAoB,SAAUjB,GAAMR,KAAKO,gBAAgBC,KAElEa,MAAMG,sBACP,GAxDe3B,EAAM6B,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLlC,EAAAmC,UAAA,YAAA,GALFnC,EAAa+B,EAAA,CADzBK,EAAc,uBACFpC"}
|