@kyndryl-design-system/shidoka-applications 2.36.1 → 2.36.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/globalFilter/globalFilter.js +1 -1
- package/components/reusable/globalFilter/globalFilter.sample.d.ts.map +1 -1
- package/components/reusable/modal/modal.js +1 -1
- package/components/reusable/modal/modal.js.map +1 -1
- package/components/reusable/toggleButton/toggleButton.d.ts +1 -1
- package/components/reusable/toggleButton/toggleButton.d.ts.map +1 -1
- package/components/reusable/toggleButton/toggleButton.js +36 -47
- package/components/reusable/toggleButton/toggleButton.js.map +1 -1
- package/package.json +1 -1
|
@@ -41,7 +41,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{e}from"../../../ven
|
|
|
41
41
|
flex-wrap: wrap;
|
|
42
42
|
align-items: center;
|
|
43
43
|
gap: 16px;
|
|
44
|
-
background: var(--kd-color-container-
|
|
44
|
+
background: var(--kd-color-background-container-default);
|
|
45
45
|
border-radius: 4px;
|
|
46
46
|
padding: 16px;
|
|
47
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globalFilter.sample.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/globalFilter/globalFilter.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;AACnB,OAAO,cAAc,CAAC;AAQtB,2DAA2D;AAC3D,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAcpB;IAEF,+CAA+C;IAE/C,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,CAyBzB;IAEO,MAAM;
|
|
1
|
+
{"version":3,"file":"globalFilter.sample.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/globalFilter/globalFilter.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;AACnB,OAAO,cAAc,CAAC;AAQtB,2DAA2D;AAC3D,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAcpB;IAEF,+CAA+C;IAE/C,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,CAyBzB;IAEO,MAAM;IAqJf,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;CAM7B;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.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 ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = [\n ModalScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: scale(0);\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 /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. */\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 /** Disables the primary button. */\n @property({ type: Boolean })\n okDisabled = false;\n\n /** Disables the secondary button. */\n @property({ type: Boolean })\n secondaryDisabled = false;\n\n /** Hides the footer/action buttons to create a passive modal. */\n @property({ type: Boolean })\n hideFooter = 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 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 /** Close button text. */\n @property({ type: String })\n closeText = 'Close';\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n /** Determines if the component is themed for GenAI.*/\n @property({ type: Boolean, reflect: true })\n aiConnected = false;\n\n /** Disables scroll on the modal body to allow scrolling of nested elements inside. */\n @property({ type: Boolean })\n disableScroll = false;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n 'size--xl': this.size === 'xl',\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <form method=\"dialog\">\n <kyn-button\n class=\"close\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.closeText}\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n <header>\n <div>\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n </div>\n </header>\n\n <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n <slot></slot>\n </div>\n\n ${!this.hideFooter\n ? html`\n <slot name=\"footer\">\n <div class=\"footer\">\n <kyn-button\n class=\"action-button\"\n value=\"ok\"\n kind=${this.destructive\n ? 'primary-destructive'\n : this.aiConnected\n ? 'primary-ai'\n : 'primary'}\n ?disabled=${this.okDisabled}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kyn-button>\n ${this.showSecondaryButton\n ? html`\n <kyn-button\n class=\"action-button\"\n value=\"Secondary\"\n kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n ?disabled=${this.secondaryDisabled}\n @click=${(e: Event) =>\n this._closeModal(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._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kyn-button>\n `}\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </slot>\n `\n : null}\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 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 this._dialog.showModal();\n this._emitOpenEvent();\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","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.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 ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n static override styles = [\n ModalScss,\n css`\n @supports (transition-behavior: allow-discrete) {\n @starting-style {\n dialog[open] {\n opacity: 0;\n transform: scale(0);\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 /** Modal open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. */\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 /** Disables the primary button. */\n @property({ type: Boolean })\n okDisabled = false;\n\n /** Disables the secondary button. */\n @property({ type: Boolean })\n secondaryDisabled = false;\n\n /** Hides the footer/action buttons to create a passive modal. */\n @property({ type: Boolean })\n hideFooter = 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 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 /** Close button text. */\n @property({ type: String })\n closeText = 'Close';\n\n /** The dialog element\n * @internal\n */\n @query('dialog')\n _dialog!: any;\n\n /** Determines if the component is themed for GenAI.*/\n @property({ type: Boolean, reflect: true })\n aiConnected = false;\n\n /** Disables scroll on the modal body to allow scrolling of nested elements inside. */\n @property({ type: Boolean })\n disableScroll = false;\n\n override render() {\n const classes = {\n modal: true,\n 'size--md': this.size === 'md',\n 'size--lg': this.size === 'lg',\n 'size--xl': this.size === 'xl',\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <span class=\"anchor\" @click=${this._openModal}>\n <slot name=\"anchor\"></slot>\n </span>\n\n <dialog\n class=\"${classMap(classes)}\"\n aria-labelledby=\"dialogLabel\"\n @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <form method=\"dialog\">\n <kyn-button\n class=\"close\"\n kind=\"ghost\"\n size=\"small\"\n description=${this.closeText}\n @click=${(e: Event) => this._closeModal(e, 'cancel')}\n >\n <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n </kyn-button>\n <header>\n <div>\n <h1 id=\"dialogLabel\">${this.titleText}</h1>\n ${this.labelText !== ''\n ? html`<span class=\"label\">${this.labelText}</span>`\n : null}\n </div>\n </header>\n\n <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n <slot></slot>\n </div>\n\n ${!this.hideFooter\n ? html`\n <slot name=\"footer\">\n <div class=\"footer\">\n <kyn-button\n class=\"action-button\"\n value=\"ok\"\n kind=${this.destructive\n ? 'primary-destructive'\n : this.aiConnected\n ? 'primary-ai'\n : 'primary'}\n ?disabled=${this.okDisabled}\n @click=${(e: Event) => this._closeModal(e, 'ok')}\n >\n ${this.okText}\n </kyn-button>\n ${this.showSecondaryButton\n ? html`\n <kyn-button\n class=\"action-button\"\n value=\"Secondary\"\n kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n ?disabled=${this.secondaryDisabled}\n @click=${(e: Event) =>\n this._closeModal(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=\"tertiary\"\n @click=${(e: Event) =>\n this._closeModal(e, 'cancel')}\n >\n ${this.cancelText}\n </kyn-button>\n `}\n <!--\n <div class=\"custom-actions\">\n <slot name=\"actions\"></slot>\n </div>\n -->\n </div>\n </slot>\n `\n : null}\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 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 this._dialog.showModal();\n this._emitOpenEvent();\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","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}
|
|
@@ -30,7 +30,7 @@ export declare class ToggleButton extends ToggleButton_base {
|
|
|
30
30
|
_inputEl: HTMLInputElement;
|
|
31
31
|
render(): import("lit").TemplateResult<1>;
|
|
32
32
|
private handleChange;
|
|
33
|
-
private
|
|
33
|
+
private handleKeyDown;
|
|
34
34
|
updated(changedProps: any): void;
|
|
35
35
|
}
|
|
36
36
|
declare global {
|
|
@@ -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;;AAKvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,iBAAqB;IACrD,OAAgB,MAAM,MAAoB;IAE1C,kBAAkB;IAElB,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;IAEhB,gCAAgC;IAEhC,SAAS,UAAS;IAElB;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAEnB,MAAM;
|
|
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;;AAKvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,iBAAqB;IACrD,OAAgB,MAAM,MAAoB;IAE1C,kBAAkB;IAElB,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;IAEhB,gCAAgC;IAEhC,SAAS,UAAS;IAElB;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAEnB,MAAM;IAuCf,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAanB;IAEO,OAAO,CAAC,YAAY,EAAE,GAAG;CAQnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
|
|
@@ -473,6 +473,22 @@ textarea:not([disabled])[invalid] {
|
|
|
473
473
|
display: inline-block;
|
|
474
474
|
}
|
|
475
475
|
|
|
476
|
+
.toggle-button:has(input:focus-visible) {
|
|
477
|
+
outline: 3px solid var(--kd-border-variants-focus);
|
|
478
|
+
outline-offset: 2px;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
input[type=checkbox][role=switch]:focus-visible + .status-text {
|
|
482
|
+
outline: 3px solid var(--kd-border-variants-focus);
|
|
483
|
+
outline-offset: 2px;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
input:focus-visible:not(:hover),
|
|
487
|
+
input:focus-visible:hover {
|
|
488
|
+
outline: 3px solid var(--kd-color-border-variants-focus);
|
|
489
|
+
outline-offset: 2px;
|
|
490
|
+
}
|
|
491
|
+
|
|
476
492
|
.wrapper {
|
|
477
493
|
display: flex;
|
|
478
494
|
align-items: center;
|
|
@@ -486,10 +502,6 @@ textarea:not([disabled])[invalid] {
|
|
|
486
502
|
color: var(--kd-color-text-link-level-disabled);
|
|
487
503
|
}
|
|
488
504
|
|
|
489
|
-
label {
|
|
490
|
-
display: block;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
505
|
input {
|
|
494
506
|
-webkit-appearance: none;
|
|
495
507
|
appearance: none;
|
|
@@ -517,27 +529,15 @@ input:hover {
|
|
|
517
529
|
input:hover:before {
|
|
518
530
|
background-color: var(--kd-color-background-ui-hollow-hover);
|
|
519
531
|
}
|
|
520
|
-
input:active {
|
|
521
|
-
background-color: var(--kd-color-background-button-web-default);
|
|
522
|
-
}
|
|
523
|
-
input:active:before {
|
|
524
|
-
background-color: var(--kd-color-background-ui-hollow-default);
|
|
525
|
-
}
|
|
526
|
-
input:active:hover {
|
|
532
|
+
input:active, input:active:hover {
|
|
527
533
|
background-color: var(--kd-color-background-button-web-default);
|
|
528
534
|
}
|
|
529
|
-
input:active:hover:before {
|
|
535
|
+
input:active:before, input:active:hover:before {
|
|
530
536
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
531
537
|
}
|
|
532
|
-
input:focus-visible:not(:hover) {
|
|
533
|
-
outline-color: var(--kd-color-border-variants-focus);
|
|
534
|
-
}
|
|
535
538
|
input:focus-visible:not(:hover):before {
|
|
536
539
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
537
540
|
}
|
|
538
|
-
input:focus-visible:hover {
|
|
539
|
-
outline-color: var(--kd-color-border-variants-focus);
|
|
540
|
-
}
|
|
541
541
|
input:focus-visible:hover:before {
|
|
542
542
|
background-color: var(--kd-color-background-ui-hollow-hover);
|
|
543
543
|
}
|
|
@@ -559,22 +559,10 @@ input:checked:active {
|
|
|
559
559
|
input:checked:active:before {
|
|
560
560
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
561
561
|
}
|
|
562
|
-
input[disabled] {
|
|
563
|
-
background-color: var(--kd-color-states-disabled);
|
|
564
|
-
}
|
|
565
|
-
input[disabled]:before {
|
|
566
|
-
background-color: var(--kd-color-background-ui-hollow-default);
|
|
567
|
-
}
|
|
568
|
-
input[disabled]:hover {
|
|
569
|
-
background-color: var(--kd-color-states-disabled);
|
|
570
|
-
}
|
|
571
|
-
input[disabled]:hover:before {
|
|
572
|
-
background-color: var(--kd-color-background-ui-hollow-default);
|
|
573
|
-
}
|
|
574
|
-
input[disabled]:active {
|
|
562
|
+
input[disabled], input[disabled]:hover, input[disabled]:active {
|
|
575
563
|
background-color: var(--kd-color-states-disabled);
|
|
576
564
|
}
|
|
577
|
-
input[disabled]:active:before {
|
|
565
|
+
input[disabled]:before, input[disabled]:hover:before, input[disabled]:active:before {
|
|
578
566
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
579
567
|
}
|
|
580
568
|
input.size--sm {
|
|
@@ -594,9 +582,6 @@ input.size--sm:checked:before {
|
|
|
594
582
|
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSIjMDBBRjQxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik02LjI0MDA4IDIuMjQwMDFMMy4yMDAwOCA1LjI4MDAxTDEuNDQwMDggMy41MjAwMUwxLjA4MDA4IDMuODgwMDFMMi44NDAwOCA1LjY0MDAxTDMuMjAwMDggNi4wMDAwMUw2LjYwMDA4IDIuNjAwMDFMNi4yNDAwOCAyLjI0MDAxWiIgLz4KPC9zdmc+IA==");
|
|
595
583
|
background-color: var(--kd-color-background-ui-hollow-default);
|
|
596
584
|
transform: translateX(16px);
|
|
597
|
-
display: flex;
|
|
598
|
-
align-items: center;
|
|
599
|
-
justify-content: center;
|
|
600
585
|
line-height: 0;
|
|
601
586
|
}
|
|
602
587
|
input.size--sm:checked:hover:before {
|
|
@@ -604,33 +589,37 @@ input.size--sm:checked:hover:before {
|
|
|
604
589
|
}
|
|
605
590
|
input.size--sm[disabled]:checked:before {
|
|
606
591
|
content: "";
|
|
607
|
-
}`;let
|
|
592
|
+
}`;let s=class extends(d(l)){constructor(){super(...arguments),this.label="",this.checked=!1,this.checkedText="On",this.uncheckedText="Off",this.small=!1,this.disabled=!1,this.reverse=!1,this.hideLabel=!1,this.handleChange=e=>{const t=e.target;this.checked=t.checked,this._internals.setFormValue(this.checked?this.value:null),this.dispatchEvent(new CustomEvent("on-change",{detail:{checked:this.checked,value:this.value,origEvent:e},bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{"Space"!==e.code&&" "!==e.key||(e.preventDefault(),this.checked=!this.checked,this._internals.setFormValue(this.checked?this.value:null),this.dispatchEvent(new CustomEvent("on-change",{detail:{checked:this.checked,value:this.value,origEvent:e},bubbles:!0,composed:!0})))}}render(){const e=this.name,t=`${e}-status`;return a`
|
|
608
593
|
<div class="toggle-button" ?disabled=${this.disabled}>
|
|
609
|
-
<label
|
|
610
|
-
|
|
611
|
-
for=${this.name}
|
|
612
|
-
>
|
|
613
|
-
<span>${this.label}</span>
|
|
594
|
+
<label class="label-text ${this.hideLabel?"sr-only":""}" for=${e}>
|
|
595
|
+
${this.label}
|
|
614
596
|
<slot name="tooltip"></slot>
|
|
615
597
|
</label>
|
|
616
598
|
|
|
617
599
|
<div class="wrapper ${this.reverse?"reverse":""}">
|
|
618
600
|
<input
|
|
619
|
-
|
|
601
|
+
id=${e}
|
|
602
|
+
class=${this.small?"size--sm":""}
|
|
620
603
|
type="checkbox"
|
|
621
604
|
name=${this.name}
|
|
622
|
-
|
|
605
|
+
role="switch"
|
|
606
|
+
aria-checked=${this.checked}
|
|
607
|
+
aria-describedby=${t}
|
|
623
608
|
value=${this.value}
|
|
624
609
|
.checked=${this.checked}
|
|
625
|
-
?checked=${this.checked}
|
|
626
610
|
?disabled=${this.disabled}
|
|
627
|
-
@change=${
|
|
611
|
+
@change=${this.handleChange}
|
|
612
|
+
@keydown=${this.handleKeyDown}
|
|
628
613
|
/>
|
|
629
614
|
|
|
630
|
-
<span class="
|
|
615
|
+
<span id=${t} class="label-text sr-only">
|
|
616
|
+
${this.checked?this.checkedText:this.uncheckedText}
|
|
617
|
+
</span>
|
|
618
|
+
|
|
619
|
+
<span aria-hidden="true" class="status-text">
|
|
631
620
|
${this.checked?this.checkedText:this.uncheckedText}
|
|
632
621
|
</span>
|
|
633
622
|
</div>
|
|
634
623
|
</div>
|
|
635
|
-
`}
|
|
624
|
+
`}updated(e){this._onUpdated(e),e.has("checked")&&this._internals.setFormValue(this.checked?this.value:null)}};s.styles=n,e([t({type:String})],s.prototype,"label",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"checked",void 0),e([t({type:String})],s.prototype,"checkedText",void 0),e([t({type:String})],s.prototype,"uncheckedText",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"small",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),e([t({type:Boolean})],s.prototype,"reverse",void 0),e([t({type:Boolean})],s.prototype,"hideLabel",void 0),e([i("input")],s.prototype,"_inputEl",void 0),s=e([o("kyn-toggle-button")],s);export{s as ToggleButton};
|
|
636
625
|
//# 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, query } from 'lit/decorators.js';\nimport { FormMixin } from '../../../common/mixins/form-input';\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 tooltip - Slot for tooltip.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends FormMixin(LitElement) {\n static override styles = ToggleButtonScss;\n\n /** Label text. */\n @property({ type: String })\n label = '';\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 /** Hides the label visually. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /**\n * Queries the <input> DOM element.\n * @internal\n */\n @query('input')\n _inputEl!: HTMLInputElement;\n\n override render() {\n return html`\n <div class=\"toggle-button\" ?disabled=${this.disabled}>\n <label
|
|
1
|
+
{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { FormMixin } from '../../../common/mixins/form-input';\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 tooltip - Slot for tooltip.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends FormMixin(LitElement) {\n static override styles = ToggleButtonScss;\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Checkbox checked state. */\n @property({ type: Boolean, reflect: true })\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, reflect: true })\n small = false;\n\n /** Checkbox disabled state. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Reverse UI element order, label on the left. */\n @property({ type: Boolean })\n reverse = false;\n\n /** Hides the label visually. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /**\n * Queries the <input> DOM element.\n * @internal\n */\n @query('input')\n _inputEl!: HTMLInputElement;\n\n override render() {\n const id = this.name;\n const statusId = `${id}-status`;\n\n return html`\n <div class=\"toggle-button\" ?disabled=${this.disabled}>\n <label class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\" for=${id}>\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </label>\n\n <div class=\"wrapper ${this.reverse ? 'reverse' : ''}\">\n <input\n id=${id}\n class=${this.small ? 'size--sm' : ''}\n type=\"checkbox\"\n name=${this.name}\n role=\"switch\"\n aria-checked=${this.checked}\n aria-describedby=${statusId}\n value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${this.handleChange}\n @keydown=${this.handleKeyDown}\n />\n\n <span id=${statusId} class=\"label-text sr-only\">\n ${this.checked ? this.checkedText : this.uncheckedText}\n </span>\n\n <span aria-hidden=\"true\" class=\"status-text\">\n ${this.checked ? this.checkedText : this.uncheckedText}\n </span>\n </div>\n </div>\n `;\n }\n\n private handleChange = (e: Event): void => {\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n this._internals.setFormValue(this.checked ? this.value : null);\n this.dispatchEvent(\n new CustomEvent('on-change', {\n detail: { checked: this.checked, value: this.value, origEvent: e },\n bubbles: true,\n composed: true,\n })\n );\n };\n\n private handleKeyDown = (e: KeyboardEvent): void => {\n if (e.code === 'Space' || e.key === ' ') {\n e.preventDefault();\n this.checked = !this.checked;\n this._internals.setFormValue(this.checked ? this.value : null);\n this.dispatchEvent(\n new CustomEvent('on-change', {\n detail: { checked: this.checked, value: this.value, origEvent: e },\n bubbles: true,\n composed: true,\n })\n );\n }\n };\n\n override updated(changedProps: any) {\n this._onUpdated(changedProps);\n\n if (changedProps.has('checked')) {\n // set form data value\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-toggle-button': ToggleButton;\n }\n}\n"],"names":["ToggleButton","FormMixin","LitElement","constructor","this","label","checked","checkedText","uncheckedText","small","disabled","reverse","hideLabel","handleChange","e","input","target","_internals","setFormValue","value","dispatchEvent","CustomEvent","detail","origEvent","bubbles","composed","handleKeyDown","code","key","preventDefault","render","id","name","statusId","html","updated","changedProps","_onUpdated","has","styles","ToggleButtonScss","__decorate","property","type","String","prototype","Boolean","reflect","query","customElement"],"mappings":"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"}
|