@kyndryl-design-system/shidoka-applications 2.9.4 → 2.10.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.
Files changed (5) hide show
  1. package/components/reusable/card/card.d.ts +2 -0
  2. package/components/reusable/card/card.d.ts.map +1 -1
  3. package/components/reusable/card/card.js +40 -6
  4. package/components/reusable/card/card.js.map +1 -1
  5. package/package.json +1 -1
package/components/reusable/card/card.d.ts CHANGED
@@ -16,6 +16,8 @@ export declare class Card extends LitElement {
16
16
  target: any;
17
17
  /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */
18
18
  hideBorder: boolean;
19
+ /** Set this to `true` for AI theme. */
20
+ aiConnected: boolean;
19
21
  /** Set this to `true` for highlight */
20
22
  highlight: boolean;
21
23
  render(): import("lit").TemplateResult<1>;
package/components/reusable/card/card.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;GAIG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,IAAI,SAAY;IAEhB,yCAAyC;IAEzC,IAAI,SAAM;IAEV,sKAAsK;IAEtK,GAAG,SAAM;IAET,sKAAsK;IAEtK,MAAM,EAAE,GAAG,CAAW;IAEtB,8FAA8F;IAE9F,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,SAAS,UAAS;IAET,MAAM;IA+Bf,OAAO,CAAC,WAAW;CAMpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
1
+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;GAIG;AAEH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,IAAI,SAAY;IAEhB,yCAAyC;IAEzC,IAAI,SAAM;IAEV,sKAAsK;IAEtK,GAAG,SAAM;IAET,sKAAsK;IAEtK,MAAM,EAAE,GAAG,CAAW;IAEtB,8FAA8F;IAE9F,UAAU,UAAS;IAEnB,uCAAuC;IAEvC,WAAW,UAAS;IACpB,uCAAuC;IAEvC,SAAS,UAAS;IAET,MAAM;IAmCf,OAAO,CAAC,WAAW;CAMpB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
package/components/reusable/card/card.js CHANGED
@@ -1,4 +1,4 @@
1
- import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as t}from"../../../vendor/lit-6e2a7867.js";import{i,s as a,x as d}from"../../../vendor/lit-element-3185f710.js";var l=i`*,
1
+ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as t}from"../../../vendor/lit-6e2a7867.js";import{i as a,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";var d=a`*,
2
2
  *::before,
3
3
  *::after {
4
4
  box-sizing: border-box;
@@ -37,10 +37,19 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
37
37
  position: relative;
38
38
  padding: 16px;
39
39
  background-color: var(--kd-color-background-container-default);
40
- outline: 1px solid var(--kd-color-border-level-secondary);
40
+ outline: 1px solid var(--kd-color-border-card-default);
41
41
  border-radius: 8px;
42
42
  height: 100%;
43
43
  }
44
+ .card-wrapper.ai-Connected {
45
+ background-color: var(--kd-color-background-ui-hollow-default);
46
+ outline: 1px solid var(--kd-color-border-variants-light);
47
+ }
48
+ .card-wrapper.ai-highlight {
49
+ outline: 1px solid var(--kd-color-border-button-ai-state-default);
50
+ background: var(--kd-color-background-container-ai-default);
51
+ color: var(--kd-color-text-level-primary);
52
+ }
44
53
  .card-wrapper-clickable {
45
54
  position: relative;
46
55
  display: inline-block;
@@ -61,15 +70,40 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
61
70
  outline-color: var(--kd-color-border-ui-hover);
62
71
  box-shadow: var(--kd-elevation-level-2);
63
72
  }
