@kyndryl-design-system/shidoka-applications 2.6.0 → 2.7.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.
|
@@ -49,6 +49,8 @@ export declare class SideDrawer extends LitElement {
|
|
|
49
49
|
hideCancelButton: boolean;
|
|
50
50
|
/** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */
|
|
51
51
|
beforeClose: Function;
|
|
52
|
+
/** Set this to `true` for AI theme. */
|
|
53
|
+
aiConnected: boolean;
|
|
52
54
|
/** The dialog element
|
|
53
55
|
* @internal
|
|
54
56
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,WAAW,CAAC;AAKnB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,QAiBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;
|
|
1
|
+
{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,WAAW,CAAC;AAKnB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,QAiBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,oEAAoE;IAEpE,mBAAmB,SAAW;IAE9B,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB,uCAAuC;IAEvC,WAAW,UAAS;IAEpB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAqHf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAKb,OAAO,CAAC,YAAY,EAAE,GAAG;CAUnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,i,o as a,c as n,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as l,s,x as d}from"../../../vendor/lit-element-3185f710.js";import"../button/button.js";import{c}from"../../../vendor/@kyndryl-design-system/shidoka-icons-e426f09b.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var h=l`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -64,6 +64,10 @@ dialog {
|
|
|
64
64
|
max-height: 100vh;
|
|
65
65
|
overflow: hidden;
|
|
66
66
|
}
|
|
67
|
+
dialog.ai-connected {
|
|
68
|
+
box-shadow: var(--kd-elevation-level-3-ai);
|
|
69
|
+
background: var(--kd-color-background-container-ai-subtle);
|
|
70
|
+
}
|
|
67
71
|
dialog[open] {
|
|
68
72
|
animation: dialog-in 400ms forwards;
|
|
69
73
|
}
|
|
@@ -157,7 +161,7 @@ form {
|
|
|
157
161
|
}
|
|
158
162
|
}
|
|
159
163
|
|
|
160
|
-
|
|
164
|
+
.header-title {
|
|
161
165
|
font-family: var(--kd-font-family-primary);
|
|
162
166
|
font-size: var(--kd-font-size-body-1-sm);
|
|
163
167
|
line-height: var(--kd-line-height-body-1-sm);
|
|
@@ -168,29 +172,32 @@ h1 {
|
|
|
168
172
|
order: 1;
|
|
169
173
|
}
|
|
170
174
|
@media (min-width: 42rem) {
|
|
171
|
-
|
|
175
|
+
.header-title {
|
|
172
176
|
font-size: var(--kd-font-size-body-1-md);
|
|
173
177
|
line-height: var(--kd-line-height-body-1-md);
|
|
174
178
|
}
|
|
175
179
|
}
|
|
176
180
|
@media (min-width: 74rem) {
|
|
177
|
-
|
|
181
|
+
.header-title {
|
|
178
182
|
font-size: var(--kd-font-size-body-1-lg);
|
|
179
183
|
line-height: var(--kd-line-height-body-1-lg);
|
|
180
184
|
}
|
|
181
185
|
}
|
|
182
186
|
@media (min-width: 82rem) {
|
|
183
|
-
|
|
187
|
+
.header-title {
|
|
184
188
|
font-size: var(--kd-font-size-body-1-xlg);
|
|
185
189
|
line-height: var(--kd-line-height-body-1-xlg);
|
|
186
190
|
}
|
|
187
191
|
}
|
|
188
192
|
@media (min-width: 99rem) {
|
|
189
|
-
|
|
193
|
+
.header-title {
|
|
190
194
|
font-size: var(--kd-font-size-body-1-max);
|
|
191
195
|
line-height: var(--kd-line-height-body-1-max);
|
|
192
196
|
}
|
|
193
197
|
}
|
|
198
|
+
.header-title.ai-connected {
|
|
199
|
+
color: var(--kd-color-text-title-ai-primary);
|
|
200
|
+
}
|
|
194
201
|
|
|
195
202
|
.dialog-footer {
|
|
196
203
|
position: sticky;
|
|
@@ -201,6 +208,10 @@ h1 {
|
|
|
201
208
|
padding: 24px 32px 24px 32px;
|
|
202
209
|
border-top: 1px solid var(--kd-color-border-variants-light);
|
|
203
210
|
}
|
|
211
|
+
.dialog-footer.ai-connected {
|
|
212
|
+
background-color: var(--kd-color-background-container-ai-default);
|
|
213
|
+
border-top: 1px solid var(--kd-color-border-variants-ai);
|
|
214
|
+
}
|
|
204
215
|
|
|
205
216
|
.actions {
|
|
206
217
|
display: flex;
|
|
@@ -255,21 +266,23 @@ h1 {
|
|
|
255
266
|
100% {
|
|
256
267
|
transform: none;
|
|
257
268
|
}
|
|
258
|
-
}`;let p=class extends s{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.closeBtnDescription="Close",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1}render(){const
|
|
269
|
+
}`;let p=class extends s{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.closeBtnDescription="Close",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1,this.aiConnected=!1}render(){const e={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--standard":"standard"===this.size,"size--sm":"sm"===this.size,"ai-connected":this.aiConnected},o={"dialog-footer":!0,"ai-connected":this.aiConnected},i={"header-title":!0,"ai-connected":this.aiConnected};return d`
|
|
259
270
|
<span class="anchor" @click=${this._openDrawer}>
|
|
260
271
|
<slot name="anchor"></slot>
|
|
261
272
|
</span>
|
|
262
273
|
|
|
263
274
|
<dialog
|
|
264
|
-
class="${
|
|
275
|
+
class="${a(e)}"
|
|
265
276
|
aria-labelledby="dialogLabel"
|
|
266
|
-
@cancel=${
|
|
277
|
+
@cancel=${e=>this._closeDrawer(e,"cancel")}
|
|
267
278
|
>
|
|
268
279
|
<form method="dialog">
|
|
269
280
|
<!-- Header -->
|
|
270
281
|
<header>
|
|
271
282
|
<div class="header-label-title">
|
|
272
|
-
<h1 id="dialogLabel"
|
|
283
|
+
<h1 class="${a(i)}" id="dialogLabel">
|
|
284
|
+
${this.titleText}
|
|
285
|
+
</h1>
|
|
273
286
|
${""!==this.labelText?d`<span class="label">${this.labelText}</span>`:null}
|
|
274
287
|
</div>
|
|
275
288
|
|
|
@@ -278,9 +291,9 @@ h1 {
|
|
|
278
291
|
size="small"
|
|
279
292
|
kind="ghost"
|
|
280
293
|
description=${n(this.closeBtnDescription)}
|
|
281
|
-
@click=${
|
|
294
|
+
@click=${e=>this._closeDrawer(e,"cancel")}
|
|
282
295
|
>
|
|
283
|
-
<span slot="icon">${
|
|
296
|
+
<span slot="icon">${t(c)}</span>
|
|
284
297
|
</kyn-button>
|
|
285
298
|
</header>
|
|
286
299
|
|
|
@@ -296,14 +309,14 @@ h1 {
|
|
|
296
309
|
|
|
297
310
|
<!-- footer -->
|
|
298
311
|
${this.hideFooter?null:d`
|
|
299
|
-
<div class="
|
|
312
|
+
<div class="${a(o)}">
|
|
300
313
|
<div class="actions">
|
|
301
314
|
<kyn-button
|
|
302
315
|
class="action-button"
|
|
303
316
|
value="Ok"
|
|
304
317
|
?disabled=${this.submitBtnDisabled}
|
|
305
|
-
kind=${this.destructive?"primary-destructive":"primary"}
|
|
306
|
-
@click=${
|
|
318
|
+
kind=${this.destructive?"primary-destructive":this.aiConnected?"primary-ai":"primary"}
|
|
319
|
+
@click=${e=>this._closeDrawer(e,"ok")}
|
|
307
320
|
>
|
|
308
321
|
${this.submitBtnText}
|
|
309
322
|
</kyn-button>
|
|
@@ -312,8 +325,8 @@ h1 {
|
|
|
312
325
|
<kyn-button
|
|
313
326
|
class="action-button"
|
|
314
327
|
value="Secondary"
|
|
315
|
-
kind
|
|
316
|
-
@click=${
|
|
328
|
+
kind=${this.aiConnected?"outline-ai":"outline"}
|
|
329
|
+
@click=${e=>this._closeDrawer(e,"secondary")}
|
|
317
330
|
>
|
|
318
331
|
${this.secondaryButtonText}
|
|
319
332
|
</kyn-button>
|
|
@@ -322,8 +335,8 @@ h1 {
|
|
|
322
335
|
<kyn-button
|
|
323
336
|
class="action-button"
|
|
324
337
|
value="Cancel"
|
|
325
|
-
kind="
|
|
326
|
-
@click=${
|
|
338
|
+
kind="ghost"
|
|
339
|
+
@click=${e=>this._closeDrawer(e,"cancel")}
|
|
327
340
|
>
|
|
328
341
|
${this.cancelBtnText}
|
|
329
342
|
</kyn-button>
|
|
@@ -333,7 +346,7 @@ h1 {
|
|
|
333
346
|
`}
|
|
334
347
|
</form>
|
|
335
348
|
</dialog>
|
|
336
|
-
`}_openDrawer(){this.open=!0}_closeDrawer(t
|
|
349
|
+
`}_openDrawer(){this.open=!0}_closeDrawer(e,t){(!this.beforeClose||this.beforeClose&&this.beforeClose(t))&&(this.open=!1,this._dialog.returnValue=t,this._emitCloseEvent(e))}_emitCloseEvent(e){const t=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:e}});this.dispatchEvent(t)}_emitOpenEvent(){const e=new CustomEvent("on-open");this.dispatchEvent(e)}updated(e){e.has("open")&&(this.open?(this._dialog.showModal(),this._emitOpenEvent()):this._dialog.close())}};p.styles=[h,l`
|
|
337
350
|
@supports (transition-behavior: allow-discrete) {
|
|
338
351
|
@starting-style {
|
|
339
352
|
dialog[open] {
|
|
@@ -347,5 +360,5 @@ h1 {
|
|
|
347
360
|
}
|
|
348
361
|
}
|
|
349
362
|
}
|
|
350
|
-
`],
|
|
363
|
+
`],e([o({type:Boolean})],p.prototype,"open",void 0),e([o({type:String})],p.prototype,"size",void 0),e([o({type:String})],p.prototype,"titleText",void 0),e([o({type:String})],p.prototype,"labelText",void 0),e([o({type:String})],p.prototype,"submitBtnText",void 0),e([o({type:String})],p.prototype,"cancelBtnText",void 0),e([o({type:String})],p.prototype,"closeBtnDescription",void 0),e([o({type:Boolean})],p.prototype,"submitBtnDisabled",void 0),e([o({type:Boolean})],p.prototype,"hideFooter",void 0),e([o({type:Boolean})],p.prototype,"destructive",void 0),e([o({type:String})],p.prototype,"secondaryButtonText",void 0),e([o({type:Boolean})],p.prototype,"showSecondaryButton",void 0),e([o({type:Boolean})],p.prototype,"hideCancelButton",void 0),e([o({attribute:!1})],p.prototype,"beforeClose",void 0),e([o({type:Boolean})],p.prototype,"aiConnected",void 0),e([i("dialog")],p.prototype,"_dialog",void 0),p=e([r("kyn-side-drawer")],p);export{p as SideDrawer};
|
|
351
364
|
//# sourceMappingURL=sideDrawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport SideDrawerScss from './sideDrawer.scss';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the drawer open event.\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n static override styles = [\n SideDrawerScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n transform: translateX(100%);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /**\n * Drawer open state.\n */\n @property({ type: Boolean })\n open = false;\n\n /**\n * Drawer size. `'md'`, or `'sm'`.\n */\n @property({ type: String })\n size = 'md';\n\n /**\n * Title / Heading text, required.\n */\n @property({ type: String })\n titleText = '';\n\n /**\n * Label text, optional.\n */\n @property({ type: String })\n labelText = '';\n\n /**\n * Submit button text.\n */\n @property({ type: String })\n submitBtnText = 'Ok';\n\n /**\n * Cancel button text.\n */\n @property({ type: String })\n cancelBtnText = 'Cancel';\n\n /** Close button description (Required to support accessibility). */\n @property({ type: String })\n closeBtnDescription = 'Close';\n\n /** Disables the primary button. */\n @property({ type: Boolean })\n submitBtnDisabled = false;\n\n /** Determine whether needs footer */\n @property({ type: Boolean })\n hideFooter = false;\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Secondary button text. */\n @property({ type: String })\n secondaryButtonText = 'Secondary';\n\n /** Hides the secondary button. */\n @property({ type: Boolean })\n showSecondaryButton = false;\n\n /** Hides the cancel button. */\n @property({ type: Boolean })\n hideCancelButton = false;\n\n /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n dialog: true,\n 'size--md': this.size === 'md',\n 'size--standard': this.size === 'standard',\n 'size--sm': this.size === 'sm',\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openDrawer}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <form method=\"dialog\">\n <!-- Header -->\n <header>\n <div class=\"header-label-title\">\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n </div>\n\n <kyn-button\n class=\"side-drawer-close-btn\"\n size=\"small\"\n kind=\"ghost\"\n description=${ifDefined(this.closeBtnDescription)}\n @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n </header>\n\n <!-- Body -->\n <div\n class=\"body\"\n tabindex=\"0\"\n role=\"region\"\n aria-label=\"${this.titleText} content\"\n >\n <slot></slot>\n </div>\n\n <!-- footer -->\n ${!this.hideFooter\n ? html`\n <div class=\"dialog-footer\">\n <div class=\"actions\">\n <kyn-button\n class=\"action-button\"\n value=\"Ok\"\n ?disabled=${this.submitBtnDisabled}\n kind=${this.destructive\n ? 'primary-destructive'\n : 'primary'}\n @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n >\n ${this.submitBtnText}\n </kyn-button>\n\n ${this.showSecondaryButton\n ? html`\n <kyn-button\n class=\"action-button\"\n value=\"Secondary\"\n kind=\"secondary\"\n @click=${(e: Event) =>\n this._closeDrawer(e, 'secondary')}\n >\n ${this.secondaryButtonText}\n </kyn-button>\n `\n : null}\n ${this.hideCancelButton\n ? null\n : html`\n <kyn-button\n class=\"action-button\"\n value=\"Cancel\"\n kind=\"tertiary\"\n @click=${(e: Event) =>\n this._closeDrawer(e, 'cancel')}\n >\n ${this.cancelBtnText}\n </kyn-button>\n `}\n </div>\n </div>\n `\n : null}\n </form>\n </dialog>\n `;\n }\n\n private _openDrawer() {\n this.open = true;\n }\n\n private _closeDrawer(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _emitOpenEvent() {\n const event = new CustomEvent('on-open');\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n this._emitOpenEvent();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-side-drawer': SideDrawer;\n }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","closeBtnDescription","submitBtnDisabled","hideFooter","destructive","secondaryButtonText","showSecondaryButton","hideCancelButton","render","classes","modal","dialog","html","_openDrawer","classMap","e","_closeDrawer","ifDefined","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport SideDrawerScss from './sideDrawer.scss';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the drawer open event.\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n static override styles = [\n SideDrawerScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n transform: translateX(100%);\n }\n }\n\n @starting-style {\n dialog[open]::backdrop {\n background-color: rgb(0, 0, 0, 0);\n }\n }\n }\n `,\n ];\n\n /**\n * Drawer open state.\n */\n @property({ type: Boolean })\n open = false;\n\n /**\n * Drawer size. `'md'`, or `'sm'`.\n */\n @property({ type: String })\n size = 'md';\n\n /**\n * Title / Heading text, required.\n */\n @property({ type: String })\n titleText = '';\n\n /**\n * Label text, optional.\n */\n @property({ type: String })\n labelText = '';\n\n /**\n * Submit button text.\n */\n @property({ type: String })\n submitBtnText = 'Ok';\n\n /**\n * Cancel button text.\n */\n @property({ type: String })\n cancelBtnText = 'Cancel';\n\n /** Close button description (Required to support accessibility). */\n @property({ type: String })\n closeBtnDescription = 'Close';\n\n /** Disables the primary button. */\n @property({ type: Boolean })\n submitBtnDisabled = false;\n\n /** Determine whether needs footer */\n @property({ type: Boolean })\n hideFooter = false;\n\n /** Changes the primary button styles to indicate the action is destructive. */\n @property({ type: Boolean })\n destructive = false;\n\n /** Secondary button text. */\n @property({ type: String })\n secondaryButtonText = 'Secondary';\n\n /** Hides the secondary button. */\n @property({ type: Boolean })\n showSecondaryButton = false;\n\n /** Hides the cancel button. */\n @property({ type: Boolean })\n hideCancelButton = false;\n\n /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n @property({ attribute: false })\n beforeClose!: Function;\n\n /** Set this to `true` for AI theme. */\n @property({ type: Boolean })\n aiConnected = false;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n modal: true,\n dialog: true,\n 'size--md': this.size === 'md',\n 'size--standard': this.size === 'standard',\n 'size--sm': this.size === 'sm',\n 'ai-connected': this.aiConnected,\n };\n\n const dialogFooterClasses = {\n 'dialog-footer': true,\n 'ai-connected': this.aiConnected,\n };\n\n const dialogHeaderClasses = {\n 'header-title': true,\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openDrawer}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <form method=\"dialog\">\n <!-- Header -->\n <header>\n <div class=\"header-label-title\">\n <h1 class=\"${classMap(dialogHeaderClasses)}\" id=\"dialogLabel\">\n ${this.titleText}\n </h1>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n </div>\n\n <kyn-button\n class=\"side-drawer-close-btn\"\n size=\"small\"\n kind=\"ghost\"\n description=${ifDefined(this.closeBtnDescription)}\n @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n </header>\n\n <!-- Body -->\n <div\n class=\"body\"\n tabindex=\"0\"\n role=\"region\"\n aria-label=\"${this.titleText} content\"\n >\n <slot></slot>\n </div>\n\n <!-- footer -->\n ${!this.hideFooter\n ? html`\n <div class=\"${classMap(dialogFooterClasses)}\">\n <div class=\"actions\">\n <kyn-button\n class=\"action-button\"\n value=\"Ok\"\n ?disabled=${this.submitBtnDisabled}\n kind=${this.destructive\n ? 'primary-destructive'\n : this.aiConnected\n ? 'primary-ai'\n : 'primary'}\n @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n >\n ${this.submitBtnText}\n </kyn-button>\n\n ${this.showSecondaryButton\n ? html`\n <kyn-button\n class=\"action-button\"\n value=\"Secondary\"\n kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n @click=${(e: Event) =>\n this._closeDrawer(e, 'secondary')}\n >\n ${this.secondaryButtonText}\n </kyn-button>\n `\n : null}\n ${this.hideCancelButton\n ? null\n : html`\n <kyn-button\n class=\"action-button\"\n value=\"Cancel\"\n kind=\"ghost\"\n @click=${(e: Event) =>\n this._closeDrawer(e, 'cancel')}\n >\n ${this.cancelBtnText}\n </kyn-button>\n `}\n </div>\n </div>\n `\n : null}\n </form>\n </dialog>\n `;\n }\n\n private _openDrawer() {\n this.open = true;\n }\n\n private _closeDrawer(e: Event, returnValue: string) {\n if (\n !this.beforeClose ||\n (this.beforeClose && this.beforeClose(returnValue))\n ) {\n this.open = false;\n this._dialog.returnValue = returnValue;\n this._emitCloseEvent(e);\n }\n }\n\n private _emitCloseEvent(e: Event) {\n const event = new CustomEvent('on-close', {\n detail: {\n returnValue: this._dialog.returnValue,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _emitOpenEvent() {\n const event = new CustomEvent('on-open');\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\n this._emitOpenEvent();\n } else {\n this._dialog.close();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-side-drawer': SideDrawer;\n }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","closeBtnDescription","submitBtnDisabled","hideFooter","destructive","secondaryButtonText","showSecondaryButton","hideCancelButton","aiConnected","render","classes","modal","dialog","dialogFooterClasses","dialogHeaderClasses","html","_openDrawer","classMap","e","_closeDrawer","ifDefined","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}
|