@kyndryl-design-system/shidoka-applications 2.41.0 → 2.42.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.
|
@@ -14,9 +14,9 @@ export declare class SideDrawer extends LitElement {
|
|
|
14
14
|
*/
|
|
15
15
|
open: boolean;
|
|
16
16
|
/**
|
|
17
|
-
* Drawer size.
|
|
17
|
+
* Drawer size.
|
|
18
18
|
*/
|
|
19
|
-
size:
|
|
19
|
+
size: 'md' | 'sm' | 'xl' | 'standard';
|
|
20
20
|
/**
|
|
21
21
|
* Title / Heading text, required.
|
|
22
22
|
*/
|
|
@@ -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,
|
|
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,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,CAAQ;IAE7C;;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,yCAAyC;IAEzC,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAmHf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAKb,OAAO,CAAC,YAAY,EAAE,GAAG;CAcnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
|
|
@@ -86,6 +86,9 @@ dialog.size--standard {
|
|
|
86
86
|
dialog.size--md {
|
|
87
87
|
width: 800px;
|
|
88
88
|
}
|
|
89
|
+
dialog.size--xl {
|
|
90
|
+
width: 1024px;
|
|
91
|
+
}
|
|
89
92
|
|
|
90
93
|
button {
|
|
91
94
|
appearance: none;
|
|
@@ -233,7 +236,7 @@ form {
|
|
|
233
236
|
}
|
|
234
237
|
}
|
|
235
238
|
|
|
236
|
-
.size--sm kyn-button {
|
|
239
|
+
.size--sm .dialog-footer kyn-button {
|
|
237
240
|
width: 100%;
|
|
238
241
|
flex-grow: 1;
|
|
239
242
|
}
|
|
@@ -277,7 +280,7 @@ form {
|
|
|
277
280
|
100% {
|
|
278
281
|
transform: none;
|
|
279
282
|
}
|
|
280
|
-
}`;let p=class extends d{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,this.noBackdrop=!1}render(){const e={dialog:!0,"no-backdrop":this.noBackdrop,
|
|
283
|
+
}`;let p=class extends d{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,this.noBackdrop=!1}render(){const e={dialog:!0,"no-backdrop":this.noBackdrop,[`size--${this.size}`]:this.size,"ai-connected":this.aiConnected},o={"dialog-footer":!0,"ai-connected":this.aiConnected},i={"header-title":!0,"ai-connected":this.aiConnected};return s`
|
|
281
284
|
<span class="anchor" @click=${this._openDrawer}>
|
|
282
285
|
<slot name="anchor"></slot>
|
|
283
286
|
</span>
|
|
@@ -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 /** Set this to `true` for AI theme. */\n @property({ type: Boolean })\n aiConnected = false;\n\n /** Set this to `true` for no backdrop */\n @property({ type: Boolean })\n noBackdrop = false;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n dialog: true,\n 'no-backdrop': this.noBackdrop,\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 if (this.noBackdrop) {\n this._dialog.show();\n } else {\n this._dialog.showModal();\n }\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","noBackdrop","render","classes","dialog","dialogFooterClasses","dialogHeaderClasses","html","_openDrawer","classMap","e","_closeDrawer","ifDefined","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","show","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.\n */\n @property({ type: String })\n size: 'md' | 'sm' | 'xl' | 'standard' = '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 /** Set this to `true` for no backdrop */\n @property({ type: Boolean })\n noBackdrop = false;\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n override render() {\n const classes = {\n dialog: true,\n 'no-backdrop': this.noBackdrop,\n [`size--${this.size}`]: this.size,\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 if (this.noBackdrop) {\n this._dialog.show();\n } else {\n this._dialog.showModal();\n }\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","noBackdrop","render","classes","dialog","dialogFooterClasses","dialogHeaderClasses","html","_openDrawer","classMap","e","_closeDrawer","ifDefined","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","show","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}
|