@kodaris/krubble-components 1.0.73 → 1.0.74
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 +3 -3
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +14 -2
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +14 -2
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +2 -1
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +14 -2
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +133 -132
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
{
|
|
267
267
|
"kind": "variable",
|
|
268
268
|
"name": "KRButton",
|
|
269
|
-
"default": "class KRButton extends i$2 { constructor() { super(...arguments); /** * The button variant (shape) */ this.variant = 'flat'; /** * The button color */ this.color = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; /** * Dropdown options - when provided, button becomes a dropdown */ this.options = []; /** * Position of the icon relative to the text content. * @attr icon-position */ this.iconPosition = 'left'; /** * When true and options are provided, renders as a split button with * separate primary action and dropdown trigger zones. */ this.split = false; this._state = 'idle'; this._stateText = ''; this._dropdownOpened = false; this._handleHostClick = (e) => { if (this.split && this.options.length) { return; } if (this.options.length) { e.stopPropagation(); this._toggleDropdown(); } }; this._handleKeydown = (e) => { if (e.key === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; return; } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (this.split && this.options.length) { this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true })); return; } if (this.options.length) { this._toggleDropdown(); } else { this.click(); } } if (this.split && this.options.length && e.key === 'ArrowDown') { e.preventDefault(); if (!this._dropdownOpened) { this._toggleDropdown(); } } }; this._handleClickOutside = (e) => { if (this._dropdownOpened && !this.contains(e.target)) { this._dropdownOpened = false; } }; } connectedCallback() { super.connectedCallback(); this.setAttribute('role', this.href ? 'link' : 'button'); this.setAttribute('tabindex', '0'); this.addEventListener('keydown', this._handleKeydown); this.addEventListener('click', this._handleHostClick); document.addEventListener('click', this._handleClickOutside); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('keydown', this._handleKeydown); this.removeEventListener('click', this._handleHostClick); document.removeEventListener('click', this._handleClickOutside); } _handleSplitPrimaryClick(e) { e.stopPropagation(); if (this._dropdownOpened) { this._dropdownOpened = false; } this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, })); } _handleSplitTriggerClick(e) { e.stopPropagation(); this._toggleDropdown(); } _toggleDropdown() { this._dropdownOpened = !this._dropdownOpened; if (this._dropdownOpened) { // Position the fixed dropdown relative to the host element requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.dropdown'); if (dropdown) { const hostRect = this.getBoundingClientRect(); dropdown.style.top = hostRect.bottom + 4 + 'px'; dropdown.style.bottom = ''; dropdown.style.left = hostRect.left + 'px'; dropdown.style.right = ''; dropdown.style.minWidth = hostRect.width + 'px'; dropdown.style.transformOrigin = 'top left'; const dropdownRect = dropdown.getBoundingClientRect(); // Open above if dropdown
|
|
269
|
+
"default": "class KRButton extends i$2 { constructor() { super(...arguments); /** * The button variant (shape) */ this.variant = 'flat'; /** * The button color */ this.color = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; /** * Dropdown options - when provided, button becomes a dropdown */ this.options = []; /** * Position of the icon relative to the text content. * @attr icon-position */ this.iconPosition = 'left'; /** * When true and options are provided, renders as a split button with * separate primary action and dropdown trigger zones. */ this.split = false; this._state = 'idle'; this._stateText = ''; this._dropdownOpened = false; this._handleHostClick = (e) => { if (this.split && this.options.length) { return; } if (this.options.length) { e.stopPropagation(); this._toggleDropdown(); } }; this._handleKeydown = (e) => { if (e.key === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; return; } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (this.split && this.options.length) { this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true })); return; } if (this.options.length) { this._toggleDropdown(); } else { this.click(); } } if (this.split && this.options.length && e.key === 'ArrowDown') { e.preventDefault(); if (!this._dropdownOpened) { this._toggleDropdown(); } } }; this._handleClickOutside = (e) => { if (this._dropdownOpened && !this.contains(e.target)) { this._dropdownOpened = false; } }; } connectedCallback() { super.connectedCallback(); this.setAttribute('role', this.href ? 'link' : 'button'); this.setAttribute('tabindex', '0'); this.addEventListener('keydown', this._handleKeydown); this.addEventListener('click', this._handleHostClick); document.addEventListener('click', this._handleClickOutside); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('keydown', this._handleKeydown); this.removeEventListener('click', this._handleHostClick); document.removeEventListener('click', this._handleClickOutside); } _handleSplitPrimaryClick(e) { e.stopPropagation(); if (this._dropdownOpened) { this._dropdownOpened = false; } this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, })); } _handleSplitTriggerClick(e) { e.stopPropagation(); this._toggleDropdown(); } _toggleDropdown() { this._dropdownOpened = !this._dropdownOpened; if (this._dropdownOpened) { // Position the fixed dropdown relative to the host element requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.dropdown'); if (dropdown) { const hostRect = this.getBoundingClientRect(); dropdown.style.top = hostRect.bottom + 4 + 'px'; dropdown.style.bottom = ''; dropdown.style.left = hostRect.left + 'px'; dropdown.style.right = ''; dropdown.style.minWidth = hostRect.width + 'px'; dropdown.style.transformOrigin = 'top left'; dropdown.style.maxHeight = ''; dropdown.style.overflowY = ''; const dropdownRect = dropdown.getBoundingClientRect(); // Open above only if the dropdown doesn't fit below and there's more room above than below // 8 = 4px gap between button and dropdown + 4px margin from viewport edge if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) { dropdown.style.top = ''; dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px'; dropdown.style.transformOrigin = 'bottom left'; dropdown.classList.add('dropdown--above'); if (dropdownRect.height > hostRect.top - 8) { dropdown.style.maxHeight = hostRect.top - 8 + 'px'; dropdown.style.overflowY = 'auto'; } } else { dropdown.classList.remove('dropdown--above'); if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) { dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px'; dropdown.style.overflowY = 'auto'; } } // Align right if dropdown overflows viewport right if (dropdownRect.right > window.innerWidth) { dropdown.style.left = ''; dropdown.style.right = window.innerWidth - hostRect.right + 'px'; if (dropdownRect.bottom > window.innerHeight) { dropdown.style.transformOrigin = 'bottom right'; } else { dropdown.style.transformOrigin = 'top right'; } } } }); } } _handleOptionClick(option, e) { e.stopPropagation(); this._dropdownOpened = false; this.dispatchEvent(new CustomEvent('option-select', { detail: { id: option.id, label: option.label }, bubbles: true, composed: true })); } /** * Shows a loading spinner and disables the button. */ showLoading() { this._clearStateTimeout(); this._state = 'loading'; this._stateText = ''; } /** * Shows a success state with optional custom text. * @param text - Text to display (default: \"Saved\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showSuccess(text = 'Success', duration = 2000) { this._clearStateTimeout(); this._state = 'success'; this._stateText = text; if (duration > 0) { this._stateTimeout = window.setTimeout(() => this.reset(), duration); } } /** * Shows an error state with optional custom text. * @param text - Text to display (default: \"Error\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showError(text = 'Error', duration = 2000) { this._clearStateTimeout(); this._state = 'error'; this._stateText = text; if (duration > 0) { this._stateTimeout = window.setTimeout(() => this.reset(), duration); } } /** * Returns whether the button is currently in the loading state. */ isLoading() { return this._state === 'loading'; } /** * Resets the button to its idle state. */ reset() { this._clearStateTimeout(); this._state = 'idle'; this._stateText = ''; } _clearStateTimeout() { if (this._stateTimeout) { clearTimeout(this._stateTimeout); this._stateTimeout = undefined; } } updated(changedProperties) { // Reflect state classes to host this.classList.toggle('kr-button--loading', this._state === 'loading'); this.classList.toggle('kr-button--success', this._state === 'success'); this.classList.toggle('kr-button--error', this._state === 'error'); this.classList.toggle(`kr-button--${this.variant}`, true); this.classList.toggle(`kr-button--${this.color}`, true); this.classList.toggle('kr-button--small', this.size === 'small'); this.classList.toggle('kr-button--large', this.size === 'large'); this.classList.toggle('kr-button--split', this.split && !!this.options.length); } render() { if (this.split && this.options.length) { return b ` <div class=\"split-primary\" @click=${(e) => this._handleSplitPrimaryClick(e)}> <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this._state !== 'idle' ? b `<span class=\"state-overlay\"> ${this._state === 'loading' ? b `<span class=\"spinner\"></span>` : this._stateText} </span>` : A} </div> <div class=\"split-divider\"></div> <div class=\"split-trigger\" @click=${(e) => this._handleSplitTriggerClick(e)}> <svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg> </div> <div class=\"dropdown ${this._dropdownOpened ? 'dropdown--opened' : ''}\"> ${this.options.map(option => b ` <button class=\"dropdown-item\" @click=${(e) => this._handleOptionClick(option, e)} >${option.label}</button> `)} </div> `; } const content = b ` <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this.options.length ? b `<svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg>` : A} ${this._state !== 'idle' ? b `<span class=\"state-overlay\"> ${this._state === 'loading' ? b `<span class=\"spinner\"></span>` : this._stateText} </span>` : A} ${this.options.length ? b ` <div class=\"dropdown ${this._dropdownOpened ? 'dropdown--opened' : ''}\"> ${this.options.map(option => b ` <button class=\"dropdown-item\" @click=${(e) => this._handleOptionClick(option, e)} >${option.label}</button> `)} </div> ` : A} `; return this.href ? b `<a class=\"link\" href=${this.href} target=${this.target || A}>${content}</a>` : content; } }",
|
|
270
270
|
"description": "A customizable button component."
|
|
271
271
|
},
|
|
272
272
|
{
|
|
@@ -937,7 +937,7 @@
|
|
|
937
937
|
{
|
|
938
938
|
"kind": "variable",
|
|
939
939
|
"name": "Ee",
|
|
940
|
-
"default": "class extends ae{constructor(){super(...arguments),this.variant=\"flat\",this.color=\"primary\",this.size=\"medium\",this.disabled=!1,this.options=[],this.iconPosition=\"left\",this.split=!1,this._state=\"idle\",this._stateText=\"\",this._dropdownOpened=!1,this._handleHostClick=e=>{this.split&&this.options.length||this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{if(\"Escape\"===e.key&&this._dropdownOpened)this._dropdownOpened=!1;else{if(\"Enter\"===e.key||\" \"===e.key){if(e.preventDefault(),this.split&&this.options.length)return void this.dispatchEvent(new MouseEvent(\"click\",{bubbles:!0,composed:!0}));this.options.length?this._toggleDropdown():this.click()}this.split&&this.options.length&&\"ArrowDown\"===e.key&&(e.preventDefault(),this._dropdownOpened||this._toggleDropdown())}},this._handleClickOutside=e=>{this._dropdownOpened&&!this.contains(e.target)&&(this._dropdownOpened=!1)}}connectedCallback(){super.connectedCallback(),this.setAttribute(\"role\",this.href?\"link\":\"button\"),this.setAttribute(\"tabindex\",\"0\"),this.addEventListener(\"keydown\",this._handleKeydown),this.addEventListener(\"click\",this._handleHostClick),document.addEventListener(\"click\",this._handleClickOutside)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(\"keydown\",this._handleKeydown),this.removeEventListener(\"click\",this._handleHostClick),document.removeEventListener(\"click\",this._handleClickOutside)}_handleSplitPrimaryClick(e){e.stopPropagation(),this._dropdownOpened&&(this._dropdownOpened=!1),this.dispatchEvent(new MouseEvent(\"click\",{bubbles:!0,composed:!0}))}_handleSplitTriggerClick(e){e.stopPropagation(),this._toggleDropdown()}_toggleDropdown(){this._dropdownOpened=!this._dropdownOpened,this._dropdownOpened&&requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(\".dropdown\");if(e){const t=this.getBoundingClientRect();e.style.top=t.bottom+4+\"px\",e.style.bottom=\"\",e.style.left=t.left+\"px\",e.style.right=\"\",e.style.minWidth=t.width+\"px\",e.style.transformOrigin=\"top left\";const i=e.getBoundingClientRect();i.bottom>window.innerHeight?(e.style.top=\"\",e.style.bottom=window.innerHeight-t.top+4+\"px\",e.style.transformOrigin=\"bottom left\",e.classList.add(\"dropdown--above\")):e.classList.remove(\"dropdown--above\"),i.right>window.innerWidth&&(e.style.left=\"\",e.style.right=window.innerWidth-t.right+\"px\",i.bottom>window.innerHeight?e.style.transformOrigin=\"bottom right\":e.style.transformOrigin=\"top right\")}}))}_handleOptionClick(e,t){t.stopPropagation(),this._dropdownOpened=!1,this.dispatchEvent(new CustomEvent(\"option-select\",{detail:{id:e.id,label:e.label},bubbles:!0,composed:!0}))}showLoading(){this._clearStateTimeout(),this._state=\"loading\",this._stateText=\"\"}showSuccess(e=\"Success\",t=2e3){this._clearStateTimeout(),this._state=\"success\",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}showError(e=\"Error\",t=2e3){this._clearStateTimeout(),this._state=\"error\",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}isLoading(){return\"loading\"===this._state}reset(){this._clearStateTimeout(),this._state=\"idle\",this._stateText=\"\"}_clearStateTimeout(){this._stateTimeout&&(clearTimeout(this._stateTimeout),this._stateTimeout=void 0)}updated(e){this.classList.toggle(\"kr-button--loading\",\"loading\"===this._state),this.classList.toggle(\"kr-button--success\",\"success\"===this._state),this.classList.toggle(\"kr-button--error\",\"error\"===this._state),this.classList.toggle(`kr-button--${this.variant}`,!0),this.classList.toggle(`kr-button--${this.color}`,!0),this.classList.toggle(\"kr-button--small\",\"small\"===this.size),this.classList.toggle(\"kr-button--large\",\"large\"===this.size),this.classList.toggle(\"kr-button--split\",this.split&&!!this.options.length)}render(){if(this.split&&this.options.length)return j` <div class=\"split-primary\" @click=${e=>this._handleSplitPrimaryClick(e)}> <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${\"idle\"!==this._state?j`<span class=\"state-overlay\"> ${\"loading\"===this._state?j`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} </div> <div class=\"split-divider\"></div> <div class=\"split-trigger\" @click=${e=>this._handleSplitTriggerClick(e)}> <svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg> </div> <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>j` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `;const e=j` <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this.options.length?j`<svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg>`:U} ${\"idle\"!==this._state?j`<span class=\"state-overlay\"> ${\"loading\"===this._state?j`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} ${this.options.length?j` <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>j` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `:U} `;return this.href?j`<a class=\"link\" href=${this.href} target=${this.target||U}>${e}</a>`:e}}"
|
|
940
|
+
"default": "class extends ae{constructor(){super(...arguments),this.variant=\"flat\",this.color=\"primary\",this.size=\"medium\",this.disabled=!1,this.options=[],this.iconPosition=\"left\",this.split=!1,this._state=\"idle\",this._stateText=\"\",this._dropdownOpened=!1,this._handleHostClick=e=>{this.split&&this.options.length||this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{if(\"Escape\"===e.key&&this._dropdownOpened)this._dropdownOpened=!1;else{if(\"Enter\"===e.key||\" \"===e.key){if(e.preventDefault(),this.split&&this.options.length)return void this.dispatchEvent(new MouseEvent(\"click\",{bubbles:!0,composed:!0}));this.options.length?this._toggleDropdown():this.click()}this.split&&this.options.length&&\"ArrowDown\"===e.key&&(e.preventDefault(),this._dropdownOpened||this._toggleDropdown())}},this._handleClickOutside=e=>{this._dropdownOpened&&!this.contains(e.target)&&(this._dropdownOpened=!1)}}connectedCallback(){super.connectedCallback(),this.setAttribute(\"role\",this.href?\"link\":\"button\"),this.setAttribute(\"tabindex\",\"0\"),this.addEventListener(\"keydown\",this._handleKeydown),this.addEventListener(\"click\",this._handleHostClick),document.addEventListener(\"click\",this._handleClickOutside)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(\"keydown\",this._handleKeydown),this.removeEventListener(\"click\",this._handleHostClick),document.removeEventListener(\"click\",this._handleClickOutside)}_handleSplitPrimaryClick(e){e.stopPropagation(),this._dropdownOpened&&(this._dropdownOpened=!1),this.dispatchEvent(new MouseEvent(\"click\",{bubbles:!0,composed:!0}))}_handleSplitTriggerClick(e){e.stopPropagation(),this._toggleDropdown()}_toggleDropdown(){this._dropdownOpened=!this._dropdownOpened,this._dropdownOpened&&requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(\".dropdown\");if(e){const t=this.getBoundingClientRect();e.style.top=t.bottom+4+\"px\",e.style.bottom=\"\",e.style.left=t.left+\"px\",e.style.right=\"\",e.style.minWidth=t.width+\"px\",e.style.transformOrigin=\"top left\",e.style.maxHeight=\"\",e.style.overflowY=\"\";const i=e.getBoundingClientRect();i.height>window.innerHeight-t.bottom-8&&t.top>window.innerHeight-t.bottom?(e.style.top=\"\",e.style.bottom=window.innerHeight-t.top+4+\"px\",e.style.transformOrigin=\"bottom left\",e.classList.add(\"dropdown--above\"),i.height>t.top-8&&(e.style.maxHeight=t.top-8+\"px\",e.style.overflowY=\"auto\")):(e.classList.remove(\"dropdown--above\"),i.height>window.innerHeight-t.bottom-8&&(e.style.maxHeight=window.innerHeight-t.bottom-8+\"px\",e.style.overflowY=\"auto\")),i.right>window.innerWidth&&(e.style.left=\"\",e.style.right=window.innerWidth-t.right+\"px\",i.bottom>window.innerHeight?e.style.transformOrigin=\"bottom right\":e.style.transformOrigin=\"top right\")}}))}_handleOptionClick(e,t){t.stopPropagation(),this._dropdownOpened=!1,this.dispatchEvent(new CustomEvent(\"option-select\",{detail:{id:e.id,label:e.label},bubbles:!0,composed:!0}))}showLoading(){this._clearStateTimeout(),this._state=\"loading\",this._stateText=\"\"}showSuccess(e=\"Success\",t=2e3){this._clearStateTimeout(),this._state=\"success\",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}showError(e=\"Error\",t=2e3){this._clearStateTimeout(),this._state=\"error\",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}isLoading(){return\"loading\"===this._state}reset(){this._clearStateTimeout(),this._state=\"idle\",this._stateText=\"\"}_clearStateTimeout(){this._stateTimeout&&(clearTimeout(this._stateTimeout),this._stateTimeout=void 0)}updated(e){this.classList.toggle(\"kr-button--loading\",\"loading\"===this._state),this.classList.toggle(\"kr-button--success\",\"success\"===this._state),this.classList.toggle(\"kr-button--error\",\"error\"===this._state),this.classList.toggle(`kr-button--${this.variant}`,!0),this.classList.toggle(`kr-button--${this.color}`,!0),this.classList.toggle(\"kr-button--small\",\"small\"===this.size),this.classList.toggle(\"kr-button--large\",\"large\"===this.size),this.classList.toggle(\"kr-button--split\",this.split&&!!this.options.length)}render(){if(this.split&&this.options.length)return j` <div class=\"split-primary\" @click=${e=>this._handleSplitPrimaryClick(e)}> <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${\"idle\"!==this._state?j`<span class=\"state-overlay\"> ${\"loading\"===this._state?j`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} </div> <div class=\"split-divider\"></div> <div class=\"split-trigger\" @click=${e=>this._handleSplitTriggerClick(e)}> <svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg> </div> <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>j` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `;const e=j` <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this.options.length?j`<svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg>`:U} ${\"idle\"!==this._state?j`<span class=\"state-overlay\"> ${\"loading\"===this._state?j`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} ${this.options.length?j` <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>j` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `:U} `;return this.href?j`<a class=\"link\" href=${this.href} target=${this.target||U}>${e}</a>`:e}}"
|
|
941
941
|
},
|
|
942
942
|
{
|
|
943
943
|
"kind": "variable",
|
|
@@ -2065,7 +2065,7 @@
|
|
|
2065
2065
|
{
|
|
2066
2066
|
"kind": "variable",
|
|
2067
2067
|
"name": "KRButton",
|
|
2068
|
-
"default": "class KRButton extends LitElement { constructor() { super(...arguments); /** * The button variant (shape) */ this.variant = 'flat'; /** * The button color */ this.color = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; /** * Dropdown options - when provided, button becomes a dropdown */ this.options = []; /** * Position of the icon relative to the text content. * @attr icon-position */ this.iconPosition = 'left'; /** * When true and options are provided, renders as a split button with * separate primary action and dropdown trigger zones. */ this.split = false; this._state = 'idle'; this._stateText = ''; this._dropdownOpened = false; this._handleHostClick = (e) => { if (this.split && this.options.length) { return; } if (this.options.length) { e.stopPropagation(); this._toggleDropdown(); } }; this._handleKeydown = (e) => { if (e.key === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; return; } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (this.split && this.options.length) { this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true })); return; } if (this.options.length) { this._toggleDropdown(); } else { this.click(); } } if (this.split && this.options.length && e.key === 'ArrowDown') { e.preventDefault(); if (!this._dropdownOpened) { this._toggleDropdown(); } } }; this._handleClickOutside = (e) => { if (this._dropdownOpened && !this.contains(e.target)) { this._dropdownOpened = false; } }; } connectedCallback() { super.connectedCallback(); this.setAttribute('role', this.href ? 'link' : 'button'); this.setAttribute('tabindex', '0'); this.addEventListener('keydown', this._handleKeydown); this.addEventListener('click', this._handleHostClick); document.addEventListener('click', this._handleClickOutside); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('keydown', this._handleKeydown); this.removeEventListener('click', this._handleHostClick); document.removeEventListener('click', this._handleClickOutside); } _handleSplitPrimaryClick(e) { e.stopPropagation(); if (this._dropdownOpened) { this._dropdownOpened = false; } this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, })); } _handleSplitTriggerClick(e) { e.stopPropagation(); this._toggleDropdown(); } _toggleDropdown() { this._dropdownOpened = !this._dropdownOpened; if (this._dropdownOpened) { // Position the fixed dropdown relative to the host element requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.dropdown'); if (dropdown) { const hostRect = this.getBoundingClientRect(); dropdown.style.top = hostRect.bottom + 4 + 'px'; dropdown.style.bottom = ''; dropdown.style.left = hostRect.left + 'px'; dropdown.style.right = ''; dropdown.style.minWidth = hostRect.width + 'px'; dropdown.style.transformOrigin = 'top left'; const dropdownRect = dropdown.getBoundingClientRect(); // Open above if dropdown
|
|
2068
|
+
"default": "class KRButton extends LitElement { constructor() { super(...arguments); /** * The button variant (shape) */ this.variant = 'flat'; /** * The button color */ this.color = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; /** * Dropdown options - when provided, button becomes a dropdown */ this.options = []; /** * Position of the icon relative to the text content. * @attr icon-position */ this.iconPosition = 'left'; /** * When true and options are provided, renders as a split button with * separate primary action and dropdown trigger zones. */ this.split = false; this._state = 'idle'; this._stateText = ''; this._dropdownOpened = false; this._handleHostClick = (e) => { if (this.split && this.options.length) { return; } if (this.options.length) { e.stopPropagation(); this._toggleDropdown(); } }; this._handleKeydown = (e) => { if (e.key === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; return; } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (this.split && this.options.length) { this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true })); return; } if (this.options.length) { this._toggleDropdown(); } else { this.click(); } } if (this.split && this.options.length && e.key === 'ArrowDown') { e.preventDefault(); if (!this._dropdownOpened) { this._toggleDropdown(); } } }; this._handleClickOutside = (e) => { if (this._dropdownOpened && !this.contains(e.target)) { this._dropdownOpened = false; } }; } connectedCallback() { super.connectedCallback(); this.setAttribute('role', this.href ? 'link' : 'button'); this.setAttribute('tabindex', '0'); this.addEventListener('keydown', this._handleKeydown); this.addEventListener('click', this._handleHostClick); document.addEventListener('click', this._handleClickOutside); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('keydown', this._handleKeydown); this.removeEventListener('click', this._handleHostClick); document.removeEventListener('click', this._handleClickOutside); } _handleSplitPrimaryClick(e) { e.stopPropagation(); if (this._dropdownOpened) { this._dropdownOpened = false; } this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, })); } _handleSplitTriggerClick(e) { e.stopPropagation(); this._toggleDropdown(); } _toggleDropdown() { this._dropdownOpened = !this._dropdownOpened; if (this._dropdownOpened) { // Position the fixed dropdown relative to the host element requestAnimationFrame(() => { const dropdown = this.shadowRoot?.querySelector('.dropdown'); if (dropdown) { const hostRect = this.getBoundingClientRect(); dropdown.style.top = hostRect.bottom + 4 + 'px'; dropdown.style.bottom = ''; dropdown.style.left = hostRect.left + 'px'; dropdown.style.right = ''; dropdown.style.minWidth = hostRect.width + 'px'; dropdown.style.transformOrigin = 'top left'; dropdown.style.maxHeight = ''; dropdown.style.overflowY = ''; const dropdownRect = dropdown.getBoundingClientRect(); // Open above only if the dropdown doesn't fit below and there's more room above than below // 8 = 4px gap between button and dropdown + 4px margin from viewport edge if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) { dropdown.style.top = ''; dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px'; dropdown.style.transformOrigin = 'bottom left'; dropdown.classList.add('dropdown--above'); if (dropdownRect.height > hostRect.top - 8) { dropdown.style.maxHeight = hostRect.top - 8 + 'px'; dropdown.style.overflowY = 'auto'; } } else { dropdown.classList.remove('dropdown--above'); if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) { dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px'; dropdown.style.overflowY = 'auto'; } } // Align right if dropdown overflows viewport right if (dropdownRect.right > window.innerWidth) { dropdown.style.left = ''; dropdown.style.right = window.innerWidth - hostRect.right + 'px'; if (dropdownRect.bottom > window.innerHeight) { dropdown.style.transformOrigin = 'bottom right'; } else { dropdown.style.transformOrigin = 'top right'; } } } }); } } _handleOptionClick(option, e) { e.stopPropagation(); this._dropdownOpened = false; this.dispatchEvent(new CustomEvent('option-select', { detail: { id: option.id, label: option.label }, bubbles: true, composed: true })); } /** * Shows a loading spinner and disables the button. */ showLoading() { this._clearStateTimeout(); this._state = 'loading'; this._stateText = ''; } /** * Shows a success state with optional custom text. * @param text - Text to display (default: \"Saved\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showSuccess(text = 'Success', duration = 2000) { this._clearStateTimeout(); this._state = 'success'; this._stateText = text; if (duration > 0) { this._stateTimeout = window.setTimeout(() => this.reset(), duration); } } /** * Shows an error state with optional custom text. * @param text - Text to display (default: \"Error\") * @param duration - Duration in ms before auto-reset (default: 2000) */ showError(text = 'Error', duration = 2000) { this._clearStateTimeout(); this._state = 'error'; this._stateText = text; if (duration > 0) { this._stateTimeout = window.setTimeout(() => this.reset(), duration); } } /** * Returns whether the button is currently in the loading state. */ isLoading() { return this._state === 'loading'; } /** * Resets the button to its idle state. */ reset() { this._clearStateTimeout(); this._state = 'idle'; this._stateText = ''; } _clearStateTimeout() { if (this._stateTimeout) { clearTimeout(this._stateTimeout); this._stateTimeout = undefined; } } updated(changedProperties) { // Reflect state classes to host this.classList.toggle('kr-button--loading', this._state === 'loading'); this.classList.toggle('kr-button--success', this._state === 'success'); this.classList.toggle('kr-button--error', this._state === 'error'); this.classList.toggle(`kr-button--${this.variant}`, true); this.classList.toggle(`kr-button--${this.color}`, true); this.classList.toggle('kr-button--small', this.size === 'small'); this.classList.toggle('kr-button--large', this.size === 'large'); this.classList.toggle('kr-button--split', this.split && !!this.options.length); } render() { if (this.split && this.options.length) { return html ` <div class=\"split-primary\" @click=${(e) => this._handleSplitPrimaryClick(e)}> <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this._state !== 'idle' ? html `<span class=\"state-overlay\"> ${this._state === 'loading' ? html `<span class=\"spinner\"></span>` : this._stateText} </span>` : nothing} </div> <div class=\"split-divider\"></div> <div class=\"split-trigger\" @click=${(e) => this._handleSplitTriggerClick(e)}> <svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg> </div> <div class=\"dropdown ${this._dropdownOpened ? 'dropdown--opened' : ''}\"> ${this.options.map(option => html ` <button class=\"dropdown-item\" @click=${(e) => this._handleOptionClick(option, e)} >${option.label}</button> `)} </div> `; } const content = html ` <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this.options.length ? html `<svg class=\"caret\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/></svg>` : nothing} ${this._state !== 'idle' ? html `<span class=\"state-overlay\"> ${this._state === 'loading' ? html `<span class=\"spinner\"></span>` : this._stateText} </span>` : nothing} ${this.options.length ? html ` <div class=\"dropdown ${this._dropdownOpened ? 'dropdown--opened' : ''}\"> ${this.options.map(option => html ` <button class=\"dropdown-item\" @click=${(e) => this._handleOptionClick(option, e)} >${option.label}</button> `)} </div> ` : nothing} `; return this.href ? html `<a class=\"link\" href=${this.href} target=${this.target || nothing}>${content}</a>` : content; } }",
|
|
2069
2069
|
"description": "A customizable button component."
|
|
2070
2070
|
}
|
|
2071
2071
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAmapB;IAEF;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAU;IAErC;;OAEG;IAEH,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAa;IAEtD;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B;;;OAGG;IAEH,YAAY,EAAE,MAAM,GAAG,OAAO,CAAU;IAExC;;;OAGG;IAEH,KAAK,UAAS;IAGd,OAAO,CAAC,MAAM,CAAoD;IAGlE,OAAO,CAAC,UAAU,CAAM;IAGxB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,iBAAiB;IASjB,oBAAoB;IAOpB,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,cAAc,CAuBpB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,eAAe;IAsDvB,OAAO,CAAC,kBAAkB;IAU1B;;OAEG;IACH,WAAW;IAMX;;;;OAIG;IACH,WAAW,CAAC,IAAI,SAAY,EAAE,QAAQ,SAAO;IAS7C;;;;OAIG;IACH,SAAS,CAAC,IAAI,SAAU,EAAE,QAAQ,SAAO;IASzC;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACH,KAAK;IAML,OAAO,CAAC,kBAAkB;cAOP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYzD,MAAM;CA4DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/button/button.js
CHANGED
|
@@ -132,16 +132,27 @@ let KRButton = class KRButton extends LitElement {
|
|
|
132
132
|
dropdown.style.right = '';
|
|
133
133
|
dropdown.style.minWidth = hostRect.width + 'px';
|
|
134
134
|
dropdown.style.transformOrigin = 'top left';
|
|
135
|
+
dropdown.style.maxHeight = '';
|
|
136
|
+
dropdown.style.overflowY = '';
|
|
135
137
|
const dropdownRect = dropdown.getBoundingClientRect();
|
|
136
|
-
// Open above if dropdown
|
|
137
|
-
|
|
138
|
+
// Open above only if the dropdown doesn't fit below and there's more room above than below
|
|
139
|
+
// 8 = 4px gap between button and dropdown + 4px margin from viewport edge
|
|
140
|
+
if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) {
|
|
138
141
|
dropdown.style.top = '';
|
|
139
142
|
dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
|
|
140
143
|
dropdown.style.transformOrigin = 'bottom left';
|
|
141
144
|
dropdown.classList.add('dropdown--above');
|
|
145
|
+
if (dropdownRect.height > hostRect.top - 8) {
|
|
146
|
+
dropdown.style.maxHeight = hostRect.top - 8 + 'px';
|
|
147
|
+
dropdown.style.overflowY = 'auto';
|
|
148
|
+
}
|
|
142
149
|
}
|
|
143
150
|
else {
|
|
144
151
|
dropdown.classList.remove('dropdown--above');
|
|
152
|
+
if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) {
|
|
153
|
+
dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px';
|
|
154
|
+
dropdown.style.overflowY = 'auto';
|
|
155
|
+
}
|
|
145
156
|
}
|
|
146
157
|
// Align right if dropdown overflows viewport right
|
|
147
158
|
if (dropdownRect.right > window.innerWidth) {
|
|
@@ -462,6 +473,7 @@ KRButton.styles = css `
|
|
|
462
473
|
.dropdown {
|
|
463
474
|
position: fixed;
|
|
464
475
|
min-width: 100%;
|
|
476
|
+
box-sizing: border-box;
|
|
465
477
|
background: white;
|
|
466
478
|
border: 1px solid #9ba7b6;
|
|
467
479
|
border-radius: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.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,MAAM,mBAAmB,CAAC;AAOnE;;;;;;;GAOG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAqaL;;WAEG;QAEH,YAAO,GAAuB,MAAM,CAAC;QAErC;;WAEG;QAEH,UAAK,GAAuC,SAAS,CAAC;QAEtD;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAcjB;;WAEG;QAEH,YAAO,GAAqB,EAAE,CAAC;QAE/B;;;WAGG;QAEH,iBAAY,GAAqB,MAAM,CAAC;QAExC;;;WAGG;QAEH,UAAK,GAAG,KAAK,CAAC;QAGN,WAAM,GAA6C,MAAM,CAAC;QAG1D,eAAU,GAAG,EAAE,CAAC;QAGhB,oBAAe,GAAG,KAAK,CAAC;QAoBxB,qBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC3C,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gBACtC,OAAO;YACT,CAAC;YACD,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC/C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;gBAC7B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;oBACtC,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;oBAC/E,OAAO;gBACT,CAAC;gBACD,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;oBACxB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,CAAC;YACH,CAAC;YACD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC/D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;oBAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC9C,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC7D,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;IA2MJ,CAAC;IAlQC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QACzD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAClE,CAAC;IA2CO,wBAAwB,CAAC,CAAa;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE;YACzC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAEO,wBAAwB,CAAC,CAAa;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;QAE7C,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,2DAA2D;YAC3D,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,WAAW,CAAgB,CAAC;gBAC5E,IAAI,QAAQ,EAAE,CAAC;oBACb,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;oBAC9C,QAAQ,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC;oBAChD,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;oBAC3B,QAAQ,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;oBAC3C,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC1B,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;oBAChD,QAAQ,CAAC,KAAK,CAAC,eAAe,GAAG,UAAU,CAAC;oBAE5C,MAAM,YAAY,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;oBAEtD,mDAAmD;oBACnD,IAAI,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;wBAC7C,QAAQ,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC;wBACxB,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;wBACrE,QAAQ,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;wBAC/C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;oBAC5C,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;oBAC/C,CAAC;oBAED,mDAAmD;oBACnD,IAAI,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;wBAC3C,QAAQ,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC;wBACzB,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;wBACjE,IAAI,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;4BAC7C,QAAQ,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC;wBAClD,CAAC;6BAAM,CAAC;4BACN,QAAQ,CAAC,KAAK,CAAC,eAAe,GAAG,WAAW,CAAC;wBAC/C,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,kBAAkB,CAAC,MAAsB,EAAE,CAAa;QAC9D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE;YAClD,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE;YAC9C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,IAAI,GAAG,SAAS,EAAE,QAAQ,GAAG,IAAI;QAC3C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,SAAS,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,GAAG,IAAI;QACvC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED;;OAEG;IACH,SAAS;QACP,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QACjC,CAAC;IACH,CAAC;IAEkB,OAAO,CAAC,iBAAuC;QAChE,gCAAgC;QAChC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,CAAC;QACxD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;QACjE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;QACjE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACjF,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACtC,OAAO,IAAI,CAAA;4CAC2B,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC;;;;;YAKnF,IAAI,CAAC,MAAM,KAAK,MAAM;gBACtB,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,MAAM,KAAK,SAAS;oBACzB,CAAC,CAAC,IAAI,CAAA,+BAA+B;oBACrC,CAAC,CAAC,IAAI,CAAC,UAAU;sBACb;gBACV,CAAC,CAAC,OAAO;;;4CAGuB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC;;;+BAGhE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACjE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;uBAGpB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAC;eAC7D,MAAM,CAAC,KAAK;WAChB,CAAC;;OAEL,CAAC;QACJ,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAA;;;;;QAKhB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,gMAAgM,CAAC,CAAC,CAAC,OAAO;QACpO,IAAI,CAAC,MAAM,KAAK,MAAM;YACtB,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,MAAM,KAAK,SAAS;gBACzB,CAAC,CAAC,IAAI,CAAA,+BAA+B;gBACrC,CAAC,CAAC,IAAI,CAAC,UAAU;kBACb;YACV,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;+BACH,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACjE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;uBAGpB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAC;eAC7D,MAAM,CAAC,KAAK;WAChB,CAAC;;OAEL,CAAC,CAAC,CAAC,OAAO;KACZ,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,MAAM,IAAI,OAAO,IAAI,OAAO,MAAM;YACzF,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;;AAxuBe,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAka3B,AAlaqB,CAkapB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACL;AAMrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACY;AAMtD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACI;AAM9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAMd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACX;AAMhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCACK;AAO/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;8CAC9B;AAOxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC7B;AAGN;IADP,KAAK,EAAE;wCAC0D;AAG1D;IADP,KAAK,EAAE;4CACgB;AAGhB;IADP,KAAK,EAAE;iDACwB;AAperB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0uBpB"}
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -565,16 +565,27 @@ let KRButton = class KRButton extends i$2 {
|
|
|
565
565
|
dropdown.style.right = '';
|
|
566
566
|
dropdown.style.minWidth = hostRect.width + 'px';
|
|
567
567
|
dropdown.style.transformOrigin = 'top left';
|
|
568
|
+
dropdown.style.maxHeight = '';
|
|
569
|
+
dropdown.style.overflowY = '';
|
|
568
570
|
const dropdownRect = dropdown.getBoundingClientRect();
|
|
569
|
-
// Open above if dropdown
|
|
570
|
-
|
|
571
|
+
// Open above only if the dropdown doesn't fit below and there's more room above than below
|
|
572
|
+
// 8 = 4px gap between button and dropdown + 4px margin from viewport edge
|
|
573
|
+
if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) {
|
|
571
574
|
dropdown.style.top = '';
|
|
572
575
|
dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
|
|
573
576
|
dropdown.style.transformOrigin = 'bottom left';
|
|
574
577
|
dropdown.classList.add('dropdown--above');
|
|
578
|
+
if (dropdownRect.height > hostRect.top - 8) {
|
|
579
|
+
dropdown.style.maxHeight = hostRect.top - 8 + 'px';
|
|
580
|
+
dropdown.style.overflowY = 'auto';
|
|
581
|
+
}
|
|
575
582
|
}
|
|
576
583
|
else {
|
|
577
584
|
dropdown.classList.remove('dropdown--above');
|
|
585
|
+
if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) {
|
|
586
|
+
dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px';
|
|
587
|
+
dropdown.style.overflowY = 'auto';
|
|
588
|
+
}
|
|
578
589
|
}
|
|
579
590
|
// Align right if dropdown overflows viewport right
|
|
580
591
|
if (dropdownRect.right > window.innerWidth) {
|
|
@@ -895,6 +906,7 @@ KRButton.styles = i$5 `
|
|
|
895
906
|
.dropdown {
|
|
896
907
|
position: fixed;
|
|
897
908
|
min-width: 100%;
|
|
909
|
+
box-sizing: border-box;
|
|
898
910
|
background: white;
|
|
899
911
|
border: 1px solid #9ba7b6;
|
|
900
912
|
border-radius: 8px;
|