@kyndryl-design-system/shidoka-applications 1.2.1 → 1.2.3
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/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 +23 -3
- package/components/reusable/toggleButton/toggleButton.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -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"}
|
|
@@ -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
|
}
|
|
@@ -156,6 +157,18 @@ input[disabled] {
|
|
|
156
157
|
input[disabled]:before {
|
|
157
158
|
background-color: var(--kd-color-background-inverse);
|
|
158
159
|
}
|
|
160
|
+
input[disabled]:hover {
|
|
161
|
+
background-color: var(--kd-color-background-disabled);
|
|
162
|
+
}
|
|
163
|
+
input[disabled]:hover:before {
|
|
164
|
+
background-color: var(--kd-color-background-inverse);
|
|
165
|
+
}
|
|
166
|
+
input[disabled]:active {
|
|
167
|
+
background-color: var(--kd-color-background-disabled);
|
|
168
|
+
}
|
|
169
|
+
input[disabled]:active:before {
|
|
170
|
+
background-color: var(--kd-color-background-inverse);
|
|
171
|
+
}
|
|
159
172
|
input.size--sm {
|
|
160
173
|
width: 32px;
|
|
161
174
|
height: 16px;
|
|
@@ -166,6 +179,13 @@ input.size--sm:before {
|
|
|
166
179
|
margin: 2px 0 0 2px;
|
|
167
180
|
}
|
|
168
181
|
input.size--sm:checked:before {
|
|
182
|
+
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSIjMDBBRjQxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik02LjI0MDA4IDIuMjQwMDFMMy4yMDAwOCA1LjI4MDAxTDEuNDQwMDggMy41MjAwMUwxLjA4MDA4IDMuODgwMDFMMi44NDAwOCA1LjY0MDAxTDMuMjAwMDggNi4wMDAwMUw2LjYwMDA4IDIuNjAwMDFMNi4yNDAwOCAyLjI0MDAxWiIgLz4KPC9zdmc+IA==");
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
justify-content: center;
|
|
169
186
|
transform: translateX(16px);
|
|
187
|
+
}
|
|
188
|
+
input.size--sm[disabled]:checked:before {
|
|
189
|
+
content: "";
|
|
170
190
|
}`;export{r as default};
|
|
171
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|