@kyndryl-design-system/shidoka-applications 2.18.1 → 2.18.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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-446874c7.js";import{i,s as a,x as
|
|
1
|
+
import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as t}from"../../../vendor/lit-446874c7.js";import{i,s as a,x as d}from"../../../vendor/lit-element-c6c02f24.js";var l=i`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -41,16 +41,16 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
|
|
|
41
41
|
position: relative;
|
|
42
42
|
padding: 16px;
|
|
43
43
|
background-color: var(--kd-color-background-container-default);
|
|
44
|
-
|
|
44
|
+
border: 1px solid var(--kd-color-border-card-default);
|
|
45
45
|
border-radius: 8px;
|
|
46
46
|
height: 100%;
|
|
47
47
|
}
|
|
48
48
|
.card-wrapper.ai-Connected {
|
|
49
49
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
50
|
-
|
|
50
|
+
border: 1px solid var(--kd-color-border-variants-light);
|
|
51
51
|
}
|
|
52
52
|
.card-wrapper.ai-highlight {
|
|
53
|
-
|
|
53
|
+
border: 1px solid var(--kd-color-border-button-ai-state-highlight);
|
|
54
54
|
background: var(--kd-color-background-container-ai-default);
|
|
55
55
|
color: var(--kd-color-text-level-primary);
|
|
56
56
|
}
|
|
@@ -64,51 +64,52 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
|
|
|
64
64
|
border-radius: 8px;
|
|
65
65
|
height: 100%;
|
|
66
66
|
padding: 16px;
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
border: 1px solid transparent;
|
|
68
|
+
outline: 2px solid transparent;
|
|
69
|
+
outline-offset: 2px;
|
|
70
|
+
transition: border-color 150ms ease-out, box-shadow 150ms ease-out, outline-color 150ms ease-out;
|
|
69
71
|
}
|
|
70
72
|
.card-wrapper-clickable:hover {
|
|
71
|
-
|
|
73
|
+
border-color: var(--kd-color-border-ui-hover);
|
|
72
74
|
box-shadow: var(--kd-elevation-level-2);
|
|
73
75
|
}
|
|
74
76
|
.card-wrapper-clickable:focus-visible {
|
|
75
|
-
outline-color: var(--kd-color-border-
|
|
76
|
-
box-shadow: var(--kd-elevation-level-2);
|
|
77
|
+
outline-color: var(--kd-color-border-variants-focus);
|
|
77
78
|
}
|
|
78
79
|
.card-wrapper-clickable.ai-Connected {
|
|
79
80
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
80
81
|
}
|
|
81
82
|
.card-wrapper-clickable.ai-Connected:hover {
|
|
82
|
-
|
|
83
|
+
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
83
84
|
box-shadow: var(--kd-elevation-level-2-ai);
|
|
84
85
|
}
|
|
85
86
|
.card-wrapper-clickable.ai-Connected:focus-visible {
|
|
86
|
-
|
|
87
|
-
box-shadow: var(--kd-elevation-level-2-ai);
|
|
87
|
+
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
88
88
|
}
|
|
89
89
|
.card-wrapper-clickable.ai-highlight {
|
|
90
90
|
background: var(--kd-color-background-container-ai-default);
|
|
91
91
|
}
|
|
92
92
|
.card-wrapper-clickable.ai-highlight:hover {
|
|
93
|
-
|
|
93
|
+
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
94
94
|
box-shadow: var(--kd-elevation-level-2-ai);
|
|
95
95
|
}
|
|
96
96
|
.card-wrapper-clickable.ai-highlight:focus-visible {
|
|
97
|
-
|
|
98
|
-
box-shadow: var(--kd-elevation-level-2-ai);
|
|
97
|
+
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
99
98
|
}
|
|
100
99
|
.card-border {
|
|
101
|
-
|
|
100
|
+
border: 1px solid var(--kd-color-border-card-clickable);
|
|
102
101
|
box-shadow: var(--kd-elevation-level-1);
|
|
103
102
|
}
|
|
103
|
+
.card-border-highlight {
|
|
104
|
+
border: 1px solid var(--kd-color-background-highlight-border);
|
|
105
|
+
}
|
|
104
106
|
.card-border.ai-Connected {
|
|
105
|
-
|
|
107
|
+
border: 1px solid var(--kd-color-border-button-ai-state-default);
|
|
106
108
|
}
|
|
107
109
|
.card-highlight {
|
|
108
|
-
outline: 1px solid var(--kd-color-background-highlight-border);
|
|
109
110
|
background: var(--kd-color-background-highlight-fill);
|
|
110
111
|
color: var(--kd-color-text-level-primary);
|
|
111
|
-
}`;let c=class extends a{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
|
|
112
|
+
}`;let c=class extends a{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 d`${"clickable"===this.type?d`<a
|
|
112
113
|
part="card-wrapper"
|
|
113
114
|
class="${e(r)}"
|
|
114
115
|
href=${this.href}
|
|
@@ -117,10 +118,10 @@ import{_ as r}from"../../../vendor/tslib-53a81efe.js";import{n as o,o as e,e as
|
|
|
117
118
|
@click=${r=>this.handleClick(r)}
|
|
118
119
|
>
|
|
119
120
|
<slot></slot>
|
|
120
|
-
</a>`:
|
|
121
|
+
</a>`:d`<div
|
|
121
122
|
part="card-wrapper"
|
|
122
123
|
class="${e(o)}"
|
|
123
124
|
>
|
|
124
125
|
<slot></slot>
|
|
125
|
-
</div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};c.styles=
|
|
126
|
+
</div>`} `}handleClick(r){const o=new CustomEvent("on-card-click",{detail:{origEvent:r}});this.dispatchEvent(o)}};c.styles=l,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};
|
|
126
127
|
//# sourceMappingURL=card.js.map
|
|
@@ -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 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":"
|
|
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"}
|
|
@@ -69,6 +69,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as r,o,e a
|
|
|
69
69
|
text-align: center;
|
|
70
70
|
transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
|
|
71
71
|
}
|
|
72
|
+
.tab ::slotted(svg) {
|
|
73
|
+
display: flex;
|
|
74
|
+
}
|
|
72
75
|
.tab.size--sm {
|
|
73
76
|
font-family: var(--kd-font-family-secondary);
|
|
74
77
|
font-size: var(--kd-font-size-utility-2-sm);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n static override styles = TabScss;\n\n @property({ type: String, reflect: true })\n override id = '';\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @state()\n private _size = 'md';\n\n @property({ type: Boolean, reflect: true, attribute: 'vertical' })\n vertical = false;\n\n // Keep private state for backward compatibility\n @state()\n private get _vertical(): boolean {\n return this.vertical;\n }\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'data-aiconnected',\n converter: {\n fromAttribute: (value: string | null) => value === 'true',\n toAttribute: (value: boolean) => (value ? 'true' : 'false'),\n },\n })\n aiConnected = false;\n\n @property({ type: String, reflect: true, attribute: 'data-tab-style' })\n tabStyle = 'primary';\n\n @property({ type: String, reflect: true })\n override role = 'tab';\n\n @property({ type: Number, reflect: true })\n override tabIndex = 0;\n\n @property({ type: String, reflect: true })\n 'aria-selected' = 'false';\n\n @property({ type: String, reflect: true })\n 'aria-controls' = '';\n\n @property({ type: String, reflect: true })\n 'aria-disabled' = 'false';\n\n override render() {\n const classes = {\n tab: true,\n primary: this.tabStyle === 'primary' || this.tabStyle === 'contained',\n secondary: this.tabStyle === 'secondary' || this.tabStyle === 'line',\n 'size--sm': this._size === 'sm',\n 'size--md': this._size === 'md',\n vertical: this._vertical,\n selected: this.selected,\n disabled: this.disabled,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <slot></slot>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this._handleClick);\n }\n\n override disconnectedCallback() {\n this.removeEventListener('click', this._handleClick);\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: Map<string, unknown>) {\n if (changedProps.has('id')) {\n this['aria-controls'] = `${this.id}-panel`;\n }\n\n if (changedProps.has('selected')) {\n this['aria-selected'] = this.selected.toString();\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n if (changedProps.has('disabled')) {\n this['aria-disabled'] = this.disabled.toString();\n }\n }\n\n private _handleClick = (e: Event) => {\n if (!this.selected && !this.disabled) {\n const event = new CustomEvent('tab-activated', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e, tabId: this.id },\n });\n this.dispatchEvent(event);\n }\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tab': Tab;\n }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","vertical","aiConnected","tabStyle","role","tabIndex","_handleClick","e","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","_vertical","render","classes","tab","primary","secondary","html","classMap","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","attribute","converter","fromAttribute","value","toAttribute","Number","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n static override styles = TabScss;\n\n @property({ type: String, reflect: true })\n override id = '';\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @state()\n private _size = 'md';\n\n @property({ type: Boolean, reflect: true, attribute: 'vertical' })\n vertical = false;\n\n // Keep private state for backward compatibility\n @state()\n private get _vertical(): boolean {\n return this.vertical;\n }\n\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'data-aiconnected',\n converter: {\n fromAttribute: (value: string | null) => value === 'true',\n toAttribute: (value: boolean) => (value ? 'true' : 'false'),\n },\n })\n aiConnected = false;\n\n @property({ type: String, reflect: true, attribute: 'data-tab-style' })\n tabStyle = 'primary';\n\n @property({ type: String, reflect: true })\n override role = 'tab';\n\n @property({ type: Number, reflect: true })\n override tabIndex = 0;\n\n @property({ type: String, reflect: true })\n 'aria-selected' = 'false';\n\n @property({ type: String, reflect: true })\n 'aria-controls' = '';\n\n @property({ type: String, reflect: true })\n 'aria-disabled' = 'false';\n\n override render() {\n const classes = {\n tab: true,\n primary: this.tabStyle === 'primary' || this.tabStyle === 'contained',\n secondary: this.tabStyle === 'secondary' || this.tabStyle === 'line',\n 'size--sm': this._size === 'sm',\n 'size--md': this._size === 'md',\n vertical: this._vertical,\n selected: this.selected,\n disabled: this.disabled,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <slot></slot>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this._handleClick);\n }\n\n override disconnectedCallback() {\n this.removeEventListener('click', this._handleClick);\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: Map<string, unknown>) {\n if (changedProps.has('id')) {\n this['aria-controls'] = `${this.id}-panel`;\n }\n\n if (changedProps.has('selected')) {\n this['aria-selected'] = this.selected.toString();\n this.tabIndex = this.selected ? 0 : -1;\n }\n\n if (changedProps.has('disabled')) {\n this['aria-disabled'] = this.disabled.toString();\n }\n }\n\n private _handleClick = (e: Event) => {\n if (!this.selected && !this.disabled) {\n const event = new CustomEvent('tab-activated', {\n bubbles: true,\n composed: true,\n detail: { origEvent: e, tabId: this.id },\n });\n this.dispatchEvent(event);\n }\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tab': Tab;\n }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","vertical","aiConnected","tabStyle","role","tabIndex","_handleClick","e","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","_vertical","render","classes","tab","primary","secondary","html","classMap","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","attribute","converter","fromAttribute","value","toAttribute","Number","customElement"],"mappings":"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"}
|