@kyndryl-design-system/shidoka-applications 1.2.3 → 1.2.4
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.
|
@@ -22,6 +22,8 @@ export declare class Modal extends LitElement {
|
|
|
22
22
|
okText: string;
|
|
23
23
|
/** Cancel button text. */
|
|
24
24
|
cancelText: string;
|
|
25
|
+
/** Changes the primary button styles to indicate the action is destructive. */
|
|
26
|
+
destructive: boolean;
|
|
25
27
|
/** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */
|
|
26
28
|
beforeClose: Function;
|
|
27
29
|
/** The dialog element
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,+BAAa;IAEnC,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,+BAAa;IAEnC,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA+Df,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as a}from'./../../../external/lit-html/directives/class-map.js';import n from"./modal.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/close/32.js';let r=class extends o{constructor(){super(...arguments),this.open=!1,this.size="auto",this.titleText="",this.labelText="",this.okText="OK",this.cancelText="Cancel",this.destructive=!1}render(){const e={modal:!0,"size--md":"md"===this.size,"size--lg":"lg"===this.size};return t`
|
|
2
2
|
<button class="anchor" @click=${this._openModal}>
|
|
3
3
|
<slot name="anchor"></slot>
|
|
4
4
|
</button>
|
|
@@ -29,6 +29,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
29
29
|
<div class="actions">
|
|
30
30
|
<kd-button
|
|
31
31
|
value="ok"
|
|
32
|
+
?destructive=${this.destructive}
|
|
32
33
|
@click=${e=>this._closeModal(e,"ok")}
|
|
33
34
|
>
|
|
34
35
|
${this.okText}
|
|
@@ -48,5 +49,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
48
49
|
</div>
|
|
49
50
|
</form>
|
|
50
51
|
</dialog>
|
|
51
|
-
`}_openModal(){this.open=!0}_closeModal(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)}updated(e){e.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};r.styles=n,e([
|
|
52
|
+
`}_openModal(){this.open=!0}_closeModal(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)}updated(e){e.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};r.styles=n,e([i({type:Boolean})],r.prototype,"open",void 0),e([i({type:String})],r.prototype,"size",void 0),e([i({type:String})],r.prototype,"titleText",void 0),e([i({type:String})],r.prototype,"labelText",void 0),e([i({type:String})],r.prototype,"okText",void 0),e([i({type:String})],r.prototype,"cancelText",void 0),e([i({type:Boolean})],r.prototype,"destructive",void 0),e([i({attribute:!1})],r.prototype,"beforeClose",void 0),e([l("dialog")],r.prototype,"_dialog",void 0),r=e([s("kyn-modal")],r);export{r as Modal};
|
|
52
53
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = ModalScss;\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\n\n /** Function to execute before the modal 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 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\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._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(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-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"m8BAkBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAKLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot actions - Slot for custom action buttons. Custom action buttons will not trigger the `on-close` event.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = ModalScss;\n\n /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n @property({ type: String })\n size = 'auto';\n\n /** Title/heading text, required. */\n @property({ type: String })\n titleText = '';\n\n /** Label text, optional. */\n @property({ type: String })\n labelText = '';\n\n /** OK button text. */\n @property({ type: String })\n okText = 'OK';\n\n /** Cancel button text. */\n @property({ type: String })\n cancelText = 'Cancel';\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 modal 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 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n };\n\n return html`\n <button class=\"anchor\" @click=${this._openModal}>\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._closeModal(e, 'cancel')}\n >\n <button\n class=\"close\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <kd-icon .icon=${closeIcon}></kd-icon>\n </button>\n\n <header>\n <div>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n </div>\n </header>\n\n <form method=\"dialog\" class=\"body\">\n <slot></slot>\n\n <div class=\"actions\">\n <kd-button\n value=\"ok\"\n ?destructive=${this.destructive}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kd-button>\n\n <kd-button\n value=\"cancel\"\n kind=\"secondary\"\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kd-button>\n\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </form>\n </dialog>\n `;\n }\n\n private _openModal() {\n this.open = true;\n }\n\n private _closeModal(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-modal': Modal;\n }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"m8BAkBO,IAAMA,EAAN,cAAoBC,EAApBC,kCAKLC,KAAIC,MAAG,EAIPD,KAAIE,KAAG,OAIPF,KAASG,UAAG,GAIZH,KAASI,UAAG,GAIZJ,KAAMK,OAAG,KAITL,KAAUM,WAAG,SAIbN,KAAWO,aAAG,CA6Gf,CAjGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACP,WAA0B,OAAdV,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOS,CAAI;sCACuBX,KAAKY;;;;;iBAK1BC,EAASJ;;;kBAGPK,GAAad,KAAKe,YAAYD,EAAG;;;;mBAIhCA,GAAad,KAAKe,YAAYD,EAAG;;2BAE1BE;;;;;cAKM,KAAnBhB,KAAKI,UACHO,CAAI,uBAAuBX,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;;;;;6BAUXH,KAAKO;uBACVO,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKK;;;;;;uBAMGS,GAAad,KAAKe,YAAYD,EAAG;;gBAEzCd,KAAKM;;;;;;;;;KAUlB,CAEOM,aACNZ,KAAKC,MAAO,CACb,CAEOc,YAAYD,EAAUG,KAEzBjB,KAAKkB,aACLlB,KAAKkB,aAAelB,KAAKkB,YAAYD,MAEtCjB,KAAKC,MAAO,EACZD,KAAKmB,QAAQF,YAAcA,EAC3BjB,KAAKoB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAajB,KAAKmB,QAAQF,YAC1BO,UAAWV,KAGfd,KAAKyB,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf5B,KAAKC,KACPD,KAAKmB,QAAQU,YAEb7B,KAAKmB,QAAQW,QAGlB,GAxIejC,EAAMkC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACLvC,EAAAwC,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,YAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACHzC,EAAAwC,UAAA,iBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACJzC,EAAAwC,UAAA,cAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACIzC,EAAAwC,UAAA,kBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACEvC,EAAAwC,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA1C,EAAAwC,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO3C,EAAAwC,UAAA,eAAA,GAvCHxC,EAAKoC,EAAA,CADjBQ,EAAc,cACF5C"}
|