@kyndryl-design-system/shidoka-applications 2.11.0 → 2.12.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/globalFilter/globalFilter.skeleton.sample.d.ts.map +1 -1
- package/components/reusable/inlineConfirm/inlineConfirm.js +10 -7
- package/components/reusable/inlineConfirm/inlineConfirm.js.map +1 -1
- package/components/reusable/loaders/skeleton.d.ts +2 -4
- package/components/reusable/loaders/skeleton.d.ts.map +1 -1
- package/components/reusable/loaders/skeleton.js +13 -11
- package/components/reusable/loaders/skeleton.js.map +1 -1
- package/components/reusable/pagetitle/pageTitle.d.ts +1 -1
- package/components/reusable/pagetitle/pageTitle.d.ts.map +1 -1
- package/components/reusable/pagetitle/pageTitle.js.map +1 -1
- package/components/reusable/table/table.skeleton.js +3 -7
- package/components/reusable/table/table.skeleton.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globalFilter.skeleton.sample.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/globalFilter/globalFilter.skeleton.sample.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAapB;IACO,MAAM;
|
|
1
|
+
{"version":3,"file":"globalFilter.skeleton.sample.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/globalFilter/globalFilter.skeleton.sample.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAapB;IACO,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kCAAkC,EAAE,6BAA6B,CAAC;KACnE;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as
|
|
1
|
+
import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as n,n as t,t as o,s as e,x as a,e as r}from"../../../vendor/lit-element-c6c02f24.js";import{o as s}from"../../../vendor/lit-html-29220869.js";import{o as l}from"../../../vendor/lit-7b0f5ebf.js";import"../button/button.js";import{j as m,J as c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-726d44b0.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var p=n`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -28,7 +28,7 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as t,n,t as o,s a
|
|
|
28
28
|
position: absolute;
|
|
29
29
|
top: 0;
|
|
30
30
|
right: 0;
|
|
31
|
-
transition: opacity var(--animation-speed-out)
|
|
31
|
+
transition: opacity var(--animation-speed-out) var(--animation-easing-out), visibility var(--animation-speed-out) var(--animation-easing-out);
|
|
32
32
|
visibility: hidden;
|
|
33
33
|
opacity: 0;
|
|
34
34
|
}
|
|
@@ -41,6 +41,7 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as t,n,t as o,s a
|
|
|
41
41
|
visibility: visible;
|
|
42
42
|
opacity: 1;
|
|
43
43
|
transition-duration: var(--animation-speed-in);
|
|
44
|
+
transition-timing-function: var(--animation-easing-in);
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
.cancel-btn {
|
|
@@ -61,9 +62,11 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as t,n,t as o,s a
|
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
.anchor {
|
|
64
|
-
transition: opacity var(--animation-speed-
|
|
65
|
+
transition: opacity var(--animation-speed-out) var(--animation-easing-out);
|
|
65
66
|
}
|
|
66
67
|
.open .anchor {
|
|
68
|
+
transition-duration: var(--animation-speed-in);
|
|
69
|
+
transition-timing-function: var(--animation-easing-in);
|
|
67
70
|
opacity: 0;
|
|
68
71
|
}
|
|
69
72
|
|
|
@@ -110,7 +113,7 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as t,n,t as o,s a
|
|
|
110
113
|
100% {
|
|
111
114
|
transform: translateX(-100%);
|
|
112
115
|
}
|
|
113
|
-
}`;let d=class extends e{constructor(){super(...arguments),this.destructive=!1,this.anchorText="",this.confirmText="Confirm",this.cancelText="Cancel",this.openRight=!1,this._isOpen=!1}_handleToggle(){this._isOpen=!this._isOpen,setTimeout((()=>{var i,
|
|
116
|
+
}`;let d=class extends e{constructor(){super(...arguments),this.destructive=!1,this.anchorText="",this.confirmText="Confirm",this.cancelText="Cancel",this.openRight=!1,this._isOpen=!1}_handleToggle(){this._isOpen=!this._isOpen,setTimeout((()=>{var i,n;(this._isOpen?null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".cancel-btn"):null===(n=this.shadowRoot)||void 0===n?void 0:n.querySelector(".anchor")).focus()}),10)}_handleConfirm(){this._handleToggle();const i=new CustomEvent("on-confirm");this.dispatchEvent(i)}render(){const i={"inline-confirm":!0,open:this._isOpen,"open-right":this.openRight};return a`
|
|
114
117
|
<div class="${l(i)}">
|
|
115
118
|
<kyn-button
|
|
116
119
|
class="anchor"
|
|
@@ -132,7 +135,7 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as t,n,t as o,s a
|
|
|
132
135
|
description=${this.cancelText}
|
|
133
136
|
@on-click=${this._handleToggle}
|
|
134
137
|
>
|
|
135
|
-
<span slot="icon">${
|
|
138
|
+
<span slot="icon">${s(m)}</span>
|
|
136
139
|
</kyn-button>
|
|
137
140
|
|
|
138
141
|
<kyn-button
|
|
@@ -142,9 +145,9 @@ import{_ as i}from"../../../vendor/tslib-53a81efe.js";import{i as t,n,t as o,s a
|
|
|
142
145
|
description=${this.confirmText}
|
|
143
146
|
@on-click=${this._handleConfirm}
|
|
144
147
|
>
|
|
145
|
-
<slot slot="icon" name="confirmIcon">${
|
|
148
|
+
<slot slot="icon" name="confirmIcon">${s(c)}</slot>
|
|
146
149
|
</kyn-button>
|
|
147
150
|
</div>
|
|
148
151
|
</div>
|
|
149
|
-
`}};d.styles=p,i([
|
|
152
|
+
`}};d.styles=p,i([t({type:Boolean})],d.prototype,"destructive",void 0),i([t({type:String})],d.prototype,"anchorText",void 0),i([t({type:String})],d.prototype,"confirmText",void 0),i([t({type:String})],d.prototype,"cancelText",void 0),i([t({type:Boolean})],d.prototype,"openRight",void 0),i([o()],d.prototype,"_isOpen",void 0),d=i([r("kyn-inline-confirm")],d);export{d as InlineConfirm};
|
|
150
153
|
//# sourceMappingURL=inlineConfirm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inlineConfirm.js","sources":["../../../../src/components/reusable/inlineConfirm/inlineConfirm.ts"],"sourcesContent":["import { LitElement, html, property, customElement, state } from 'lit-element';\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './inlineConfirm.scss';\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/check.svg';\n\n/**\n * InlineConfirm component.\n * @slot unnamed - Slot for anchor button icon.\n * @slot confirmIcon - Slot for confirm icon button, will be a check icon by default if none provided.\n * @fires on-confirm - Dispatched when the confirm button is clicked.\n */\n@customElement('kyn-inline-confirm')\nexport class InlineConfirm extends LitElement {\n static override styles = styles;\n\n /**\n * Determines if the action is destructive.\n * @type {boolean}\n */\n @property({ type: Boolean })\n destructive = false;\n\n /**\n * Anchor button text.\n * @type {string}\n */\n @property({ type: String })\n anchorText = '';\n\n /**\n * Confirm button text.\n * @type {string}\n */\n @property({ type: String })\n confirmText = 'Confirm';\n\n /**\n * Cancel button text.\n * @type {string}\n */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /**\n * Open to the right.\n * @type {boolean}\n */\n @property({ type: Boolean })\n openRight = false;\n\n /**\n * Confirmation open state.\n * @internal\n */\n @state()\n private _isOpen = false;\n\n private _handleToggle() {\n this._isOpen = !this._isOpen;\n\n setTimeout(() => {\n const focusEl: any = this._isOpen\n ? this.shadowRoot?.querySelector('.cancel-btn')\n : this.shadowRoot?.querySelector('.anchor');\n\n focusEl.focus();\n }, 10);\n }\n\n private _handleConfirm() {\n this._handleToggle();\n\n const event = new CustomEvent('on-confirm');\n this.dispatchEvent(event);\n }\n\n override render() {\n const Classes = {\n 'inline-confirm': true,\n open: this._isOpen,\n 'open-right': this.openRight,\n };\n\n return html`\n <div class=\"${classMap(Classes)}\">\n <kyn-button\n class=\"anchor\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.anchorText}\n aria-controls=\"confirmation\"\n aria-expanded=${this._isOpen}\n @on-click=${this._handleToggle}\n >\n <slot slot=\"icon\"></slot>\n </kyn-button>\n\n <div id=\"confirmation\">\n <kyn-button\n class=\"cancel-btn\"\n kind=\"tertiary\"\n size=\"small\"\n description=${this.cancelText}\n @on-click=${this._handleToggle}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n\n <kyn-button\n class=\"confirm-btn\"\n kind=${this.destructive ? 'secondary-destructive' : 'primary'}\n size=\"small\"\n description=${this.confirmText}\n @on-click=${this._handleConfirm}\n >\n <slot slot=\"icon\" name=\"confirmIcon\">${unsafeSVG(checkIcon)}</slot>\n </kyn-button>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-inline-confirm': InlineConfirm;\n }\n}\n"],"names":["InlineConfirm","LitElement","constructor","this","destructive","anchorText","confirmText","cancelText","openRight","_isOpen","_handleToggle","setTimeout","shadowRoot","_a","querySelector","_b","focus","_handleConfirm","event","CustomEvent","dispatchEvent","render","Classes","open","html","classMap","unsafeSVG","closeIcon","checkIcon","styles","__decorate","property","type","Boolean","prototype","String","state","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"inlineConfirm.js","sources":["../../../../src/components/reusable/inlineConfirm/inlineConfirm.ts"],"sourcesContent":["import { LitElement, html, property, customElement, state } from 'lit-element';\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './inlineConfirm.scss';\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/check.svg';\n\n/**\n * InlineConfirm component.\n * @slot unnamed - Slot for anchor button icon.\n * @slot confirmIcon - Slot for confirm icon button, will be a check icon by default if none provided.\n * @fires on-confirm - Dispatched when the confirm button is clicked.\n */\n@customElement('kyn-inline-confirm')\nexport class InlineConfirm extends LitElement {\n static override styles = styles;\n\n /**\n * Determines if the action is destructive.\n * @type {boolean}\n */\n @property({ type: Boolean })\n destructive = false;\n\n /**\n * Anchor button text.\n * @type {string}\n */\n @property({ type: String })\n anchorText = '';\n\n /**\n * Confirm button text.\n * @type {string}\n */\n @property({ type: String })\n confirmText = 'Confirm';\n\n /**\n * Cancel button text.\n * @type {string}\n */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /**\n * Open to the right.\n * @type {boolean}\n */\n @property({ type: Boolean })\n openRight = false;\n\n /**\n * Confirmation open state.\n * @internal\n */\n @state()\n private _isOpen = false;\n\n private _handleToggle() {\n this._isOpen = !this._isOpen;\n\n setTimeout(() => {\n const focusEl: any = this._isOpen\n ? this.shadowRoot?.querySelector('.cancel-btn')\n : this.shadowRoot?.querySelector('.anchor');\n\n focusEl.focus();\n }, 10);\n }\n\n private _handleConfirm() {\n this._handleToggle();\n\n const event = new CustomEvent('on-confirm');\n this.dispatchEvent(event);\n }\n\n override render() {\n const Classes = {\n 'inline-confirm': true,\n open: this._isOpen,\n 'open-right': this.openRight,\n };\n\n return html`\n <div class=\"${classMap(Classes)}\">\n <kyn-button\n class=\"anchor\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.anchorText}\n aria-controls=\"confirmation\"\n aria-expanded=${this._isOpen}\n @on-click=${this._handleToggle}\n >\n <slot slot=\"icon\"></slot>\n </kyn-button>\n\n <div id=\"confirmation\">\n <kyn-button\n class=\"cancel-btn\"\n kind=\"tertiary\"\n size=\"small\"\n description=${this.cancelText}\n @on-click=${this._handleToggle}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n\n <kyn-button\n class=\"confirm-btn\"\n kind=${this.destructive ? 'secondary-destructive' : 'primary'}\n size=\"small\"\n description=${this.confirmText}\n @on-click=${this._handleConfirm}\n >\n <slot slot=\"icon\" name=\"confirmIcon\">${unsafeSVG(checkIcon)}</slot>\n </kyn-button>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-inline-confirm': InlineConfirm;\n }\n}\n"],"names":["InlineConfirm","LitElement","constructor","this","destructive","anchorText","confirmText","cancelText","openRight","_isOpen","_handleToggle","setTimeout","shadowRoot","_a","querySelector","_b","focus","_handleConfirm","event","CustomEvent","dispatchEvent","render","Classes","open","html","classMap","unsafeSVG","closeIcon","checkIcon","styles","__decorate","property","type","Boolean","prototype","String","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgBO,IAAMA,EAAN,cAA4BC,EAA5B,WAAAC,uBAQLC,KAAWC,aAAG,EAOdD,KAAUE,WAAG,GAObF,KAAWG,YAAG,UAOdH,KAAUI,WAAG,SAObJ,KAASK,WAAG,EAOJL,KAAOM,SAAG,CAkEnB,CAhES,aAAAC,GACNP,KAAKM,SAAWN,KAAKM,QAErBE,YAAW,cACYR,KAAKM,QACL,UAAjBN,KAAKS,kBAAY,IAAAC,OAAA,EAAAA,EAAAC,cAAc,uBAC/BC,EAAAZ,KAAKS,iCAAYE,cAAc,YAE3BE,OAAO,GACd,GACJ,CAEO,cAAAC,GACNd,KAAKO,gBAEL,MAAMQ,EAAQ,IAAIC,YAAY,cAC9BhB,KAAKiB,cAAcF,EACpB,CAEQ,MAAAG,GACP,MAAMC,EAAU,CACd,kBAAkB,EAClBC,KAAMpB,KAAKM,QACX,aAAcN,KAAKK,WAGrB,OAAOgB,CAAI;oBACKC,EAASH;;;;;wBAKLnB,KAAKE;;0BAEHF,KAAKM;sBACTN,KAAKO;;;;;;;;;;0BAUDP,KAAKI;wBACPJ,KAAKO;;gCAEGgB,EAAUC;;;;;mBAKvBxB,KAAKC,YAAc,wBAA0B;;0BAEtCD,KAAKG;wBACPH,KAAKc;;mDAEsBS,EAAUE;;;;KAK1D,GA3Ge5B,EAAM6B,OAAGA,EAOzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACEjC,EAAAkC,UAAA,mBAAA,GAOpBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACFnC,EAAAkC,UAAA,kBAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACMnC,EAAAkC,UAAA,mBAAA,GAOxBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACInC,EAAAkC,UAAA,kBAAA,GAOtBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACAjC,EAAAkC,UAAA,iBAAA,GAOlBJ,EAAA,CADCM,KACuBpC,EAAAkC,UAAA,eAAA,GA3CblC,EAAa8B,EAAA,CADzBO,EAAc,uBACFrC"}
|
|
@@ -25,10 +25,8 @@ export declare class Skeleton extends LitElement {
|
|
|
25
25
|
* Sets whether to display inline or block.
|
|
26
26
|
*/
|
|
27
27
|
inline: boolean;
|
|
28
|
-
/**
|
|
29
|
-
|
|
30
|
-
*/
|
|
31
|
-
shade: 'light' | 'dark' | string;
|
|
28
|
+
/** Set to `true` for AI theme. */
|
|
29
|
+
aiConnected: boolean;
|
|
32
30
|
render(): import("lit").TemplateResult<1>;
|
|
33
31
|
}
|
|
34
32
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,MAAkB;IAExC;;OAEG;IAEH,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAe;IAE5C;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,MAAkB;IAExC;;OAEG;IAEH,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAe;IAE5C;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf,kCAAkC;IAElC,WAAW,UAAS;IAEX,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as o}from"../../../vendor/lit-7b0f5ebf.js";import{i,s,x as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as o}from"../../../vendor/lit-7b0f5ebf.js";import{i,s as a,x as n}from"../../../vendor/lit-element-c6c02f24.js";var s=i`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -9,7 +9,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as
|
|
|
9
9
|
--skeleton-base-height: 16px;
|
|
10
10
|
--skeleton-border-radius: 4px;
|
|
11
11
|
--skeleton-background: var(--kd-color-background-loader-skeleton-default);
|
|
12
|
-
--skeleton-background-dark: var(
|
|
12
|
+
--skeleton-background-dark: var(
|
|
13
|
+
--kd-color-background-loader-skeleton-secondary
|
|
14
|
+
);
|
|
13
15
|
--skeleton-shimmer-duration: 1.5s;
|
|
14
16
|
--skeleton-size-small: 32px;
|
|
15
17
|
--skeleton-size-medium: 64px;
|
|
@@ -45,6 +47,12 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as
|
|
|
45
47
|
overflow: hidden;
|
|
46
48
|
will-change: transform;
|
|
47
49
|
}
|
|
50
|
+
.skeleton.ai-Skeleton {
|
|
51
|
+
background: var(--kd-color-background-gradients-ai-loader-start-gradient);
|
|
52
|
+
}
|
|
53
|
+
.skeleton.ai-Skeleton::after {
|
|
54
|
+
background: linear-gradient(90deg, var(--kd-color-background-gradients-ai-loader-start-gradient) 0%, var(--kd-color-background-gradients-ai-loader-mid-gradient) 30%, var(--kd-color-background-gradients-ai-loader-end-gradient) 70%, var(--kd-color-background-gradients-ai-loader-start-gradient) 100%);
|
|
55
|
+
}
|
|
48
56
|
.skeleton.rectangle {
|
|
49
57
|
border-radius: var(--skeleton-border-radius);
|
|
50
58
|
}
|
|
@@ -64,12 +72,6 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as
|
|
|
64
72
|
width: var(--skeleton-size-large);
|
|
65
73
|
height: var(--skeleton-size-large);
|
|
66
74
|
}
|
|
67
|
-
.skeleton.shade-dark {
|
|
68
|
-
background: var(--skeleton-background-dark);
|
|
69
|
-
}
|
|
70
|
-
.skeleton.shade-dark::after {
|
|
71
|
-
background-image: linear-gradient(90deg, rgba(30, 30, 30, 0) 0%, rgba(60, 60, 60, 0.2) 10%, rgba(100, 100, 100, 0.5) 50%, rgba(60, 60, 60, 0.2) 90%, rgba(30, 30, 30, 0) 100%);
|
|
72
|
-
}
|
|
73
75
|
.skeleton::after {
|
|
74
76
|
position: absolute;
|
|
75
77
|
top: 0;
|
|
@@ -78,7 +80,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as
|
|
|
78
80
|
left: 0;
|
|
79
81
|
transform: translateX(-100%) translate3d(0, 0, 0);
|
|
80
82
|
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, var(--kd-color-background-loader-skeleton-default) 10%, var(--kd-color-background-loader-skeleton-tertiary) 50%, var(--kd-color-background-loader-skeleton-default) 90%, rgba(255, 255, 255, 0) 100%);
|
|
81
|
-
animation: shimmer var(--skeleton-shimmer-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
83
|
+
animation: shimmer var(--skeleton-shimmer-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
|
|
82
84
|
content: "";
|
|
83
85
|
pointer-events: none;
|
|
84
86
|
}
|
|
@@ -90,11 +92,11 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,o as r,e as
|
|
|
90
92
|
100% {
|
|
91
93
|
transform: translateX(100%) translate3d(0, 0, 0);
|
|
92
94
|
}
|
|
93
|
-
}`;let l=class extends
|
|
95
|
+
}`;let l=class extends a{constructor(){super(...arguments),this.shape="rectangle",this.lines=1,this.inline=!1,this.aiConnected=!1}render(){const e={skeleton:!0,[this.shape]:!0,[`size-${this.size}`]:Boolean(this.size),"multi-line":this.lines>1,inline:this.inline,"ai-Skeleton":this.aiConnected},t={...this.width&&{width:this.width},...this.height&&{height:this.height}},o=Array.from({length:this.lines},(()=>n`
|
|
94
96
|
<div
|
|
95
97
|
class=${r(e)}
|
|
96
98
|
style=${Object.entries(t).map((([e,t])=>`${e}: ${t}`)).join(";")}
|
|
97
99
|
aria-hidden="true"
|
|
98
100
|
></div>
|
|
99
|
-
`));return
|
|
101
|
+
`));return n` ${o} `}};l.styles=s,e([t({type:String,reflect:!0})],l.prototype,"shape",void 0),e([t({type:String})],l.prototype,"size",void 0),e([t({type:String})],l.prototype,"width",void 0),e([t({type:String})],l.prototype,"height",void 0),e([t({type:Number})],l.prototype,"lines",void 0),e([t({type:Boolean})],l.prototype,"inline",void 0),e([t({type:Boolean})],l.prototype,"aiConnected",void 0),l=e([o("kyn-skeleton")],l);export{l as Skeleton};
|
|
100
102
|
//# sourceMappingURL=skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport skeletonStyles from './skeleton.scss';\n\n@customElement('kyn-skeleton')\nexport class Skeleton extends LitElement {\n static override styles = skeletonStyles;\n\n /**\n * Defines the shape of the skeleton element.\n */\n @property({ type: String, reflect: true })\n shape: 'rectangle' | 'circle' = 'rectangle';\n\n /**\n * Optional: Predefined size (small, medium, large).\n */\n @property({ type: String })\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Optional: Custom width (overrides size if provided).\n */\n @property({ type: String })\n width?: string;\n\n /**\n * Optional: Custom height (overrides size if provided).\n */\n @property({ type: String })\n height?: string;\n\n /**\n * Sets the number of skeleton lines to display.\n */\n @property({ type: Number })\n lines = 1;\n\n /**\n * Sets whether to display inline or block.\n */\n @property({ type: Boolean })\n inline = false;\n\n
|
|
1
|
+
{"version":3,"file":"skeleton.js","sources":["../../../../src/components/reusable/loaders/skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport skeletonStyles from './skeleton.scss';\n\n@customElement('kyn-skeleton')\nexport class Skeleton extends LitElement {\n static override styles = skeletonStyles;\n\n /**\n * Defines the shape of the skeleton element.\n */\n @property({ type: String, reflect: true })\n shape: 'rectangle' | 'circle' = 'rectangle';\n\n /**\n * Optional: Predefined size (small, medium, large).\n */\n @property({ type: String })\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Optional: Custom width (overrides size if provided).\n */\n @property({ type: String })\n width?: string;\n\n /**\n * Optional: Custom height (overrides size if provided).\n */\n @property({ type: String })\n height?: string;\n\n /**\n * Sets the number of skeleton lines to display.\n */\n @property({ type: Number })\n lines = 1;\n\n /**\n * Sets whether to display inline or block.\n */\n @property({ type: Boolean })\n inline = false;\n\n /** Set to `true` for AI theme. */\n @property({ type: Boolean })\n aiConnected = false;\n\n override render() {\n const classes = {\n skeleton: true,\n [this.shape]: true,\n [`size-${this.size}`]: Boolean(this.size),\n 'multi-line': this.lines > 1,\n inline: this.inline,\n 'ai-Skeleton': this.aiConnected,\n };\n\n const styles = {\n ...(this.width && { width: this.width }),\n ...(this.height && { height: this.height }),\n };\n\n const skeletonLines = Array.from(\n { length: this.lines },\n () => html`\n <div\n class=${classMap(classes)}\n style=${Object.entries(styles)\n .map(([key, value]) => `${key}: ${value}`)\n .join(';')}\n aria-hidden=\"true\"\n ></div>\n `\n );\n\n return html` ${skeletonLines} `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-skeleton': Skeleton;\n }\n}\n"],"names":["Skeleton","LitElement","constructor","this","shape","lines","inline","aiConnected","render","classes","skeleton","size","Boolean","styles","width","height","skeletonLines","Array","from","length","html","classMap","Object","entries","map","key","value","join","skeletonStyles","__decorate","property","type","String","reflect","prototype","Number","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAMO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAOLC,KAAKC,MAA2B,YAwBhCD,KAAKE,MAAG,EAMRF,KAAMG,QAAG,EAITH,KAAWI,aAAG,CAgCf,CA9BU,MAAAC,GACP,MAAMC,EAAU,CACdC,UAAU,EACV,CAACP,KAAKC,QAAQ,EACd,CAAC,QAAQD,KAAKQ,QAASC,QAAQT,KAAKQ,MACpC,aAAcR,KAAKE,MAAQ,EAC3BC,OAAQH,KAAKG,OACb,cAAeH,KAAKI,aAGhBM,EAAS,IACTV,KAAKW,OAAS,CAAEA,MAAOX,KAAKW,UAC5BX,KAAKY,QAAU,CAAEA,OAAQZ,KAAKY,SAG9BC,EAAgBC,MAAMC,KAC1B,CAAEC,OAAQhB,KAAKE,QACf,IAAMe,CAAI;;kBAEEC,EAASZ;kBACTa,OAAOC,QAAQV,GACpBW,KAAI,EAAEC,EAAKC,KAAW,GAAGD,MAAQC,MACjCC,KAAK;;;UAMd,OAAOP,CAAI,IAAIJ,IAChB,GAvEehB,EAAMa,OAAGe,EAMzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACSjC,EAAAkC,UAAA,aAAA,GAM5CL,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACkBhC,EAAAkC,UAAA,YAAA,GAMpCL,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACHhC,EAAAkC,UAAA,aAAA,GAMfL,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACFhC,EAAAkC,UAAA,cAAA,GAMhBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,UACRnC,EAAAkC,UAAA,aAAA,GAMVL,EAAA,CADCC,EAAS,CAAEC,KAAMnB,WACHZ,EAAAkC,UAAA,cAAA,GAIfL,EAAA,CADCC,EAAS,CAAEC,KAAMnB,WACEZ,EAAAkC,UAAA,mBAAA,GAzCTlC,EAAQ6B,EAAA,CADpBO,EAAc,iBACFpC"}
|
|
@@ -11,7 +11,7 @@ export declare class PageTitle extends LitElement {
|
|
|
11
11
|
pageTitle: string;
|
|
12
12
|
/** Page subtitle text. */
|
|
13
13
|
subTitle: string;
|
|
14
|
-
/** Type of page title `'primary'`
|
|
14
|
+
/** Type of page title `'primary'` , `'secondary'` & `'tertiary'`. */
|
|
15
15
|
type: string;
|
|
16
16
|
/** Set this to `true` for AI theme. */
|
|
17
17
|
aiConnected: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/pagetitle/pageTitle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AAEH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,MAAiB;IAEvC,qBAAqB;IAErB,QAAQ,SAAM;IAEd,kCAAkC;IAElC,SAAS,SAAM;IAEf,0BAA0B;IAE1B,QAAQ,SAAM;IAEd,
|
|
1
|
+
{"version":3,"file":"pageTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/pagetitle/pageTitle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AAEH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,MAAiB;IAEvC,qBAAqB;IAErB,QAAQ,SAAM;IAEd,kCAAkC;IAElC,SAAS,SAAM;IAEf,0BAA0B;IAE1B,QAAQ,SAAM;IAEd,qEAAqE;IAErE,IAAI,SAAa;IAEjB,uCAAuC;IAEvC,WAAW,UAAS;IAEX,MAAM;CAmChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageTitle.js","sources":["../../../../src/components/reusable/pagetitle/pageTitle.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport PageTitleScss from './pageTitle.scss';\n\n/**\n * Page Title\n * @slot icon - Slot for icon. Use size 56 * 56 as per UX guidelines.\n */\n\n@customElement('kyn-page-title')\nexport class PageTitle extends LitElement {\n static override styles = PageTitleScss;\n\n /** Headline text. */\n @property({ type: String })\n headLine = '';\n\n /** Page title text (required). */\n @property({ type: String })\n pageTitle = '';\n\n /** Page subtitle text. */\n @property({ type: String })\n subTitle = '';\n\n /** Type of page title `'primary'`
|
|
1
|
+
{"version":3,"file":"pageTitle.js","sources":["../../../../src/components/reusable/pagetitle/pageTitle.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport PageTitleScss from './pageTitle.scss';\n\n/**\n * Page Title\n * @slot icon - Slot for icon. Use size 56 * 56 as per UX guidelines.\n */\n\n@customElement('kyn-page-title')\nexport class PageTitle extends LitElement {\n static override styles = PageTitleScss;\n\n /** Headline text. */\n @property({ type: String })\n headLine = '';\n\n /** Page title text (required). */\n @property({ type: String })\n pageTitle = '';\n\n /** Page subtitle text. */\n @property({ type: String })\n subTitle = '';\n\n /** Type of page title `'primary'` , `'secondary'` & `'tertiary'`. */\n @property({ type: String })\n type = 'primary';\n\n /** Set this to `true` for AI theme. */\n @property({ type: Boolean })\n aiConnected = false;\n\n override render() {\n const classes = {\n 'page-title': true,\n [`page-title-${this.type}`]: true,\n 'ai-connected': this.aiConnected,\n };\n\n const subTitleClasses = {\n 'page-subtitle': true,\n [`page-subtitle-${this.type}`]: true,\n };\n\n return html`\n <div class=\"page-title-wrapper\">\n <div class=\"icon-wrapper\">\n <slot name=\"icon\"></slot>\n </div>\n\n <div class=\"page-title-text-wrapper\">\n <!-- Headline -->\n ${this.headLine !== ''\n ? html`<div class=\"page-headline\">${this.headLine}</div>`\n : null}\n <!-- Title -->\n <h1 class=\"${classMap(classes)}\">${this.pageTitle}</h1>\n <!-- Subtitle -->\n ${this.subTitle !== ''\n ? html`<div class=\"${classMap(subTitleClasses)}\">\n ${this.subTitle}\n </div>`\n : null}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-page-title': PageTitle;\n }\n}\n"],"names":["PageTitle","LitElement","constructor","this","headLine","pageTitle","subTitle","type","aiConnected","render","classes","subTitleClasses","html","classMap","styles","PageTitleScss","__decorate","property","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,uBAKLC,KAAQC,SAAG,GAIXD,KAASE,UAAG,GAIZF,KAAQG,SAAG,GAIXH,KAAII,KAAG,UAIPJ,KAAWK,aAAG,CAqCf,CAnCU,MAAAC,GACP,MAAMC,EAAU,CACd,cAAc,EACd,CAAC,cAAcP,KAAKI,SAAS,EAC7B,eAAgBJ,KAAKK,aAGjBG,EAAkB,CACtB,iBAAiB,EACjB,CAAC,iBAAiBR,KAAKI,SAAS,GAGlC,OAAOK,CAAI;;;;;;;;YAQe,KAAlBT,KAAKC,SACHQ,CAAI,8BAA8BT,KAAKC,iBACvC;;uBAESS,EAASH,OAAaP,KAAKE;;YAEpB,KAAlBF,KAAKG,SACHM,CAAI,eAAeC,EAASF;kBACxBR,KAAKG;sBAET;;;KAIX,GAxDeN,EAAMc,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEV,KAAMW,UACJlB,EAAAmB,UAAA,gBAAA,GAIdH,EAAA,CADCC,EAAS,CAAEV,KAAMW,UACHlB,EAAAmB,UAAA,iBAAA,GAIfH,EAAA,CADCC,EAAS,CAAEV,KAAMW,UACJlB,EAAAmB,UAAA,gBAAA,GAIdH,EAAA,CADCC,EAAS,CAAEV,KAAMW,UACDlB,EAAAmB,UAAA,YAAA,GAIjBH,EAAA,CADCC,EAAS,CAAEV,KAAMa,WACEpB,EAAAmB,UAAA,mBAAA,GArBTnB,EAASgB,EAAA,CADrBK,EAAc,mBACFrB"}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import{c as t}from"../../../table-4a7db07c.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-foot.js";import"./table-footer.js";import"./table-legend.js";import"./table-legend-item.js";import"./table-toolbar.js";import"./table-container.js";import"./table-header-row.js";import"./table-expanded-row.js";import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{e as o,n as l}from"../../../vendor/lit-7b0f5ebf.js";import{i,s as n,x as r}from"../../../vendor/lit-element-c6c02f24.js";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../globalFilter/globalFilter.js";import"../../../vendor/@lit/context-6f74d22e.js";import"./table-context.js";import"./defs.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-726d44b0.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../pagination-a04f2f18.js";let s=class extends n{render(){return r`
|
|
2
2
|
<kyn-global-filter>
|
|
3
3
|
<div class="left-wrapper">
|
|
4
|
-
<kyn-skeleton
|
|
5
|
-
|
|
6
|
-
shade="dark"
|
|
7
|
-
class="left-content"
|
|
8
|
-
></kyn-skeleton>
|
|
9
|
-
<kyn-skeleton width="122px" shade="dark"></kyn-skeleton>
|
|
4
|
+
<kyn-skeleton width="122px" class="left-content"></kyn-skeleton>
|
|
5
|
+
<kyn-skeleton width="122px"></kyn-skeleton>
|
|
10
6
|
</div>
|
|
11
7
|
<div slot="actions">
|
|
12
|
-
<kyn-skeleton width="122px"
|
|
8
|
+
<kyn-skeleton width="122px"></kyn-skeleton>
|
|
13
9
|
</div>
|
|
14
10
|
<div slot="tags"></div>
|
|
15
11
|
</kyn-global-filter>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.skeleton.js","sources":["../../../../src/components/reusable/globalFilter/globalFilter.skeleton.sample.ts","../../../../src/components/reusable/table/table.skeleton.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport './index';\nimport '../loaders/skeleton';\n\n@customElement('sample-filter-skeleton-component')\nexport class SampleFilterSkeletonComponent extends LitElement {\n static override styles = css`\n .left-content {\n margin-bottom: 8px;\n }\n @media (min-width: 42rem) {\n .left-wrapper {\n display: flex;\n gap: 16px;\n }\n .left-content {\n margin-bottom: 0;\n }\n }\n `;\n override render() {\n return html`\n <kyn-global-filter>\n <div class=\"left-wrapper\">\n <kyn-skeleton
|
|
1
|
+
{"version":3,"file":"table.skeleton.js","sources":["../../../../src/components/reusable/globalFilter/globalFilter.skeleton.sample.ts","../../../../src/components/reusable/table/table.skeleton.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport './index';\nimport '../loaders/skeleton';\n\n@customElement('sample-filter-skeleton-component')\nexport class SampleFilterSkeletonComponent extends LitElement {\n static override styles = css`\n .left-content {\n margin-bottom: 8px;\n }\n @media (min-width: 42rem) {\n .left-wrapper {\n display: flex;\n gap: 16px;\n }\n .left-content {\n margin-bottom: 0;\n }\n }\n `;\n override render() {\n return html`\n <kyn-global-filter>\n <div class=\"left-wrapper\">\n <kyn-skeleton width=\"122px\" class=\"left-content\"></kyn-skeleton>\n <kyn-skeleton width=\"122px\"></kyn-skeleton>\n </div>\n <div slot=\"actions\">\n <kyn-skeleton width=\"122px\"></kyn-skeleton>\n </div>\n <div slot=\"tags\"></div>\n </kyn-global-filter>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sample-filter-skeleton-component': SampleFilterSkeletonComponent;\n }\n}\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '../loaders/skeleton';\nimport '../pagination/pagination.skeleton';\nimport '.';\n\nimport styles from './table.scss';\nimport '../globalFilter/globalFilter.skeleton.sample';\n\n/**\n * `kyn-table-skeleton` Web Component.\n * A skeleton loading state for the table component that mirrors its structure.\n */\n@customElement('kyn-table-skeleton')\nexport class TableSkeleton extends LitElement {\n static override styles = [\n styles,\n css`\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .skeleton-title-wrapper {\n padding: 8px 0 16px;\n }\n\n .skeleton-title {\n margin-bottom: 8px;\n }\n\n kyn-thead kyn-tr {\n background-color: var(--kd-color-background-container-soft);\n }\n\n :host {\n display: block;\n width: 100%;\n }\n\n .pagination-skeleton-wrapper {\n margin-top: 24px;\n display: flex;\n width: 100%;\n justify-content: flex-end;\n }\n `,\n ];\n\n /** Number of skeleton rows to display. */\n @property({ type: Number })\n rows = 5;\n\n /** Shows/hides pagination skeleton. */\n @property({ type: Boolean })\n showPagination = false;\n\n /** Sets dense mode value. */\n @property({ type: Boolean })\n dense = false;\n\n /** Sets striped rows value. */\n @property({ type: Boolean })\n striped = false;\n\n /** Show/hide table header. */\n @property({ type: Boolean })\n hideTableTitles = false;\n\n /** Fixed layout boolean. */\n @property({ type: Boolean })\n fixedLayout = false;\n\n /** Sets title to display in the table toolbar. */\n @property({ type: String })\n tableTitle = '';\n\n /** Sets subtitle to display in the table toolbar. */\n @property({ type: String })\n tableSubtitle = '';\n\n /** Shows/hides golbal filter skeleton. */\n @property({ type: Boolean })\n showGlobalFilter = false;\n\n override render() {\n return html`\n <div>\n ${!this.hideTableTitles\n ? html`\n ${this.tableTitle || this.tableSubtitle\n ? html`<kyn-table-toolbar\n tableTitle=${this.tableTitle}\n tableSubtitle=${this.tableSubtitle}\n ></kyn-table-toolbar>`\n : html`<div class=\"skeleton-title-wrapper\">\n <kyn-skeleton\n class=\"skeleton-title\"\n width=\"122px\"\n ></kyn-skeleton>\n <kyn-skeleton\n class=\"skeleton-subtitle\"\n width=\"61px\"\n ></kyn-skeleton>\n </div>`}\n `\n : null}\n ${this.showGlobalFilter\n ? html` <sample-filter-skeleton-component></sample-filter-skeleton-component>`\n : null}\n <kyn-table-container>\n <kyn-table\n role=\"table\"\n ?dense=${this.dense}\n ?striped=${this.striped}\n ?fixedLayout=${this.fixedLayout}\n >\n <kyn-thead role=\"rowgroup\">\n <kyn-tr role=\"row\" disabled>\n ${Array(5)\n .fill(null)\n .map(\n (_, index) =>\n html`<kyn-th role=\"columnheader\">\n <span class=\"visually-hidden\"\n >Loading column ${index + 1}</span\n >\n ${this.renderSkeletonCell('thead')}\n </kyn-th>`\n )}\n </kyn-tr>\n </kyn-thead>\n\n <kyn-tbody role=\"rowgroup\">\n ${Array(this.rows)\n .fill(null)\n .map(\n (_) => html`\n <kyn-tr role=\"row\" disabled>\n ${Array(5)\n .fill(null)\n .map(\n (_) =>\n html`<kyn-td role=\"cell\">\n ${this.renderSkeletonCell('tbody')}\n </kyn-td>`\n )}\n </kyn-tr>\n `\n )}\n </kyn-tbody>\n </kyn-table>\n </kyn-table-container>\n ${this.showPagination\n ? html`\n <div class=\"pagination-skeleton-wrapper\">\n <kyn-pagination-skeleton></kyn-pagination-skeleton>\n </div>\n `\n : null}\n </div>\n `;\n }\n\n private renderSkeletonCell(type: 'thead' | 'tbody') {\n const width = type === 'thead' ? '192px' : '114px';\n const shade = type === 'thead' ? 'dark' : '';\n return html`\n <kyn-skeleton width=${width} height=\"16px\" shade=${shade}></kyn-skeleton>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-table-skeleton': TableSkeleton;\n }\n}\n"],"names":["SampleFilterSkeletonComponent","LitElement","render","html","styles","css","__decorate","customElement","TableSkeleton","constructor","this","rows","showPagination","dense","striped","hideTableTitles","fixedLayout","tableTitle","tableSubtitle","showGlobalFilter","Array","fill","map","_","index","renderSkeletonCell","type","property","Number","prototype","Boolean","String"],"mappings":"ggCAMO,IAAMA,EAAN,cAA4CC,EAexC,MAAAC,GACP,OAAOC,CAAI;;;;;;;;;;;KAYZ,GA3BeH,EAAMI,OAAGC,CAAG;;;;;;;;;;;;;IADjBL,EAA6BM,EAAA,CADzCC,EAAc,qCACFP,GCSN,IAAMQ,EAAN,cAA4BP,EAA5B,WAAAQ,uBA4CLC,KAAIC,KAAG,EAIPD,KAAcE,gBAAG,EAIjBF,KAAKG,OAAG,EAIRH,KAAOI,SAAG,EAIVJ,KAAeK,iBAAG,EAIlBL,KAAWM,aAAG,EAIdN,KAAUO,WAAG,GAIbP,KAAaQ,cAAG,GAIhBR,KAAgBS,kBAAG,CAwFpB,CAtFU,MAAAjB,GACP,OAAOC,CAAI;;UAEJO,KAAKK,gBAkBJ,KAjBAZ,CAAI;gBACAO,KAAKO,YAAcP,KAAKQ,cACtBf,CAAI;iCACWO,KAAKO;oCACFP,KAAKQ;yCAEvBf,CAAI;;;;;;;;;;;UAYZO,KAAKS,iBACHhB,CAAI,yEACJ;;;;qBAISO,KAAKG;uBACHH,KAAKI;2BACDJ,KAAKM;;;;kBAIdI,MAAM,GACLC,KAAK,MACLC,KACC,CAACC,EAAGC,IACFrB,CAAI;;4CAEkBqB,EAAQ;;0BAE1Bd,KAAKe,mBAAmB;;;;;;gBAOlCL,MAAMV,KAAKC,MACVU,KAAK,MACLC,KACEC,GAAMpB,CAAI;;wBAELiB,MAAM,GACLC,KAAK,MACLC,KACEC,GACCpB,CAAI;gCACAO,KAAKe,mBAAmB;;;;;;;UAS9Cf,KAAKE,eACHT,CAAI;;;;cAKJ;;KAGT,CAEO,kBAAAsB,CAAmBC,GAGzB,OAAOvB,CAAI;4BAFY,UAATuB,EAAmB,QAAU,+BACpB,UAATA,EAAmB,OAAS;KAI3C,GAlKelB,EAAAJ,OAAS,CACvBA,EACAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyCLC,EAAA,CADCqB,EAAS,CAAED,KAAME,UACTpB,EAAAqB,UAAA,YAAA,GAITvB,EAAA,CADCqB,EAAS,CAAED,KAAMI,WACKtB,EAAAqB,UAAA,sBAAA,GAIvBvB,EAAA,CADCqB,EAAS,CAAED,KAAMI,WACJtB,EAAAqB,UAAA,aAAA,GAIdvB,EAAA,CADCqB,EAAS,CAAED,KAAMI,WACFtB,EAAAqB,UAAA,eAAA,GAIhBvB,EAAA,CADCqB,EAAS,CAAED,KAAMI,WACMtB,EAAAqB,UAAA,uBAAA,GAIxBvB,EAAA,CADCqB,EAAS,CAAED,KAAMI,WACEtB,EAAAqB,UAAA,mBAAA,GAIpBvB,EAAA,CADCqB,EAAS,CAAED,KAAMK,UACFvB,EAAAqB,UAAA,kBAAA,GAIhBvB,EAAA,CADCqB,EAAS,CAAED,KAAMK,UACCvB,EAAAqB,UAAA,qBAAA,GAInBvB,EAAA,CADCqB,EAAS,CAAED,KAAMI,WACOtB,EAAAqB,UAAA,wBAAA,GA5EdrB,EAAaF,EAAA,CADzBC,EAAc,uBACFC"}
|