@kyndryl-design-system/shidoka-applications 2.4.0 → 2.5.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/reusable/tabs/defs.d.ts +5 -0
- package/components/reusable/tabs/defs.d.ts.map +1 -0
- package/components/reusable/tabs/defs.js +2 -0
- package/components/reusable/tabs/defs.js.map +1 -0
- package/components/reusable/tabs/tab.d.ts +3 -46
- package/components/reusable/tabs/tab.d.ts.map +1 -1
- package/components/reusable/tabs/tab.js +72 -3
- package/components/reusable/tabs/tab.js.map +1 -1
- package/components/reusable/tabs/tabs.d.ts +2 -0
- package/components/reusable/tabs/tabs.d.ts.map +1 -1
- package/components/reusable/tabs/tabs.js +16 -6
- package/components/reusable/tabs/tabs.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IAEnB,KAAK,OAAO;IACZ,MAAM,OAAO;CACd"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/tabs/defs.ts"],"sourcesContent":["export enum TAB_SIZES {\n // LARGE = 'lg',\n SMALL = 'sm',\n MEDIUM = 'md',\n}\n"],"names":["TAB_SIZES"],"mappings":"IAAYA,GAAZ,SAAYA,GAEVA,EAAA,MAAA,KACAA,EAAA,OAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
|
|
@@ -1,65 +1,22 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
/**
|
|
3
|
-
* Tabs.
|
|
4
|
-
* @slot unnamed - Slot for tab button text.
|
|
5
|
-
*/
|
|
6
2
|
export declare class Tab extends LitElement {
|
|
7
3
|
static styles: any;
|
|
8
|
-
/** Tab ID, required. */
|
|
9
4
|
id: string;
|
|
10
|
-
/** Tab selected state. Must match Tab Panel visible state. */
|
|
11
5
|
selected: boolean;
|
|
12
|
-
/** Tab disabled state. */
|
|
13
6
|
disabled: boolean;
|
|
14
|
-
/** Size of the tab buttons. Inherited.
|
|
15
|
-
* @internal
|
|
16
|
-
*/
|
|
17
7
|
private _size;
|
|
18
|
-
/** Vertical orientation. Inherited.
|
|
19
|
-
* @internal
|
|
20
|
-
*/
|
|
21
8
|
private _vertical;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
*/
|
|
25
|
-
private _tabStyle;
|
|
26
|
-
/** aria role.
|
|
27
|
-
* @internal
|
|
28
|
-
*/
|
|
9
|
+
aiConnected: boolean;
|
|
10
|
+
tabStyle: string;
|
|
29
11
|
role: string;
|
|
30
|
-
/** Make host tabbable.
|
|
31
|
-
* @internal
|
|
32
|
-
*/
|
|
33
12
|
tabIndex: number;
|
|
34
|
-
/** aria-controls.
|
|
35
|
-
* @internal
|
|
36
|
-
*/
|
|
37
13
|
'aria-selected': string;
|
|
38
|
-
/** aria-controls.
|
|
39
|
-
* @internal
|
|
40
|
-
*/
|
|
41
14
|
'aria-controls': string;
|
|
42
|
-
/** aria-disabled.
|
|
43
|
-
* @internal
|
|
44
|
-
*/
|
|
45
15
|
'aria-disabled': string;
|
|
46
16
|
render(): import("lit").TemplateResult<1>;
|
|
47
17
|
connectedCallback(): void;
|
|
48
18
|
disconnectedCallback(): void;
|
|
49
|
-
|
|
50
|
-
* Updates the 'aria-controls' and 'aria-selected' attributes based on changes to the
|
|
51
|
-
* 'id' and 'selected' properties, respectively.
|
|
52
|
-
* @param {any} changedProps - The `changedProps` parameter is an object that contains the properties
|
|
53
|
-
* that have changed in the component. It is used to determine which properties have been updated and
|
|
54
|
-
* perform specific actions based on those changes.
|
|
55
|
-
*/
|
|
56
|
-
willUpdate(changedProps: any): void;
|
|
57
|
-
/**
|
|
58
|
-
* Dispatches a custom event called 'tab-activated' with the original event and tabId as details,
|
|
59
|
-
* if the tab is not selected.
|
|
60
|
-
* @param {any} e - The parameter "e" is an event object that represents the event that triggered the
|
|
61
|
-
* click event handler.
|
|
62
|
-
*/
|
|
19
|
+
willUpdate(changedProps: Map<string, unknown>): void;
|
|
63
20
|
private _handleClick;
|
|
64
21
|
}
|
|
65
22
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAGxB,EAAE,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,CAAC,KAAK,CAAQ;IAGrB,OAAO,CAAC,SAAS,CAAS;IAW1B,WAAW,UAAS;IAGpB,QAAQ,SAAe;IAGd,IAAI,SAAS;IAGb,QAAQ,SAAK;IAGtB,eAAe,SAAW;IAG1B,eAAe,SAAM;IAGrB,eAAe,SAAW;IAEjB,MAAM;IAoBN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAetD,OAAO,CAAC,YAAY,CASlB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,o as r,e as a}from"../../../vendor/lit-6e2a7867.js";import{i,s as d,x as n}from"../../../vendor/lit-element-3185f710.js";var l=i`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -38,6 +38,21 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as
|
|
|
38
38
|
:host(:focus) {
|
|
39
39
|
outline-color: var(--kd-color-border-variants-focus);
|
|
40
40
|
}
|
|
41
|
+
:host(:focus) .tab {
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:host([data-aiconnected=true][data-tab-style=contained]:focus) {
|
|
46
|
+
outline-color: var(--kd-color-border-button-ai-state-hover);
|
|
47
|
+
background: transparent;
|
|
48
|
+
color: var(--kd-color-text-button-ai-default);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:host([data-aiconnected=true][data-tab-style=line]:focus) {
|
|
52
|
+
outline-color: var(--kd-color-border-button-ai-state-focused);
|
|
53
|
+
background: transparent;
|
|
54
|
+
color: var(--kd-color-text-button-ai-default);
|
|
55
|
+
}
|
|
41
56
|
|
|
42
57
|
:host([disabled]:focus) {
|
|
43
58
|
outline-color: transparent;
|
|
@@ -138,14 +153,64 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as
|
|
|
138
153
|
border-top: 2px solid transparent;
|
|
139
154
|
background: var(--kd-color-background-container-soft);
|
|
140
155
|
}
|
|
156
|
+
.tab.contained.ai-connected--true:not(.disabled) {
|
|
157
|
+
color: var(--kd-color-text-button-ai-default);
|
|
158
|
+
border-color: transparent;
|
|
159
|
+
background: var(--kd-color-background-container-ai-subtle);
|
|
160
|
+
}
|
|
161
|
+
.tab.contained.ai-connected--true:not(.disabled).selected {
|
|
162
|
+
border-top-color: var(--kd-color-border-button-ai-state-default);
|
|
163
|
+
background: var(--kd-color-background-button-secondary-ai-default);
|
|
164
|
+
}
|
|
165
|
+
.tab.contained.ai-connected--true:not(.disabled):hover {
|
|
166
|
+
background: var(--kd-color-background-button-secondary-ai-hover);
|
|
167
|
+
color: var(--kd-color-text-button-ai-default);
|
|
168
|
+
border-color: transparent;
|
|
169
|
+
}
|
|
170
|
+
.tab.contained.ai-connected--true:not(.disabled):active {
|
|
171
|
+
background: var(--kd-color-background-button-primary-ai-hover);
|
|
172
|
+
color: var(--kd-color-text-button-dark-primary);
|
|
173
|
+
border-color: transparent;
|
|
174
|
+
}
|
|
175
|
+
.tab.contained.ai-connected--false {
|
|
176
|
+
border-left: 2px solid var(--kd-color-border-error);
|
|
177
|
+
}
|
|
178
|
+
.tab.line.ai-connected--true:not(.disabled) {
|
|
179
|
+
color: var(--kd-color-text-button-ai-default);
|
|
180
|
+
border-color: var(--kd-color-border-variants-ai);
|
|
181
|
+
background: transparent;
|
|
182
|
+
}
|
|
183
|
+
.tab.line.ai-connected--true:not(.disabled).selected {
|
|
184
|
+
border-color: var(--kd-color-border-button-ai-state-default);
|
|
185
|
+
background: transparent;
|
|
186
|
+
}
|
|
187
|
+
.tab.line.ai-connected--true:not(.disabled):hover {
|
|
188
|
+
background: var(--kd-color-background-button-secondary-ai-hover);
|
|
189
|
+
color: var(--kd-color-text-button-ai-default);
|
|
190
|
+
border-color: var(--kd-color-border-button-ai-state-hover);
|
|
191
|
+
}
|
|
192
|
+
.tab.line.ai-connected--true:not(.disabled):active {
|
|
193
|
+
background: var(--kd-color-background-button-secondary-ai-pressed);
|
|
194
|
+
color: var(--kd-color-text-button-dark-primary);
|
|
195
|
+
border-color: transparent;
|
|
196
|
+
}
|
|
197
|
+
.tab.line.ai-connected--false {
|
|
198
|
+
background: transparent;
|
|
199
|
+
}
|
|
200
|
+
.tab.line.ai-connected--false.selected {
|
|
201
|
+
background: transparent;
|
|
202
|
+
}
|
|
141
203
|
@media (min-width: 42rem) {
|
|
142
204
|
.tab.contained.vertical {
|
|
143
205
|
border-top: none;
|
|
144
206
|
border-color: transparent;
|
|
145
207
|
}
|
|
146
|
-
.tab.contained.vertical.selected {
|
|
208
|
+
.tab.contained.vertical.selected.ai-connected--false {
|
|
147
209
|
border-color: var(--kd-color-border-level-tertiary);
|
|
148
210
|
}
|
|
211
|
+
.tab.contained.vertical.selected.ai-connected--true {
|
|
212
|
+
border-color: var(--kd-color-border-button-ai-state-default);
|
|
213
|
+
}
|
|
149
214
|
}
|
|
150
215
|
.tab:hover {
|
|
151
216
|
color: var(--kd-color-text-link-level-hover);
|
|
@@ -186,5 +251,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as
|
|
|
186
251
|
.tab.disabled.contained {
|
|
187
252
|
background: var(--kd-color-background-ui-default-disabled);
|
|
188
253
|
border-color: transparent;
|
|
189
|
-
}`;let
|
|
254
|
+
}`;let c=class extends d{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this._vertical=!1,this.aiConnected=!1,this.tabStyle="contained",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false",this._handleClick=e=>{if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}}render(){const e={tab:!0,contained:"contained"===this.tabStyle,line:"line"===this.tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled,[`ai-connected--${this.aiConnected}`]:!0};return n`
|
|
255
|
+
<div class=${r(e)}>
|
|
256
|
+
<slot></slot>
|
|
257
|
+
</div>
|
|
258
|
+
`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}willUpdate(e){e.has("id")&&(this["aria-controls"]=`${this.id}-panel`),e.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),e.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}};c.styles=l,e([t({type:String,reflect:!0})],c.prototype,"id",void 0),e([t({type:Boolean,reflect:!0})],c.prototype,"selected",void 0),e([t({type:Boolean})],c.prototype,"disabled",void 0),e([o()],c.prototype,"_size",void 0),e([o()],c.prototype,"_vertical",void 0),e([t({type:Boolean,reflect:!0,attribute:"data-aiconnected",converter:{fromAttribute:e=>"true"===e,toAttribute:e=>e?"true":"false"}})],c.prototype,"aiConnected",void 0),e([t({type:String,reflect:!0,attribute:"data-tab-style"})],c.prototype,"tabStyle",void 0),e([t({type:String,reflect:!0})],c.prototype,"role",void 0),e([t({type:Number,reflect:!0})],c.prototype,"tabIndex",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-selected",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-controls",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-disabled",void 0),c=e([a("kyn-tab")],c);export{c as Tab};
|
|
190
259
|
//# sourceMappingURL=tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n
|
|
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 @state()\n private _vertical = false;\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 = 'contained';\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 contained: this.tabStyle === 'contained',\n line: 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","render","classes","tab","contained","line","vertical","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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"}
|
|
@@ -13,6 +13,8 @@ export declare class Tabs extends LitElement {
|
|
|
13
13
|
tabSize: string;
|
|
14
14
|
/** Vertical orientation. */
|
|
15
15
|
vertical: boolean;
|
|
16
|
+
/** AI specifier. */
|
|
17
|
+
aiConnected: boolean;
|
|
16
18
|
/** Enables tab content change on focus with keyboard navigation/assistive technologies. */
|
|
17
19
|
disableAutoFocusUpdate: boolean;
|
|
18
20
|
/** Adds scrollable overflow to the tab panels. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,QAAQ,SAAe;IAEvB,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,2FAA2F;IAE3F,sBAAsB,UAAS;IAE/B,kDAAkD;IAElD,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,MAAY;IAElC,4CAA4C;IAE5C,QAAQ,SAAe;IAEvB,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,oBAAoB;IAEpB,WAAW,UAAS;IAEpB,2FAA2F;IAE3F,sBAAsB,UAAS;IAE/B,kDAAkD;IAElD,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;IAgCN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG;IAWrC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;IAavB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IAahC;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;CA4DxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as n,s,x as r}from"../../../vendor/lit-element-3185f710.js";var l=n`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -57,11 +57,21 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as
|
|
|
57
57
|
background: var(--kd-color-background-container-soft);
|
|
58
58
|
flex-grow: 1;
|
|
59
59
|
}
|
|
60
|
+
.tabs.contained.ai-connected--true::after {
|
|
61
|
+
content: "";
|
|
62
|
+
background: var(--kd-color-background-container-ai-subtle);
|
|
63
|
+
flex-grow: 1;
|
|
64
|
+
}
|
|
60
65
|
.tabs.line::after {
|
|
61
66
|
content: "";
|
|
62
67
|
border-bottom: 2px solid var(--kd-color-border-variants-light);
|
|
63
68
|
flex-grow: 1;
|
|
64
69
|
}
|
|
70
|
+
.tabs.line.ai-connected--true::after {
|
|
71
|
+
content: "";
|
|
72
|
+
border-bottom: 2px solid var(--kd-color-border-variants-ai);
|
|
73
|
+
flex-grow: 1;
|
|
74
|
+
}
|
|
65
75
|
@media (min-width: 42rem) {
|
|
66
76
|
.vertical .tabs {
|
|
67
77
|
flex-direction: column;
|
|
@@ -86,12 +96,12 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as
|
|
|
86
96
|
}
|
|
87
97
|
.panels:focus {
|
|
88
98
|
outline-color: var(--kd-color-border-variants-focus);
|
|
89
|
-
}`;let d=class extends
|
|
90
|
-
<div class=${i(
|
|
99
|
+
}`;let d=class extends s{constructor(){super(...arguments),this.tabStyle="contained",this.tabSize="md",this.vertical=!1,this.aiConnected=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const e={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels,[`ai-connected--${this.aiConnected}`]:!0},t={tabs:!0,contained:"contained"===this.tabStyle,line:"line"===this.tabStyle,[`ai-connected--${this.aiConnected}`]:!0};return r`
|
|
100
|
+
<div class=${i(e)}>
|
|
91
101
|
<div
|
|
92
|
-
class=${i(
|
|
102
|
+
class=${i(t)}
|
|
93
103
|
role="tablist"
|
|
94
|
-
@keydown=${
|
|
104
|
+
@keydown=${e=>this._handleKeyboard(e)}
|
|
95
105
|
>
|
|
96
106
|
<slot name="tabs" @slotchange=${this._handleSlotChangeTabs}></slot>
|
|
97
107
|
</div>
|
|
@@ -100,5 +110,5 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,l as a,o as
|
|
|
100
110
|
<slot></slot>
|
|
101
111
|
</div>
|
|
102
112
|
</div>
|
|
103
|
-
`}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(
|
|
113
|
+
`}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("tabStyle")||e.has("aiConnected"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e._vertical=this.vertical,e.tabStyle=this.tabStyle,e.aiConnected=this.aiConnected})),this._tabPanels.forEach((e=>{e._vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e,t=!0){this._tabs.forEach((t=>{t.selected=t.id===e})),t&&this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const a=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(a)}_handleKeyboard(e){const t=this._tabs.length,a=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?t-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?t-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}case 39:case 40:{let i=a===t-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===t-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}default:return}}};d.styles=l,e([t({type:String})],d.prototype,"tabStyle",void 0),e([t({type:String})],d.prototype,"tabSize",void 0),e([t({type:Boolean})],d.prototype,"vertical",void 0),e([t({type:Boolean})],d.prototype,"aiConnected",void 0),e([t({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),e([t({type:Boolean})],d.prototype,"scrollablePanels",void 0),e([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([o("kyn-tabs")],d);export{d as Tabs};
|
|
104
114
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n static override styles = TabsScss;\n\n /** Tab style. `'contained'` or `'line'`. */\n @property({ type: String })\n tabStyle = 'contained';\n\n /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n @property({ type: String })\n tabSize = 'md';\n\n /** Vertical orientation. */\n @property({ type: Boolean })\n vertical = false;\n\n /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n @property({ type: Boolean })\n disableAutoFocusUpdate = false;\n\n /** Adds scrollable overflow to the tab panels. */\n @property({ type: Boolean })\n scrollablePanels = false;\n\n /** Queries for slotted tabs.\n * @internal\n */\n @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n _tabs!: any;\n\n /** Queries for slotted tab panels.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-tab-panel' })\n _tabPanels!: any;\n\n override render() {\n const wrapperClasses = {\n wrapper: true,\n vertical: this.vertical,\n scrollable: this.scrollablePanels,\n };\n\n const tabsClasses = {\n tabs: true,\n contained: this.tabStyle === 'contained',\n line: this.tabStyle === 'line',\n };\n\n return html`\n <div class=${classMap(wrapperClasses)}>\n <div\n class=${classMap(tabsClasses)}\n role=\"tablist\"\n @keydown=${(e: any) => this._handleKeyboard(e)}\n >\n <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n </div>\n\n <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('tab-activated', (e) => this._handleChange(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: any) {\n if (\n changedProps.has('tabSize') ||\n changedProps.has('vertical') ||\n changedProps.has('tabStyle')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChangeTabs() {\n this._updateChildren();\n }\n\n private _updateChildren() {\n this._tabs.forEach((tab: any) => {\n tab._size = this.tabSize;\n tab._vertical = this.vertical;\n tab._tabStyle = this.tabStyle;\n });\n\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel._vertical = this.vertical;\n });\n }\n\n /**\n * Updates children and emits a change event based on the provided\n * event details when a child kyn-tab is clicked.\n * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n * that triggered the handleChange function.\n */\n private _handleChange(e: any) {\n e.stopPropagation();\n this._updateChildrenSelection(e.detail.tabId);\n this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n }\n\n /**\n * Updates the selected property of tabs and the visible property of tab panels based on\n * the selected tab ID.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the tab that is currently selected.\n */\n private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n // update tabs selected prop\n this._tabs.forEach((tab: any) => {\n tab.selected = tab.id === selectedTabId;\n });\n\n // update tab-panels visible prop\n if (!updatePanel) return;\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.visible = tabPanel.tabId === selectedTabId;\n });\n }\n\n /**\n * Creates and dispatches a custom event called 'on-change' with the provided original event and\n * selected tab ID as details.\n * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n * change event. It could be any type of event object, such as a click event or a keydown event.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the selected tab.\n */\n private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n const event = new CustomEvent('on-change', {\n detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handles keyboard events for navigating between tabs.\n * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n * contains information about the keyboard event, such as the key code of the pressed key.\n * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n * except when the `keyCode` matches the left or right arrow key codes.\n */\n private _handleKeyboard(e: any) {\n const LEFT_ARROW_KEY_CODE = 37;\n const UP_ARROW_KEY_CODE = 38;\n const RIGHT_ARROW_KEY_CODE = 39;\n const DOWN_ARROW_KEY_CODE = 40;\n const ENTER_KEY_CODE = 13;\n const SPACE_KEY_CODE = 32;\n const TabCount = this._tabs.length;\n const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n switch (e.keyCode) {\n case ENTER_KEY_CODE:\n case SPACE_KEY_CODE: {\n this._updateChildrenSelection(\n this._tabs[SelectedTabIndex].id,\n this.disableAutoFocusUpdate\n );\n return;\n }\n case LEFT_ARROW_KEY_CODE:\n case UP_ARROW_KEY_CODE: {\n // activate previous tab\n let prevIndex =\n SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n let prevTab = this._tabs[prevIndex];\n\n if (prevTab.disabled) {\n prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n prevTab = this._tabs[prevIndex];\n }\n\n prevTab.focus();\n\n this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, prevTab.id);\n return;\n }\n case RIGHT_ARROW_KEY_CODE:\n case DOWN_ARROW_KEY_CODE: {\n // activate next tab\n let nextIndex =\n SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n let nextTab = this._tabs[nextIndex];\n\n if (nextTab.disabled) {\n nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n nextTab = this._tabs[nextIndex];\n }\n\n nextTab.focus();\n\n this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, nextTab.id);\n return;\n }\n default: {\n return;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tabs': Tabs;\n }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabStyle","tabSize","vertical","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","contained","line","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_vertical","_tabStyle","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n static override styles = TabsScss;\n\n /** Tab style. `'contained'` or `'line'`. */\n @property({ type: String })\n tabStyle = 'contained';\n\n /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n @property({ type: String })\n tabSize = 'md';\n\n /** Vertical orientation. */\n @property({ type: Boolean })\n vertical = false;\n\n /** AI specifier. */\n @property({ type: Boolean })\n aiConnected = false;\n\n /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n @property({ type: Boolean })\n disableAutoFocusUpdate = false;\n\n /** Adds scrollable overflow to the tab panels. */\n @property({ type: Boolean })\n scrollablePanels = false;\n\n /** Queries for slotted tabs.\n * @internal\n */\n @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n _tabs!: any;\n\n /** Queries for slotted tab panels.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-tab-panel' })\n _tabPanels!: any;\n\n override render() {\n const wrapperClasses = {\n wrapper: true,\n vertical: this.vertical,\n scrollable: this.scrollablePanels,\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n const tabsClasses = {\n tabs: true,\n contained: this.tabStyle === 'contained',\n line: this.tabStyle === 'line',\n [`ai-connected--${this.aiConnected}`]: true,\n };\n\n return html`\n <div class=${classMap(wrapperClasses)}>\n <div\n class=${classMap(tabsClasses)}\n role=\"tablist\"\n @keydown=${(e: any) => this._handleKeyboard(e)}\n >\n <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n </div>\n\n <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('tab-activated', (e) => this._handleChange(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: any) {\n if (\n changedProps.has('tabSize') ||\n changedProps.has('vertical') ||\n changedProps.has('tabStyle') ||\n changedProps.has('aiConnected')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChangeTabs() {\n this._updateChildren();\n }\n\n private _updateChildren() {\n this._tabs.forEach((tab: any) => {\n tab._size = this.tabSize;\n tab._vertical = this.vertical;\n tab.tabStyle = this.tabStyle;\n tab.aiConnected = this.aiConnected;\n });\n\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel._vertical = this.vertical;\n });\n }\n\n /**\n * Updates children and emits a change event based on the provided\n * event details when a child kyn-tab is clicked.\n * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n * that triggered the handleChange function.\n */\n private _handleChange(e: any) {\n e.stopPropagation();\n this._updateChildrenSelection(e.detail.tabId);\n this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n }\n\n /**\n * Updates the selected property of tabs and the visible property of tab panels based on\n * the selected tab ID.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the tab that is currently selected.\n */\n private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n // update tabs selected prop\n this._tabs.forEach((tab: any) => {\n tab.selected = tab.id === selectedTabId;\n });\n\n // update tab-panels visible prop\n if (!updatePanel) return;\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.visible = tabPanel.tabId === selectedTabId;\n });\n }\n\n /**\n * Creates and dispatches a custom event called 'on-change' with the provided original event and\n * selected tab ID as details.\n * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n * change event. It could be any type of event object, such as a click event or a keydown event.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the selected tab.\n */\n private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n const event = new CustomEvent('on-change', {\n detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handles keyboard events for navigating between tabs.\n * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n * contains information about the keyboard event, such as the key code of the pressed key.\n * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n * except when the `keyCode` matches the left or right arrow key codes.\n */\n private _handleKeyboard(e: any) {\n const LEFT_ARROW_KEY_CODE = 37;\n const UP_ARROW_KEY_CODE = 38;\n const RIGHT_ARROW_KEY_CODE = 39;\n const DOWN_ARROW_KEY_CODE = 40;\n const ENTER_KEY_CODE = 13;\n const SPACE_KEY_CODE = 32;\n const TabCount = this._tabs.length;\n const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n switch (e.keyCode) {\n case ENTER_KEY_CODE:\n case SPACE_KEY_CODE: {\n this._updateChildrenSelection(\n this._tabs[SelectedTabIndex].id,\n this.disableAutoFocusUpdate\n );\n return;\n }\n case LEFT_ARROW_KEY_CODE:\n case UP_ARROW_KEY_CODE: {\n // activate previous tab\n let prevIndex =\n SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n let prevTab = this._tabs[prevIndex];\n\n if (prevTab.disabled) {\n prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n prevTab = this._tabs[prevIndex];\n }\n\n prevTab.focus();\n\n this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, prevTab.id);\n return;\n }\n case RIGHT_ARROW_KEY_CODE:\n case DOWN_ARROW_KEY_CODE: {\n // activate next tab\n let nextIndex =\n SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n let nextTab = this._tabs[nextIndex];\n\n if (nextTab.disabled) {\n nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n nextTab = this._tabs[nextIndex];\n }\n\n nextTab.focus();\n\n this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, nextTab.id);\n return;\n }\n default: {\n return;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tabs': Tabs;\n }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabStyle","tabSize","vertical","aiConnected","disableAutoFocusUpdate","scrollablePanels","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","contained","line","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_vertical","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}
|