@sky.ui/core 0.0.38 → 0.0.39
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/dist/custom-elements.json +2283 -2196
- package/dist/helper/index.js +1 -1
- package/dist/helper/utils/color-resolver.d.ts +9 -1
- package/dist/helper/utils/color-resolver.js +1 -1
- package/dist/helper/utils/color-resolver.js.map +1 -1
- package/dist/helper/utils/contrast-color.d.ts +128 -0
- package/dist/helper/utils/contrast-color.js +2 -0
- package/dist/helper/utils/contrast-color.js.map +1 -0
- package/dist/helper/utils/index.d.ts +1 -0
- package/dist/helper/utils/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/sky-alert/sky-alert.js +13 -11
- package/dist/sky-alert/sky-alert.js.map +1 -1
- package/dist/sky-appbar/sky-appbar.js +6 -5
- package/dist/sky-appbar/sky-appbar.js.map +1 -1
- package/dist/sky-badge/sky-badge.js +13 -9
- package/dist/sky-badge/sky-badge.js.map +1 -1
- package/dist/sky-button/sky-button.js +14 -11
- package/dist/sky-button/sky-button.js.map +1 -1
- package/dist/sky-card/sky-card.js.map +1 -1
- package/dist/sky-checkbox/sky-checkbox.js +13 -11
- package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
- package/dist/sky-chip/sky-chip.js +14 -11
- package/dist/sky-chip/sky-chip.js.map +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +16 -3
- package/dist/sky-combobox/sky-combobox.js +680 -257
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-dialog/sky-dialog.js.map +1 -1
- package/dist/sky-input/sky-input.d.ts +3 -2
- package/dist/sky-input/sky-input.js +452 -180
- package/dist/sky-input/sky-input.js.map +1 -1
- package/dist/sky-radio/sky-radio.d.ts +2 -0
- package/dist/sky-radio/sky-radio.js +28 -13
- package/dist/sky-radio/sky-radio.js.map +1 -1
- package/dist/sky-sheet/sky-sheet.js.map +1 -1
- package/dist/sky-theme-provider/sky-theme-provider.js +1 -1
- package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{LitElement as e,
|
|
1
|
+
import{LitElement as e,unsafeCSS as t,css as i,nothing as s,html as r}from"lit";import{property as o,state as a,customElement as n}from"lit/decorators.js";import{when as c}from"lit/directives/when.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as l}from"lit/directives/style-map.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as p}from"../helper/utils/contrast-color.js";import{FormControlBase as u}from"../helper/internals/form-control-base.js";var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,k=(e,t,i,s)=>{for(var r,o=s>1?void 0:s?y(t,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(s?r(t,i,o):r(o))||o);return s&&o&&v(t,i,o),o};let m=class extends u{constructor(){super(...arguments),this.label="",this.id="",this.value="",this.color="primary",this.defaultChecked=!1,this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.validationActive=!1,this.invalid=!1,this._checked=!1,this._indeterminate=!1,this.validationErrors=[],this._hasMeaningfulSlot=!1,this._inputId=`sky-cb-${Math.random().toString(36).slice(2)}`,this._onSlotChange=e=>{const t=e.target,i=this._slotHasMeaningfulContent(t);i!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=i)},this.handleBlur=e=>{this.validationActive=!0,this.validateInput();const t=this.shadowRoot?.querySelector(".cbx");t?.classList.remove("active"),this.syncValidity()},this._onKeyDown=e=>{this.disabled||this.readonly||" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this._inputElement?.click())}}get checked(){return this._checked}set checked(e){const t=this._checked;this._checked=e,e&&this.indeterminate&&(this.indeterminate=!1,this._inputElement&&(this._inputElement.indeterminate=!1)),this.requestUpdate("checked",t),this._inputElement&&(this._inputElement.checked=e,this._inputElement.indeterminate=this.indeterminate),this._updateVisualState(),this.syncFormValue(),this.syncValidity()}get indeterminate(){return this._indeterminate}set indeterminate(e){const t=this._indeterminate;this._indeterminate=e,e&&this.checked&&(this.checked=!1),this.requestUpdate("indeterminate",t),this._inputElement&&(this._inputElement.indeterminate=e),this._updateVisualState(),this.syncValidity()}getFormValue(){return this.name?this.disabled?null:this.checked?this.value&&""!==this.value.trim()?this.value:"on":null:null}setValueFromFormState(e){if(null===e)return this.checked=!1,void(this.indeterminate=!1);"string"==typeof e&&(this.value&&""!==this.value.trim()?this.checked=e===this.value:this.checked="on"===e||"true"===e||"1"===e,this.indeterminate=!1)}getValidityAnchor(){return this.shadowRoot?.querySelector('input[type="checkbox"]')??void 0}isEmpty(){return!this.checked}getNativeControl(){return this.shadowRoot?.querySelector('input[type="checkbox"]')}onFormReset(){this.checked=this.defaultChecked,this.indeterminate=!1,this.validationErrors=[],this.invalid=!1,this.validationActive=!1}willUpdate(e){e.has("color")&&this.style.setProperty("--checkbox-color",d(this.color))}updated(e){super.updated(e),this._inputElement||(this._inputElement=this.shadowRoot?.querySelector('input[type="checkbox"]')),this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate,this._inputElement.disabled=this.disabled||this.readonly),this._updateVisualState(),(e.has("checked")||e.has("name")||e.has("disabled")||e.has("readonly")||e.has("required")||e.has("value"))&&(this.syncFormValue(),this.syncValidity())}handleChange(e){const t=e.target;if(this.disabled||this.readonly)return this._inputElement&&(this._inputElement.checked=this.checked,this._inputElement.indeterminate=this.indeterminate),e.preventDefault(),void e.stopPropagation();this.checked=t.checked,this.validateInput();const i=this.value&&""!==this.value.trim()?this.checked?this.value:void 0:this.checked;this.dispatchEvent(new CustomEvent("value-changed",{detail:{checked:this.checked,value:i},bubbles:!0,composed:!0}))}validateInput(){if(!this.validationActive)return!0;this.validationErrors=[],this.required&&!this.checked&&(this.validationErrors=[this.requiredMessage]),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".cbx");this.validationErrors.length?e?.classList.add("invalid"):e?.classList.remove("invalid");const t=0===this.validationErrors.length;return this.invalid=!t,t}check(){this.disabled||this.readonly||(this.checked=!0,this.indeterminate=!1)}uncheck(){this.disabled||this.readonly||(this.checked=!1,this.indeterminate=!1)}toggle(){this.disabled||this.readonly||(this.checked=!this.checked,this.indeterminate=!1)}reset(){this.onFormReset(),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}_updateVisualState(){const e=this.shadowRoot?.querySelector(".cbx");e&&(this.checked?(e.classList.add("checked"),e.classList.remove("indeterminate")):this.indeterminate?(e.classList.add("indeterminate"),e.classList.remove("checked")):e.classList.remove("checked","indeterminate"))}_slotHasMeaningfulContent(e){return e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||(e.textContent??"").trim().length>0)}get _hasTextContent(){return!!this.prefix||!!this.suffix||!!this.label||this._hasMeaningfulSlot}render(){const e=this._hasTextContent,t=h({"checkbox-wrapper":!0,"no-text":!e}),i=h({cbx:!0,checked:this.checked,indeterminate:this.indeterminate}),o=h({box:!0,"box--checked":this.checked,"box--indeterminate":this.indeterminate,"box--invalid":this.validationErrors.length>0}),a="box"+(this.checked?" box--checked":"")+(this.indeterminate?" box--indeterminate":"")+(this.validationErrors.length?" box--invalid":"");return r`
|
|
2
2
|
<div class=${t} part="wrapper">
|
|
3
3
|
<input
|
|
4
4
|
type="checkbox"
|
|
@@ -15,31 +15,31 @@ import{LitElement as e,css as t,nothing as i,html as s}from"lit";import{property
|
|
|
15
15
|
aria-invalid="${this.validationErrors.length>0}"
|
|
16
16
|
aria-readonly="${this.readonly}"
|
|
17
17
|
/>
|
|
18
|
-
<label class=${
|
|
19
|
-
<span part=${
|
|
18
|
+
<label class=${i} part="label" for="${this._inputId}">
|
|
19
|
+
<span part=${a} class=${o}>
|
|
20
20
|
<svg viewBox="0 0 12 10" class="checkmark" part="checkmark">
|
|
21
21
|
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
|
|
22
22
|
</svg>
|
|
23
23
|
<div class="indeterminate-line" part="indeterminate-line"></div>
|
|
24
24
|
</span>
|
|
25
25
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
26
|
-
${
|
|
26
|
+
${c(e,()=>{const e=l({textAlign:"start",color:"var(--sky-text-primary)"}),t=l({color:this.prefixColor,display:"inline-block"}),i=l({color:this.suffixColor,display:"inline-block"});return r`
|
|
27
27
|
<span style=${e} part="text">
|
|
28
28
|
<div style=${t} part="prefix">
|
|
29
29
|
${this.prefix}
|
|
30
30
|
</div>
|
|
31
|
-
${this._hasMeaningfulSlot?
|
|
32
|
-
<div style=${
|
|
31
|
+
${this._hasMeaningfulSlot?s:this.label}
|
|
32
|
+
<div style=${i} part="suffix">
|
|
33
33
|
${this.suffix}
|
|
34
34
|
</div>
|
|
35
35
|
</span>
|
|
36
36
|
`})}
|
|
37
37
|
</label>
|
|
38
38
|
</div>
|
|
39
|
-
${
|
|
39
|
+
${c(this.showErrors&&this.validationErrors.length>0&&this.validationActive,()=>r`<div class="error-message" part="error-message">
|
|
40
40
|
${this.validationErrors[0]}
|
|
41
41
|
</div>`)}
|
|
42
|
-
`}};
|
|
42
|
+
`}};m.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},m.styles=i`
|
|
43
43
|
:host {
|
|
44
44
|
display: block;
|
|
45
45
|
position: relative;
|
|
@@ -111,7 +111,7 @@ import{LitElement as e,css as t,nothing as i,html as s}from"lit";import{property
|
|
|
111
111
|
width: 12px;
|
|
112
112
|
height: 10px;
|
|
113
113
|
fill: none;
|
|
114
|
-
stroke: var(--sky-text-white);
|
|
114
|
+
stroke: var(--sky-on-color-fallback-light, var(--sky-text-white));
|
|
115
115
|
stroke-width: 2;
|
|
116
116
|
stroke-linecap: round;
|
|
117
117
|
stroke-linejoin: round;
|
|
@@ -202,7 +202,7 @@ input[type="checkbox"]:checked + .cbx span:first-child {
|
|
|
202
202
|
.indeterminate-line {
|
|
203
203
|
width: 10px;
|
|
204
204
|
height: 2px;
|
|
205
|
-
background-color: var(--sky-text-white);
|
|
205
|
+
background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));
|
|
206
206
|
position: absolute;
|
|
207
207
|
border-radius: 1px;
|
|
208
208
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
@@ -283,5 +283,7 @@ input[type="checkbox"]:checked + .cbx span:first-child {
|
|
|
283
283
|
transition: none;
|
|
284
284
|
}
|
|
285
285
|
}
|
|
286
|
-
|
|
286
|
+
|
|
287
|
+
${t(p([{selector:'input[type="checkbox"]:checked + .cbx span:first-child svg, .cbx.checked span:first-child svg',fillVar:"var(--checkbox-color, var(--sky-active-primary))",property:"stroke"},{selector:".indeterminate-line, .indeterminate .indeterminate-line",fillVar:"var(--checkbox-color, var(--sky-active-primary))",property:"background-color"}]))}
|
|
288
|
+
`,k([o({type:String})],m.prototype,"label",2),k([o({type:String})],m.prototype,"id",2),k([o({type:String})],m.prototype,"value",2),k([o({type:String})],m.prototype,"color",2),k([o({type:Boolean})],m.prototype,"defaultChecked",2),k([o({type:Boolean})],m.prototype,"showErrors",2),k([o({type:String})],m.prototype,"prefix",2),k([o({type:String})],m.prototype,"suffix",2),k([o({type:String})],m.prototype,"prefixColor",2),k([o({type:String})],m.prototype,"suffixColor",2),k([o({type:Boolean,reflect:!0})],m.prototype,"validationActive",2),k([o({type:Boolean,reflect:!0})],m.prototype,"invalid",2),k([a()],m.prototype,"_checked",2),k([a()],m.prototype,"_indeterminate",2),k([a()],m.prototype,"validationErrors",2),k([a()],m.prototype,"_hasMeaningfulSlot",2),k([o({type:Boolean,reflect:!0})],m.prototype,"checked",1),k([o({type:Boolean,reflect:!0})],m.prototype,"indeterminate",1),m=k([n("sky-checkbox")],m);export{m as SkyCheckbox};
|
|
287
289
|
//# sourceMappingURL=sky-checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-checkbox.js","sources":["../../src/sky-checkbox/sky-checkbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { property, customElement, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\r\n\r\nexport interface CheckboxProperties {\r\n label: string;\r\n checked: boolean;\r\n disabled: boolean;\r\n indeterminate: boolean;\r\n id: string;\r\n value: string;\r\n color: string;\r\n required: boolean;\r\n validationErrors: string[];\r\n validationActive: boolean;\r\n defaultChecked: boolean;\r\n requiredMessage: string;\r\n showErrors: boolean;\r\n prefix: string;\r\n suffix: string;\r\n prefixColor: string;\r\n suffixColor: string;\r\n}\r\n/** `checked` is always the boolean model; `value` keeps form/legacy semantics (see `handleChange`). */\r\nexport type SkyCheckboxValueChangedDetail = {\r\n checked: boolean;\r\n value: string | boolean | undefined;\r\n};\r\nexport type SkyCheckboxValidationErrorDetail = { errors: string[] };\r\nexport type SkyCheckboxValueClearedDetail = { value: string; checked: boolean };\r\n\r\n/**\r\n * @element sky-checkbox\r\n *\r\n * @summary Form-associated checkbox with validation, indeterminate state, and customizable label/prefix/suffix rendering.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/checkbox\r\n *\r\n * @uiVModel checked value-changed detail=checked\r\n *\r\n * @slot - Default slot for the checkbox label or other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart wrapper - The wrapper element for the checkbox.\r\n * @csspart input - The native input element used for the checkbox.\r\n * @csspart label - The label element for the checkbox, used for styling.\r\n * @csspart box - The visual box for the checkbox, which includes the checkmark and indeterminate state.\r\n * @csspart checkmark - The checkmark icon that appears when the checkbox is checked.\r\n * @csspart indeterminate-line - The line representing the indeterminate state of the checkbox.\r\n * @csspart error-message - The error message displayed if the checkbox is invalid.\r\n *\r\n * @property {string} label - The label for the checkbox. Default: `\"\"`.\r\n * @property {boolean} checked - Whether the checkbox is checked. Default: `false`.\r\n * @property {boolean} indeterminate - Whether the checkbox is in the indeterminate state. Default: `false`.\r\n * @property {string} color - The color used for the checkbox and its checkmark. Default: `\"primary\"`.\r\n * @property {string} value - The value of the checkbox, which gets submitted with the form. Default: `\"\"`.\r\n * @property {boolean} showErrors - Whether to display validation error messages. Default: `false`.\r\n * @property {string} prefix - Optional prefix text or content before the label. Default: `\"\"`.\r\n * @property {string} suffix - Optional suffix text or content after the label. Default: `\"\"`.\r\n * @property {string} prefixColor - The color for the prefix text. Default: `\"\"`.\r\n * @property {string} suffixColor - The color for the suffix text. Default: `\"\"`.\r\n * @property {boolean} defaultChecked - Default checked state for reset operations. Default: `false`.\r\n * @method check Sets checked state to `true`.\r\n * @method uncheck Sets checked state to `false`.\r\n * @method toggle Toggles checked state.\r\n * @method reset Resets checkbox state to defaults and clears UI validation state.\r\n *\r\n * @fires {CustomEvent<SkyCheckboxValueChangedDetail>} value-changed - Fired when checked state changes; `detail.checked` is always boolean (use for v-model). `detail.value` is the form token when the `value` prop is set, else mirrors `checked`.\r\n * @fires {CustomEvent<SkyCheckboxValidationErrorDetail>} validation-error - Fired when validation errors are updated.\r\n * @fires {CustomEvent<SkyCheckboxValueClearedDetail>} value-cleared - Fired when checkbox is reset programmatically.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-checkbox\")\r\nexport class SkyCheckbox extends FormControlBase {\r\n static override shadowRootOptions = {\r\n ...LitElement.shadowRootOptions,\r\n delegatesFocus: true,\r\n };\r\n\r\n @property({ type: String }) label = \"\";\r\n @property({ type: String }) override id = \"\";\r\n @property({ type: String }) value = \"\";\r\n @property({ type: String }) color = \"primary\";\r\n @property({ type: Boolean }) defaultChecked = false;\r\n @property({ type: Boolean }) showErrors = false;\r\n @property({ type: String }) override prefix = \"\";\r\n @property({ type: String }) suffix = \"\";\r\n @property({ type: String }) prefixColor = \"\";\r\n @property({ type: String }) suffixColor = \"\";\r\n @property({ type: Boolean, reflect: true }) validationActive: boolean = false;\r\n @property({ type: Boolean, reflect: true }) invalid: boolean = false;\r\n @state() private _checked = false;\r\n @state() private _indeterminate = false;\r\n @state() private validationErrors: string[] = [];\r\n @state() private _hasMeaningfulSlot = false;\r\n\r\n private _inputElement?: HTMLInputElement;\r\n private _inputId = `sky-cb-${Math.random().toString(36).slice(2)}`;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n get checked() {\r\n return this._checked;\r\n }\r\n set checked(v: boolean) {\r\n const old = this._checked;\r\n this._checked = v;\r\n\r\n if (v && this.indeterminate) {\r\n this.indeterminate = false;\r\n if (this._inputElement) this._inputElement.indeterminate = false;\r\n }\r\n\r\n this.requestUpdate(\"checked\", old);\r\n\r\n if (this._inputElement) {\r\n this._inputElement.checked = v;\r\n this._inputElement.indeterminate = this.indeterminate;\r\n }\r\n\r\n this._updateVisualState();\r\n\r\n this.syncFormValue();\r\n this.syncValidity();\r\n }\r\n\r\n @property({ type: Boolean, reflect: true })\r\n get indeterminate() {\r\n return this._indeterminate;\r\n }\r\n set indeterminate(v: boolean) {\r\n const old = this._indeterminate;\r\n this._indeterminate = v;\r\n\r\n if (v && this.checked) this.checked = false;\r\n\r\n this.requestUpdate(\"indeterminate\", old);\r\n\r\n if (this._inputElement) this._inputElement.indeterminate = v;\r\n\r\n this._updateVisualState();\r\n\r\n this.syncValidity();\r\n }\r\n\r\n static override styles = css`\r\n :host {\r\n display: block;\r\n position: relative;\r\n font-family: var(--sky-font);\r\n }\r\n\r\n:host([readonly]) .cbx {\r\n cursor: default;\r\n}\r\n\r\n/* Show focus UI whenever anything inside is focused */\r\n:host(:focus-within) .cbx span:first-child,:host(:focus) .cbx span:first-child {\r\n box-shadow: var(--sky-focus-ring);\r\n border-color: var(--checkbox-color)!important;\r\n}\r\n\r\n .checkbox-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--sky-space-1, 5px);\r\n }\r\n\r\n :host([disabled]) {\r\n pointer-events: none;\r\n opacity: var(--sky-opacity-disabled, 0.6);\r\n }\r\n\r\n .cbx {\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n gap: var(--sky-space-1, 5px);\r\n transition: color 0.2s ease;\r\n font-family: var(--sky-font);\r\n font-size: var(--sky-font-size-sm);\r\n line-height: var(--sky-line-height-snug, 1.25);\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n .cbx span {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n\r\n .cbx span:first-child {\r\n position: relative;\r\n box-sizing: border-box;\r\n width: 18px;\r\n height: 18px;\r\n flex-shrink: 0;\r\n border-radius: min(6px, var(--sky-radius-primary));\r\n vertical-align: middle;\r\n background: var(--sky-glass-solid);\r\n border: 2px solid var(--sky-text-tertiary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transform: translateZ(0);\r\n contain: layout;\r\n overflow: hidden;\r\n transition: background-color 0.2s ease, border-color 0.2s ease,\r\n box-shadow 0.2s ease;\r\n }\r\n\r\n .cbx span:first-child svg {\r\n position: absolute;\r\n width: 12px;\r\n height: 10px;\r\n fill: none;\r\n stroke: var(--sky-text-white);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n stroke-dasharray: 16px;\r\n stroke-dashoffset: 16px;\r\n transition: stroke-dashoffset 0.2s ease, transform 0.2s ease;\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n .cbx:hover span:first-child {\r\n background-color: var(--sky-hover-primary);\r\n border-color: var(--sky-text-tertiary);\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + .cbx:hover span:first-child {\r\n box-shadow: var(--sky-box-shadow-hover);\r\n transition: box-shadow 0.2s ease;\r\n }\r\n\r\n .cbx span:first-child:before {\r\n content: \"\";\r\n inset: 0;\r\n width: auto;\r\n height: auto;\r\n background: var(--checkbox-color, var(--sky-active-primary));\r\n display: block;\r\n transform: scale(0);\r\n opacity: 0;\r\n border-radius: 50%;\r\n transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n position: absolute;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\ninput[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0;\r\n width: 1px;\r\n height: 1px;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n\r\n}\r\n\r\n input[type=\"checkbox\"]:focus-visible + .cbx span:first-child,\r\n input[type=\"checkbox\"]:focus + .cbx span:first-child {\r\n border-color: var(--sky-text-tertiary);\r\n outline:none;\r\n }\r\n\r\ninput[type=\"checkbox\"]:checked + .cbx span:first-child {\r\n background: var(--checkbox-color, var(--sky-active-primary));\r\n border-color: var(--checkbox-color, var(--sky-active-primary));\r\n\r\n transform: none; /* Ensure no transform applied */\r\n}\r\n\r\n input[type=\"checkbox\"]:checked + .cbx span:first-child svg.checkmark {\r\n stroke-dashoffset: 0;\r\n transition: stroke-dashoffset 0.2s ease-in-out 0.1s,\r\n transform 0.2s ease-in-out 0.1s;\r\n }\r\n\r\n input[type=\"checkbox\"]:not(:checked) + .cbx span:first-child svg.checkmark {\r\n transition: opacity 0.2s ease-in-out;\r\n opacity: 0;\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + .cbx span:first-child:before {\r\n transform: scale(3.5);\r\n opacity: 0;\r\n transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n }\r\n\r\n .cbx.checked span:first-child {\r\n background: var(--checkbox-color, var(--sky-active-primary));\r\n border-color: var(--checkbox-color, var(--sky-active-primary));\r\n\r\n}\r\n.cbx.checked span:first-child svg.checkmark {\r\n stroke-dashoffset: 0;\r\n transition: stroke-dashoffset 0.2s ease-in-out 0.1s,\r\n transform 0.2s ease-in-out 0.1s;\r\n}\r\n\r\n .indeterminate-line {\r\n width: 10px;\r\n height: 2px;\r\n background-color: var(--sky-text-white);\r\n position: absolute;\r\n border-radius: 1px;\r\n transition: opacity 0.2s ease, transform 0.2s ease;\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n\r\n .indeterminate-active {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n\r\n .checked .checkmark {\r\n stroke-dashoffset: 0;\r\n }\r\n\r\n .indeterminate .checkmark {\r\n display: none;\r\n }\r\n\r\n .indeterminate .indeterminate-line {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n\r\n\r\n .error-message {\r\n font-size: var(--sky-font-size-xs);\r\n color: var(--sky-danger-primary);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n pointer-events: none;\r\n margin-left: var(--sky-space-1, 5px);\r\n width: 100%;\r\n text-align: start;\r\n font-family: var(--sky-font);\r\n }\r\n :dir(rtl) .error-message {\r\n margin-right: var(--sky-space-1, 5px);\r\n margin-left: unset;\r\n }\r\n\r\n :host([validationactive]:invalid) .cbx span:first-child {\r\n\r\n border-color: var(--sky-danger-primary);\r\n }\r\n :host([validationactive]:invalid) .cbx span:first-child svg.checkmark {\r\n stroke-dashoffset: 0;\r\n }\r\n :host([validationactive]:invalid) .cbx span:first-child:before {\r\n transform: scale(3.5);\r\n opacity: 0;\r\n }\r\n :host([validationactive]:invalid) .error-message {\r\n display: block;\r\n }\r\n\r\n :host([indeterminate]) .indeterminate-line {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n :host([indeterminate]) .cbx span:first-child {\r\n background-color: var(--checkbox-color);\r\n border-color: var(--checkbox-color);\r\n }\r\n\r\n .checkbox-wrapper.no-text {\r\n gap: 0;\r\n}\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .cbx,\r\n .cbx span:first-child,\r\n .cbx span:first-child svg,\r\n .cbx span:first-child:before,\r\n .indeterminate-line {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n protected override getFormValue(): FormState {\r\n if (!this.name) return null;\r\n if (this.disabled) return null;\r\n\r\n if (!this.checked) return null;\r\n\r\n if (this.value && this.value.trim() !== \"\") return this.value;\r\n\r\n return \"on\";\r\n }\r\n\r\n protected override setValueFromFormState(state: FormState): void {\r\n if (state === null) {\r\n this.checked = false;\r\n this.indeterminate = false;\r\n return;\r\n }\r\n\r\n if (typeof state === \"string\") {\r\n if (this.value && this.value.trim() !== \"\") {\r\n this.checked = state === this.value;\r\n } else {\r\n this.checked = state === \"on\" || state === \"true\" || state === \"1\";\r\n }\r\n this.indeterminate = false;\r\n }\r\n }\r\n\r\n protected override getValidityAnchor(): HTMLElement | undefined {\r\n return (this.shadowRoot?.querySelector('input[type=\"checkbox\"]') as HTMLElement) ?? undefined;\r\n }\r\n\r\n protected override isEmpty(): boolean {\r\n return !this.checked;\r\n }\r\n\r\n protected override getNativeControl(): HTMLElement | null {\r\n return this.shadowRoot?.querySelector('input[type=\"checkbox\"]') as HTMLInputElement | null;\r\n }\r\n\r\n protected override onFormReset(): void {\r\n this.checked = this.defaultChecked;\r\n this.indeterminate = false;\r\n\r\n this.validationErrors = [];\r\n this.invalid = false;\r\n this.validationActive = false;\r\n }\r\n\r\n override willUpdate(changed: Map<string | number | symbol, unknown>): void {\r\n if (changed.has(\"color\")) {\r\n this.style.setProperty(\"--checkbox-color\", resolveColor(this.color));\r\n }\r\n }\r\n\r\n override updated(changed: Map<string, unknown>): void {\r\n super.updated(changed);\r\n\r\n if (!this._inputElement) {\r\n this._inputElement = this.shadowRoot?.querySelector(\r\n 'input[type=\"checkbox\"]'\r\n ) as HTMLInputElement;\r\n }\r\n\r\n if (this._inputElement) {\r\n this._inputElement.checked = this.checked;\r\n this._inputElement.indeterminate = this.indeterminate;\r\n this._inputElement.disabled = this.disabled || this.readonly;\r\n }\r\n\r\n this._updateVisualState();\r\n\r\n if (\r\n changed.has(\"checked\") ||\r\n changed.has(\"name\") ||\r\n changed.has(\"disabled\") ||\r\n changed.has(\"readonly\") ||\r\n changed.has(\"required\") ||\r\n changed.has(\"value\")\r\n ) {\r\n this.syncFormValue();\r\n this.syncValidity();\r\n }\r\n }\r\n\r\n private handleChange(event: Event): void {\r\n const target = event.target as HTMLInputElement;\r\n\r\n if (this.disabled || this.readonly) {\r\n if (this._inputElement) {\r\n this._inputElement.checked = this.checked;\r\n this._inputElement.indeterminate = this.indeterminate;\r\n }\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n\r\n this.checked = target.checked;\r\n\r\n // UI validation\r\n this.validateInput();\r\n\r\n const emittedValue =\r\n this.value && this.value.trim() !== \"\"\r\n ? this.checked ? this.value : undefined\r\n : this.checked;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyCheckboxValueChangedDetail>(\"value-changed\", {\r\n detail: { checked: this.checked, value: emittedValue },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n private validateInput(): boolean {\r\n if (!this.validationActive) return true;\r\n\r\n this.validationErrors = [];\r\n if (this.required && !this.checked) {\r\n this.validationErrors = [this.requiredMessage]; // from base\r\n }\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyCheckboxValidationErrorDetail>(\"validation-error\", {\r\n detail: { errors: [...this.validationErrors] },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n\r\n const cbx = this.shadowRoot?.querySelector(\".cbx\") as HTMLElement | null;\r\n if (this.validationErrors.length) cbx?.classList.add(\"invalid\");\r\n else cbx?.classList.remove(\"invalid\");\r\n\r\n const isValid = this.validationErrors.length === 0;\r\n this.invalid = !isValid;\r\n\r\n return isValid;\r\n }\r\n\r\n /**\r\n * Sets checked state to `true`.\r\n *\r\n * @returns {void}\r\n */\r\n public check(): void {\r\n if (this.disabled || this.readonly) return;\r\n this.checked = true;\r\n this.indeterminate = false;\r\n }\r\n\r\n /**\r\n * Sets checked state to `false`.\r\n *\r\n * @returns {void}\r\n */\r\n public uncheck(): void {\r\n if (this.disabled || this.readonly) return;\r\n this.checked = false;\r\n this.indeterminate = false;\r\n }\r\n\r\n /**\r\n * Toggles checked state.\r\n *\r\n * @returns {void}\r\n */\r\n public toggle(): void {\r\n if (this.disabled || this.readonly) return;\r\n this.checked = !this.checked;\r\n this.indeterminate = false;\r\n }\r\n\r\n /**\r\n * Resets checkbox state to defaults and clears UI validation state.\r\n *\r\n * @returns {void}\r\n */\r\n public reset(): void {\r\n this.onFormReset();\r\n this.syncFormValue();\r\n this.syncValidity();\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyCheckboxValueClearedDetail>(\"value-cleared\", {\r\n detail: { value: this.value, checked: this.checked },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n private _updateVisualState(): void {\r\n const cbx = this.shadowRoot?.querySelector(\".cbx\");\r\n if (!cbx) return;\r\n\r\n if (this.checked) {\r\n cbx.classList.add(\"checked\");\r\n cbx.classList.remove(\"indeterminate\");\r\n } else if (this.indeterminate) {\r\n cbx.classList.add(\"indeterminate\");\r\n cbx.classList.remove(\"checked\");\r\n } else {\r\n cbx.classList.remove(\"checked\", \"indeterminate\");\r\n }\r\n }\r\n\r\n private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n const nodes = slotEl.assignedNodes({ flatten: true });\r\n return nodes.some((n) =>\r\n n.nodeType === Node.ELEMENT_NODE\r\n ? true\r\n : (n.textContent ?? \"\").trim().length > 0\r\n );\r\n }\r\n\r\n private _onSlotChange = (e: Event) => {\r\n const slot = e.target as HTMLSlotElement;\r\n const next = this._slotHasMeaningfulContent(slot);\r\n if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\r\n };\r\n\r\n private get _hasTextContent(): boolean {\r\n return !!this.prefix || !!this.suffix || !!this.label || this._hasMeaningfulSlot;\r\n }\r\n\r\n private handleBlur = (_e: FocusEvent): void => {\r\n this.validationActive = true;\r\n this.validateInput();\r\n\r\n const cbx = this.shadowRoot?.querySelector(\".cbx\");\r\n cbx?.classList.remove(\"active\");\r\n\r\n this.syncValidity();\r\n };\r\n private _onKeyDown = (e: KeyboardEvent): void => {\r\n if (this.disabled || this.readonly) return;\r\n\r\n if (e.key === \" \" || e.key === \"Enter\") {\r\n e.preventDefault();\r\n this._inputElement?.click();\r\n }\r\n };\r\n\r\n\r\n override render() {\r\n const hasText = this._hasTextContent;\r\n const wrapperClasses = classMap({\r\n \"checkbox-wrapper\": true,\r\n \"no-text\": !hasText,\r\n });\r\n const labelClasses = classMap({\r\n cbx: true,\r\n checked: this.checked,\r\n indeterminate: this.indeterminate,\r\n });\r\n const boxClasses = classMap({\r\n box: true,\r\n \"box--checked\": this.checked,\r\n \"box--indeterminate\": this.indeterminate,\r\n \"box--invalid\": this.validationErrors.length > 0,\r\n });\r\n const boxPart =\r\n \"box\" +\r\n (this.checked ? \" box--checked\" : \"\") +\r\n (this.indeterminate ? \" box--indeterminate\" : \"\") +\r\n (this.validationErrors.length ? \" box--invalid\" : \"\");\r\n\r\n return html`\r\n <div class=${wrapperClasses} part=\"wrapper\">\r\n <input\r\n type=\"checkbox\"\r\n id=\"${this._inputId}\"\r\n class=\"inp-cbx\"\r\n part=\"input\"\r\n .checked=\"${this.checked}\"\r\n @blur=${this.handleBlur}\r\n @keydown=${this._onKeyDown}\r\n .disabled=\"${this.disabled || this.readonly}\"\r\n .value=\"${this.value}\"\r\n @change=${this.handleChange}\r\n aria-checked=${this.indeterminate ? \"mixed\" : this.checked}\r\n aria-invalid=\"${this.validationErrors.length > 0}\"\r\n aria-readonly=\"${this.readonly}\"\r\n />\r\n <label class=${labelClasses} part=\"label\" for=\"${this._inputId}\">\r\n <span part=${boxPart} class=${boxClasses}>\r\n <svg viewBox=\"0 0 12 10\" class=\"checkmark\" part=\"checkmark\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n <div class=\"indeterminate-line\" part=\"indeterminate-line\"></div>\r\n </span>\r\n <slot @slotchange=${this._onSlotChange}></slot>\r\n ${when(\r\n hasText,\r\n () => {\r\n const textStyle = styleMap({ textAlign: \"start\", color: \"var(--sky-text-primary)\" });\r\n const prefixStyle = styleMap({ color: this.prefixColor, display: \"inline-block\" });\r\n const suffixStyle = styleMap({ color: this.suffixColor, display: \"inline-block\" });\r\n return html`\r\n <span style=${textStyle} part=\"text\">\r\n <div style=${prefixStyle} part=\"prefix\">\r\n ${this.prefix}\r\n </div>\r\n ${this._hasMeaningfulSlot ? nothing : this.label}\r\n <div style=${suffixStyle} part=\"suffix\">\r\n ${this.suffix}\r\n </div>\r\n </span>\r\n `;\r\n },\r\n )}\r\n </label>\r\n </div>\r\n ${when(\r\n this.showErrors &&\r\n this.validationErrors.length > 0 &&\r\n this.validationActive,\r\n () => html`<div class=\"error-message\" part=\"error-message\">\r\n ${this.validationErrors[0]}\r\n </div>`,\r\n )}\r\n `;\r\n }\r\n}"],"names":["SkyCheckbox","FormControlBase","constructor","super","arguments","this","label","id","value","color","defaultChecked","showErrors","prefix","suffix","prefixColor","suffixColor","validationActive","invalid","_checked","_indeterminate","validationErrors","_hasMeaningfulSlot","_inputId","Math","random","toString","slice","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","handleBlur","_e","validateInput","cbx","shadowRoot","querySelector","classList","remove","syncValidity","_onKeyDown","disabled","readonly","key","preventDefault","_inputElement","click","checked","v","old","indeterminate","requestUpdate","_updateVisualState","syncFormValue","getFormValue","name","trim","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","onFormReset","willUpdate","changed","has","style","setProperty","resolveColor","updated","handleChange","event","stopPropagation","emittedValue","dispatchEvent","CustomEvent","detail","bubbles","composed","required","requiredMessage","errors","length","add","isValid","check","uncheck","toggle","reset","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","_hasTextContent","render","hasText","wrapperClasses","classMap","labelClasses","boxClasses","box","boxPart","html","when","textStyle","styleMap","textAlign","prefixStyle","display","suffixStyle","nothing","shadowRootOptions","LitElement","delegatesFocus","styles","css","__decorateClass","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"onBA+FO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,GAAAC,SAAAC,WAMuBC,KAAAC,MAAQ,GACRD,KAASE,GAAK,GACdF,KAAAG,MAAQ,GACRH,KAAAI,MAAQ,UACPJ,KAAAK,gBAAiB,EACjBL,KAAAM,YAAa,EACdN,KAASO,OAAS,GAClBP,KAAAQ,OAAS,GACTR,KAAAS,YAAc,GACdT,KAAAU,YAAc,GACEV,KAAAW,kBAA4B,EAC5BX,KAAAY,SAAmB,EACtDZ,KAAQa,UAAW,EACnBb,KAAQc,gBAAiB,EACzBd,KAAQe,iBAA6B,GACrCf,KAAQgB,oBAAqB,EAGtChB,KAAQiB,SAAW,UAAUC,KAAKC,SAASC,SAAS,IAAIC,MAAM,KAggB9DrB,KAAQsB,cAAiBC,IACvB,MAAMC,EAAOD,EAAEE,OACTC,EAAO1B,KAAK2B,0BAA0BH,GACxCE,IAAS1B,KAAKgB,qBAAoBhB,KAAKgB,mBAAqBU,IAOlE1B,KAAQ4B,WAAcC,IACpB7B,KAAKW,kBAAmB,EACxBX,KAAK8B,gBAEL,MAAMC,EAAM/B,KAAKgC,YAAYC,cAAc,QAC3CF,GAAKG,UAAUC,OAAO,UAEtBnC,KAAKoC,gBAEPpC,KAAQqC,WAAcd,IAChBvB,KAAKsC,UAAYtC,KAAKuC,UAEZ,MAAVhB,EAAEiB,KAAyB,UAAVjB,EAAEiB,MACrBjB,EAAEkB,iBACFzC,KAAK0C,eAAeC,SAExB,CAvhBA,WAAIC,GACF,OAAO5C,KAAKa,QACd,CACA,WAAI+B,CAAQC,GACV,MAAMC,EAAM9C,KAAKa,SACjBb,KAAKa,SAAWgC,EAEZA,GAAK7C,KAAK+C,gBACZ/C,KAAK+C,eAAgB,EACjB/C,KAAK0C,gBAAe1C,KAAK0C,cAAcK,eAAgB,IAG7D/C,KAAKgD,cAAc,UAAWF,GAE1B9C,KAAK0C,gBACP1C,KAAK0C,cAAcE,QAAUC,EAC7B7C,KAAK0C,cAAcK,cAAgB/C,KAAK+C,eAG1C/C,KAAKiD,qBAELjD,KAAKkD,gBACLlD,KAAKoC,cACP,CAGA,iBAAIW,GACF,OAAO/C,KAAKc,cACd,CACA,iBAAIiC,CAAcF,GAChB,MAAMC,EAAM9C,KAAKc,eACjBd,KAAKc,eAAiB+B,EAElBA,GAAK7C,KAAK4C,UAAS5C,KAAK4C,SAAU,GAEtC5C,KAAKgD,cAAc,gBAAiBF,GAEhC9C,KAAK0C,gBAAe1C,KAAK0C,cAAcK,cAAgBF,GAE3D7C,KAAKiD,qBAELjD,KAAKoC,cACP,CAwPmB,YAAAe,GACjB,OAAKnD,KAAKoD,KACNpD,KAAKsC,SAAiB,KAErBtC,KAAK4C,QAEN5C,KAAKG,OAA+B,KAAtBH,KAAKG,MAAMkD,OAAsBrD,KAAKG,MAEjD,KAJmB,KAHH,IAQzB,CAEmB,qBAAAmD,CAAsBC,GACvC,GAAc,OAAVA,EAGF,OAFAvD,KAAK4C,SAAU,OACf5C,KAAK+C,eAAgB,GAIF,iBAAVQ,IACLvD,KAAKG,OAA+B,KAAtBH,KAAKG,MAAMkD,OAC3BrD,KAAK4C,QAAUW,IAAUvD,KAAKG,MAE9BH,KAAK4C,QAAoB,OAAVW,GAA4B,SAAVA,GAA8B,MAAVA,EAEvDvD,KAAK+C,eAAgB,EAEzB,CAEmB,iBAAAS,GACjB,OAAQxD,KAAKgC,YAAYC,cAAc,gCAA6C,CACtF,CAEmB,OAAAwB,GACjB,OAAQzD,KAAK4C,OACf,CAEmB,gBAAAc,GACjB,OAAO1D,KAAKgC,YAAYC,cAAc,yBACxC,CAEmB,WAAA0B,GACjB3D,KAAK4C,QAAU5C,KAAKK,eACpBL,KAAK+C,eAAgB,EAErB/C,KAAKe,iBAAmB,GACxBf,KAAKY,SAAU,EACfZ,KAAKW,kBAAmB,CAC1B,CAES,UAAAiD,CAAWC,GACdA,EAAQC,IAAI,UACd9D,KAAK+D,MAAMC,YAAY,mBAAoBC,EAAajE,KAAKI,OAEjE,CAES,OAAA8D,CAAQL,GACf/D,MAAMoE,QAAQL,GAET7D,KAAK0C,gBACR1C,KAAK0C,cAAgB1C,KAAKgC,YAAYC,cACpC,2BAIAjC,KAAK0C,gBACP1C,KAAK0C,cAAcE,QAAU5C,KAAK4C,QAClC5C,KAAK0C,cAAcK,cAAgB/C,KAAK+C,cACxC/C,KAAK0C,cAAcJ,SAAWtC,KAAKsC,UAAYtC,KAAKuC,UAGtDvC,KAAKiD,sBAGHY,EAAQC,IAAI,YACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,aACZD,EAAQC,IAAI,aACZD,EAAQC,IAAI,aACZD,EAAQC,IAAI,YAEZ9D,KAAKkD,gBACLlD,KAAKoC,eAET,CAEQ,YAAA+B,CAAaC,GACnB,MAAM3C,EAAS2C,EAAM3C,OAErB,GAAIzB,KAAKsC,UAAYtC,KAAKuC,SAOxB,OANIvC,KAAK0C,gBACP1C,KAAK0C,cAAcE,QAAU5C,KAAK4C,QAClC5C,KAAK0C,cAAcK,cAAgB/C,KAAK+C,eAE1CqB,EAAM3B,sBACN2B,EAAMC,kBAIRrE,KAAK4C,QAAUnB,EAAOmB,QAGtB5C,KAAK8B,gBAEL,MAAMwC,EACJtE,KAAKG,OAA+B,KAAtBH,KAAKG,MAAMkD,OACrBrD,KAAK4C,QAAU5C,KAAKG,WAAQ,EAC5BH,KAAK4C,QAEX5C,KAAKuE,cACH,IAAIC,YAA2C,gBAAiB,CAC9DC,OAAQ,CAAE7B,QAAS5C,KAAK4C,QAASzC,MAAOmE,GACxCI,SAAS,EACTC,UAAU,IAGhB,CAEQ,aAAA7C,GACN,IAAK9B,KAAKW,iBAAkB,OAAO,EAEnCX,KAAKe,iBAAmB,GACpBf,KAAK4E,WAAa5E,KAAK4C,UACzB5C,KAAKe,iBAAmB,CAACf,KAAK6E,kBAGhC7E,KAAKuE,cACH,IAAIC,YAA8C,mBAAoB,CACpEC,OAAQ,CAAEK,OAAQ,IAAI9E,KAAKe,mBAC3B2D,SAAS,EACTC,UAAU,KAId,MAAM5C,EAAM/B,KAAKgC,YAAYC,cAAc,QACvCjC,KAAKe,iBAAiBgE,OAAQhD,GAAKG,UAAU8C,IAAI,WAChDjD,GAAKG,UAAUC,OAAO,WAE3B,MAAM8C,EAA2C,IAAjCjF,KAAKe,iBAAiBgE,OAGtC,OAFA/E,KAAKY,SAAWqE,EAETA,CACT,CAOO,KAAAC,GACDlF,KAAKsC,UAAYtC,KAAKuC,WAC1BvC,KAAK4C,SAAU,EACf5C,KAAK+C,eAAgB,EACvB,CAOO,OAAAoC,GACDnF,KAAKsC,UAAYtC,KAAKuC,WAC1BvC,KAAK4C,SAAU,EACf5C,KAAK+C,eAAgB,EACvB,CAOO,MAAAqC,GACDpF,KAAKsC,UAAYtC,KAAKuC,WAC1BvC,KAAK4C,SAAW5C,KAAK4C,QACrB5C,KAAK+C,eAAgB,EACvB,CAOO,KAAAsC,GACLrF,KAAK2D,cACL3D,KAAKkD,gBACLlD,KAAKoC,eAELpC,KAAKuE,cACH,IAAIC,YAA2C,gBAAiB,CAC9DC,OAAQ,CAAEtE,MAAOH,KAAKG,MAAOyC,QAAS5C,KAAK4C,SAC3C8B,SAAS,EACTC,UAAU,IAGhB,CAEQ,kBAAA1B,GACN,MAAMlB,EAAM/B,KAAKgC,YAAYC,cAAc,QACtCF,IAED/B,KAAK4C,SACPb,EAAIG,UAAU8C,IAAI,WAClBjD,EAAIG,UAAUC,OAAO,kBACZnC,KAAK+C,eACdhB,EAAIG,UAAU8C,IAAI,iBAClBjD,EAAIG,UAAUC,OAAO,YAErBJ,EAAIG,UAAUC,OAAO,UAAW,iBAEpC,CAEQ,yBAAAR,CAA0B2D,GAEhC,OADcA,EAAOC,cAAc,CAAEC,SAAS,IACjCC,KAAMC,GACjBA,EAAEC,WAAaC,KAAKC,eAEfH,EAAEI,aAAe,IAAIzC,OAAO0B,OAAS,EAE9C,CAQA,mBAAYgB,GACV,QAAS/F,KAAKO,UAAYP,KAAKQ,UAAYR,KAAKC,OAASD,KAAKgB,kBAChE,CAqBS,MAAAgF,GACP,MAAMC,EAAUjG,KAAK+F,gBACfG,EAAiBC,EAAS,CAC9B,oBAAoB,EACpB,WAAYF,IAERG,EAAeD,EAAS,CAC5BpE,KAAK,EACLa,QAAS5C,KAAK4C,QACdG,cAAe/C,KAAK+C,gBAEhBsD,EAAaF,EAAS,CAC1BG,KAAK,EACL,eAAgBtG,KAAK4C,QACrB,qBAAsB5C,KAAK+C,cAC3B,eAAgB/C,KAAKe,iBAAiBgE,OAAS,IAE3CwB,EACJ,OACCvG,KAAK4C,QAAU,gBAAkB,KACjC5C,KAAK+C,cAAgB,sBAAwB,KAC7C/C,KAAKe,iBAAiBgE,OAAS,gBAAkB,IAEpD,OAAOyB,CAAA;mBACQN;;;gBAGHlG,KAAKiB;;;sBAGCjB,KAAK4C;kBACT5C,KAAK4B;qBACF5B,KAAKqC;uBACHrC,KAAKsC,UAAYtC,KAAKuC;oBACzBvC,KAAKG;oBACLH,KAAKmE;yBACAnE,KAAK+C,cAAgB,QAAU/C,KAAK4C;0BACnC5C,KAAKe,iBAAiBgE,OAAS;2BAC9B/E,KAAKuC;;uBAET6D,uBAAkCpG,KAAKiB;uBACvCsF,WAAiBF;;;;;;8BAMVrG,KAAKsB;YACvBmF,EACAR,EACA,KACE,MAAMS,EAAYC,EAAS,CAAEC,UAAW,QAASxG,MAAO,4BAClDyG,EAAcF,EAAS,CAAEvG,MAAOJ,KAAKS,YAAaqG,QAAS,iBAC3DC,EAAcJ,EAAS,CAAEvG,MAAOJ,KAAKU,YAAaoG,QAAS,iBACjE,OAAON,CAAA;4BACOE;6BACCG;oBACT7G,KAAKO;;kBAEPP,KAAKgB,mBAAqBgG,EAAUhH,KAAKC;6BAC9B8G;oBACT/G,KAAKQ;;;;;;QAQjBiG,EACAzG,KAAKM,YACHN,KAAKe,iBAAiBgE,OAAS,GAC/B/E,KAAKW,iBACP,IAAM6F,CAAA;YACFxG,KAAKe,iBAAiB;;KAIhC,GAnoBWpB,EACKsH,kBAAoB,IAC/BC,EAAWD,kBACdE,gBAAgB,GAHPxH,EAuEKyH,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAjEGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANP9H,EAMiB+H,UAAA,QAAA,GACSJ,EAAA,CAApCC,EAAS,CAAEC,KAAMC,UAPP9H,EAO0B+H,UAAA,KAAA,GACTJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UARP9H,EAQiB+H,UAAA,QAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UATP9H,EASiB+H,UAAA,QAAA,GACCJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAVPhI,EAUkB+H,UAAA,iBAAA,GACAJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAXPhI,EAWkB+H,UAAA,aAAA,GACQJ,EAAA,CAApCC,EAAS,CAAEC,KAAMC,UAZP9H,EAY0B+H,UAAA,SAAA,GACTJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAbP9H,EAaiB+H,UAAA,SAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAdP9H,EAciB+H,UAAA,cAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAfP9H,EAeiB+H,UAAA,cAAA,GACgBJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KAhBzBjI,EAgBiC+H,UAAA,mBAAA,GACAJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KAjBzBjI,EAiBiC+H,UAAA,UAAA,GAC3BJ,EAAA,CAAhB/D,KAlBU5D,EAkBM+H,UAAA,WAAA,GACAJ,EAAA,CAAhB/D,KAnBU5D,EAmBM+H,UAAA,iBAAA,GACAJ,EAAA,CAAhB/D,KApBU5D,EAoBM+H,UAAA,mBAAA,GACAJ,EAAA,CAAhB/D,KArBU5D,EAqBM+H,UAAA,qBAAA,GAMbJ,EAAA,CADHC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KA1BzBjI,EA2BP+H,UAAA,UAAA,GA0BAJ,EAAA,CADHC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KApDzBjI,EAqDP+H,UAAA,gBAAA,GArDO/H,EAAN2H,EAAA,CADNO,EAAc,iBACFlI"}
|
|
1
|
+
{"version":3,"file":"sky-checkbox.js","sources":["../../src/sky-checkbox/sky-checkbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { property, customElement, state } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { FormControlBase, FormState } from \"../helper/internals/form-control-base\";\r\n\r\nexport interface CheckboxProperties {\r\n label: string;\r\n checked: boolean;\r\n disabled: boolean;\r\n indeterminate: boolean;\r\n id: string;\r\n value: string;\r\n color: string;\r\n required: boolean;\r\n validationErrors: string[];\r\n validationActive: boolean;\r\n defaultChecked: boolean;\r\n requiredMessage: string;\r\n showErrors: boolean;\r\n prefix: string;\r\n suffix: string;\r\n prefixColor: string;\r\n suffixColor: string;\r\n}\r\n/** `checked` is always the boolean model; `value` keeps form/legacy semantics (see `handleChange`). */\r\nexport type SkyCheckboxValueChangedDetail = {\r\n checked: boolean;\r\n value: string | boolean | undefined;\r\n};\r\nexport type SkyCheckboxValidationErrorDetail = { errors: string[] };\r\nexport type SkyCheckboxValueClearedDetail = { value: string; checked: boolean };\r\n\r\n/**\r\n * @element sky-checkbox\r\n *\r\n * @summary Form-associated checkbox with validation, indeterminate state, and customizable label/prefix/suffix rendering.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/checkbox\r\n *\r\n * @uiVModel checked value-changed detail=checked\r\n *\r\n * @slot - Default slot for the checkbox label or other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart wrapper - The wrapper element for the checkbox.\r\n * @csspart input - The native input element used for the checkbox.\r\n * @csspart label - The label element for the checkbox, used for styling.\r\n * @csspart box - The visual box for the checkbox, which includes the checkmark and indeterminate state.\r\n * @csspart checkmark - The checkmark icon that appears when the checkbox is checked.\r\n * @csspart indeterminate-line - The line representing the indeterminate state of the checkbox.\r\n * @csspart error-message - The error message displayed if the checkbox is invalid.\r\n *\r\n * @property {string} label - The label for the checkbox. Default: `\"\"`.\r\n * @property {boolean} checked - Whether the checkbox is checked. Default: `false`.\r\n * @property {boolean} indeterminate - Whether the checkbox is in the indeterminate state. Default: `false`.\r\n * @property {string} color - The color used for the checkbox and its checkmark. Default: `\"primary\"`.\r\n * @property {string} value - The value of the checkbox, which gets submitted with the form. Default: `\"\"`.\r\n * @property {boolean} showErrors - Whether to display validation error messages. Default: `false`.\r\n * @property {string} prefix - Optional prefix text or content before the label. Default: `\"\"`.\r\n * @property {string} suffix - Optional suffix text or content after the label. Default: `\"\"`.\r\n * @property {string} prefixColor - The color for the prefix text. Default: `\"\"`.\r\n * @property {string} suffixColor - The color for the suffix text. Default: `\"\"`.\r\n * @property {boolean} defaultChecked - Default checked state for reset operations. Default: `false`.\r\n * @method check Sets checked state to `true`.\r\n * @method uncheck Sets checked state to `false`.\r\n * @method toggle Toggles checked state.\r\n * @method reset Resets checkbox state to defaults and clears UI validation state.\r\n *\r\n * @fires {CustomEvent<SkyCheckboxValueChangedDetail>} value-changed - Fired when checked state changes; `detail.checked` is always boolean (use for v-model). `detail.value` is the form token when the `value` prop is set, else mirrors `checked`.\r\n * @fires {CustomEvent<SkyCheckboxValidationErrorDetail>} validation-error - Fired when validation errors are updated.\r\n * @fires {CustomEvent<SkyCheckboxValueClearedDetail>} value-cleared - Fired when checkbox is reset programmatically.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return <sky-checkbox label=\"Accept Terms\" required showerrors prefix=\"Legal\"></sky-checkbox>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-checkbox\")\r\nexport class SkyCheckbox extends FormControlBase {\r\n static override shadowRootOptions = {\r\n ...LitElement.shadowRootOptions,\r\n delegatesFocus: true,\r\n };\r\n\r\n @property({ type: String }) label = \"\";\r\n @property({ type: String }) override id = \"\";\r\n @property({ type: String }) value = \"\";\r\n @property({ type: String }) color = \"primary\";\r\n @property({ type: Boolean }) defaultChecked = false;\r\n @property({ type: Boolean }) showErrors = false;\r\n @property({ type: String }) override prefix = \"\";\r\n @property({ type: String }) suffix = \"\";\r\n @property({ type: String }) prefixColor = \"\";\r\n @property({ type: String }) suffixColor = \"\";\r\n @property({ type: Boolean, reflect: true }) validationActive: boolean = false;\r\n @property({ type: Boolean, reflect: true }) invalid: boolean = false;\r\n @state() private _checked = false;\r\n @state() private _indeterminate = false;\r\n @state() private validationErrors: string[] = [];\r\n @state() private _hasMeaningfulSlot = false;\r\n\r\n private _inputElement?: HTMLInputElement;\r\n private _inputId = `sky-cb-${Math.random().toString(36).slice(2)}`;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n get checked() {\r\n return this._checked;\r\n }\r\n set checked(v: boolean) {\r\n const old = this._checked;\r\n this._checked = v;\r\n\r\n if (v && this.indeterminate) {\r\n this.indeterminate = false;\r\n if (this._inputElement) this._inputElement.indeterminate = false;\r\n }\r\n\r\n this.requestUpdate(\"checked\", old);\r\n\r\n if (this._inputElement) {\r\n this._inputElement.checked = v;\r\n this._inputElement.indeterminate = this.indeterminate;\r\n }\r\n\r\n this._updateVisualState();\r\n\r\n this.syncFormValue();\r\n this.syncValidity();\r\n }\r\n\r\n @property({ type: Boolean, reflect: true })\r\n get indeterminate() {\r\n return this._indeterminate;\r\n }\r\n set indeterminate(v: boolean) {\r\n const old = this._indeterminate;\r\n this._indeterminate = v;\r\n\r\n if (v && this.checked) this.checked = false;\r\n\r\n this.requestUpdate(\"indeterminate\", old);\r\n\r\n if (this._inputElement) this._inputElement.indeterminate = v;\r\n\r\n this._updateVisualState();\r\n\r\n this.syncValidity();\r\n }\r\n\r\n static override styles = css`\r\n :host {\r\n display: block;\r\n position: relative;\r\n font-family: var(--sky-font);\r\n }\r\n\r\n:host([readonly]) .cbx {\r\n cursor: default;\r\n}\r\n\r\n/* Show focus UI whenever anything inside is focused */\r\n:host(:focus-within) .cbx span:first-child,:host(:focus) .cbx span:first-child {\r\n box-shadow: var(--sky-focus-ring);\r\n border-color: var(--checkbox-color)!important;\r\n}\r\n\r\n .checkbox-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--sky-space-1, 5px);\r\n }\r\n\r\n :host([disabled]) {\r\n pointer-events: none;\r\n opacity: var(--sky-opacity-disabled, 0.6);\r\n }\r\n\r\n .cbx {\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n gap: var(--sky-space-1, 5px);\r\n transition: color 0.2s ease;\r\n font-family: var(--sky-font);\r\n font-size: var(--sky-font-size-sm);\r\n line-height: var(--sky-line-height-snug, 1.25);\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n .cbx span {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n\r\n .cbx span:first-child {\r\n position: relative;\r\n box-sizing: border-box;\r\n width: 18px;\r\n height: 18px;\r\n flex-shrink: 0;\r\n border-radius: min(6px, var(--sky-radius-primary));\r\n vertical-align: middle;\r\n background: var(--sky-glass-solid);\r\n border: 2px solid var(--sky-text-tertiary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transform: translateZ(0);\r\n contain: layout;\r\n overflow: hidden;\r\n transition: background-color 0.2s ease, border-color 0.2s ease,\r\n box-shadow 0.2s ease;\r\n }\r\n\r\n .cbx span:first-child svg {\r\n position: absolute;\r\n width: 12px;\r\n height: 10px;\r\n fill: none;\r\n stroke: var(--sky-on-color-fallback-light, var(--sky-text-white));\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n stroke-dasharray: 16px;\r\n stroke-dashoffset: 16px;\r\n transition: stroke-dashoffset 0.2s ease, transform 0.2s ease;\r\n transform: translate3d(0, 0, 0);\r\n }\r\n\r\n .cbx:hover span:first-child {\r\n background-color: var(--sky-hover-primary);\r\n border-color: var(--sky-text-tertiary);\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + .cbx:hover span:first-child {\r\n box-shadow: var(--sky-box-shadow-hover);\r\n transition: box-shadow 0.2s ease;\r\n }\r\n\r\n .cbx span:first-child:before {\r\n content: \"\";\r\n inset: 0;\r\n width: auto;\r\n height: auto;\r\n background: var(--checkbox-color, var(--sky-active-primary));\r\n display: block;\r\n transform: scale(0);\r\n opacity: 0;\r\n border-radius: 50%;\r\n transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n position: absolute;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\ninput[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0;\r\n width: 1px;\r\n height: 1px;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n\r\n}\r\n\r\n input[type=\"checkbox\"]:focus-visible + .cbx span:first-child,\r\n input[type=\"checkbox\"]:focus + .cbx span:first-child {\r\n border-color: var(--sky-text-tertiary);\r\n outline:none;\r\n }\r\n\r\ninput[type=\"checkbox\"]:checked + .cbx span:first-child {\r\n background: var(--checkbox-color, var(--sky-active-primary));\r\n border-color: var(--checkbox-color, var(--sky-active-primary));\r\n\r\n transform: none; /* Ensure no transform applied */\r\n}\r\n\r\n input[type=\"checkbox\"]:checked + .cbx span:first-child svg.checkmark {\r\n stroke-dashoffset: 0;\r\n transition: stroke-dashoffset 0.2s ease-in-out 0.1s,\r\n transform 0.2s ease-in-out 0.1s;\r\n }\r\n\r\n input[type=\"checkbox\"]:not(:checked) + .cbx span:first-child svg.checkmark {\r\n transition: opacity 0.2s ease-in-out;\r\n opacity: 0;\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + .cbx span:first-child:before {\r\n transform: scale(3.5);\r\n opacity: 0;\r\n transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n }\r\n\r\n .cbx.checked span:first-child {\r\n background: var(--checkbox-color, var(--sky-active-primary));\r\n border-color: var(--checkbox-color, var(--sky-active-primary));\r\n\r\n}\r\n.cbx.checked span:first-child svg.checkmark {\r\n stroke-dashoffset: 0;\r\n transition: stroke-dashoffset 0.2s ease-in-out 0.1s,\r\n transform 0.2s ease-in-out 0.1s;\r\n}\r\n\r\n .indeterminate-line {\r\n width: 10px;\r\n height: 2px;\r\n background-color: var(--sky-on-color-fallback-light, var(--sky-text-white));\r\n position: absolute;\r\n border-radius: 1px;\r\n transition: opacity 0.2s ease, transform 0.2s ease;\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n\r\n .indeterminate-active {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n\r\n .checked .checkmark {\r\n stroke-dashoffset: 0;\r\n }\r\n\r\n .indeterminate .checkmark {\r\n display: none;\r\n }\r\n\r\n .indeterminate .indeterminate-line {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n\r\n\r\n .error-message {\r\n font-size: var(--sky-font-size-xs);\r\n color: var(--sky-danger-primary);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n pointer-events: none;\r\n margin-left: var(--sky-space-1, 5px);\r\n width: 100%;\r\n text-align: start;\r\n font-family: var(--sky-font);\r\n }\r\n :dir(rtl) .error-message {\r\n margin-right: var(--sky-space-1, 5px);\r\n margin-left: unset;\r\n }\r\n\r\n :host([validationactive]:invalid) .cbx span:first-child {\r\n\r\n border-color: var(--sky-danger-primary);\r\n }\r\n :host([validationactive]:invalid) .cbx span:first-child svg.checkmark {\r\n stroke-dashoffset: 0;\r\n }\r\n :host([validationactive]:invalid) .cbx span:first-child:before {\r\n transform: scale(3.5);\r\n opacity: 0;\r\n }\r\n :host([validationactive]:invalid) .error-message {\r\n display: block;\r\n }\r\n\r\n :host([indeterminate]) .indeterminate-line {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n :host([indeterminate]) .cbx span:first-child {\r\n background-color: var(--checkbox-color);\r\n border-color: var(--checkbox-color);\r\n }\r\n\r\n .checkbox-wrapper.no-text {\r\n gap: 0;\r\n}\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .cbx,\r\n .cbx span:first-child,\r\n .cbx span:first-child svg,\r\n .cbx span:first-child:before,\r\n .indeterminate-line {\r\n transition: none;\r\n }\r\n }\r\n\r\n ${unsafeCSS(\r\n cssOnFillEnhance([\r\n {\r\n selector:\r\n 'input[type=\"checkbox\"]:checked + .cbx span:first-child svg, .cbx.checked span:first-child svg',\r\n fillVar: \"var(--checkbox-color, var(--sky-active-primary))\",\r\n property: \"stroke\",\r\n },\r\n {\r\n selector: \".indeterminate-line, .indeterminate .indeterminate-line\",\r\n fillVar: \"var(--checkbox-color, var(--sky-active-primary))\",\r\n property: \"background-color\",\r\n },\r\n ]),\r\n )}\r\n `;\r\n\r\n protected override getFormValue(): FormState {\r\n if (!this.name) return null;\r\n if (this.disabled) return null;\r\n\r\n if (!this.checked) return null;\r\n\r\n if (this.value && this.value.trim() !== \"\") return this.value;\r\n\r\n return \"on\";\r\n }\r\n\r\n protected override setValueFromFormState(state: FormState): void {\r\n if (state === null) {\r\n this.checked = false;\r\n this.indeterminate = false;\r\n return;\r\n }\r\n\r\n if (typeof state === \"string\") {\r\n if (this.value && this.value.trim() !== \"\") {\r\n this.checked = state === this.value;\r\n } else {\r\n this.checked = state === \"on\" || state === \"true\" || state === \"1\";\r\n }\r\n this.indeterminate = false;\r\n }\r\n }\r\n\r\n protected override getValidityAnchor(): HTMLElement | undefined {\r\n return (this.shadowRoot?.querySelector('input[type=\"checkbox\"]') as HTMLElement) ?? undefined;\r\n }\r\n\r\n protected override isEmpty(): boolean {\r\n return !this.checked;\r\n }\r\n\r\n protected override getNativeControl(): HTMLElement | null {\r\n return this.shadowRoot?.querySelector('input[type=\"checkbox\"]') as HTMLInputElement | null;\r\n }\r\n\r\n protected override onFormReset(): void {\r\n this.checked = this.defaultChecked;\r\n this.indeterminate = false;\r\n\r\n this.validationErrors = [];\r\n this.invalid = false;\r\n this.validationActive = false;\r\n }\r\n\r\n override willUpdate(changed: Map<string | number | symbol, unknown>): void {\r\n if (changed.has(\"color\")) {\r\n this.style.setProperty(\"--checkbox-color\", resolveColor(this.color));\r\n }\r\n }\r\n\r\n override updated(changed: Map<string, unknown>): void {\r\n super.updated(changed);\r\n\r\n if (!this._inputElement) {\r\n this._inputElement = this.shadowRoot?.querySelector(\r\n 'input[type=\"checkbox\"]'\r\n ) as HTMLInputElement;\r\n }\r\n\r\n if (this._inputElement) {\r\n this._inputElement.checked = this.checked;\r\n this._inputElement.indeterminate = this.indeterminate;\r\n this._inputElement.disabled = this.disabled || this.readonly;\r\n }\r\n\r\n this._updateVisualState();\r\n\r\n if (\r\n changed.has(\"checked\") ||\r\n changed.has(\"name\") ||\r\n changed.has(\"disabled\") ||\r\n changed.has(\"readonly\") ||\r\n changed.has(\"required\") ||\r\n changed.has(\"value\")\r\n ) {\r\n this.syncFormValue();\r\n this.syncValidity();\r\n }\r\n }\r\n\r\n private handleChange(event: Event): void {\r\n const target = event.target as HTMLInputElement;\r\n\r\n if (this.disabled || this.readonly) {\r\n if (this._inputElement) {\r\n this._inputElement.checked = this.checked;\r\n this._inputElement.indeterminate = this.indeterminate;\r\n }\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n\r\n this.checked = target.checked;\r\n\r\n // UI validation\r\n this.validateInput();\r\n\r\n const emittedValue =\r\n this.value && this.value.trim() !== \"\"\r\n ? this.checked ? this.value : undefined\r\n : this.checked;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyCheckboxValueChangedDetail>(\"value-changed\", {\r\n detail: { checked: this.checked, value: emittedValue },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n private validateInput(): boolean {\r\n if (!this.validationActive) return true;\r\n\r\n this.validationErrors = [];\r\n if (this.required && !this.checked) {\r\n this.validationErrors = [this.requiredMessage]; // from base\r\n }\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyCheckboxValidationErrorDetail>(\"validation-error\", {\r\n detail: { errors: [...this.validationErrors] },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n\r\n const cbx = this.shadowRoot?.querySelector(\".cbx\") as HTMLElement | null;\r\n if (this.validationErrors.length) cbx?.classList.add(\"invalid\");\r\n else cbx?.classList.remove(\"invalid\");\r\n\r\n const isValid = this.validationErrors.length === 0;\r\n this.invalid = !isValid;\r\n\r\n return isValid;\r\n }\r\n\r\n /**\r\n * Sets checked state to `true`.\r\n *\r\n * @returns {void}\r\n */\r\n public check(): void {\r\n if (this.disabled || this.readonly) return;\r\n this.checked = true;\r\n this.indeterminate = false;\r\n }\r\n\r\n /**\r\n * Sets checked state to `false`.\r\n *\r\n * @returns {void}\r\n */\r\n public uncheck(): void {\r\n if (this.disabled || this.readonly) return;\r\n this.checked = false;\r\n this.indeterminate = false;\r\n }\r\n\r\n /**\r\n * Toggles checked state.\r\n *\r\n * @returns {void}\r\n */\r\n public toggle(): void {\r\n if (this.disabled || this.readonly) return;\r\n this.checked = !this.checked;\r\n this.indeterminate = false;\r\n }\r\n\r\n /**\r\n * Resets checkbox state to defaults and clears UI validation state.\r\n *\r\n * @returns {void}\r\n */\r\n public reset(): void {\r\n this.onFormReset();\r\n this.syncFormValue();\r\n this.syncValidity();\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SkyCheckboxValueClearedDetail>(\"value-cleared\", {\r\n detail: { value: this.value, checked: this.checked },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n private _updateVisualState(): void {\r\n const cbx = this.shadowRoot?.querySelector(\".cbx\");\r\n if (!cbx) return;\r\n\r\n if (this.checked) {\r\n cbx.classList.add(\"checked\");\r\n cbx.classList.remove(\"indeterminate\");\r\n } else if (this.indeterminate) {\r\n cbx.classList.add(\"indeterminate\");\r\n cbx.classList.remove(\"checked\");\r\n } else {\r\n cbx.classList.remove(\"checked\", \"indeterminate\");\r\n }\r\n }\r\n\r\n private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n const nodes = slotEl.assignedNodes({ flatten: true });\r\n return nodes.some((n) =>\r\n n.nodeType === Node.ELEMENT_NODE\r\n ? true\r\n : (n.textContent ?? \"\").trim().length > 0\r\n );\r\n }\r\n\r\n private _onSlotChange = (e: Event) => {\r\n const slot = e.target as HTMLSlotElement;\r\n const next = this._slotHasMeaningfulContent(slot);\r\n if (next !== this._hasMeaningfulSlot) this._hasMeaningfulSlot = next;\r\n };\r\n\r\n private get _hasTextContent(): boolean {\r\n return !!this.prefix || !!this.suffix || !!this.label || this._hasMeaningfulSlot;\r\n }\r\n\r\n private handleBlur = (_e: FocusEvent): void => {\r\n this.validationActive = true;\r\n this.validateInput();\r\n\r\n const cbx = this.shadowRoot?.querySelector(\".cbx\");\r\n cbx?.classList.remove(\"active\");\r\n\r\n this.syncValidity();\r\n };\r\n private _onKeyDown = (e: KeyboardEvent): void => {\r\n if (this.disabled || this.readonly) return;\r\n\r\n if (e.key === \" \" || e.key === \"Enter\") {\r\n e.preventDefault();\r\n this._inputElement?.click();\r\n }\r\n };\r\n\r\n\r\n override render() {\r\n const hasText = this._hasTextContent;\r\n const wrapperClasses = classMap({\r\n \"checkbox-wrapper\": true,\r\n \"no-text\": !hasText,\r\n });\r\n const labelClasses = classMap({\r\n cbx: true,\r\n checked: this.checked,\r\n indeterminate: this.indeterminate,\r\n });\r\n const boxClasses = classMap({\r\n box: true,\r\n \"box--checked\": this.checked,\r\n \"box--indeterminate\": this.indeterminate,\r\n \"box--invalid\": this.validationErrors.length > 0,\r\n });\r\n const boxPart =\r\n \"box\" +\r\n (this.checked ? \" box--checked\" : \"\") +\r\n (this.indeterminate ? \" box--indeterminate\" : \"\") +\r\n (this.validationErrors.length ? \" box--invalid\" : \"\");\r\n\r\n return html`\r\n <div class=${wrapperClasses} part=\"wrapper\">\r\n <input\r\n type=\"checkbox\"\r\n id=\"${this._inputId}\"\r\n class=\"inp-cbx\"\r\n part=\"input\"\r\n .checked=\"${this.checked}\"\r\n @blur=${this.handleBlur}\r\n @keydown=${this._onKeyDown}\r\n .disabled=\"${this.disabled || this.readonly}\"\r\n .value=\"${this.value}\"\r\n @change=${this.handleChange}\r\n aria-checked=${this.indeterminate ? \"mixed\" : this.checked}\r\n aria-invalid=\"${this.validationErrors.length > 0}\"\r\n aria-readonly=\"${this.readonly}\"\r\n />\r\n <label class=${labelClasses} part=\"label\" for=\"${this._inputId}\">\r\n <span part=${boxPart} class=${boxClasses}>\r\n <svg viewBox=\"0 0 12 10\" class=\"checkmark\" part=\"checkmark\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n <div class=\"indeterminate-line\" part=\"indeterminate-line\"></div>\r\n </span>\r\n <slot @slotchange=${this._onSlotChange}></slot>\r\n ${when(\r\n hasText,\r\n () => {\r\n const textStyle = styleMap({ textAlign: \"start\", color: \"var(--sky-text-primary)\" });\r\n const prefixStyle = styleMap({ color: this.prefixColor, display: \"inline-block\" });\r\n const suffixStyle = styleMap({ color: this.suffixColor, display: \"inline-block\" });\r\n return html`\r\n <span style=${textStyle} part=\"text\">\r\n <div style=${prefixStyle} part=\"prefix\">\r\n ${this.prefix}\r\n </div>\r\n ${this._hasMeaningfulSlot ? nothing : this.label}\r\n <div style=${suffixStyle} part=\"suffix\">\r\n ${this.suffix}\r\n </div>\r\n </span>\r\n `;\r\n },\r\n )}\r\n </label>\r\n </div>\r\n ${when(\r\n this.showErrors &&\r\n this.validationErrors.length > 0 &&\r\n this.validationActive,\r\n () => html`<div class=\"error-message\" part=\"error-message\">\r\n ${this.validationErrors[0]}\r\n </div>`,\r\n )}\r\n `;\r\n }\r\n}"],"names":["SkyCheckbox","FormControlBase","constructor","super","arguments","this","label","id","value","color","defaultChecked","showErrors","prefix","suffix","prefixColor","suffixColor","validationActive","invalid","_checked","_indeterminate","validationErrors","_hasMeaningfulSlot","_inputId","Math","random","toString","slice","_onSlotChange","e","slot","target","next","_slotHasMeaningfulContent","handleBlur","_e","validateInput","cbx","shadowRoot","querySelector","classList","remove","syncValidity","_onKeyDown","disabled","readonly","key","preventDefault","_inputElement","click","checked","v","old","indeterminate","requestUpdate","_updateVisualState","syncFormValue","getFormValue","name","trim","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","onFormReset","willUpdate","changed","has","style","setProperty","resolveColor","updated","handleChange","event","stopPropagation","emittedValue","dispatchEvent","CustomEvent","detail","bubbles","composed","required","requiredMessage","errors","length","add","isValid","check","uncheck","toggle","reset","slotEl","assignedNodes","flatten","some","n","nodeType","Node","ELEMENT_NODE","textContent","_hasTextContent","render","hasText","wrapperClasses","classMap","labelClasses","boxClasses","box","boxPart","html","when","textStyle","styleMap","textAlign","prefixStyle","display","suffixStyle","nothing","shadowRootOptions","LitElement","delegatesFocus","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","property","__decorateClass","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{unsafeCSS as o,css as t,LitElement as e,nothing as i,html as r}from"lit";import{property as s,customElement as n}from"lit/decorators.js";import{when as a}from"lit/directives/when.js";import{styleMap as l}from"lit/directives/style-map.js";import{classMap as c}from"lit/directives/class-map.js";import{resolveColor as p,resolveTextColorForToken as h,isDefaultColorToken as d,resolveInkColorForToken as y,resolveAccentColorForToken as f}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as u}from"../helper/utils/contrast-color.js";import{resolveRadius as g}from"../helper/utils/size-resolver.js";import{SkyIcon as v}from"../sky-icon/sky-icon.js";var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,x=(o,t,e,i)=>{for(var r,s=i>1?void 0:i?m(t,e):t,n=o.length-1;n>=0;n--)(r=o[n])&&(s=(i?r(t,e,s):r(s))||s);return i&&s&&b(t,e,s),s};let k=class extends e{constructor(){super(...arguments),this.label="",this.removable=!1,this.color="primary",this.radius="full",this.size="md",this.iconL=null,this.iconR=null,this.loading=!1,this.disabled=!1,this.variant="flat",this._onSlotChange=()=>{this.requestUpdate()}}updated(){const o=p(this.color),t=h(this.color);this.style.setProperty("--chip-bg-color",o),this.style.setProperty("--chip-text-color",t),d(this.color)?(this.style.setProperty("--chip-ink-color",y(this.color)),this.style.setProperty("--chip-accent-color",f(this.color)),this.style.setProperty("--chip-fill-color","var(--sky-hover-tertiary)")):(this.style.removeProperty("--chip-ink-color"),this.style.removeProperty("--chip-accent-color"),this.style.removeProperty("--chip-fill-color"))}_resolveSize(o){const t={xs:{padding:"2px 4px",fontSize:"11px"},sm:{padding:"3px 6px",fontSize:"12px"},md:{padding:"4px 8px",fontSize:"13px"},lg:{padding:"5px 10px",fontSize:"14px"},xl:{padding:"6px 12px",fontSize:"15px"}};if(t[o])return t[o];const e=String(o).trim().match(/^([\d.]+)(px|rem|em)?$/i),i=e?.[2]||"px",r=e?parseFloat(e[1]):13,s=`${r}${i}`,n=(o,t,e)=>Math.max(t,Math.min(e,o)),a=n(.4*r,2,10),l=n(.8*r,6,16),c=o=>`${Math.round(100*o)/100}${i}`;return{padding:`${c(a)} ${c(l)}`,fontSize:s}}removeChip(){const o=new CustomEvent("chip-removed",{detail:{label:this.label},bubbles:!0,composed:!0});this.dispatchEvent(o),this.remove()}_slotHasMeaningfulContent(o){return o.assignedNodes({flatten:!0}).some(o=>o.nodeType===Node.ELEMENT_NODE||(o.textContent??"").trim().length>0)}_hasPrefixSlotContent(){if(this.querySelector('[slot="prefix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="prefix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasSuffixSlotContent(){if(this.querySelector('[slot="suffix"]'))return!0;const o=this.shadowRoot?.querySelector('slot[name="suffix"]');return!!o&&this._slotHasMeaningfulContent(o)}_hasDefaultSlotContent(){for(const o of Array.from(this.childNodes)){if(o.nodeType===Node.ELEMENT_NODE){const t=o.getAttribute("slot");if("prefix"===t||"suffix"===t)continue;return!0}if((o.textContent??"").trim().length>0)return!0}const o=this.shadowRoot?.querySelector("slot:not([name])");return!!o&&this._slotHasMeaningfulContent(o)}render(){const o=this._resolveSize(this.size),t={padding:o.padding,borderRadius:g(this.radius),fontSize:o.fontSize};return r`
|
|
2
2
|
<div
|
|
3
|
-
class=${
|
|
4
|
-
style=${
|
|
3
|
+
class=${c({chip:!0,[this.variant]:!0,loading:this.loading})}
|
|
4
|
+
style=${l(t)}
|
|
5
5
|
part="chip"
|
|
6
6
|
>
|
|
7
7
|
<slot name="prefix" @slotchange=${this._onSlotChange}></slot>
|
|
8
|
-
${
|
|
8
|
+
${a(!this._hasPrefixSlotContent()&&this.iconL,()=>r`
|
|
9
9
|
<sky-icon class="icon" part="icon" icon="${this.iconL}"></sky-icon>
|
|
10
10
|
`)}
|
|
11
11
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
12
|
-
${this._hasDefaultSlotContent()?
|
|
12
|
+
${this._hasDefaultSlotContent()?i:this.label}
|
|
13
13
|
<slot name="suffix" @slotchange=${this._onSlotChange}></slot>
|
|
14
|
-
${
|
|
14
|
+
${a(!this._hasSuffixSlotContent()&&this.iconR,()=>r`
|
|
15
15
|
<sky-icon class="icon icon-right" part="icon" icon="${this.iconR}"></sky-icon>
|
|
16
16
|
`)}
|
|
17
|
-
${
|
|
17
|
+
${a(this.removable,()=>r`
|
|
18
18
|
<button
|
|
19
19
|
class="close-button"
|
|
20
20
|
part="close-button"
|
|
@@ -25,13 +25,13 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
|
|
|
25
25
|
<sky-icon icon="ion:close"></sky-icon>
|
|
26
26
|
</button>
|
|
27
27
|
`)}
|
|
28
|
-
${
|
|
28
|
+
${a(this.loading,()=>r`
|
|
29
29
|
<div class="loading-overlay" part="loading-overlay">
|
|
30
30
|
<div class="loading-spinner" part="loading-spinner"></div>
|
|
31
31
|
</div>
|
|
32
32
|
`)}
|
|
33
33
|
</div>
|
|
34
|
-
`}};
|
|
34
|
+
`}};k.dependencies={"sky-icon":v},k.styles=t`
|
|
35
35
|
:host {
|
|
36
36
|
display: inline-block;
|
|
37
37
|
font-family: var(--sky-font);
|
|
@@ -136,7 +136,7 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
|
|
|
136
136
|
.loading-spinner {
|
|
137
137
|
width: 14px;
|
|
138
138
|
height: 14px;
|
|
139
|
-
border: 2px solid var(--sky-text-
|
|
139
|
+
border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));
|
|
140
140
|
border-top-color: var(--chip-bg-color);
|
|
141
141
|
border-radius: var(--sky-radius-full);
|
|
142
142
|
animation: spin 0.8s linear infinite;
|
|
@@ -224,5 +224,8 @@ import{css as o,LitElement as t,nothing as e,html as i}from"lit";import{property
|
|
|
224
224
|
border-radius: var(--sky-radius-full);
|
|
225
225
|
background-color: var(--chip-accent-color, var(--chip-bg-color));
|
|
226
226
|
}
|
|
227
|
-
|
|
227
|
+
|
|
228
|
+
/* Solid / shadow chips: enhance label + icon FG against fill. */
|
|
229
|
+
${o(u([{selector:".chip.solid, .chip.shadow",fillVar:"--chip-bg-color"},{selector:".chip.solid .icon, .chip.shadow .icon",fillVar:"--chip-bg-color"}]))}
|
|
230
|
+
`,x([s({type:String})],k.prototype,"label",2),x([s({type:Boolean})],k.prototype,"removable",2),x([s({type:String})],k.prototype,"color",2),x([s({type:String})],k.prototype,"radius",2),x([s({type:String})],k.prototype,"size",2),x([s({type:String})],k.prototype,"iconL",2),x([s({type:String})],k.prototype,"iconR",2),x([s({type:Boolean})],k.prototype,"loading",2),x([s({type:Boolean,reflect:!0})],k.prototype,"disabled",2),x([s({type:String,reflect:!0})],k.prototype,"variant",2),k=x([n("sky-chip")],k);export{k as SkyChip};
|
|
228
231
|
//# sourceMappingURL=sky-chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport {\r\n isDefaultColorToken,\r\n resolveAccentColorForToken,\r\n resolveColor,\r\n resolveInkColorForToken,\r\n resolveTextColorForToken,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyChipVariant =\r\n | \"solid\"\r\n | \"flat\"\r\n | \"shadow\"\r\n | \"bordered\"\r\n | \"faded\"\r\n | \"light\"\r\n | \"dot\";\r\nexport type SkyChipRemovedEventDetail = { label: string };\r\n\r\n/**\r\n * @element sky-chip\r\n *\r\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/chip\r\n * @dependency sky-icon\r\n *\r\n * @slot - Default slot for the chip label or any other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart chip - The visual representation of the chip component.\r\n * @csspart icon - The icons displayed within the chip.\r\n * @csspart close-button - The button for removing the chip.\r\n * @csspart loading-spinner - The spinner that appears during loading.\r\n * @csspart error-message - The error message displayed for invalid chips.\r\n *\r\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\r\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\r\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\r\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\r\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\r\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\r\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\r\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\r\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\r\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\r\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\r\n *\r\n * @Behavior\r\n * - Uses default slot content when present, otherwise falls back to `label`.\r\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\r\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\r\n * - Resolves color tokens and radius/size presets to CSS values at render time.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-chip\")\r\nexport class SkyChip extends LitElement {\r\n\r\n static dependencies: Record<string, CustomElementConstructor> = {\r\n \"sky-icon\": SkyIcon,\r\n };\r\n\r\n @property({ type: String }) label: string = \"\";\r\n @property({ type: Boolean }) removable: boolean = false;\r\n\r\n /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\r\n @property({ type: String }) color: string = \"primary\";\r\n\r\n /** Radius can be any CSS radius value */\r\n @property({ type: String }) radius: string = \"full\";\r\n\r\n /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\r\n @property({ type: String }) size: string = \"md\";\r\n\r\n @property({ type: String }) iconL: string | null = null;\r\n @property({ type: String }) iconR: string | null = null;\r\n @property({ type: Boolean }) loading: boolean = false;\r\n @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\r\n\r\n static override styles = css`\r\n :host {\r\n display: inline-block;\r\n font-family: var(--sky-font);\r\n z-index: 1;\r\n }\r\n\r\n :host([disabled]) {\r\n pointer-events: none;\r\n opacity: var(--sky-opacity-disabled, 0.6);\r\n }\r\n\r\n .chip {\r\n position: relative;\r\n display: flex;\r\n gap: 2px;\r\n width: max-content;\r\n align-items: center;\r\n border-radius: var(--sky-radius-secondary);\r\n color: var(--chip-text-color);\r\n font-weight: var(--sky-font-weight-medium, 500);\r\n transition: background-color 0.3s ease, color 0.3s ease,\r\n box-shadow 0.2s ease, transform 0.2s ease;\r\n cursor: pointer;\r\n background-color: var(--chip-bg-color);\r\n }\r\n\r\n .close-button {\r\n position: relative;\r\n display: flex;\r\n height: 18px;\r\n width: 18px;\r\n justify-content: center;\r\n font-size: inherit;\r\n align-items: center;\r\n background-color: var(--sky-hover-primary);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n border: none;\r\n border-radius: var(--sky-radius-full);\r\n cursor: pointer;\r\n color: var(--sky-text-primary);\r\n transition: color 0.2s ease, background-color 0.2s ease;\r\n }\r\n\r\n .close-button sky-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n :dir(rtl) .close-button {\r\n margin-right: var(--sky-space-1, 5px);\r\n margin-left: unset;\r\n }\r\n\r\n .close-button:hover {\r\n color: var(--sky-danger-primary);\r\n }\r\n\r\n .close-button:focus-visible {\r\n outline: none;\r\n box-shadow: var(--sky-focus-ring);\r\n }\r\n\r\n .close-button:hover sky-icon,\r\n .close-button:focus-visible sky-icon{\r\n color: var(--sky-danger-primary);\r\n outline: none;\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--chip-text-color);\r\n }\r\n\r\n sky-icon {\r\n display: inline-block;\r\n width: 1em;\r\n height: 1em;\r\n }\r\n\r\n ::slotted([slot=\"prefix\"]),\r\n ::slotted([slot=\"suffix\"]) {\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n\r\n .loading-overlay {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: var(--sky-overlay-primary);\r\n border-radius: inherit;\r\n }\r\n\r\n .loading-spinner {\r\n width: 14px;\r\n height: 14px;\r\n border: 2px solid var(--sky-text-white);\r\n border-top-color: var(--chip-bg-color);\r\n border-radius: var(--sky-radius-full);\r\n animation: spin 0.8s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .chip,\r\n .close-button,\r\n .close-button sky-icon {\r\n transition: none;\r\n }\r\n .loading-spinner {\r\n animation: none;\r\n }\r\n }\r\n\r\n .chip.bordered {\r\n border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n background: transparent;\r\n }\r\n\r\n .chip.light {\r\n background: transparent;\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.flat {\r\n box-shadow: none;\r\n background: color-mix(\r\n in srgb,\r\n var(--chip-fill-color, var(--chip-bg-color)) 20%,\r\n transparent\r\n );\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.faded {\r\n background-color: var(--sky-glass-primary);\r\n border: 1px solid var(--sky-text-tertiary);\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.shadow {\r\n box-shadow: var(--sky-box-shadow-primary);\r\n }\r\n\r\n .chip.shadow:hover {\r\n box-shadow: var(--sky-box-shadow-hover);\r\n }\r\n\r\n .chip.faded .icon,\r\n .chip.flat .icon,\r\n .chip.light .icon,\r\n .chip.dot .icon,\r\n .chip.bordered .icon {\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.dot {\r\n padding-left: var(--sky-space-5, 20px) !important;\r\n position: relative;\r\n background-color: transparent;\r\n border: 1px solid var(--sky-text-tertiary);\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n .chip.dot::before {\r\n content: \"\";\r\n position: absolute;\r\n left: var(--sky-space-1\\\\.5, 6px);\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: var(--sky-space-2, 8px);\r\n height: var(--sky-space-2, 8px);\r\n border-radius: var(--sky-radius-full);\r\n background-color: var(--chip-accent-color, var(--chip-bg-color));\r\n }\r\n `;\r\n\r\n /** Updates host CSS variables from current color token/value. */\r\n protected override updated(): void {\r\n const bgColor = resolveColor(this.color);\r\n const textColor = resolveTextColorForToken(this.color);\r\n\r\n this.style.setProperty(\"--chip-bg-color\", bgColor);\r\n this.style.setProperty(\"--chip-text-color\", textColor);\r\n\r\n if (isDefaultColorToken(this.color)) {\r\n this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\r\n this.style.setProperty(\r\n \"--chip-accent-color\",\r\n resolveAccentColorForToken(this.color),\r\n );\r\n this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\r\n } else {\r\n this.style.removeProperty(\"--chip-ink-color\");\r\n this.style.removeProperty(\"--chip-accent-color\");\r\n this.style.removeProperty(\"--chip-fill-color\");\r\n }\r\n }\r\n\r\n /** Size resolver similar to button: controls padding + font-size */\r\n private _resolveSize(\r\n input: string\r\n ): {\r\n padding: string;\r\n fontSize: string;\r\n } {\r\n const presets: Record<string, { padding: string; fontSize: string }> = {\r\n xs: { padding: \"2px 4px\", fontSize: \"11px\" },\r\n sm: { padding: \"3px 6px\", fontSize: \"12px\" },\r\n md: { padding: \"4px 8px\", fontSize: \"13px\" },\r\n lg: { padding: \"5px 10px\", fontSize: \"14px\" },\r\n xl: { padding: \"6px 12px\", fontSize: \"15px\" },\r\n };\r\n\r\n if (presets[input]) return presets[input];\r\n\r\n const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\r\n const unit = m?.[2] || \"px\";\r\n const fsNum = m ? parseFloat(m[1]) : 13;\r\n const fs = `${fsNum}${unit}`;\r\n\r\n const clamp = (n: number, min: number, max: number) =>\r\n Math.max(min, Math.min(max, n));\r\n\r\n const py = clamp(fsNum * 0.4, 2, 10);\r\n const px = clamp(fsNum * 0.8, 6, 16);\r\n\r\n const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\r\n\r\n return {\r\n padding: `${to(py)} ${to(px)}`,\r\n fontSize: fs,\r\n };\r\n }\r\n\r\n /**\r\n * Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @returns {void}\r\n */\r\n public removeChip(): void {\r\n const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\r\n detail: { label: this.label },\r\n bubbles: true,\r\n composed: true,\r\n });\r\n this.dispatchEvent(removeEvent);\r\n this.remove();\r\n }\r\n\r\n private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n const nodes = slotEl.assignedNodes({ flatten: true });\r\n return nodes.some((n) =>\r\n n.nodeType === Node.ELEMENT_NODE\r\n ? true\r\n : (n.textContent ?? \"\").trim().length > 0\r\n );\r\n }\r\n\r\n /** Light DOM check works before the shadow tree exists (first render). */\r\n private _hasPrefixSlotContent(): boolean {\r\n if (this.querySelector('[slot=\"prefix\"]')) return true;\r\n const slot = this.shadowRoot?.querySelector(\r\n 'slot[name=\"prefix\"]',\r\n ) as HTMLSlotElement | null;\r\n return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n }\r\n\r\n private _hasSuffixSlotContent(): boolean {\r\n if (this.querySelector('[slot=\"suffix\"]')) return true;\r\n const slot = this.shadowRoot?.querySelector(\r\n 'slot[name=\"suffix\"]',\r\n ) as HTMLSlotElement | null;\r\n return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n }\r\n\r\n private _hasDefaultSlotContent(): boolean {\r\n for (const n of Array.from(this.childNodes)) {\r\n if (n.nodeType === Node.ELEMENT_NODE) {\r\n const slot = (n as Element).getAttribute(\"slot\");\r\n if (slot === \"prefix\" || slot === \"suffix\") continue;\r\n return true;\r\n }\r\n if ((n.textContent ?? \"\").trim().length > 0) return true;\r\n }\r\n const slot = this.shadowRoot?.querySelector(\r\n \"slot:not([name])\",\r\n ) as HTMLSlotElement | null;\r\n return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n }\r\n\r\n private _onSlotChange = (): void => {\r\n this.requestUpdate();\r\n };\r\n\r\n override render() {\r\n const sizeDef = this._resolveSize(this.size);\r\n const chipStyle = {\r\n padding: sizeDef.padding,\r\n borderRadius: resolveRadius(this.radius),\r\n fontSize: sizeDef.fontSize,\r\n };\r\n\r\n return html`\r\n <div\r\n class=${classMap({\r\n chip: true,\r\n [this.variant]: true,\r\n loading: this.loading,\r\n })}\r\n style=${styleMap(chipStyle)}\r\n part=\"chip\"\r\n >\r\n <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\r\n ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\r\n <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\r\n `)}\r\n <slot @slotchange=${this._onSlotChange}></slot>\r\n ${this._hasDefaultSlotContent() ? nothing : this.label}\r\n <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\r\n ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\r\n <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\r\n `)}\r\n ${when(this.removable, () => html`\r\n <button\r\n class=\"close-button\"\r\n part=\"close-button\"\r\n type=\"button\"\r\n aria-label=\"Remove chip\"\r\n @click=${this.removeChip}\r\n >\r\n <sky-icon icon=\"ion:close\"></sky-icon>\r\n </button>\r\n `)}\r\n ${when(this.loading, () => html`\r\n <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\r\n </div>\r\n `)}\r\n </div>\r\n `;\r\n }\r\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","_onSlotChange","requestUpdate","updated","bgColor","resolveColor","textColor","resolveTextColorForToken","style","setProperty","isDefaultColorToken","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","_slotHasMeaningfulContent","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","querySelector","slot","shadowRoot","_hasSuffixSlotContent","_hasDefaultSlotContent","Array","from","childNodes","getAttribute","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","css","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport {\r\n isDefaultColorToken,\r\n resolveAccentColorForToken,\r\n resolveColor,\r\n resolveInkColorForToken,\r\n resolveTextColorForToken,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyChipVariant =\r\n | \"solid\"\r\n | \"flat\"\r\n | \"shadow\"\r\n | \"bordered\"\r\n | \"faded\"\r\n | \"light\"\r\n | \"dot\";\r\nexport type SkyChipRemovedEventDetail = { label: string };\r\n\r\n/**\r\n * @element sky-chip\r\n *\r\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/chip\r\n * @dependency sky-icon\r\n *\r\n * @slot - Default slot for the chip label or any other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart chip - The visual representation of the chip component.\r\n * @csspart icon - The icons displayed within the chip.\r\n * @csspart close-button - The button for removing the chip.\r\n * @csspart loading-spinner - The spinner that appears during loading.\r\n * @csspart error-message - The error message displayed for invalid chips.\r\n *\r\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\r\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\r\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\r\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\r\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\r\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\r\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\r\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\r\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\r\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\r\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\r\n *\r\n * @Behavior\r\n * - Uses default slot content when present, otherwise falls back to `label`.\r\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\r\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\r\n * - Resolves color tokens and radius/size presets to CSS values at render time.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * ```\r\n * ```vue\r\n * <template>\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n * return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-chip\")\r\nexport class SkyChip extends LitElement {\r\n\r\n static dependencies: Record<string, CustomElementConstructor> = {\r\n \"sky-icon\": SkyIcon,\r\n };\r\n\r\n @property({ type: String }) label: string = \"\";\r\n @property({ type: Boolean }) removable: boolean = false;\r\n\r\n /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\r\n @property({ type: String }) color: string = \"primary\";\r\n\r\n /** Radius can be any CSS radius value */\r\n @property({ type: String }) radius: string = \"full\";\r\n\r\n /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\r\n @property({ type: String }) size: string = \"md\";\r\n\r\n @property({ type: String }) iconL: string | null = null;\r\n @property({ type: String }) iconR: string | null = null;\r\n @property({ type: Boolean }) loading: boolean = false;\r\n @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\r\n\r\n static override styles = css`\r\n :host {\r\n display: inline-block;\r\n font-family: var(--sky-font);\r\n z-index: 1;\r\n }\r\n\r\n :host([disabled]) {\r\n pointer-events: none;\r\n opacity: var(--sky-opacity-disabled, 0.6);\r\n }\r\n\r\n .chip {\r\n position: relative;\r\n display: flex;\r\n gap: 2px;\r\n width: max-content;\r\n align-items: center;\r\n border-radius: var(--sky-radius-secondary);\r\n color: var(--chip-text-color);\r\n font-weight: var(--sky-font-weight-medium, 500);\r\n transition: background-color 0.3s ease, color 0.3s ease,\r\n box-shadow 0.2s ease, transform 0.2s ease;\r\n cursor: pointer;\r\n background-color: var(--chip-bg-color);\r\n }\r\n\r\n .close-button {\r\n position: relative;\r\n display: flex;\r\n height: 18px;\r\n width: 18px;\r\n justify-content: center;\r\n font-size: inherit;\r\n align-items: center;\r\n background-color: var(--sky-hover-primary);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n border: none;\r\n border-radius: var(--sky-radius-full);\r\n cursor: pointer;\r\n color: var(--sky-text-primary);\r\n transition: color 0.2s ease, background-color 0.2s ease;\r\n }\r\n\r\n .close-button sky-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n :dir(rtl) .close-button {\r\n margin-right: var(--sky-space-1, 5px);\r\n margin-left: unset;\r\n }\r\n\r\n .close-button:hover {\r\n color: var(--sky-danger-primary);\r\n }\r\n\r\n .close-button:focus-visible {\r\n outline: none;\r\n box-shadow: var(--sky-focus-ring);\r\n }\r\n\r\n .close-button:hover sky-icon,\r\n .close-button:focus-visible sky-icon{\r\n color: var(--sky-danger-primary);\r\n outline: none;\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--chip-text-color);\r\n }\r\n\r\n sky-icon {\r\n display: inline-block;\r\n width: 1em;\r\n height: 1em;\r\n }\r\n\r\n ::slotted([slot=\"prefix\"]),\r\n ::slotted([slot=\"suffix\"]) {\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n\r\n .loading-overlay {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: var(--sky-overlay-primary);\r\n border-radius: inherit;\r\n }\r\n\r\n .loading-spinner {\r\n width: 14px;\r\n height: 14px;\r\n border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));\r\n border-top-color: var(--chip-bg-color);\r\n border-radius: var(--sky-radius-full);\r\n animation: spin 0.8s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .chip,\r\n .close-button,\r\n .close-button sky-icon {\r\n transition: none;\r\n }\r\n .loading-spinner {\r\n animation: none;\r\n }\r\n }\r\n\r\n .chip.bordered {\r\n border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n background: transparent;\r\n }\r\n\r\n .chip.light {\r\n background: transparent;\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.flat {\r\n box-shadow: none;\r\n background: color-mix(\r\n in srgb,\r\n var(--chip-fill-color, var(--chip-bg-color)) 20%,\r\n transparent\r\n );\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.faded {\r\n background-color: var(--sky-glass-primary);\r\n border: 1px solid var(--sky-text-tertiary);\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.shadow {\r\n box-shadow: var(--sky-box-shadow-primary);\r\n }\r\n\r\n .chip.shadow:hover {\r\n box-shadow: var(--sky-box-shadow-hover);\r\n }\r\n\r\n .chip.faded .icon,\r\n .chip.flat .icon,\r\n .chip.light .icon,\r\n .chip.dot .icon,\r\n .chip.bordered .icon {\r\n color: var(--chip-ink-color, var(--chip-bg-color));\r\n }\r\n\r\n .chip.dot {\r\n padding-left: var(--sky-space-5, 20px) !important;\r\n position: relative;\r\n background-color: transparent;\r\n border: 1px solid var(--sky-text-tertiary);\r\n color: var(--sky-text-primary);\r\n }\r\n\r\n .chip.dot::before {\r\n content: \"\";\r\n position: absolute;\r\n left: var(--sky-space-1\\\\.5, 6px);\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: var(--sky-space-2, 8px);\r\n height: var(--sky-space-2, 8px);\r\n border-radius: var(--sky-radius-full);\r\n background-color: var(--chip-accent-color, var(--chip-bg-color));\r\n }\r\n\r\n /* Solid / shadow chips: enhance label + icon FG against fill. */\r\n ${unsafeCSS(\r\n cssOnFillEnhance([\r\n {\r\n selector: \".chip.solid, .chip.shadow\",\r\n fillVar: \"--chip-bg-color\",\r\n },\r\n {\r\n selector: \".chip.solid .icon, .chip.shadow .icon\",\r\n fillVar: \"--chip-bg-color\",\r\n },\r\n ]),\r\n )}\r\n `;\r\n\r\n /** Updates host CSS variables from current color token/value. */\r\n protected override updated(): void {\r\n const bgColor = resolveColor(this.color);\r\n const textColor = resolveTextColorForToken(this.color);\r\n\r\n this.style.setProperty(\"--chip-bg-color\", bgColor);\r\n this.style.setProperty(\"--chip-text-color\", textColor);\r\n\r\n if (isDefaultColorToken(this.color)) {\r\n this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\r\n this.style.setProperty(\r\n \"--chip-accent-color\",\r\n resolveAccentColorForToken(this.color),\r\n );\r\n this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\r\n } else {\r\n this.style.removeProperty(\"--chip-ink-color\");\r\n this.style.removeProperty(\"--chip-accent-color\");\r\n this.style.removeProperty(\"--chip-fill-color\");\r\n }\r\n }\r\n\r\n /** Size resolver similar to button: controls padding + font-size */\r\n private _resolveSize(\r\n input: string\r\n ): {\r\n padding: string;\r\n fontSize: string;\r\n } {\r\n const presets: Record<string, { padding: string; fontSize: string }> = {\r\n xs: { padding: \"2px 4px\", fontSize: \"11px\" },\r\n sm: { padding: \"3px 6px\", fontSize: \"12px\" },\r\n md: { padding: \"4px 8px\", fontSize: \"13px\" },\r\n lg: { padding: \"5px 10px\", fontSize: \"14px\" },\r\n xl: { padding: \"6px 12px\", fontSize: \"15px\" },\r\n };\r\n\r\n if (presets[input]) return presets[input];\r\n\r\n const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\r\n const unit = m?.[2] || \"px\";\r\n const fsNum = m ? parseFloat(m[1]) : 13;\r\n const fs = `${fsNum}${unit}`;\r\n\r\n const clamp = (n: number, min: number, max: number) =>\r\n Math.max(min, Math.min(max, n));\r\n\r\n const py = clamp(fsNum * 0.4, 2, 10);\r\n const px = clamp(fsNum * 0.8, 6, 16);\r\n\r\n const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\r\n\r\n return {\r\n padding: `${to(py)} ${to(px)}`,\r\n fontSize: fs,\r\n };\r\n }\r\n\r\n /**\r\n * Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @returns {void}\r\n */\r\n public removeChip(): void {\r\n const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\r\n detail: { label: this.label },\r\n bubbles: true,\r\n composed: true,\r\n });\r\n this.dispatchEvent(removeEvent);\r\n this.remove();\r\n }\r\n\r\n private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n const nodes = slotEl.assignedNodes({ flatten: true });\r\n return nodes.some((n) =>\r\n n.nodeType === Node.ELEMENT_NODE\r\n ? true\r\n : (n.textContent ?? \"\").trim().length > 0\r\n );\r\n }\r\n\r\n /** Light DOM check works before the shadow tree exists (first render). */\r\n private _hasPrefixSlotContent(): boolean {\r\n if (this.querySelector('[slot=\"prefix\"]')) return true;\r\n const slot = this.shadowRoot?.querySelector(\r\n 'slot[name=\"prefix\"]',\r\n ) as HTMLSlotElement | null;\r\n return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n }\r\n\r\n private _hasSuffixSlotContent(): boolean {\r\n if (this.querySelector('[slot=\"suffix\"]')) return true;\r\n const slot = this.shadowRoot?.querySelector(\r\n 'slot[name=\"suffix\"]',\r\n ) as HTMLSlotElement | null;\r\n return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n }\r\n\r\n private _hasDefaultSlotContent(): boolean {\r\n for (const n of Array.from(this.childNodes)) {\r\n if (n.nodeType === Node.ELEMENT_NODE) {\r\n const slot = (n as Element).getAttribute(\"slot\");\r\n if (slot === \"prefix\" || slot === \"suffix\") continue;\r\n return true;\r\n }\r\n if ((n.textContent ?? \"\").trim().length > 0) return true;\r\n }\r\n const slot = this.shadowRoot?.querySelector(\r\n \"slot:not([name])\",\r\n ) as HTMLSlotElement | null;\r\n return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n }\r\n\r\n private _onSlotChange = (): void => {\r\n this.requestUpdate();\r\n };\r\n\r\n override render() {\r\n const sizeDef = this._resolveSize(this.size);\r\n const chipStyle = {\r\n padding: sizeDef.padding,\r\n borderRadius: resolveRadius(this.radius),\r\n fontSize: sizeDef.fontSize,\r\n };\r\n\r\n return html`\r\n <div\r\n class=${classMap({\r\n chip: true,\r\n [this.variant]: true,\r\n loading: this.loading,\r\n })}\r\n style=${styleMap(chipStyle)}\r\n part=\"chip\"\r\n >\r\n <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\r\n ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\r\n <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\r\n `)}\r\n <slot @slotchange=${this._onSlotChange}></slot>\r\n ${this._hasDefaultSlotContent() ? nothing : this.label}\r\n <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\r\n ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\r\n <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\r\n `)}\r\n ${when(this.removable, () => html`\r\n <button\r\n class=\"close-button\"\r\n part=\"close-button\"\r\n type=\"button\"\r\n aria-label=\"Remove chip\"\r\n @click=${this.removeChip}\r\n >\r\n <sky-icon icon=\"ion:close\"></sky-icon>\r\n </button>\r\n `)}\r\n ${when(this.loading, () => html`\r\n <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\r\n </div>\r\n `)}\r\n </div>\r\n `;\r\n }\r\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","_onSlotChange","requestUpdate","updated","bgColor","resolveColor","textColor","resolveTextColorForToken","style","setProperty","isDefaultColorToken","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","_slotHasMeaningfulContent","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","querySelector","slot","shadowRoot","_hasSuffixSlotContent","_hasDefaultSlotContent","Array","from","childNodes","getAttribute","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}
|
|
@@ -2,6 +2,8 @@ import { FormControlBase, FormState } from "../helper/internals/form-control-bas
|
|
|
2
2
|
export type SkyComboboxJustify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
|
|
3
3
|
export type SkyComboboxErrorDisplayMode = "single" | "all" | "none";
|
|
4
4
|
export type SkyComboboxIconPosition = "left" | "right";
|
|
5
|
+
/** How multi-select values render in the field (single-select always uses plain text). */
|
|
6
|
+
export type SkyComboboxMultiDisplay = "chips" | "text" | "count";
|
|
5
7
|
export type SkyComboboxValueChangedDetail = {
|
|
6
8
|
value: any | any[];
|
|
7
9
|
selectedItems: any[];
|
|
@@ -48,8 +50,10 @@ export type SkyComboboxAddNewOptionDetail = {
|
|
|
48
50
|
* @csspart icon-slot - Both left and right icon containers
|
|
49
51
|
* @csspart placeholder-label - The placeholder text label
|
|
50
52
|
* @csspart clear-button - The clear (×) button
|
|
53
|
+
* @csspart field-trailing - Trailing actions rail (clear, right icon, chevron)
|
|
51
54
|
* @csspart dropdown-button - The dropdown toggle arrow button
|
|
52
55
|
* @csspart chip-container - Container for the chips in multi-select mode
|
|
56
|
+
* @csspart value-summary - Multi-select text/count summary (when `multi-display` is `text` or `count`)
|
|
53
57
|
* @csspart chip - Individual chip element
|
|
54
58
|
* @csspart single-select-chip - Chip shown in single-select mode
|
|
55
59
|
* @csspart overflow-chip - The "+N" chip that shows hidden chips count
|
|
@@ -82,7 +86,6 @@ export type SkyComboboxAddNewOptionDetail = {
|
|
|
82
86
|
* @property {string} placeholder - Main placeholder text.
|
|
83
87
|
* @property {string} searchPlaceholder - Search input placeholder text.
|
|
84
88
|
* @property {string} searchQuery - Current search filter text when `searchable` is enabled. Default: `""`.
|
|
85
|
-
* @property {string} label - Optional external label text.
|
|
86
89
|
* @property {any[]} options - Available options list.
|
|
87
90
|
* @property {boolean} searchable - Enables search input and filtering.
|
|
88
91
|
* @property {boolean} addOption - Enables ad-hoc option creation from search query.
|
|
@@ -116,7 +119,9 @@ export type SkyComboboxAddNewOptionDetail = {
|
|
|
116
119
|
* @property {boolean} enforceMinOneSelection - Prevents clearing all selections in multi-select mode.
|
|
117
120
|
* @property {boolean} validationActive - Enables validation UI state.
|
|
118
121
|
* @property {boolean} invalid - Reflects invalid state.
|
|
119
|
-
* @property {string} variant - Visual
|
|
122
|
+
* @property {string} variant - Visual style: `default`, `highlight`, `fieldset`, or `inside`.
|
|
123
|
+
* @property {string} label - Label text. Above the field by default; on the border for `fieldset`; inside the field for `inside`.
|
|
124
|
+
* @property {SkyComboboxMultiDisplay} multiDisplay - Multi-select value UI: `chips` (default), `text` (comma-joined), or `count` (“N selected”).
|
|
120
125
|
*
|
|
121
126
|
* @method openDropdown Opens the combobox dropdown.
|
|
122
127
|
* @method closeDropdown Closes the combobox dropdown.
|
|
@@ -182,7 +187,9 @@ export declare class SkyCombobox extends FormControlBase {
|
|
|
182
187
|
openAbove: boolean;
|
|
183
188
|
validationActive: boolean;
|
|
184
189
|
invalid: boolean;
|
|
185
|
-
variant:
|
|
190
|
+
variant: "default" | "highlight" | "fieldset" | "inside";
|
|
191
|
+
/** Multi-select field presentation. Ignored for single-select. */
|
|
192
|
+
multiDisplay: SkyComboboxMultiDisplay;
|
|
186
193
|
/** Current search filter when `searchable`; exposed for controlled search / `v-model:search-query`. */
|
|
187
194
|
searchQuery: string;
|
|
188
195
|
filteredOptions: any[];
|
|
@@ -206,8 +213,11 @@ export declare class SkyCombobox extends FormControlBase {
|
|
|
206
213
|
private iconLeftEls;
|
|
207
214
|
private iconRightEls;
|
|
208
215
|
private _searchDebounceId;
|
|
216
|
+
private _closeResetId;
|
|
209
217
|
private static readonly _SEARCH_DEBOUNCE_MS;
|
|
210
218
|
private static readonly _SEARCH_DEBOUNCE_OPTIONS_THRESHOLD;
|
|
219
|
+
/** Matches PopoverController exit animation so list stays visible while closing. */
|
|
220
|
+
private static readonly _CLOSE_RESET_MS;
|
|
211
221
|
private dropdownPopover;
|
|
212
222
|
private hiddenPopover;
|
|
213
223
|
static styles: import("lit").CSSResult;
|
|
@@ -289,6 +299,9 @@ export declare class SkyCombobox extends FormControlBase {
|
|
|
289
299
|
renderHiddenChipsDropdown(): import("lit-html").TemplateResult<1>;
|
|
290
300
|
removeChip(option: any): void;
|
|
291
301
|
renderChips(): import("lit-html").TemplateResult<1>;
|
|
302
|
+
private resolveMultiDisplay;
|
|
303
|
+
/** Selected value area: chips, joined text, or count summary. */
|
|
304
|
+
private renderSelectedValue;
|
|
292
305
|
handleKeydown(event: KeyboardEvent): void;
|
|
293
306
|
private onSearchKeydown;
|
|
294
307
|
/** Number of non-option rows before the first option (search + select-all). */
|