@kyndryl-design-system/shidoka-applications 2.34.1 → 2.35.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.
|
@@ -5,6 +5,7 @@ import { LitElement } from 'lit';
|
|
|
5
5
|
* @slot action - Slot for action buttons.
|
|
6
6
|
* @slot tooltip - Slot for tooltip in header.
|
|
7
7
|
* @slot draghandle - Slot for drag handle.
|
|
8
|
+
* @slot footer - Slot for footer content.
|
|
8
9
|
*/
|
|
9
10
|
export declare class Widget extends LitElement {
|
|
10
11
|
static styles: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC
|
|
1
|
+
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;;;;GAOG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,MAAU;IAEhC,oBAAoB;IAEpB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd,gCAAgC;IAEhC,UAAU,UAAS;IAEnB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEJ,MAAM;IA4Cf,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;CAOxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as
|
|
1
|
+
import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as i,o as d,e as o}from"../../../vendor/lit-461e78e6.js";import{i as r,s as a,x as l}from"../../../vendor/lit-element-c6c02f24.js";var n=r`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -144,10 +144,27 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as i,t as e,o as
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
.widget-content {
|
|
147
|
+
display: flex;
|
|
148
|
+
flex-direction: column;
|
|
147
149
|
padding: 8px 16px 16px 16px;
|
|
148
150
|
overflow: auto;
|
|
149
151
|
flex-grow: 1;
|
|
150
|
-
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.widget-body {
|
|
155
|
+
overflow: auto;
|
|
156
|
+
flex-grow: 1;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.widget-footer {
|
|
160
|
+
display: flex;
|
|
161
|
+
justify-content: space-between;
|
|
162
|
+
align-items: center;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
slot[name=footer]::slotted(*) {
|
|
166
|
+
margin-top: 8px;
|
|
167
|
+
}`;let s=class extends a{constructor(){super(...arguments),this.widgetTitle="",this.subTitle="",this.dragActive=!1,this.disabled=!1}render(){const t={widget:!0,"drag-active":this.dragActive,"has-chart":this._chart,disabled:this.disabled};return l`
|
|
151
168
|
<div
|
|
152
169
|
class=${d(t)}
|
|
153
170
|
role="group"
|
|
@@ -171,8 +188,14 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as i,t as e,o as
|
|
|
171
188
|
</div>
|
|
172
189
|
|
|
173
190
|
<div class="widget-content">
|
|
174
|
-
<
|
|
191
|
+
<div class="widget-body">
|
|
192
|
+
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="widget-footer">
|
|
196
|
+
<slot name="footer"></slot>
|
|
197
|
+
</div>
|
|
175
198
|
</div>
|
|
176
199
|
</div>
|
|
177
|
-
`}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){const t=this.querySelector("kd-chart");t&&(this._chart=t,this._chart._widget=!0)}};s.styles=n,t([
|
|
200
|
+
`}_handleSlotChange(){this._updateChildren(),this.requestUpdate()}_updateChildren(){const t=this.querySelector("kd-chart");t&&(this._chart=t,this._chart._widget=!0)}};s.styles=n,t([e({type:String})],s.prototype,"widgetTitle",void 0),t([e({type:String})],s.prototype,"subTitle",void 0),t([e({type:Boolean})],s.prototype,"dragActive",void 0),t([e({type:Boolean})],s.prototype,"disabled",void 0),t([i()],s.prototype,"_chart",void 0),s=t([o("kyn-widget")],s);export{s as Widget};
|
|
178
201
|
//# sourceMappingURL=widget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sources":["../../../../src/components/reusable/widget/widget.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport Styles from './widget.scss';\n\n/**\n * Widget.\n * @slot unnamed - Slot for widget content.\n * @slot action - Slot for action buttons.\n * @slot tooltip - Slot for tooltip in header.\n * @slot draghandle - Slot for drag handle.\n */\n@customElement('kyn-widget')\nexport class Widget extends LitElement {\n static override styles = Styles;\n\n /** Widget title. */\n @property({ type: String })\n widgetTitle = '';\n\n /** Widget sub-title. */\n @property({ type: String })\n subTitle = '';\n\n /** Widget drag active state. */\n @property({ type: Boolean })\n dragActive = false;\n\n /** Widget disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Slotted chart element.\n * @internal\n */\n @state()\n _chart!: any;\n\n override render() {\n const Classes = {\n widget: true,\n 'drag-active': this.dragActive,\n 'has-chart': this._chart,\n disabled: this.disabled,\n };\n\n return html`\n <div\n class=${classMap(Classes)}\n role=\"group\"\n aria-disabled=${this.disabled}\n >\n <div class=\"widget-header\">\n <slot name=\"draghandle\"></slot>\n\n <div class=\"title-desc\">\n <div class=\"title\">\n ${this.widgetTitle}\n <slot name=\"tooltip\"></slot>\n </div>\n\n <div class=\"description\">${this.subTitle}</div>\n </div>\n\n <div class=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n <div class=\"widget-content\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n\n private _handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _updateChildren() {\n const Chart = this.querySelector('kd-chart');\n if (Chart) {\n this._chart = Chart;\n this._chart._widget = true;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-widget': Widget;\n }\n}\n"],"names":["Widget","LitElement","constructor","this","widgetTitle","subTitle","dragActive","disabled","render","Classes","widget","_chart","html","classMap","_handleSlotChange","_updateChildren","requestUpdate","Chart","querySelector","_widget","styles","Styles","__decorate","property","type","String","prototype","Boolean","state","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"widget.js","sources":["../../../../src/components/reusable/widget/widget.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport Styles from './widget.scss';\n\n/**\n * Widget.\n * @slot unnamed - Slot for widget content.\n * @slot action - Slot for action buttons.\n * @slot tooltip - Slot for tooltip in header.\n * @slot draghandle - Slot for drag handle.\n * @slot footer - Slot for footer content.\n */\n@customElement('kyn-widget')\nexport class Widget extends LitElement {\n static override styles = Styles;\n\n /** Widget title. */\n @property({ type: String })\n widgetTitle = '';\n\n /** Widget sub-title. */\n @property({ type: String })\n subTitle = '';\n\n /** Widget drag active state. */\n @property({ type: Boolean })\n dragActive = false;\n\n /** Widget disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Slotted chart element.\n * @internal\n */\n @state()\n _chart!: any;\n\n override render() {\n const Classes = {\n widget: true,\n 'drag-active': this.dragActive,\n 'has-chart': this._chart,\n disabled: this.disabled,\n };\n\n return html`\n <div\n class=${classMap(Classes)}\n role=\"group\"\n aria-disabled=${this.disabled}\n >\n <div class=\"widget-header\">\n <slot name=\"draghandle\"></slot>\n\n <div class=\"title-desc\">\n <div class=\"title\">\n ${this.widgetTitle}\n <slot name=\"tooltip\"></slot>\n </div>\n\n <div class=\"description\">${this.subTitle}</div>\n </div>\n\n <div class=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n <div class=\"widget-content\">\n <div class=\"widget-body\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n\n <div class=\"widget-footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n private _handleSlotChange() {\n this._updateChildren();\n this.requestUpdate();\n }\n\n private _updateChildren() {\n const Chart = this.querySelector('kd-chart');\n if (Chart) {\n this._chart = Chart;\n this._chart._widget = true;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-widget': Widget;\n }\n}\n"],"names":["Widget","LitElement","constructor","this","widgetTitle","subTitle","dragActive","disabled","render","Classes","widget","_chart","html","classMap","_handleSlotChange","_updateChildren","requestUpdate","Chart","querySelector","_widget","styles","Styles","__decorate","property","type","String","prototype","Boolean","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAcO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAKLC,KAAWC,YAAG,GAIdD,KAAQE,SAAG,GAIXF,KAAUG,YAAG,EAIbH,KAAQI,UAAG,CAgEZ,CAxDU,MAAAC,GACP,MAAMC,EAAU,CACdC,QAAQ,EACR,cAAeP,KAAKG,WACpB,YAAaH,KAAKQ,OAClBJ,SAAUJ,KAAKI,UAGjB,OAAOK,CAAI;;gBAECC,EAASJ;;wBAEDN,KAAKI;;;;;;;gBAObJ,KAAKC;;;;uCAIkBD,KAAKE;;;;;;;;;;gCAUZF,KAAKW;;;;;;;;KASlC,CAEO,iBAAAA,GACNX,KAAKY,kBACLZ,KAAKa,eACN,CAEO,eAAAD,GACN,MAAME,EAAQd,KAAKe,cAAc,YAC7BD,IACFd,KAAKQ,OAASM,EACdd,KAAKQ,OAAOQ,SAAU,EAEzB,GA/EenB,EAAMoB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACDzB,EAAA0B,UAAA,mBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACJzB,EAAA0B,UAAA,gBAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACC3B,EAAA0B,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD3B,EAAA0B,UAAA,gBAAA,GAMjBJ,EAAA,CADCM,KACY5B,EAAA0B,UAAA,cAAA,GAvBF1B,EAAMsB,EAAA,CADlBO,EAAc,eACF7B"}
|