@kyndryl-design-system/shidoka-applications 2.7.1 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ai/aiLaunchButton/aiLaunchButton.d.ts +35 -0
- package/components/ai/aiLaunchButton/aiLaunchButton.d.ts.map +1 -0
- package/components/ai/aiLaunchButton/aiLaunchButton.js +73 -0
- package/components/ai/aiLaunchButton/aiLaunchButton.js.map +1 -0
- package/components/ai/aiLaunchButton/index.d.ts +2 -0
- package/components/ai/aiLaunchButton/index.d.ts.map +1 -0
- package/components/ai/aiLaunchButton/index.js +2 -0
- package/components/ai/aiLaunchButton/index.js.map +1 -0
- package/components/reusable/button/button.js +0 -1
- package/components/reusable/button/button.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* AI Assistant Launch Button.
|
|
4
|
+
* @fires on-click - Emits when the button is clicked.
|
|
5
|
+
*/
|
|
6
|
+
export declare class AILaunchButton extends LitElement {
|
|
7
|
+
static styles: any;
|
|
8
|
+
/** Whether the button is disabled. */
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
/** Animation container element.
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
private _containerEl;
|
|
14
|
+
/** Instance of animation.
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
|
+
private _animation;
|
|
18
|
+
/** Whether to stop at next loop completion
|
|
19
|
+
* @internal
|
|
20
|
+
*/
|
|
21
|
+
private _shouldStop;
|
|
22
|
+
render(): import("lit").TemplateResult<1>;
|
|
23
|
+
firstUpdated(): void;
|
|
24
|
+
private _initAnimation;
|
|
25
|
+
private _startHoverAnimation;
|
|
26
|
+
private _stopHoverAnimation;
|
|
27
|
+
updated(changedProps: any): void;
|
|
28
|
+
private _emitClick;
|
|
29
|
+
}
|
|
30
|
+
declare global {
|
|
31
|
+
interface HTMLElementTagNameMap {
|
|
32
|
+
'kyn-ai-assist': AILaunchButton;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=aiLaunchButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aiLaunchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ai/aiLaunchButton/aiLaunchButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,MAAU;IAEhC,sCAAsC;IAEtC,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAO;IAE3B;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAO;IAEzB;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAS;IAEnB,MAAM;IAqBN,YAAY;IAKrB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,mBAAmB;IAMlB,OAAO,CAAC,YAAY,EAAE,GAAG;IAOlC,OAAO,CAAC,UAAU;CAMnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{n as t,i as a,t as o,o as s,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as n,s as e,x}from"../../../vendor/lit-element-3185f710.js";import{l as d}from"../../../vendor/lottie-web-9ccae634.js";import"../../../vendor/flatpickr-bbd13d61.js";var k={v:"5.9.0",fr:24,ip:0,op:144,w:500,h:500,nm:"Comp 1",ddd:0,assets:[{id:"comp_0",nm:"Pre-comp 1",fr:24,layers:[{ddd:0,ind:1,ty:4,nm:"outside Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[251.5,250.25,0],ix:2,l:2},a:{a:0,k:[45,45,0],ix:1,l:2},s:{a:1,k:[{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[450,452.557,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:47,s:[479,481.722,100]},{t:142,s:[450,452.557,100]}],ix:6,l:2}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-25.643,-1.465],[-.205,26.176],[26.062,-.052],[-.792,-25.919]],o:[[25.629,1.462],[.168,-24.637],[-26.062,.052],[.735,25.335]],v:[[-4.113,42.672],[42.671,-.001],[-4.052,-42.366],[-42.61,.305]],c:!0},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:!1},{ty:"gs",o:{a:0,k:100,ix:9},w:{a:0,k:4.613,ix:10},g:{p:3,k:{a:0,k:[0,.733,0,.733,.5,.451,.253,.867,1,.169,.506,1],ix:8}},s:{a:0,k:[0,0],ix:4},e:{a:0,k:[63.104,51.891],ix:5},t:1,lc:1,lj:1,ml:4,ml2:{a:0,k:4,ix:13},bm:0,nm:"Gradient Stroke 1",mn:"ADBE Vector Graphic - G-Stroke",hd:!1},{ty:"tr",p:{a:0,k:[45.089,45.216],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:1,k:[{i:{x:[.667,.667],y:[1,1]},o:{x:[.333,.333],y:[0,0]},t:0,s:[100,100]},{t:141,s:[100,100]}],ix:3},r:{a:1,k:[{i:{x:[.667],y:[1]},o:{x:[.167],y:[0]},t:0,s:[0]},{t:141,s:[360]}],ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1},{ty:"rd",nm:"Round Corners 1",r:{a:0,k:89,ix:1},ix:2,mn:"ADBE Vector Filter - RC",hd:!1}],ip:0,op:144,st:0,bm:1},{ddd:0,ind:3,ty:4,nm:"middle Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:1,k:[{i:{x:[.667],y:[1]},o:{x:[.167],y:[0]},t:0,s:[0]},{t:141,s:[-360]}],ix:10},p:{a:0,k:[250,250,0],ix:2,l:2},a:{a:0,k:[36.5,38,0],ix:1,l:2},s:{a:1,k:[{i:{x:[.667,.667,.667],y:[1.103,1.103,.962]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[439,439,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[.139,.139,.051]},t:60,s:[563.515,563.515,100]},{t:141,s:[439,439,100]}],ix:6,l:2}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-19.404,-.066],[.985,17.892],[19.165,-2.6],[3.676,-16.498]],o:[[19.098,.061],[-.705,-16.733],[-17.269,1.417],[-4.43,17.047]],v:[[2.975,36.059],[34.594,3.473],[2.163,-34.435],[-33.781,2.223]],c:!0},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:!1},{ty:"gs",o:{a:0,k:100,ix:9},w:{a:0,k:4.613,ix:10},g:{p:3,k:{a:0,k:[0,.733,0,.733,.5,.451,.253,.867,1,.169,.506,1],ix:8}},s:{a:0,k:[54,21],ix:4},e:{a:0,k:[-5.42,-37.145],ix:5},t:1,lc:1,lj:1,ml:4,ml2:{a:0,k:4,ix:13},bm:0,nm:"Gradient Stroke 1",mn:"ADBE Vector Graphic - G-Stroke",hd:!1},{ty:"tr",p:{a:0,k:[36.506,38.2],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1},{ty:"rd",nm:"Round Corners 1",r:{a:0,k:164,ix:1},ix:2,mn:"ADBE Vector Filter - RC",hd:!1}],ip:0,op:144,st:0,bm:1},{ddd:0,ind:5,ty:4,nm:"center Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:1,k:[{i:{x:[.667],y:[1]},o:{x:[.167],y:[0]},t:0,s:[0]},{t:141,s:[360]}],ix:10},p:{a:0,k:[251,247.25,0],ix:2,l:2},a:{a:0,k:[35,37,0],ix:1,l:2},s:{a:1,k:[{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[439,439,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:72,s:[628,628,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:114,s:[411,411,100]},{t:141,s:[439,439,100]}],ix:6,l:2}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-18.757,-1.921],[-.536,18.549],[17.819,.818],[.763,-18.17]],o:[[17.864,1.567],[.536,-18.549],[-17.819,-.818],[-.763,18.17]],v:[[-8.149,31.191],[30.163,-.028],[-8.337,-30.191],[-30.725,-1.716]],c:!0},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:!1},{ty:"gs",o:{a:0,k:100,ix:9},w:{a:0,k:4.613,ix:10},g:{p:3,k:{a:0,k:[0,.733,0,.733,.5,.451,.253,.867,1,.169,.506,1],ix:8}},s:{a:0,k:[6,-13],ix:4},e:{a:0,k:[-3.06,29.856],ix:5},t:1,lc:1,lj:1,ml:4,ml2:{a:0,k:4,ix:13},bm:0,nm:"Gradient Stroke 1",mn:"ADBE Vector Graphic - G-Stroke",hd:!1},{ty:"tr",p:{a:0,k:[34.839,36.617],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1}],ip:0,op:144,st:0,bm:1}]}],layers:[{ddd:0,ind:1,ty:0,nm:"Pre-comp 1",refId:"comp_0",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,250,0],ix:2,l:2},a:{a:0,k:[250,250,0],ix:1,l:2},s:{a:0,k:[100,100,100],ix:6,l:2}},ao:0,w:500,h:500,ip:0,op:144,st:0,bm:0}],markers:[]},p={v:"5.9.0",fr:24,ip:0,op:144,w:500,h:500,nm:"Comp 1",ddd:0,assets:[{id:"comp_0",nm:"Pre-comp 1",fr:24,layers:[{ddd:0,ind:1,ty:4,nm:"outside Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[251.5,250.25,0],ix:2,l:2},a:{a:0,k:[45,45,0],ix:1,l:2},s:{a:1,k:[{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[450,452.557,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:47,s:[479,481.722,100]},{t:142,s:[450,452.557,100]}],ix:6,l:2}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-25.643,-1.465],[-.205,26.176],[26.062,-.052],[-.792,-25.919]],o:[[25.629,1.462],[.168,-24.637],[-26.062,.052],[.735,25.335]],v:[[-4.113,42.672],[42.671,-.001],[-4.052,-42.366],[-42.61,.305]],c:!0},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:!1},{ty:"gs",o:{a:0,k:100,ix:9},w:{a:0,k:4.613,ix:10},g:{p:3,k:{a:0,k:[0,.765,.765,.765,.5,.811,.811,.811,1,.859,.859,.859],ix:8}},s:{a:0,k:[0,0],ix:4},e:{a:0,k:[63.104,51.891],ix:5},t:1,lc:1,lj:1,ml:4,ml2:{a:0,k:4,ix:13},bm:0,nm:"Gradient Stroke 1",mn:"ADBE Vector Graphic - G-Stroke",hd:!1},{ty:"tr",p:{a:0,k:[45.089,45.216],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:1,k:[{i:{x:[.667,.667],y:[1,1]},o:{x:[.333,.333],y:[0,0]},t:0,s:[100,100]},{t:141,s:[100,100]}],ix:3},r:{a:1,k:[{i:{x:[.667],y:[1]},o:{x:[.167],y:[0]},t:0,s:[0]},{t:141,s:[360]}],ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1},{ty:"rd",nm:"Round Corners 1",r:{a:0,k:89,ix:1},ix:2,mn:"ADBE Vector Filter - RC",hd:!1}],ip:0,op:144,st:0,bm:1},{ddd:0,ind:3,ty:4,nm:"middle Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:1,k:[{i:{x:[.667],y:[1]},o:{x:[.167],y:[0]},t:0,s:[0]},{t:141,s:[-360]}],ix:10},p:{a:0,k:[250,250,0],ix:2,l:2},a:{a:0,k:[36.5,38,0],ix:1,l:2},s:{a:1,k:[{i:{x:[.667,.667,.667],y:[1.103,1.103,.962]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[439,439,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[.139,.139,.051]},t:60,s:[563.515,563.515,100]},{t:141,s:[439,439,100]}],ix:6,l:2}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-19.404,-.066],[.985,17.892],[19.165,-2.6],[3.676,-16.498]],o:[[19.098,.061],[-.705,-16.733],[-17.269,1.417],[-4.43,17.047]],v:[[2.975,36.059],[34.594,3.473],[2.163,-34.435],[-33.781,2.223]],c:!0},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:!1},{ty:"gs",o:{a:0,k:100,ix:9},w:{a:0,k:4.613,ix:10},g:{p:3,k:{a:0,k:[0,.843,.843,.843,.5,.8,.8,.8,1,.757,.757,.757],ix:8}},s:{a:0,k:[54,21],ix:4},e:{a:0,k:[-5.42,-37.145],ix:5},t:1,lc:1,lj:1,ml:4,ml2:{a:0,k:4,ix:13},bm:0,nm:"Gradient Stroke 1",mn:"ADBE Vector Graphic - G-Stroke",hd:!1},{ty:"tr",p:{a:0,k:[36.506,38.2],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1},{ty:"rd",nm:"Round Corners 1",r:{a:0,k:164,ix:1},ix:2,mn:"ADBE Vector Filter - RC",hd:!1}],ip:0,op:144,st:0,bm:1},{ddd:0,ind:5,ty:4,nm:"center Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:1,k:[{i:{x:[.667],y:[1]},o:{x:[.167],y:[0]},t:0,s:[0]},{t:141,s:[360]}],ix:10},p:{a:0,k:[251,247.25,0],ix:2,l:2},a:{a:0,k:[35,37,0],ix:1,l:2},s:{a:1,k:[{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:0,s:[439,439,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:72,s:[628,628,100]},{i:{x:[.667,.667,.667],y:[1,1,1]},o:{x:[.333,.333,.333],y:[0,0,0]},t:114,s:[411,411,100]},{t:141,s:[439,439,100]}],ix:6,l:2}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[-18.757,-1.921],[-.536,18.549],[17.819,.818],[.763,-18.17]],o:[[17.864,1.567],[.536,-18.549],[-17.819,-.818],[-.763,18.17]],v:[[-8.149,31.191],[30.163,-.028],[-8.337,-30.191],[-30.725,-1.716]],c:!0},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:!1},{ty:"gs",o:{a:0,k:100,ix:9},w:{a:0,k:4.613,ix:10},g:{p:2,k:{a:0,k:[0,.906,.906,.906,1,.592,.592,.592],ix:8}},s:{a:0,k:[36.0771,34.5153],ix:4},e:{a:0,k:[17.0993,-4.95431],ix:5},t:1,lc:1,lj:1,ml:4,ml2:{a:0,k:4,ix:13},bm:0,nm:"Gradient Stroke 1",mn:"ADBE Vector Graphic - G-Stroke",hd:!1},{ty:"tr",p:{a:0,k:[34.839,36.617],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:!1}],ip:0,op:144,st:0,bm:1}]}],layers:[{ddd:0,ind:1,ty:0,nm:"Pre-comp 1",refId:"comp_0",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[250,250,0],ix:2,l:2},a:{a:0,k:[250,250,0],ix:1,l:2},s:{a:0,k:[100,100,100],ix:6,l:2}},ao:0,w:500,h:500,ip:0,op:144,st:0,bm:0}],markers:[]},l=n`*,
|
|
2
|
+
*::before,
|
|
3
|
+
*::after {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
display: block;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ai-launch-button {
|
|
12
|
+
box-shadow: var(--kd-elevation-level-3-ai);
|
|
13
|
+
width: 70px;
|
|
14
|
+
height: 70px;
|
|
15
|
+
padding: 0;
|
|
16
|
+
border-radius: 50%;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
border: 2px solid transparent;
|
|
22
|
+
outline: 2px solid transparent;
|
|
23
|
+
background: var(--kd-color-background-container-ai-subtle);
|
|
24
|
+
transition: all 150ms ease-in-out;
|
|
25
|
+
}
|
|
26
|
+
.ai-launch-button:hover {
|
|
27
|
+
border-color: var(--kd-color-border-variants-ai);
|
|
28
|
+
}
|
|
29
|
+
.ai-launch-button:focus {
|
|
30
|
+
outline-color: var(--kd-color-border-button-primary-state-focused);
|
|
31
|
+
outline-offset: -2px;
|
|
32
|
+
}
|
|
33
|
+
.ai-launch-button:active {
|
|
34
|
+
border: 4px solid var(--kd-color-border-button-ai-state-pressed);
|
|
35
|
+
background: var(--kd-color-background-container-ai-default);
|
|
36
|
+
outline-color: transparent;
|
|
37
|
+
}
|
|
38
|
+
.ai-launch-button.disabled {
|
|
39
|
+
box-shadow: none;
|
|
40
|
+
cursor: not-allowed;
|
|
41
|
+
opacity: 0.5;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
border: 1px solid var(--kd-color-border-ui-disabled);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.container {
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
width: 100%;
|
|
51
|
+
border: 2px solid transparent;
|
|
52
|
+
border-radius: 50px;
|
|
53
|
+
width: 37px;
|
|
54
|
+
height: 37px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
svg {
|
|
58
|
+
display: block;
|
|
59
|
+
background: transparent;
|
|
60
|
+
}`;let m=class extends e{constructor(){super(...arguments),this.disabled=!1,this._shouldStop=!1}render(){const i={"ai-launch-button":!0,disabled:this.disabled};return x`
|
|
61
|
+
<button
|
|
62
|
+
type="button"
|
|
63
|
+
class="${s(i)}"
|
|
64
|
+
aria-label="AI Assistant"
|
|
65
|
+
?disabled="${this.disabled}"
|
|
66
|
+
@click=${()=>this._emitClick()}
|
|
67
|
+
@mouseenter=${()=>this._startHoverAnimation()}
|
|
68
|
+
@mouseleave=${()=>this._stopHoverAnimation()}
|
|
69
|
+
>
|
|
70
|
+
<div class="container"></div>
|
|
71
|
+
</button>
|
|
72
|
+
`}firstUpdated(){this._initAnimation()}_initAnimation(){this._animation=d.loadAnimation({container:this._containerEl,renderer:"svg",loop:!0,autoplay:!1,animationData:this.disabled?p:k}),this._animation.setSpeed(2),this._animation.goToAndStop(0,!0),this._animation.addEventListener("loopComplete",(()=>{this._shouldStop&&(this._animation.goToAndStop(0,!0),this._shouldStop=!1)}))}_startHoverAnimation(){this.disabled||(this._shouldStop=!1,this._animation.goToAndStop(0,!0),this._animation.setDirection(1),this._animation.play())}_stopHoverAnimation(){this.disabled||(this._shouldStop=!0)}updated(i){i.has("disabled")&&(this._animation.destroy(),this._initAnimation())}_emitClick(){if(!this.disabled){const i=new CustomEvent("on-click");this.dispatchEvent(i)}}};m.styles=l,i([t({type:Boolean})],m.prototype,"disabled",void 0),i([a(".container")],m.prototype,"_containerEl",void 0),i([o()],m.prototype,"_animation",void 0),i([o()],m.prototype,"_shouldStop",void 0),m=i([r("kyn-ai-assist")],m);export{m as AILaunchButton};
|
|
73
|
+
//# sourceMappingURL=aiLaunchButton.js.map
|
|
@@ -0,0 +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-assist')\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-assist': 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,kBACF9C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ai/aiLaunchButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export{AILaunchButton}from"./aiLaunchButton.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-6e2a7867.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/lottie-web-9ccae634.js";import"../../../vendor/flatpickr-bbd13d61.js";
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -235,7 +235,6 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
|
|
|
235
235
|
}
|
|
236
236
|
.kd-btn--secondary-destructive:focus {
|
|
237
237
|
outline-color: var(--kd-color-border-button-primary-destructive-default);
|
|
238
|
-
background-color: var(--kd-color-background-button-secondary-destructive-hover);
|
|
239
238
|
}
|
|
240
239
|
.kd-btn--secondary-destructive:active {
|
|
241
240
|
color: var(--kd-color-text-level-primary);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedNodes,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n BUTTON_KINDS,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_ICON_POSITION,\n BUTTON_KINDS_SOLID,\n BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n static override styles = [stylesheet];\n\n /** @ignore */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** ARIA label for the button for accessibility. */\n @property({ type: String })\n description = '';\n\n /** Type for the <button> element. */\n @property({ type: String })\n type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n /** Specifies the visual appearance/kind of the button. */\n @property({ type: String })\n kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n /** Converts the button to an <a> tag if specified. */\n @property({ type: String })\n href = '';\n\n /** Specifies the size of the button. */\n @property({ type: String })\n size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n /** Specifies the position of the icon relative to any button text. */\n @property({ type: String })\n iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n /** Determines if the button is disabled.\n * @internal\n */\n @state()\n iconOnly = false;\n\n /** Determines if the button is disabled. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Button value. */\n @property({ type: String })\n value = '';\n\n /** Button name. */\n @property({ type: String })\n name = '';\n\n /** Determines if the button is Floatable */\n @property({ type: Boolean })\n isFloating = false;\n\n /** Show button after scrolling to 50% of the page*/\n @property({ type: Boolean })\n showOnScroll = false;\n\n /** Determines showButton state .\n * @internal\n */\n @state()\n _showButton = false;\n\n /** re-size button to 'medium' at mobile breakpoint.\n * @internal\n */\n @state()\n _reSizeBtn = false;\n\n /** Button formmethod. */\n @property({ type: String })\n formmethod!: any;\n\n /** Queries default slot nodes.\n * @internal\n */\n @queryAssignedNodes()\n _slottedEls!: Array<any>;\n\n /** Queries icon slot nodes.\n * @internal\n */\n @queryAssignedElements({ slot: 'icon' })\n _iconEls!: Array<any>;\n\n /** Queries the .button element.\n * @internal\n */\n @query('.button')\n _btnEl!: any;\n\n override render() {\n const BtnClasses = {\n 'kd-btn': true,\n [`kd-btn--${this.kind}`]: true,\n 'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n 'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n 'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n 'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n 'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n 'kd-btn--icon-align': !!this.iconPosition,\n [`kd-btn--icon-${this.iconPosition}`]:\n !!this.iconPosition && !this.iconOnly,\n [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n 'kd-btn--float': this.isFloating,\n 'kd-btn--hidden': this.showOnScroll && !this._showButton,\n 'icon-only': this._iconEls?.length && this.iconOnly,\n };\n\n return html`\n ${this.href && this.href !== ''\n ? html`\n <a\n part=\"button\"\n class=${classMap(BtnClasses)}\n href=${this.href}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </a>\n `\n : html`\n <button\n part=\"button\"\n class=${classMap(BtnClasses)}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n formmethod=${ifDefined(this.formmethod)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </button>\n `}\n `;\n }\n\n private handleClick(e: Event) {\n if (this.internals.form) {\n if (this.type === 'submit') {\n this.internals.form.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form.reset();\n }\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _testIconOnly() {\n if (!this._iconEls?.length) {\n return false;\n }\n\n const TextNodes = this._slottedEls?.filter((node: any) => {\n return node.textContent.trim() !== '';\n });\n\n const VisibleTextNodes = TextNodes.filter((node: any) => {\n if (node.tagName) {\n const Styles = getComputedStyle(node);\n return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n } else {\n return true;\n }\n });\n\n return !VisibleTextNodes.length;\n }\n\n private _handleSlotChange() {\n this.iconOnly = this._testIconOnly();\n this.requestUpdate();\n }\n\n /** @internal */\n private _debounceResize = debounce(() => {\n this._reSizeButton();\n this.iconOnly = this._testIconOnly();\n });\n\n /** @internal */\n private _reSizeButton() {\n // Resize button to medium at mobile breakpoint\n if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n this._reSizeBtn = true;\n } else {\n this._reSizeBtn = false;\n }\n }\n\n /** @internal */\n private _debounceScroll = debounce(() => {\n if (this.showOnScroll) {\n this._handleScroll();\n }\n });\n\n /** @internal */\n private _handleScroll() {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const pageHeight = document.documentElement.scrollHeight;\n // Show the button if scrolled 50% of the page\n this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.addEventListener('scroll', this._debounceScroll);\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.removeEventListener('scroll', this._debounceScroll);\n }\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button': Button;\n }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedNodes,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n BUTTON_KINDS,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_ICON_POSITION,\n BUTTON_KINDS_SOLID,\n BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n static override styles = [stylesheet];\n\n /** @ignore */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** ARIA label for the button for accessibility. */\n @property({ type: String })\n description = '';\n\n /** Type for the <button> element. */\n @property({ type: String })\n type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n /** Specifies the visual appearance/kind of the button. */\n @property({ type: String })\n kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n /** Converts the button to an <a> tag if specified. */\n @property({ type: String })\n href = '';\n\n /** Specifies the size of the button. */\n @property({ type: String })\n size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n /** Specifies the position of the icon relative to any button text. */\n @property({ type: String })\n iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n /** Determines if the button is disabled.\n * @internal\n */\n @state()\n iconOnly = false;\n\n /** Determines if the button is disabled. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Button value. */\n @property({ type: String })\n value = '';\n\n /** Button name. */\n @property({ type: String })\n name = '';\n\n /** Determines if the button is Floatable */\n @property({ type: Boolean })\n isFloating = false;\n\n /** Show button after scrolling to 50% of the page*/\n @property({ type: Boolean })\n showOnScroll = false;\n\n /** Determines showButton state .\n * @internal\n */\n @state()\n _showButton = false;\n\n /** re-size button to 'medium' at mobile breakpoint.\n * @internal\n */\n @state()\n _reSizeBtn = false;\n\n /** Button formmethod. */\n @property({ type: String })\n formmethod!: any;\n\n /** Queries default slot nodes.\n * @internal\n */\n @queryAssignedNodes()\n _slottedEls!: Array<any>;\n\n /** Queries icon slot nodes.\n * @internal\n */\n @queryAssignedElements({ slot: 'icon' })\n _iconEls!: Array<any>;\n\n /** Queries the .button element.\n * @internal\n */\n @query('.button')\n _btnEl!: any;\n\n override render() {\n const BtnClasses = {\n 'kd-btn': true,\n [`kd-btn--${this.kind}`]: true,\n 'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n 'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n 'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n 'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n 'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n 'kd-btn--icon-align': !!this.iconPosition,\n [`kd-btn--icon-${this.iconPosition}`]:\n !!this.iconPosition && !this.iconOnly,\n [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n 'kd-btn--float': this.isFloating,\n 'kd-btn--hidden': this.showOnScroll && !this._showButton,\n 'icon-only': this._iconEls?.length && this.iconOnly,\n };\n\n return html`\n ${this.href && this.href !== ''\n ? html`\n <a\n part=\"button\"\n class=${classMap(BtnClasses)}\n href=${this.href}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </a>\n `\n : html`\n <button\n part=\"button\"\n class=${classMap(BtnClasses)}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n formmethod=${ifDefined(this.formmethod)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </button>\n `}\n `;\n }\n\n private handleClick(e: Event) {\n if (this.internals.form) {\n if (this.type === 'submit') {\n this.internals.form.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form.reset();\n }\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _testIconOnly() {\n if (!this._iconEls?.length) {\n return false;\n }\n\n const TextNodes = this._slottedEls?.filter((node: any) => {\n return node.textContent.trim() !== '';\n });\n\n const VisibleTextNodes = TextNodes.filter((node: any) => {\n if (node.tagName) {\n const Styles = getComputedStyle(node);\n return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n } else {\n return true;\n }\n });\n\n return !VisibleTextNodes.length;\n }\n\n private _handleSlotChange() {\n this.iconOnly = this._testIconOnly();\n this.requestUpdate();\n }\n\n /** @internal */\n private _debounceResize = debounce(() => {\n this._reSizeButton();\n this.iconOnly = this._testIconOnly();\n });\n\n /** @internal */\n private _reSizeButton() {\n // Resize button to medium at mobile breakpoint\n if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n this._reSizeBtn = true;\n } else {\n this._reSizeBtn = false;\n }\n }\n\n /** @internal */\n private _debounceScroll = debounce(() => {\n if (this.showOnScroll) {\n this._handleScroll();\n }\n });\n\n /** @internal */\n private _handleScroll() {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const pageHeight = document.documentElement.scrollHeight;\n // Show the button if scrolled 50% of the page\n this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.addEventListener('scroll', this._debounceScroll);\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.removeEventListener('scroll', this._debounceScroll);\n }\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button': Button;\n }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
|