@kyndryl-design-system/shidoka-applications 1.6.1 → 1.6.2
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/sideDrawer/sideDrawer.d.ts.map +1 -1
- package/components/reusable/sideDrawer/sideDrawer.js +0 -1
- package/components/reusable/sideDrawer/sideDrawer.js.map +1 -1
- package/components/reusable/sideDrawer/sideDrawer.scss.js +2 -10
- package/components/reusable/sideDrawer/sideDrawer.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAiBpB;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,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAuEf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\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 */\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
|
|
1
|
+
{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\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 */\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 /** 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 /** 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--sm': this.size === 'sm',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openDrawer}>\n <slot name=\"anchor\"></slot>\n </button>\n\n <dialog\n class=\"${classMap(classes)}\"\n autofocus\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <div class=\"drawer-content-wrapper\">\n <!-- Header -->\n <header>\n <div class=\"header-label-title\">\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n <div class=\"close-wrapper\">\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n </div>\n </header>\n <!-- Body -->\n <div>\n <slot></slot>\n </div>\n </div>\n <!-- footer -->\n ${!this.hideFooter\n ? html`\n <div class=\"dialog-footer\">\n <div class=\"actions\">\n <kd-button\n value=\"Ok\"\n ?disabled=${this.submitBtnDisabled}\n ?destructive=${this.destructive}\n @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n >\n ${this.submitBtnText}\n </kd-button>\n\n <kd-button\n value=\"Cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n >\n ${this.cancelBtnText}\n </kd-button>\n </div>\n </div>\n `\n : null}\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 override updated(changedProps: any) {\n if (changedProps.has('open')) {\n if (this.open) {\n this._dialog.showModal();\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","submitBtnDisabled","hideFooter","destructive","render","classes","modal","dialog","html","_openDrawer","classMap","e","_closeDrawer","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"qhCAiBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAwBLC,KAAIC,MAAG,EAMPD,KAAIE,KAAG,KAMPF,KAASG,UAAG,GAMZH,KAASI,UAAG,GAMZJ,KAAaK,cAAG,KAMhBL,KAAaM,cAAG,SAIhBN,KAAiBO,mBAAG,EAIpBP,KAAUQ,YAAG,EAIbR,KAAWS,aAAG,CAqHf,CAzGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACPC,QAAQ,EACR,WAA0B,OAAdb,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOY,CAAI;sCACuBd,KAAKe;;;;;iBAK1BC,EAASL;;;kBAGPM,GAAajB,KAAKkB,aAAaD,EAAG;;;;;;gBAMlB,KAAnBjB,KAAKI,UACHU,CAAI,uBAAuBd,KAAKI,mBAChC;qCACmBJ,KAAKG;;;;;yBAKhBc,GAAajB,KAAKkB,aAAaD,EAAG;;iCAE3BE;;;;;;;;;;UAUtBnB,KAAKQ,WAuBJ,KAtBAM,CAAI;;;;;gCAKgBd,KAAKO;mCACFP,KAAKS;6BACVQ,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKK;;;;;;6BAMGY,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKM;;;;;;KAQxB,CAEOS,cACNf,KAAKC,MAAO,CACb,CAEOiB,aAAaD,EAAUG,KAE1BpB,KAAKqB,aACLrB,KAAKqB,aAAerB,KAAKqB,YAAYD,MAEtCpB,KAAKC,MAAO,EACZD,KAAKsB,QAAQF,YAAcA,EAC3BpB,KAAKuB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAapB,KAAKsB,QAAQF,YAC1BO,UAAWV,KAGfjB,KAAK4B,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf/B,KAAKC,KACPD,KAAKsB,QAAQU,YAEbhC,KAAKsB,QAAQW,QAGlB,GArLepC,EAAAqC,OAAS,CACvBC,EACAC,CAAG;;;;;;;;;;;;;;OAqBLC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3C,EAAA4C,UAAA,YAAA,GAMbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACN7C,EAAA4C,UAAA,YAAA,GAMZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACG7C,EAAA4C,UAAA,qBAAA,GAMrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACO7C,EAAA4C,UAAA,qBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACQ3C,EAAA4C,UAAA,yBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC3C,EAAA4C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3C,EAAA4C,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA9C,EAAA4C,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO/C,EAAA4C,UAAA,eAAA,GA5EH5C,EAAUwC,EAAA,CADtBQ,EAAc,oBACFhD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as
|
|
1
|
+
import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var i=e`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -217,7 +217,6 @@ h1 {
|
|
|
217
217
|
@supports (transition-behavior: allow-discrete) {
|
|
218
218
|
dialog {
|
|
219
219
|
transition: right 400ms ease, transform 400ms ease, overlay 400ms ease allow-discrete, display 400ms ease allow-discrete;
|
|
220
|
-
right: -100%;
|
|
221
220
|
transform: translateX(100%);
|
|
222
221
|
}
|
|
223
222
|
dialog::backdrop {
|
|
@@ -226,7 +225,6 @@ h1 {
|
|
|
226
225
|
}
|
|
227
226
|
dialog[open] {
|
|
228
227
|
animation: none;
|
|
229
|
-
right: 0;
|
|
230
228
|
transform: translateX(0);
|
|
231
229
|
}
|
|
232
230
|
dialog[open]::backdrop {
|
|
@@ -235,16 +233,10 @@ h1 {
|
|
|
235
233
|
}
|
|
236
234
|
@keyframes dialog-in {
|
|
237
235
|
0% {
|
|
238
|
-
right: -100%;
|
|
239
236
|
transform: translateX(100%);
|
|
240
237
|
}
|
|
241
|
-
50% {
|
|
242
|
-
right: -50%;
|
|
243
|
-
transform: translateX(50%);
|
|
244
|
-
}
|
|
245
238
|
100% {
|
|
246
|
-
right: 0;
|
|
247
239
|
transform: translateX(0);
|
|
248
240
|
}
|
|
249
|
-
}`;export{
|
|
241
|
+
}`;export{i as default};
|
|
250
242
|
//# sourceMappingURL=sideDrawer.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sideDrawer.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sideDrawer.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|