73
+ .card-wrapper-clickable.ai-Connected {
74
+ background-color: var(--kd-color-background-ui-hollow-default);
75
+ }
76
+ .card-wrapper-clickable.ai-Connected:hover {
77
+ outline-color: var(--kd-color-border-button-ai-state-hover);
78
+ box-shadow: var(--kd-elevation-level-2-ai);
79
+ }
80
+ .card-wrapper-clickable.ai-Connected:focus {
81
+ outline-color: var(--kd-color-border-button-ai-state-hover);
82
+ box-shadow: var(--kd-elevation-level-2-ai);
83
+ }
84
+ .card-wrapper-clickable.ai-highlight {
85
+ background: var(--kd-color-background-container-ai-default);
86
+ }
87
+ .card-wrapper-clickable.ai-highlight:hover {
88
+ outline-color: var(--kd-color-border-button-ai-state-hover);
89
+ box-shadow: var(--kd-elevation-level-2-ai);
90
+ }
91
+ .card-wrapper-clickable.ai-highlight:focus {
92
+ outline-color: var(--kd-color-border-button-ai-state-hover);
93
+ box-shadow: var(--kd-elevation-level-2-ai);
94
+ }
64
95
  .card-border {
65
- outline: 1px solid var(--kd-color-border-level-secondary);
96
+ outline: 1px solid var(--kd-color-border-card-clickable);
66
97
  box-shadow: var(--kd-elevation-level-1);
67
98
  }
