@kodaris/krubble-components 1.0.37 → 1.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/custom-elements.json +4 -9
- package/dist/form/select-field/select-field.d.ts.map +1 -1
- package/dist/form/select-field/select-field.js +4 -14
- package/dist/form/select-field/select-field.js.map +1 -1
- package/dist/krubble-components.bundled.js +18 -23
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +5 -14
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +18 -23
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +5 -14
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/dist/monaco/monaco.d.ts +1 -0
- package/dist/monaco/monaco.d.ts.map +1 -1
- package/dist/monaco/monaco.js +18 -0
- package/dist/monaco/monaco.js.map +1 -1
- package/dist/snackbar/snackbar.d.ts +0 -1
- package/dist/snackbar/snackbar.d.ts.map +1 -1
- package/dist/snackbar/snackbar.js +14 -9
- package/dist/snackbar/snackbar.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -311,7 +311,7 @@
|
|
|
311
311
|
{
|
|
312
312
|
"kind": "variable",
|
|
313
313
|
"name": "KRSelectField",
|
|
314
|
-
"default": "class KRSelectField extends i$2 { constructor() { super(); /** * The select label text */ this.label = ''; /** * The input name for form submission */ this.name = ''; /** * The currently selected value */ this.value = ''; /** * Placeholder text when no option is selected */ this.placeholder = 'Select an option'; /** * Whether the select is disabled */ this.disabled = false; /** * Whether the field is required */ this.required = false; /** * Whether the field is readonly */ this.readonly = false; /** * Helper text shown below the select */ this.hint = ''; this._isOpen = false; this._highlightedIndex = -1; this._touched = false; this._handleInvalid = (e) => { e.preventDefault(); this._touched = true; }; this._handleOutsideClick = (e) => { if (!e.composedPath().includes(this)) { this._close(); } }; this._handleKeyDown = (e) => { if (!this._isOpen) return; const options = Array.from(this.querySelectorAll('kr-select-option')); switch (e.key) { case 'Escape': this._close(); this._triggerElement?.focus(); break; case 'ArrowDown': e.preventDefault(); if (options.some(o => !o.disabled)) { let newIndex = this._highlightedIndex + 1; while (newIndex < options.length && options[newIndex]?.disabled) newIndex++; if (newIndex < options.length) this._highlightedIndex = newIndex; } break; case 'ArrowUp': e.preventDefault(); { let newIndex = this._highlightedIndex - 1; while (newIndex >= 0 && options[newIndex]?.disabled) newIndex--; if (newIndex >= 0) this._highlightedIndex = newIndex; } break; case 'Enter': e.preventDefault(); if (this._highlightedIndex >= 0 && this._highlightedIndex < options.length) { this._selectOption(options[this._highlightedIndex]); } break; } }; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } connectedCallback() { super.connectedCallback(); document.addEventListener('click', this._handleOutsideClick); document.addEventListener('keydown', this._handleKeyDown); this.addEventListener('invalid', this._handleInvalid); } firstUpdated() { this._updateValidity(); } updated(changedProperties) { if (changedProperties.has('required') || changedProperties.has('value')) { this._updateValidity(); } } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleOutsideClick); document.removeEventListener('keydown', this._handleKeyDown); this.removeEventListener('invalid', this._handleInvalid); } _toggle() { if (this.disabled || this.readonly) return; if (this._isOpen) { this._close(); } else { this._isOpen = true; const options = Array.from(this.querySelectorAll('kr-select-option')); this._highlightedIndex = options.findIndex(o => o.value === this.value); // Position the fixed dropdown relative to the trigger requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.select-dropdown'); if (dropdown) { const triggerRect = this._triggerElement.getBoundingClientRect(); dropdown.style.top = triggerRect.bottom + 4 + 'px'; dropdown.style.left = triggerRect.left + 'px'; dropdown.style.width = triggerRect.width + 'px'; } }); } } _close() { this._isOpen = false; this._highlightedIndex = -1; } _selectOption(option) { if (option.disabled) return; this.value = option.value; this._internals.setFormValue(this.value); this._updateValidity(); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); this._close(); this._triggerElement?.focus(); } _handleBlur() { this._touched = true; this._updateValidity(); } _updateValidity() { if (this.required && !this.value) { this._internals.setValidity({ valueMissing: true }, 'Please select an option', this._triggerElement); } else { this._internals.setValidity({}); } } render() { const options = Array.from(this.querySelectorAll('kr-select-option')); const selectedLabel = options.find(o => o.value === this.value)?.label; return b ` <div class=\"wrapper\"> ${this.label ? b ` <label> ${this.label} ${this.required ? b `<span class=\"required\" aria-hidden=\"true\">*</span>` : ''} </label> ` : A} <div class=\"select-wrapper\"> <button class=${e$1({ 'select-trigger': true, 'select-trigger--open': this._isOpen, 'select-trigger--invalid': this._touched && this.required && !this.value, })} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${e$1({ 'select-value': true, 'select-placeholder': !selectedLabel })}> ${selectedLabel || this.placeholder} </span> <svg class=${e$1({ 'chevron-icon': true, 'select-icon': true, 'select-icon--open': this._isOpen })} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${e$1({ 'select-dropdown': true, 'hidden': !this._isOpen })} role=\"listbox\"> <div class=\"select-options\"> ${options.length === 0 ? b `<div class=\"select-empty\">No options available</div>` : options.map((option, idx) => { const isSelected = option.value === this.value; return b ` <div class=${e$1({ 'select-option': true, 'select-option--selected': isSelected, 'select-option--disabled': option.disabled, 'select-option--highlighted': idx === this._highlightedIndex, })} role=\"option\" aria-selected=${isSelected} @click=${() => this._selectOption(option)} @mouseenter=${() => (this._highlightedIndex = idx)} > ${option.label}
|
|
314
|
+
"default": "class KRSelectField extends i$2 { constructor() { super(); /** * The select label text */ this.label = ''; /** * The input name for form submission */ this.name = ''; /** * The currently selected value */ this.value = ''; /** * Placeholder text when no option is selected */ this.placeholder = 'Select an option'; /** * Whether the select is disabled */ this.disabled = false; /** * Whether the field is required */ this.required = false; /** * Whether the field is readonly */ this.readonly = false; /** * Helper text shown below the select */ this.hint = ''; this._isOpen = false; this._highlightedIndex = -1; this._touched = false; this._handleInvalid = (e) => { e.preventDefault(); this._touched = true; }; this._handleOutsideClick = (e) => { if (!e.composedPath().includes(this)) { this._close(); } }; this._handleKeyDown = (e) => { if (!this._isOpen) return; const options = Array.from(this.querySelectorAll('kr-select-option')); switch (e.key) { case 'Escape': this._close(); this._triggerElement?.focus(); break; case 'ArrowDown': e.preventDefault(); if (options.some(o => !o.disabled)) { let newIndex = this._highlightedIndex + 1; while (newIndex < options.length && options[newIndex]?.disabled) newIndex++; if (newIndex < options.length) this._highlightedIndex = newIndex; } break; case 'ArrowUp': e.preventDefault(); { let newIndex = this._highlightedIndex - 1; while (newIndex >= 0 && options[newIndex]?.disabled) newIndex--; if (newIndex >= 0) this._highlightedIndex = newIndex; } break; case 'Enter': e.preventDefault(); if (this._highlightedIndex >= 0 && this._highlightedIndex < options.length) { this._selectOption(options[this._highlightedIndex]); } break; } }; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } connectedCallback() { super.connectedCallback(); document.addEventListener('click', this._handleOutsideClick); document.addEventListener('keydown', this._handleKeyDown); this.addEventListener('invalid', this._handleInvalid); } firstUpdated() { this._updateValidity(); } updated(changedProperties) { if (changedProperties.has('required') || changedProperties.has('value')) { this._updateValidity(); } } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleOutsideClick); document.removeEventListener('keydown', this._handleKeyDown); this.removeEventListener('invalid', this._handleInvalid); } _toggle() { if (this.disabled || this.readonly) return; if (this._isOpen) { this._close(); } else { this._isOpen = true; const options = Array.from(this.querySelectorAll('kr-select-option')); this._highlightedIndex = options.findIndex(o => o.value === this.value); // Position the fixed dropdown relative to the trigger requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.select-dropdown'); if (dropdown) { const triggerRect = this._triggerElement.getBoundingClientRect(); const spaceBelow = window.innerHeight - triggerRect.bottom - 4 - 8; dropdown.style.top = triggerRect.bottom + 4 + 'px'; dropdown.style.left = triggerRect.left + 'px'; dropdown.style.width = triggerRect.width + 'px'; dropdown.style.maxHeight = spaceBelow + 'px'; } }); } } _close() { this._isOpen = false; this._highlightedIndex = -1; } _selectOption(option) { if (option.disabled) return; this.value = option.value; this._internals.setFormValue(this.value); this._updateValidity(); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); this._close(); this._triggerElement?.focus(); } _handleBlur() { this._touched = true; this._updateValidity(); } _updateValidity() { if (this.required && !this.value) { this._internals.setValidity({ valueMissing: true }, 'Please select an option', this._triggerElement); } else { this._internals.setValidity({}); } } render() { const options = Array.from(this.querySelectorAll('kr-select-option')); const selectedLabel = options.find(o => o.value === this.value)?.label; return b ` <div class=\"wrapper\"> ${this.label ? b ` <label> ${this.label} ${this.required ? b `<span class=\"required\" aria-hidden=\"true\">*</span>` : ''} </label> ` : A} <div class=\"select-wrapper\"> <button class=${e$1({ 'select-trigger': true, 'select-trigger--open': this._isOpen, 'select-trigger--invalid': this._touched && this.required && !this.value, })} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${e$1({ 'select-value': true, 'select-placeholder': !selectedLabel })}> ${selectedLabel || this.placeholder} </span> <svg class=${e$1({ 'chevron-icon': true, 'select-icon': true, 'select-icon--open': this._isOpen })} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${e$1({ 'select-dropdown': true, 'hidden': !this._isOpen })} role=\"listbox\"> <div class=\"select-options\"> ${options.length === 0 ? b `<div class=\"select-empty\">No options available</div>` : options.map((option, idx) => { const isSelected = option.value === this.value; return b ` <div class=${e$1({ 'select-option': true, 'select-option--selected': isSelected, 'select-option--disabled': option.disabled, 'select-option--highlighted': idx === this._highlightedIndex, })} role=\"option\" aria-selected=${isSelected} @click=${() => this._selectOption(option)} @mouseenter=${() => (this._highlightedIndex = idx)} > ${option.label} </div> `; })} </div> </div> </div> ${this._touched && this.required && !this.value ? b `<div class=\"validation-message\">Please select an option</div>` : this.hint ? b `<div class=\"hint\">${this.hint}</div>` : ''} </div> <div class=\"options-slot\"> <slot @slotchange=${() => this.requestUpdate()}></slot> </div> `; } // Public methods for programmatic control focus() { this._triggerElement?.focus(); } blur() { this._triggerElement?.blur(); } }",
|
|
315
315
|
"description": "A select dropdown component that works with native browser forms.\n\nUses ElementInternals for form association, allowing the component\nto participate in form submission, validation, and reset."
|
|
316
316
|
},
|
|
317
317
|
{
|
|
@@ -625,7 +625,7 @@
|
|
|
625
625
|
{
|
|
626
626
|
"kind": "variable",
|
|
627
627
|
"name": "ct",
|
|
628
|
-
"default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"Select an option\",this.disabled=!1,this.required=!1,this.readonly=!1,this.hint=\"\",this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._close()},this._handleKeyDown=e=>{if(!this._isOpen)return;const t=Array.from(this.querySelectorAll(\"kr-select-option\"));switch(e.key){case\"Escape\":this._close(),this._triggerElement?.focus();break;case\"ArrowDown\":if(e.preventDefault(),t.some((e=>!e.disabled))){let e=this._highlightedIndex+1;for(;e<t.length&&t[e]?.disabled;)e++;e<t.length&&(this._highlightedIndex=e)}break;case\"ArrowUp\":e.preventDefault();{let e=this._highlightedIndex-1;for(;e>=0&&t[e]?.disabled;)e--;e>=0&&(this._highlightedIndex=e)}break;case\"Enter\":e.preventDefault(),this._highlightedIndex>=0&&this._highlightedIndex<t.length&&this._selectOption(t[this._highlightedIndex])}},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),document.addEventListener(\"click\",this._handleOutsideClick),document.addEventListener(\"keydown\",this._handleKeyDown),this.addEventListener(\"invalid\",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has(\"required\")||e.has(\"value\"))&&this._updateValidity()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"click\",this._handleOutsideClick),document.removeEventListener(\"keydown\",this._handleKeyDown),this.removeEventListener(\"invalid\",this._handleInvalid)}_toggle(){if(!this.disabled&&!this.readonly)if(this._isOpen)this._close();else{this._isOpen=!0;const e=Array.from(this.querySelectorAll(\"kr-select-option\"));this._highlightedIndex=e.findIndex((e=>e.value===this.value)),requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(\".select-dropdown\");if(e){const t=this._triggerElement.getBoundingClientRect();e.style.top=t.bottom+4+\"px\",e.style.left=t.left+\"px\",e.style.width=t.width+\"px\"}}))}}_close(){this._isOpen=!1,this._highlightedIndex=-1}_selectOption(e){e.disabled||(this.value=e.value,this._internals.setFormValue(this.value),this._updateValidity(),this.dispatchEvent(new Event(\"change\",{bubbles:!0,composed:!0})),this._close(),this._triggerElement?.focus())}_handleBlur(){this._touched=!0,this._updateValidity()}_updateValidity(){this.required&&!this.value?this._internals.setValidity({valueMissing:!0},\"Please select an option\",this._triggerElement):this._internals.setValidity({})}render(){const e=Array.from(this.querySelectorAll(\"kr-select-option\")),t=e.find((e=>e.value===this.value))?.label;return H` <div class=\"wrapper\"> ${this.label?H` <label> ${this.label} ${this.required?H`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:U} <div class=\"select-wrapper\"> <button class=${ke({\"select-trigger\":!0,\"select-trigger--open\":this._isOpen,\"select-trigger--invalid\":this._touched&&this.required&&!this.value})} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${ke({\"select-value\":!0,\"select-placeholder\":!t})}> ${t||this.placeholder} </span> <svg class=${ke({\"chevron-icon\":!0,\"select-icon\":!0,\"select-icon--open\":this._isOpen})} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${ke({\"select-dropdown\":!0,hidden:!this._isOpen})} role=\"listbox\"> <div class=\"select-options\"> ${0===e.length?H`<div class=\"select-empty\">No options available</div>`:e.map(((e,t)=>{const i=e.value===this.value;return H` <div class=${ke({\"select-option\":!0,\"select-option--selected\":i,\"select-option--disabled\":e.disabled,\"select-option--highlighted\":t===this._highlightedIndex})} role=\"option\" aria-selected=${i} @click=${()=>this._selectOption(e)} @mouseenter=${()=>this._highlightedIndex=t} > ${e.label}
|
|
628
|
+
"default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"Select an option\",this.disabled=!1,this.required=!1,this.readonly=!1,this.hint=\"\",this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._close()},this._handleKeyDown=e=>{if(!this._isOpen)return;const t=Array.from(this.querySelectorAll(\"kr-select-option\"));switch(e.key){case\"Escape\":this._close(),this._triggerElement?.focus();break;case\"ArrowDown\":if(e.preventDefault(),t.some((e=>!e.disabled))){let e=this._highlightedIndex+1;for(;e<t.length&&t[e]?.disabled;)e++;e<t.length&&(this._highlightedIndex=e)}break;case\"ArrowUp\":e.preventDefault();{let e=this._highlightedIndex-1;for(;e>=0&&t[e]?.disabled;)e--;e>=0&&(this._highlightedIndex=e)}break;case\"Enter\":e.preventDefault(),this._highlightedIndex>=0&&this._highlightedIndex<t.length&&this._selectOption(t[this._highlightedIndex])}},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),document.addEventListener(\"click\",this._handleOutsideClick),document.addEventListener(\"keydown\",this._handleKeyDown),this.addEventListener(\"invalid\",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has(\"required\")||e.has(\"value\"))&&this._updateValidity()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"click\",this._handleOutsideClick),document.removeEventListener(\"keydown\",this._handleKeyDown),this.removeEventListener(\"invalid\",this._handleInvalid)}_toggle(){if(!this.disabled&&!this.readonly)if(this._isOpen)this._close();else{this._isOpen=!0;const e=Array.from(this.querySelectorAll(\"kr-select-option\"));this._highlightedIndex=e.findIndex((e=>e.value===this.value)),requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(\".select-dropdown\");if(e){const t=this._triggerElement.getBoundingClientRect(),i=window.innerHeight-t.bottom-4-8;e.style.top=t.bottom+4+\"px\",e.style.left=t.left+\"px\",e.style.width=t.width+\"px\",e.style.maxHeight=i+\"px\"}}))}}_close(){this._isOpen=!1,this._highlightedIndex=-1}_selectOption(e){e.disabled||(this.value=e.value,this._internals.setFormValue(this.value),this._updateValidity(),this.dispatchEvent(new Event(\"change\",{bubbles:!0,composed:!0})),this._close(),this._triggerElement?.focus())}_handleBlur(){this._touched=!0,this._updateValidity()}_updateValidity(){this.required&&!this.value?this._internals.setValidity({valueMissing:!0},\"Please select an option\",this._triggerElement):this._internals.setValidity({})}render(){const e=Array.from(this.querySelectorAll(\"kr-select-option\")),t=e.find((e=>e.value===this.value))?.label;return H` <div class=\"wrapper\"> ${this.label?H` <label> ${this.label} ${this.required?H`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:U} <div class=\"select-wrapper\"> <button class=${ke({\"select-trigger\":!0,\"select-trigger--open\":this._isOpen,\"select-trigger--invalid\":this._touched&&this.required&&!this.value})} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${ke({\"select-value\":!0,\"select-placeholder\":!t})}> ${t||this.placeholder} </span> <svg class=${ke({\"chevron-icon\":!0,\"select-icon\":!0,\"select-icon--open\":this._isOpen})} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${ke({\"select-dropdown\":!0,hidden:!this._isOpen})} role=\"listbox\"> <div class=\"select-options\"> ${0===e.length?H`<div class=\"select-empty\">No options available</div>`:e.map(((e,t)=>{const i=e.value===this.value;return H` <div class=${ke({\"select-option\":!0,\"select-option--selected\":i,\"select-option--disabled\":e.disabled,\"select-option--highlighted\":t===this._highlightedIndex})} role=\"option\" aria-selected=${i} @click=${()=>this._selectOption(e)} @mouseenter=${()=>this._highlightedIndex=t} > ${e.label} </div> `}))} </div> </div> </div> ${this._touched&&this.required&&!this.value?H`<div class=\"validation-message\">Please select an option</div>`:this.hint?H`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> <div class=\"options-slot\"> <slot @slotchange=${()=>this.requestUpdate()}></slot> </div> `}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}}"
|
|
629
629
|
},
|
|
630
630
|
{
|
|
631
631
|
"kind": "variable",
|
|
@@ -1383,7 +1383,7 @@
|
|
|
1383
1383
|
{
|
|
1384
1384
|
"kind": "variable",
|
|
1385
1385
|
"name": "KRMonaco",
|
|
1386
|
-
"default": "class KRMonaco extends LitElement { constructor() { super(...arguments); this._headObserver = null; this.options = {}; this.editor = null; } firstUpdated() { requestAnimationFrame(() => { this._copyMonacoStyles(); this._initEditor(); }); } disconnectedCallback() { super.disconnectedCallback(); if (this._headObserver) { this._headObserver.disconnect(); this._headObserver = null; } if (this.editor) { this.editor.dispose(); this.editor = null; } } _isMonacoStyle(text) { return text.includes('.monaco-') || text.includes('codicon'); } _copyMonacoStyles() { if (!this.shadowRoot) { return; } // Copy inline <style> elements that contain Monaco rules document.head.querySelectorAll('style').forEach((style) => { if (style.textContent && this._isMonacoStyle(style.textContent)) { this.shadowRoot.appendChild(style.cloneNode(true)); } }); // Copy Monaco rules from external <link> stylesheets (production builds bundle CSS into files) for (const sheet of document.styleSheets) { if (!(sheet.ownerNode instanceof HTMLLinkElement)) { continue; } try { let monacoRules = ''; for (const rule of sheet.cssRules) { if (this._isMonacoStyle(rule.cssText)) { monacoRules += rule.cssText + '\\n'; } } if (monacoRules) { const style = document.createElement('style'); style.textContent = monacoRules; this.shadowRoot.appendChild(style); } } catch (e) { // Cross-origin stylesheets can't be read — skip them } } this._headObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if (node instanceof HTMLStyleElement && node.textContent && this._isMonacoStyle(node.textContent)) { this.shadowRoot.appendChild(node.cloneNode(true)); } }); }); }); this._headObserver.observe(document.head, { childList: true }); } _initEditor() { const container = this.shadowRoot?.querySelector('#container'); if (!container) { return; } this.editor = monaco.editor.create(container, this.options); this.dispatchEvent(new CustomEvent('ready', { detail: { editor: this.editor }, bubbles: true, composed: true, })); } render() { return html `<div id=\"container\"></div>`; } }",
|
|
1386
|
+
"default": "class KRMonaco extends LitElement { constructor() { super(...arguments); this._headObserver = null; this.options = {}; this.editor = null; } firstUpdated() { requestAnimationFrame(() => { this._copyMonacoStyles(); this._initEditor(); }); } updated(changedProperties) { if (changedProperties.has('options') && this.editor) { if (this.options.value !== undefined && this.options.value !== this.editor.getValue()) { this.editor.setValue(this.options.value); } } } disconnectedCallback() { super.disconnectedCallback(); if (this._headObserver) { this._headObserver.disconnect(); this._headObserver = null; } if (this.editor) { this.editor.dispose(); this.editor = null; } } _isMonacoStyle(text) { return text.includes('.monaco-') || text.includes('codicon'); } _copyMonacoStyles() { if (!this.shadowRoot) { return; } // Copy inline <style> elements that contain Monaco rules document.head.querySelectorAll('style').forEach((style) => { if (style.textContent && this._isMonacoStyle(style.textContent)) { this.shadowRoot.appendChild(style.cloneNode(true)); } }); // Copy Monaco rules from external <link> stylesheets (production builds bundle CSS into files) for (const sheet of document.styleSheets) { if (!(sheet.ownerNode instanceof HTMLLinkElement)) { continue; } try { let monacoRules = ''; for (const rule of sheet.cssRules) { if (this._isMonacoStyle(rule.cssText)) { monacoRules += rule.cssText + '\\n'; } } if (monacoRules) { const style = document.createElement('style'); style.textContent = monacoRules; this.shadowRoot.appendChild(style); } } catch (e) { // Cross-origin stylesheets can't be read — skip them } } this._headObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if (node instanceof HTMLStyleElement && node.textContent && this._isMonacoStyle(node.textContent)) { this.shadowRoot.appendChild(node.cloneNode(true)); } }); }); }); this._headObserver.observe(document.head, { childList: true }); } _initEditor() { const container = this.shadowRoot?.querySelector('#container'); if (!container) { return; } this.editor = monaco.editor.create(container, this.options); // Strip hover tooltips from find widget buttons — they get clipped by overflow:hidden const findWidget = container.querySelector('.find-widget'); if (findWidget) { findWidget.querySelectorAll('.button, .monaco-custom-toggle').forEach((el) => { el.addEventListener('mouseenter', () => { requestAnimationFrame(() => { container.querySelectorAll('.workbench-hover-container').forEach((t) => t.remove()); }); }); }); } this.dispatchEvent(new CustomEvent('ready', { detail: { editor: this.editor }, bubbles: true, composed: true, })); } render() { return html `<div id=\"container\"></div>`; } }",
|
|
1387
1387
|
"description": "A Monaco Editor wrapper that handles shadow DOM boilerplate.\n\nCopies Monaco's injected styles from document.head into the shadow root\nand watches for new styles added later via MutationObserver. Applies CSS\nfixes for the find widget inside shadow DOM. Disposes the editor and\nobserver on disconnect.\n\nConsumers get full access to the Monaco API via the `editor` property.\nPass editor configuration through the `options` property before the\nelement connects, or call `editor.updateOptions()` after."
|
|
1388
1388
|
}
|
|
1389
1389
|
],
|
|
@@ -3039,11 +3039,6 @@
|
|
|
3039
3039
|
"description": "Duration in milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss.",
|
|
3040
3040
|
"attribute": "duration"
|
|
3041
3041
|
},
|
|
3042
|
-
{
|
|
3043
|
-
"kind": "method",
|
|
3044
|
-
"name": "updatePositions",
|
|
3045
|
-
"privacy": "private"
|
|
3046
|
-
},
|
|
3047
3042
|
{
|
|
3048
3043
|
"kind": "method",
|
|
3049
3044
|
"name": "dismiss",
|
|
@@ -4177,7 +4172,7 @@
|
|
|
4177
4172
|
{
|
|
4178
4173
|
"kind": "variable",
|
|
4179
4174
|
"name": "KRSelectField",
|
|
4180
|
-
"default": "class KRSelectField extends LitElement { constructor() { super(); /** * The select label text */ this.label = ''; /** * The input name for form submission */ this.name = ''; /** * The currently selected value */ this.value = ''; /** * Placeholder text when no option is selected */ this.placeholder = 'Select an option'; /** * Whether the select is disabled */ this.disabled = false; /** * Whether the field is required */ this.required = false; /** * Whether the field is readonly */ this.readonly = false; /** * Helper text shown below the select */ this.hint = ''; this._isOpen = false; this._highlightedIndex = -1; this._touched = false; this._handleInvalid = (e) => { e.preventDefault(); this._touched = true; }; this._handleOutsideClick = (e) => { if (!e.composedPath().includes(this)) { this._close(); } }; this._handleKeyDown = (e) => { if (!this._isOpen) return; const options = Array.from(this.querySelectorAll('kr-select-option')); switch (e.key) { case 'Escape': this._close(); this._triggerElement?.focus(); break; case 'ArrowDown': e.preventDefault(); if (options.some(o => !o.disabled)) { let newIndex = this._highlightedIndex + 1; while (newIndex < options.length && options[newIndex]?.disabled) newIndex++; if (newIndex < options.length) this._highlightedIndex = newIndex; } break; case 'ArrowUp': e.preventDefault(); { let newIndex = this._highlightedIndex - 1; while (newIndex >= 0 && options[newIndex]?.disabled) newIndex--; if (newIndex >= 0) this._highlightedIndex = newIndex; } break; case 'Enter': e.preventDefault(); if (this._highlightedIndex >= 0 && this._highlightedIndex < options.length) { this._selectOption(options[this._highlightedIndex]); } break; } }; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } connectedCallback() { super.connectedCallback(); document.addEventListener('click', this._handleOutsideClick); document.addEventListener('keydown', this._handleKeyDown); this.addEventListener('invalid', this._handleInvalid); } firstUpdated() { this._updateValidity(); } updated(changedProperties) { if (changedProperties.has('required') || changedProperties.has('value')) { this._updateValidity(); } } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleOutsideClick); document.removeEventListener('keydown', this._handleKeyDown); this.removeEventListener('invalid', this._handleInvalid); } _toggle() { if (this.disabled || this.readonly) return; if (this._isOpen) { this._close(); } else { this._isOpen = true; const options = Array.from(this.querySelectorAll('kr-select-option')); this._highlightedIndex = options.findIndex(o => o.value === this.value); // Position the fixed dropdown relative to the trigger requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.select-dropdown'); if (dropdown) { const triggerRect = this._triggerElement.getBoundingClientRect(); dropdown.style.top = triggerRect.bottom + 4 + 'px'; dropdown.style.left = triggerRect.left + 'px'; dropdown.style.width = triggerRect.width + 'px'; } }); } } _close() { this._isOpen = false; this._highlightedIndex = -1; } _selectOption(option) { if (option.disabled) return; this.value = option.value; this._internals.setFormValue(this.value); this._updateValidity(); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); this._close(); this._triggerElement?.focus(); } _handleBlur() { this._touched = true; this._updateValidity(); } _updateValidity() { if (this.required && !this.value) { this._internals.setValidity({ valueMissing: true }, 'Please select an option', this._triggerElement); } else { this._internals.setValidity({}); } } render() { const options = Array.from(this.querySelectorAll('kr-select-option')); const selectedLabel = options.find(o => o.value === this.value)?.label; return html ` <div class=\"wrapper\"> ${this.label ? html ` <label> ${this.label} ${this.required ? html `<span class=\"required\" aria-hidden=\"true\">*</span>` : ''} </label> ` : nothing} <div class=\"select-wrapper\"> <button class=${classMap({ 'select-trigger': true, 'select-trigger--open': this._isOpen, 'select-trigger--invalid': this._touched && this.required && !this.value, })} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${classMap({ 'select-value': true, 'select-placeholder': !selectedLabel })}> ${selectedLabel || this.placeholder} </span> <svg class=${classMap({ 'chevron-icon': true, 'select-icon': true, 'select-icon--open': this._isOpen })} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${classMap({ 'select-dropdown': true, 'hidden': !this._isOpen })} role=\"listbox\"> <div class=\"select-options\"> ${options.length === 0 ? html `<div class=\"select-empty\">No options available</div>` : options.map((option, idx) => { const isSelected = option.value === this.value; return html ` <div class=${classMap({ 'select-option': true, 'select-option--selected': isSelected, 'select-option--disabled': option.disabled, 'select-option--highlighted': idx === this._highlightedIndex, })} role=\"option\" aria-selected=${isSelected} @click=${() => this._selectOption(option)} @mouseenter=${() => (this._highlightedIndex = idx)} > ${option.label}
|
|
4175
|
+
"default": "class KRSelectField extends LitElement { constructor() { super(); /** * The select label text */ this.label = ''; /** * The input name for form submission */ this.name = ''; /** * The currently selected value */ this.value = ''; /** * Placeholder text when no option is selected */ this.placeholder = 'Select an option'; /** * Whether the select is disabled */ this.disabled = false; /** * Whether the field is required */ this.required = false; /** * Whether the field is readonly */ this.readonly = false; /** * Helper text shown below the select */ this.hint = ''; this._isOpen = false; this._highlightedIndex = -1; this._touched = false; this._handleInvalid = (e) => { e.preventDefault(); this._touched = true; }; this._handleOutsideClick = (e) => { if (!e.composedPath().includes(this)) { this._close(); } }; this._handleKeyDown = (e) => { if (!this._isOpen) return; const options = Array.from(this.querySelectorAll('kr-select-option')); switch (e.key) { case 'Escape': this._close(); this._triggerElement?.focus(); break; case 'ArrowDown': e.preventDefault(); if (options.some(o => !o.disabled)) { let newIndex = this._highlightedIndex + 1; while (newIndex < options.length && options[newIndex]?.disabled) newIndex++; if (newIndex < options.length) this._highlightedIndex = newIndex; } break; case 'ArrowUp': e.preventDefault(); { let newIndex = this._highlightedIndex - 1; while (newIndex >= 0 && options[newIndex]?.disabled) newIndex--; if (newIndex >= 0) this._highlightedIndex = newIndex; } break; case 'Enter': e.preventDefault(); if (this._highlightedIndex >= 0 && this._highlightedIndex < options.length) { this._selectOption(options[this._highlightedIndex]); } break; } }; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } connectedCallback() { super.connectedCallback(); document.addEventListener('click', this._handleOutsideClick); document.addEventListener('keydown', this._handleKeyDown); this.addEventListener('invalid', this._handleInvalid); } firstUpdated() { this._updateValidity(); } updated(changedProperties) { if (changedProperties.has('required') || changedProperties.has('value')) { this._updateValidity(); } } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleOutsideClick); document.removeEventListener('keydown', this._handleKeyDown); this.removeEventListener('invalid', this._handleInvalid); } _toggle() { if (this.disabled || this.readonly) return; if (this._isOpen) { this._close(); } else { this._isOpen = true; const options = Array.from(this.querySelectorAll('kr-select-option')); this._highlightedIndex = options.findIndex(o => o.value === this.value); // Position the fixed dropdown relative to the trigger requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.select-dropdown'); if (dropdown) { const triggerRect = this._triggerElement.getBoundingClientRect(); const spaceBelow = window.innerHeight - triggerRect.bottom - 4 - 8; dropdown.style.top = triggerRect.bottom + 4 + 'px'; dropdown.style.left = triggerRect.left + 'px'; dropdown.style.width = triggerRect.width + 'px'; dropdown.style.maxHeight = spaceBelow + 'px'; } }); } } _close() { this._isOpen = false; this._highlightedIndex = -1; } _selectOption(option) { if (option.disabled) return; this.value = option.value; this._internals.setFormValue(this.value); this._updateValidity(); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); this._close(); this._triggerElement?.focus(); } _handleBlur() { this._touched = true; this._updateValidity(); } _updateValidity() { if (this.required && !this.value) { this._internals.setValidity({ valueMissing: true }, 'Please select an option', this._triggerElement); } else { this._internals.setValidity({}); } } render() { const options = Array.from(this.querySelectorAll('kr-select-option')); const selectedLabel = options.find(o => o.value === this.value)?.label; return html ` <div class=\"wrapper\"> ${this.label ? html ` <label> ${this.label} ${this.required ? html `<span class=\"required\" aria-hidden=\"true\">*</span>` : ''} </label> ` : nothing} <div class=\"select-wrapper\"> <button class=${classMap({ 'select-trigger': true, 'select-trigger--open': this._isOpen, 'select-trigger--invalid': this._touched && this.required && !this.value, })} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${classMap({ 'select-value': true, 'select-placeholder': !selectedLabel })}> ${selectedLabel || this.placeholder} </span> <svg class=${classMap({ 'chevron-icon': true, 'select-icon': true, 'select-icon--open': this._isOpen })} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${classMap({ 'select-dropdown': true, 'hidden': !this._isOpen })} role=\"listbox\"> <div class=\"select-options\"> ${options.length === 0 ? html `<div class=\"select-empty\">No options available</div>` : options.map((option, idx) => { const isSelected = option.value === this.value; return html ` <div class=${classMap({ 'select-option': true, 'select-option--selected': isSelected, 'select-option--disabled': option.disabled, 'select-option--highlighted': idx === this._highlightedIndex, })} role=\"option\" aria-selected=${isSelected} @click=${() => this._selectOption(option)} @mouseenter=${() => (this._highlightedIndex = idx)} > ${option.label} </div> `; })} </div> </div> </div> ${this._touched && this.required && !this.value ? html `<div class=\"validation-message\">Please select an option</div>` : this.hint ? html `<div class=\"hint\">${this.hint}</div>` : ''} </div> <div class=\"options-slot\"> <slot @slotchange=${() => this.requestUpdate()}></slot> </div> `; } // Public methods for programmatic control focus() { this._triggerElement?.focus(); } blur() { this._triggerElement?.blur(); } }",
|
|
4181
4176
|
"description": "A select dropdown component that works with native browser forms.\n\nUses ElementInternals for form association, allowing the component\nto participate in form submission, validation, and reset."
|
|
4182
4177
|
}
|
|
4183
4178
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/form/select-field/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/form/select-field/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAgLnB;IAGH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,WAAW,SAAsB;IAEjC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAGV,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,iBAAiB,CAAM;IAG/B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,eAAe,CAAqB;IAG5C,IAAI,IAAI,2BAEP;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa;IAIb,cAAc;IAId,iBAAiB;IAOjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,iBAAiB;IAO1B,OAAO,CAAC,cAAc,CAGpB;cAEiB,YAAY;IAItB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,oBAAoB;IAO7B,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,cAAc,CAiCpB;IAEF,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAYd,MAAM;IA0Ff,KAAK;IAIL,IAAI;CAGL;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -166,9 +166,11 @@ let KRSelectField = class KRSelectField extends LitElement {
|
|
|
166
166
|
const dropdown = this.shadowRoot?.querySelector('.select-dropdown');
|
|
167
167
|
if (dropdown) {
|
|
168
168
|
const triggerRect = this._triggerElement.getBoundingClientRect();
|
|
169
|
+
const spaceBelow = window.innerHeight - triggerRect.bottom - 4 - 8;
|
|
169
170
|
dropdown.style.top = triggerRect.bottom + 4 + 'px';
|
|
170
171
|
dropdown.style.left = triggerRect.left + 'px';
|
|
171
172
|
dropdown.style.width = triggerRect.width + 'px';
|
|
173
|
+
dropdown.style.maxHeight = spaceBelow + 'px';
|
|
172
174
|
}
|
|
173
175
|
});
|
|
174
176
|
}
|
|
@@ -268,11 +270,6 @@ let KRSelectField = class KRSelectField extends LitElement {
|
|
|
268
270
|
@mouseenter=${() => (this._highlightedIndex = idx)}
|
|
269
271
|
>
|
|
270
272
|
${option.label}
|
|
271
|
-
${isSelected
|
|
272
|
-
? html `<svg class="chevron-icon select-check" viewBox="0 0 20 20" fill="currentColor">
|
|
273
|
-
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
274
|
-
</svg>`
|
|
275
|
-
: nothing}
|
|
276
273
|
</div>
|
|
277
274
|
`;
|
|
278
275
|
})}
|
|
@@ -403,7 +400,6 @@ KRSelectField.styles = [krBaseCSS, css `
|
|
|
403
400
|
border-radius: 8px;
|
|
404
401
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
405
402
|
padding: 8px 0;
|
|
406
|
-
max-height: 300px;
|
|
407
403
|
overflow-y: auto;
|
|
408
404
|
}
|
|
409
405
|
|
|
@@ -414,8 +410,8 @@ KRSelectField.styles = [krBaseCSS, css `
|
|
|
414
410
|
.select-option {
|
|
415
411
|
display: flex;
|
|
416
412
|
align-items: center;
|
|
417
|
-
height: 36px;
|
|
418
|
-
padding:
|
|
413
|
+
min-height: 36px;
|
|
414
|
+
padding: 8px 16px;
|
|
419
415
|
font-size: 14px;
|
|
420
416
|
color: #000000;
|
|
421
417
|
cursor: pointer;
|
|
@@ -452,12 +448,6 @@ KRSelectField.styles = [krBaseCSS, css `
|
|
|
452
448
|
font-size: 14px;
|
|
453
449
|
}
|
|
454
450
|
|
|
455
|
-
.select-check {
|
|
456
|
-
color: var(--kr-primary);
|
|
457
|
-
flex-shrink: 0;
|
|
458
|
-
margin-left: auto;
|
|
459
|
-
}
|
|
460
|
-
|
|
461
451
|
.hint {
|
|
462
452
|
font-size: 0.75rem;
|
|
463
453
|
color: var(--kr-select-helper-color, #6b7280);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-field.js","sourceRoot":"","sources":["../../../src/form/select-field/select-field.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;;;;;;GAQG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"select-field.js","sourceRoot":"","sources":["../../../src/form/select-field/select-field.ts"],"names":[],"mappings":"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"}
|
|
@@ -1712,6 +1712,10 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$2 {
|
|
|
1712
1712
|
* @returns The created snackbar element
|
|
1713
1713
|
*/
|
|
1714
1714
|
static show(options) {
|
|
1715
|
+
// Close any existing snackbars before showing the new one
|
|
1716
|
+
for (const existing of this.activeSnackbars) {
|
|
1717
|
+
existing.dismiss();
|
|
1718
|
+
}
|
|
1715
1719
|
const snackbar = document.createElement('kr-snackbar');
|
|
1716
1720
|
snackbar.message = options.message;
|
|
1717
1721
|
snackbar.title = options.title ?? '';
|
|
@@ -1738,7 +1742,7 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$2 {
|
|
|
1738
1742
|
}
|
|
1739
1743
|
// Add to active snackbars and update positions
|
|
1740
1744
|
KRSnackbar_1.activeSnackbars.push(this);
|
|
1741
|
-
this.updatePositions();
|
|
1745
|
+
// this.updatePositions();
|
|
1742
1746
|
// Set up auto-dismiss
|
|
1743
1747
|
if (this.duration > 0) {
|
|
1744
1748
|
this.dismissTimeout = window.setTimeout(() => {
|
|
@@ -1754,19 +1758,19 @@ let KRSnackbar = KRSnackbar_1 = class KRSnackbar extends i$2 {
|
|
|
1754
1758
|
KRSnackbar_1.activeSnackbars.splice(index, 1);
|
|
1755
1759
|
}
|
|
1756
1760
|
// Update positions of remaining snackbars
|
|
1757
|
-
this.updatePositions();
|
|
1761
|
+
// this.updatePositions();
|
|
1758
1762
|
// Clear timeout
|
|
1759
1763
|
if (this.dismissTimeout) {
|
|
1760
1764
|
clearTimeout(this.dismissTimeout);
|
|
1761
1765
|
}
|
|
1762
1766
|
}
|
|
1763
|
-
updatePositions() {
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
}
|
|
1767
|
+
// private updatePositions() {
|
|
1768
|
+
// let bottomOffset = 24;
|
|
1769
|
+
// for (const snackbar of KRSnackbar.activeSnackbars) {
|
|
1770
|
+
// snackbar.style.bottom = `${bottomOffset}px`;
|
|
1771
|
+
// bottomOffset += snackbar.offsetHeight + 8;
|
|
1772
|
+
// }
|
|
1773
|
+
// }
|
|
1770
1774
|
dismiss() {
|
|
1771
1775
|
if (this.dismissTimeout) {
|
|
1772
1776
|
clearTimeout(this.dismissTimeout);
|
|
@@ -1815,6 +1819,7 @@ KRSnackbar.styles = i$5 `
|
|
|
1815
1819
|
:host {
|
|
1816
1820
|
position: fixed;
|
|
1817
1821
|
left: 16px;
|
|
1822
|
+
bottom: 24px;
|
|
1818
1823
|
z-index: 10000;
|
|
1819
1824
|
display: flex;
|
|
1820
1825
|
align-items: center;
|
|
@@ -4351,9 +4356,11 @@ let KRSelectField = class KRSelectField extends i$2 {
|
|
|
4351
4356
|
const dropdown = this.shadowRoot?.querySelector('.select-dropdown');
|
|
4352
4357
|
if (dropdown) {
|
|
4353
4358
|
const triggerRect = this._triggerElement.getBoundingClientRect();
|
|
4359
|
+
const spaceBelow = window.innerHeight - triggerRect.bottom - 4 - 8;
|
|
4354
4360
|
dropdown.style.top = triggerRect.bottom + 4 + 'px';
|
|
4355
4361
|
dropdown.style.left = triggerRect.left + 'px';
|
|
4356
4362
|
dropdown.style.width = triggerRect.width + 'px';
|
|
4363
|
+
dropdown.style.maxHeight = spaceBelow + 'px';
|
|
4357
4364
|
}
|
|
4358
4365
|
});
|
|
4359
4366
|
}
|
|
@@ -4453,11 +4460,6 @@ let KRSelectField = class KRSelectField extends i$2 {
|
|
|
4453
4460
|
@mouseenter=${() => (this._highlightedIndex = idx)}
|
|
4454
4461
|
>
|
|
4455
4462
|
${option.label}
|
|
4456
|
-
${isSelected
|
|
4457
|
-
? b `<svg class="chevron-icon select-check" viewBox="0 0 20 20" fill="currentColor">
|
|
4458
|
-
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
4459
|
-
</svg>`
|
|
4460
|
-
: A}
|
|
4461
4463
|
</div>
|
|
4462
4464
|
`;
|
|
4463
4465
|
})}
|
|
@@ -4588,7 +4590,6 @@ KRSelectField.styles = [krBaseCSS, i$5 `
|
|
|
4588
4590
|
border-radius: 8px;
|
|
4589
4591
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
4590
4592
|
padding: 8px 0;
|
|
4591
|
-
max-height: 300px;
|
|
4592
4593
|
overflow-y: auto;
|
|
4593
4594
|
}
|
|
4594
4595
|
|
|
@@ -4599,8 +4600,8 @@ KRSelectField.styles = [krBaseCSS, i$5 `
|
|
|
4599
4600
|
.select-option {
|
|
4600
4601
|
display: flex;
|
|
4601
4602
|
align-items: center;
|
|
4602
|
-
height: 36px;
|
|
4603
|
-
padding:
|
|
4603
|
+
min-height: 36px;
|
|
4604
|
+
padding: 8px 16px;
|
|
4604
4605
|
font-size: 14px;
|
|
4605
4606
|
color: #000000;
|
|
4606
4607
|
cursor: pointer;
|
|
@@ -4637,12 +4638,6 @@ KRSelectField.styles = [krBaseCSS, i$5 `
|
|
|
4637
4638
|
font-size: 14px;
|
|
4638
4639
|
}
|
|
4639
4640
|
|
|
4640
|
-
.select-check {
|
|
4641
|
-
color: var(--kr-primary);
|
|
4642
|
-
flex-shrink: 0;
|
|
4643
|
-
margin-left: auto;
|
|
4644
|
-
}
|
|
4645
|
-
|
|
4646
4641
|
.hint {
|
|
4647
4642
|
font-size: 0.75rem;
|
|
4648
4643
|
color: var(--kr-select-helper-color, #6b7280);
|