@kyndryl-design-system/shidoka-applications 1.2.2 → 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.
- package/components/reusable/modal/modal.d.ts +2 -0
- package/components/reusable/modal/modal.d.ts.map +1 -1
- package/components/reusable/modal/modal.js +3 -2
- package/components/reusable/modal/modal.js.map +1 -1
- package/components/reusable/toggleButton/toggleButton.d.ts +2 -0
- package/components/reusable/toggleButton/toggleButton.d.ts.map +1 -1
- package/components/reusable/toggleButton/toggleButton.js +3 -3
- package/components/reusable/toggleButton/toggleButton.js.map +1 -1
- package/components/reusable/toggleButton/toggleButton.scss.js +6 -5
- package/components/reusable/toggleButton/toggleButton.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -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"}
|
|
@@ -30,6 +30,8 @@ export declare class ToggleButton extends LitElement {
|
|
|
30
30
|
small: boolean;
|
|
31
31
|
/** Checkbox disabled state. */
|
|
32
32
|
disabled: boolean;
|
|
33
|
+
/** Reverse UI element order, label on the left. */
|
|
34
|
+
reverse: boolean;
|
|
33
35
|
render(): import("lit-html").TemplateResult<1>;
|
|
34
36
|
private handleChange;
|
|
35
37
|
updated(changedProps: any): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,kBAAkB;IAElB,IAAI,SAAM;IAEV,mBAAmB;IAEnB,KAAK,SAAM;IAEX,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,0BAA0B;IAE1B,WAAW,SAAQ;IAEnB,4BAA4B;IAE5B,aAAa,SAAS;IAEtB,gCAAgC;IAEhC,KAAK,UAAS;IAEd,+BAA+B;IAE/B,QAAQ,UAAS;
|
|
1
|
+
{"version":3,"file":"toggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,kBAAkB;IAElB,IAAI,SAAM;IAEV,mBAAmB;IAEnB,KAAK,SAAM;IAEX,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,0BAA0B;IAE1B,WAAW,SAAQ;IAEnB,4BAA4B;IAE5B,aAAa,SAAS;IAEtB,gCAAgC;IAEhC,KAAK,UAAS;IAEd,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,OAAO,UAAS;IAEP,MAAM;IA4Bf,OAAO,CAAC,YAAY;IAaX,OAAO,CAAC,YAAY,EAAE,GAAG;IAOlC,OAAO,CAAC,eAAe;IAMd,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
|
|
@@ -1,10 +1,10 @@
|
|
|
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 s}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./toggleButton.scss.js";let
|
|
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 s}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./toggleButton.scss.js";let r=class extends s{constructor(){super(...arguments),this.internals=this.attachInternals(),this.name="",this.value="",this.checked=!1,this.checkedText="On",this.uncheckedText="Off",this.small=!1,this.disabled=!1,this.reverse=!1}render(){return t`
|
|
2
2
|
<div class="toggle-button" ?disabled=${this.disabled}>
|
|
3
3
|
<label class="label-text" for=${this.name}>
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</label>
|
|
6
6
|
|
|
7
|
-
<div class="wrapper">
|
|
7
|
+
<div class="wrapper ${this.reverse?"reverse":""}">
|
|
8
8
|
<input
|
|
9
9
|
class="${this.small?"size--sm":""}"
|
|
10
10
|
type="checkbox"
|
|
@@ -22,5 +22,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
22
22
|
</span>
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
25
|
-
`}handleChange(e){this.checked=e.target.checked;const t=new CustomEvent("on-change",{detail:{checked:e.target.checked,value:this.value,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("checked")}_handleFormdata(e){this.checked&&e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};
|
|
25
|
+
`}handleChange(e){this.checked=e.target.checked;const t=new CustomEvent("on-change",{detail:{checked:e.target.checked,value:this.value,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("checked")}_handleFormdata(e){this.checked&&e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};r.styles=l,r.formAssociated=!0,e([i()],r.prototype,"internals",void 0),e([a({type:String})],r.prototype,"name",void 0),e([a({type:String})],r.prototype,"value",void 0),e([a({type:Boolean})],r.prototype,"checked",void 0),e([a({type:String})],r.prototype,"checkedText",void 0),e([a({type:String})],r.prototype,"uncheckedText",void 0),e([a({type:Boolean})],r.prototype,"small",void 0),e([a({type:Boolean})],r.prototype,"disabled",void 0),e([a({type:Boolean})],r.prototype,"reverse",void 0),r=e([o("kyn-toggle-button")],r);export{r as ToggleButton};
|
|
26
26
|
//# sourceMappingURL=toggleButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport ToggleButtonScss from './toggleButton.scss';\n\n/**\n * Toggle Button.\n * @fires on-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends LitElement {\n static override styles = ToggleButtonScss;\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** Input name. */\n @property({ type: String })\n name = '';\n\n /** Input value. */\n @property({ type: String })\n value = '';\n\n /** Checkbox checked state. */\n @property({ type: Boolean })\n checked = false;\n\n /** Checked state text. */\n @property({ type: String })\n checkedText = 'On';\n\n /** Unchecked state text. */\n @property({ type: String })\n uncheckedText = 'Off';\n\n /** Option to use small size. */\n @property({ type: Boolean })\n small = false;\n\n /** Checkbox disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n override render() {\n return html`\n <div class=\"toggle-button\" ?disabled=${this.disabled}>\n <label class=\"label-text\" for=${this.name}>\n <slot></slot>\n </label>\n\n <div class=\"wrapper\">\n <input\n class=\"${this.small ? 'size--sm' : ''}\"\n type=\"checkbox\"\n name=${this.name}\n id=${this.name}\n value=${this.value}\n .checked=${this.checked}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${(e: any) => this.handleChange(e)}\n />\n\n <span class=\"status-text\">\n ${this.checked ? this.checkedText : this.uncheckedText}\n </span>\n </div>\n </div>\n `;\n }\n\n private handleChange(e: any) {\n this.checked = e.target.checked;\n // emit selected value, bubble so it can be captured by the checkbox group\n const event = new CustomEvent('on-change', {\n detail: {\n checked: e.target.checked,\n value: this.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('checked')) {\n // set form data value\n // this.internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n private _handleFormdata(e: any) {\n if (this.checked) {\n e.formData.append(this.name, this.value);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback(): void {\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-toggle-button': ToggleButton;\n }\n}\n"],"names":["ToggleButton","LitElement","constructor","this","internals","attachInternals","name","value","checked","checkedText","uncheckedText","small","disabled","render","html","e","handleChange","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","ToggleButtonScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"grBAUO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAcLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,GAIPH,KAAKI,MAAG,GAIRJ,KAAOK,SAAG,EAIVL,KAAWM,YAAG,KAIdN,KAAaO,cAAG,MAIhBP,KAAKQ,OAAG,EAIRR,KAAQS,UAAG,
|
|
1
|
+
{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport ToggleButtonScss from './toggleButton.scss';\n\n/**\n * Toggle Button.\n * @fires on-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends LitElement {\n static override styles = ToggleButtonScss;\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** Input name. */\n @property({ type: String })\n name = '';\n\n /** Input value. */\n @property({ type: String })\n value = '';\n\n /** Checkbox checked state. */\n @property({ type: Boolean })\n checked = false;\n\n /** Checked state text. */\n @property({ type: String })\n checkedText = 'On';\n\n /** Unchecked state text. */\n @property({ type: String })\n uncheckedText = 'Off';\n\n /** Option to use small size. */\n @property({ type: Boolean })\n small = false;\n\n /** Checkbox disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Reverse UI element order, label on the left. */\n @property({ type: Boolean })\n reverse = false;\n\n override render() {\n return html`\n <div class=\"toggle-button\" ?disabled=${this.disabled}>\n <label class=\"label-text\" for=${this.name}>\n <slot></slot>\n </label>\n\n <div class=\"wrapper ${this.reverse ? 'reverse' : ''}\">\n <input\n class=\"${this.small ? 'size--sm' : ''}\"\n type=\"checkbox\"\n name=${this.name}\n id=${this.name}\n value=${this.value}\n .checked=${this.checked}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${(e: any) => this.handleChange(e)}\n />\n\n <span class=\"status-text\">\n ${this.checked ? this.checkedText : this.uncheckedText}\n </span>\n </div>\n </div>\n `;\n }\n\n private handleChange(e: any) {\n this.checked = e.target.checked;\n // emit selected value, bubble so it can be captured by the checkbox group\n const event = new CustomEvent('on-change', {\n detail: {\n checked: e.target.checked,\n value: this.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n override updated(changedProps: any) {\n if (changedProps.has('checked')) {\n // set form data value\n // this.internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n private _handleFormdata(e: any) {\n if (this.checked) {\n e.formData.append(this.name, this.value);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback(): void {\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-toggle-button': ToggleButton;\n }\n}\n"],"names":["ToggleButton","LitElement","constructor","this","internals","attachInternals","name","value","checked","checkedText","uncheckedText","small","disabled","reverse","render","html","e","handleChange","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","ToggleButtonScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"grBAUO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAcLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,GAIPH,KAAKI,MAAG,GAIRJ,KAAOK,SAAG,EAIVL,KAAWM,YAAG,KAIdN,KAAaO,cAAG,MAIhBP,KAAKQ,OAAG,EAIRR,KAAQS,UAAG,EAIXT,KAAOU,SAAG,CA2EX,CAzEUC,SACP,OAAOC,CAAI;6CAC8BZ,KAAKS;wCACVT,KAAKG;;;;8BAIfH,KAAKU,QAAU,UAAY;;qBAEpCV,KAAKQ,MAAQ,WAAa;;mBAE5BR,KAAKG;iBACPH,KAAKG;oBACFH,KAAKI;uBACFJ,KAAKK;uBACLL,KAAKK;wBACJL,KAAKS;sBACNI,GAAWb,KAAKc,aAAaD;;;;cAItCb,KAAKK,QAAUL,KAAKM,YAAcN,KAAKO;;;;KAKlD,CAEOO,aAAaD,GACnBb,KAAKK,QAAUQ,EAAEE,OAAOV,QAExB,MAAMW,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNb,QAASQ,EAAEE,OAAOV,QAClBD,MAAOJ,KAAKI,MACZe,UAAWN,KAGfb,KAAKoB,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UAItB,CAEOC,gBAAgBX,GAClBb,KAAKK,SACPQ,EAAEY,SAASC,OAAO1B,KAAKG,KAAMH,KAAKI,MAErC,CAEQuB,oBACPC,MAAMD,oBAEF3B,KAAKC,UAAU4B,MACjB7B,KAAKC,UAAU4B,KAAKC,iBAAiB,YAAajB,GAChDb,KAAKwB,gBAAgBX,IAG1B,CAEQkB,uBACH/B,KAAKC,UAAU4B,MACjB7B,KAAKC,UAAU4B,KAAKG,oBAAoB,YAAanB,GACnDb,KAAKwB,gBAAgBX,KAIzBe,MAAMG,sBACP,GAvHelC,EAAMoC,OAAGC,EAMlBrC,EAAcsC,gBAAG,EAOxBC,EAAA,CADCC,KACkCxC,EAAAyC,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACR5C,EAAAyC,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACP5C,EAAAyC,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACF7C,EAAAyC,UAAA,eAAA,GAIhBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACC5C,EAAAyC,UAAA,mBAAA,GAInBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACI5C,EAAAyC,UAAA,qBAAA,GAItBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACJ7C,EAAAyC,UAAA,aAAA,GAIdF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACD7C,EAAAyC,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACF7C,EAAAyC,UAAA,eAAA,GA9CLzC,EAAYuC,EAAA,CADxBO,EAAc,sBACF9C"}
|
|
@@ -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 e}from'./../../../external/@lit/reactive-element/css-tag.js';var
|
|
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 r=e`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -35,11 +35,12 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
35
35
|
.wrapper {
|
|
36
36
|
display: flex;
|
|
37
37
|
align-items: center;
|
|
38
|
+
gap: 8px;
|
|
38
39
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
margin-left: 8px;
|
|
40
|
+
.wrapper.reverse {
|
|
41
|
+
flex-direction: row-reverse;
|
|
42
42
|
}
|
|
43
|
+
|
|
43
44
|
[disabled] .status-text {
|
|
44
45
|
color: var(--kd-color-text-disabled);
|
|
45
46
|
}
|
|
@@ -186,5 +187,5 @@ input.size--sm:checked:before {
|
|
|
186
187
|
}
|
|
187
188
|
input.size--sm[disabled]:checked:before {
|
|
188
189
|
content: "";
|
|
189
|
-
}`;export{
|
|
190
|
+
}`;export{r as default};
|
|
190
191
|
//# sourceMappingURL=toggleButton.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggleButton.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toggleButton.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|