99
+ .card-border.ai-Connected {
100
+ outline: 1px solid var(--kd-color-border-button-ai-state-default);
101
+ }
68
102
  .card-highlight {
69
103
  outline: 1px solid var(--kd-color-background-highlight-border);
70
104
  background: var(--kd-color-background-highlight-fill);
71
105
  color: var(--kd-color-text-level-primary);
72
- }`;let n=class extends a{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1,this.highlight=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder,"card-highlight":this.highlight},o={"card-wrapper":!0,"card-highlight":this.highlight};return d`${"clickable"===this.type?d`<a
106
+ }`;let c=class extends i{constructor(){super(...arguments),this.type="normal",this.href="",this.rel="",this.target="_self",this.hideBorder=!1,this.aiConnected=!1,this.highlight=!1}render(){const r={"card-wrapper-clickable":!0,"card-border":!1===this.hideBorder,"ai-Connected":this.aiConnected,"card-highlight":this.highlight,"ai-highlight":this.aiConnected&&this.highlight},o={"card-wrapper":!0,"ai-Connected":this.aiConnected,"card-highlight":this.highlight,"ai-highlight":this.aiConnected&&this.highlight};return l`${"clickable"===this.type?l`<a
73
107
  part="card-wrapper"
74
108
  class="${e(r)}"
75
109
  href=${this.href}
@@ -78,10 +112,10 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
78
112
  @click=${r=>this.handleClick(r)}
79
113
  >
80
114
  <slot></slot>
81
- </a>`:d`<div
115
+ </a>`:l`<div
82
116
  part="card-wrapper"
83
117
  class="${e(o)}"
84
118
  >
85
119
  <slot></slot>
86
- </div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};n.styles=l,r([o({type:String})],n.prototype,"type",void 0),r([o({type:String})],n.prototype,"href",void 0),r([o({type:String})],n.prototype,"rel",void 0),r([o({type:String})],n.prototype,"target",void 0),r([o({type:Boolean})],n.prototype,"hideBorder",void 0),r([o({type:Boolean})],n.prototype,"highlight",void 0),n=r([t("kyn-card")],n);export{n as Card};
120
+ </div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};c.styles=d,r([o({type:String})],c.prototype,"type",void 0),r([o({type:String})],c.prototype,"href",void 0),r([o({type:String})],c.prototype,"rel",void 0),r([o({type:String})],c.prototype,"target",void 0),r([o({type:Boolean})],c.prototype,"hideBorder",void 0),r([o({type:Boolean})],c.prototype,"aiConnected",void 0),r([o({type:Boolean})],c.prototype,"highlight",void 0),c=r([t("kyn-card")],c);export{c as Card};
87
121
  //# sourceMappingURL=card.js.map
package/components/reusable/card/card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","sources":["../../../../src/components/reusable/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport CardScss from './card.scss';\n\n/**\n * Card.\n * @fires on-card-click - Captures the click event of clickable card and emits the original event details. Use `e.stopPropogation()` / `e.preventDefault()` for any internal clickable elements when card type is `'clickable'` to stop bubbling / prevent event.\n * @slot unnamed - Slot for card contents.\n */\n\n@customElement('kyn-card')\nexport class Card extends LitElement {\n static override styles = CardScss;\n\n /** Card Type. `'normal'` & `'clickable'` */\n @property({ type: String })\n type = 'normal';\n\n /** Card link url for clickable cards. */\n @property({ type: String })\n href = '';\n\n /** Use for Card type `'clickable'`. Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship. */\n @property({ type: String })\n rel = '';\n\n /** Defines a target attribute for where to load the URL in case of clickable card. Possible options include `'_self'` (deafult), `'_blank'`, `'_parent`', `'_top'` */\n @property({ type: String })\n target: any = '_self';\n\n /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */\n @property({ type: Boolean })\n hideBorder = false;\n\n /** Set this to `true` for highlight */\n @property({ type: Boolean })\n highlight = false;\n\n override render() {\n const cardWrapperClasses = {\n 'card-wrapper-clickable': true,\n 'card-border': this.hideBorder === false,\n 'card-highlight': this.highlight,\n };\n\n const cardWrapperDefaultClasses = {\n 'card-wrapper': true,\n 'card-highlight': this.highlight,\n };\n\n return html`${this.type === 'clickable'\n ? html`<a\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperClasses)}\"\n href=${this.href}\n target=${this.target}\n rel=${this.rel}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <slot></slot>\n </a>`\n : html`<div\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperDefaultClasses)}\"\n >\n <slot></slot>\n </div>`} `;\n }\n\n private handleClick(e: Event) {\n const event = new CustomEvent('on-card-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-card': Card;\n }\n}\n"],"names":["Card","LitElement","constructor","this","type","href","rel","target","hideBorder","highlight","render","cardWrapperClasses","cardWrapperDefaultClasses","html","classMap","e","handleClick","event","CustomEvent","detail","origEvent","dispatchEvent","styles","CardScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAaO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,SAIPD,KAAIE,KAAG,GAIPF,KAAGG,IAAG,GAINH,KAAMI,OAAQ,QAIdJ,KAAUK,YAAG,EAIbL,KAASM,WAAG,CAuCb,CArCU,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,IAApBR,KAAKK,WACpB,iBAAkBL,KAAKM,WAGnBG,EAA4B,CAChC,gBAAgB,EAChB,iBAAkBT,KAAKM,WAGzB,OAAOI,CAAI,GAAiB,cAAdV,KAAKC,KACfS,CAAI;;mBAEOC,EAASH;iBACXR,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;mBACDS,GAAaZ,KAAKa,YAAYD;;;cAI1CF,CAAI;;mBAEOC,EAASF;;;kBAIzB,CAEO,WAAAI,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,KAEvBZ,KAAKkB,cAAcJ,EACpB,GA9DejB,EAAMsB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACF1B,EAAA2B,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACR1B,EAAA2B,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACT1B,EAAA2B,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,CAAErB,KAAMsB,UACI1B,EAAA2B,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,CAAErB,KAAMwB,WACC5B,EAAA2B,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAErB,KAAMwB,WACA5B,EAAA2B,UAAA,iBAAA,GAzBP3B,EAAIwB,EAAA,CADhBK,EAAc,aACF7B"}
1
+ {"version":3,"file":"card.js","sources":["../../../../src/components/reusable/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport CardScss from './card.scss';\n\n/**\n * Card.\n * @fires on-card-click - Captures the click event of clickable card and emits the original event details. Use `e.stopPropogation()` / `e.preventDefault()` for any internal clickable elements when card type is `'clickable'` to stop bubbling / prevent event.\n * @slot unnamed - Slot for card contents.\n */\n\n@customElement('kyn-card')\nexport class Card extends LitElement {\n static override styles = CardScss;\n\n /** Card Type. `'normal'` & `'clickable'` */\n @property({ type: String })\n type = 'normal';\n\n /** Card link url for clickable cards. */\n @property({ type: String })\n href = '';\n\n /** Use for Card type `'clickable'`. Defines a relationship between a linked resource and the document. An empty string (default) means no particular relationship. */\n @property({ type: String })\n rel = '';\n\n /** Defines a target attribute for where to load the URL in case of clickable card. Possible options include `'_self'` (deafult), `'_blank'`, `'_parent`', `'_top'` */\n @property({ type: String })\n target: any = '_self';\n\n /** Hide card border. Useful when clickable card use inside `<kyn-notification>` component. */\n @property({ type: Boolean })\n hideBorder = false;\n\n /** Set this to `true` for AI theme. */\n @property({ type: Boolean })\n aiConnected = false;\n /** Set this to `true` for highlight */\n @property({ type: Boolean })\n highlight = false;\n\n override render() {\n const cardWrapperClasses = {\n 'card-wrapper-clickable': true,\n 'card-border': this.hideBorder === false,\n 'ai-Connected': this.aiConnected,\n 'card-highlight': this.highlight,\n 'ai-highlight': this.aiConnected && this.highlight,\n };\n\n const cardWrapperDefaultClasses = {\n 'card-wrapper': true,\n 'ai-Connected': this.aiConnected,\n 'card-highlight': this.highlight,\n 'ai-highlight': this.aiConnected && this.highlight,\n };\n\n return html`${this.type === 'clickable'\n ? html`<a\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperClasses)}\"\n href=${this.href}\n target=${this.target}\n rel=${this.rel}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <slot></slot>\n </a>`\n : html`<div\n part=\"card-wrapper\"\n class=\"${classMap(cardWrapperDefaultClasses)}\"\n >\n <slot></slot>\n </div>`} `;\n }\n\n private handleClick(e: Event) {\n const event = new CustomEvent('on-card-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-card': Card;\n }\n}\n"],"names":["Card","LitElement","constructor","this","type","href","rel","target","hideBorder","aiConnected","highlight","render","cardWrapperClasses","cardWrapperDefaultClasses","html","classMap","e","handleClick","event","CustomEvent","detail","origEvent","dispatchEvent","styles","CardScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAaO,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAKLC,KAAIC,KAAG,SAIPD,KAAIE,KAAG,GAIPF,KAAGG,IAAG,GAINH,KAAMI,OAAQ,QAIdJ,KAAUK,YAAG,EAIbL,KAAWM,aAAG,EAGdN,KAASO,WAAG,CA2Cb,CAzCU,MAAAC,GACP,MAAMC,EAAqB,CACzB,0BAA0B,EAC1B,eAAmC,IAApBT,KAAKK,WACpB,eAAgBL,KAAKM,YACrB,iBAAkBN,KAAKO,UACvB,eAAgBP,KAAKM,aAAeN,KAAKO,WAGrCG,EAA4B,CAChC,gBAAgB,EAChB,eAAgBV,KAAKM,YACrB,iBAAkBN,KAAKO,UACvB,eAAgBP,KAAKM,aAAeN,KAAKO,WAG3C,OAAOI,CAAI,GAAiB,cAAdX,KAAKC,KACfU,CAAI;;mBAEOC,EAASH;iBACXT,KAAKE;mBACHF,KAAKI;gBACRJ,KAAKG;mBACDU,GAAab,KAAKc,YAAYD;;;cAI1CF,CAAI;;mBAEOC,EAASF;;;kBAIzB,CAEO,WAAAI,CAAYD,GAClB,MAAME,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,OAAQ,CAAEC,UAAWL,KAEvBb,KAAKmB,cAAcJ,EACpB,GArEelB,EAAMuB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACF3B,EAAA4B,UAAA,YAAA,GAIhBH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACR3B,EAAA4B,UAAA,YAAA,GAIVH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACT3B,EAAA4B,UAAA,WAAA,GAITH,EAAA,CADCC,EAAS,CAAEtB,KAAMuB,UACI3B,EAAA4B,UAAA,cAAA,GAItBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACC7B,EAAA4B,UAAA,kBAAA,GAInBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACE7B,EAAA4B,UAAA,mBAAA,GAGpBH,EAAA,CADCC,EAAS,CAAEtB,KAAMyB,WACA7B,EAAA4B,UAAA,iBAAA,GA5BP5B,EAAIyB,EAAA,CADhBK,EAAc,aACF9B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "2.9.4",
3
+ "version": "2.10.0",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "main": "index.js",
6
6
  "type": "module",