@kodaris/krubble-components 1.0.69 → 1.0.70
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 +60 -11
- package/dist/button/button.d.ts +7 -0
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +216 -2
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +216 -2
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +185 -15
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +216 -2
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +193 -23
- 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'; this._state = 'idle'; this._stateText = ''; this._dropdownOpened = false; this._handleHostClick = (e) => { if (this.options.length) { e.stopPropagation(); this._toggleDropdown(); } }; this._handleKeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (this.options.length) { this._toggleDropdown(); } else { this.click(); } } if (e.key === '
|
|
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 overflows viewport bottom if (dropdownRect.bottom > window.innerHeight) { dropdown.style.top = ''; dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px'; dropdown.style.transformOrigin = 'bottom left'; dropdown.classList.add('dropdown--above'); } else { dropdown.classList.remove('dropdown--above'); } // 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
|
{
|
|
@@ -926,7 +926,7 @@
|
|
|
926
926
|
},
|
|
927
927
|
{
|
|
928
928
|
"kind": "variable",
|
|
929
|
-
"name": "
|
|
929
|
+
"name": "be",
|
|
930
930
|
"default": "class extends ae{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return j` <div class=\"header\" @click=${this.toggle}> <span class=\"header__title\">${this.header}</span> <svg class=\"header__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 9l6 6 6-6\"/> </svg> </div> <div class=\"content\"> <div class=\"content__inner\"> <div class=\"content__body\"> <slot></slot> </div> </div> </div> `}}"
|
|
931
931
|
},
|
|
932
932
|
{
|
|
@@ -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._state=\"idle\",this._stateText=\"\",this._dropdownOpened=!1,this._handleHostClick=e=>{this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{\"Enter\"
|
|
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}}"
|
|
941
941
|
},
|
|
942
942
|
{
|
|
943
943
|
"kind": "variable",
|
|
@@ -1247,7 +1247,7 @@
|
|
|
1247
1247
|
},
|
|
1248
1248
|
{
|
|
1249
1249
|
"kind": "variable",
|
|
1250
|
-
"name": "
|
|
1250
|
+
"name": "bt",
|
|
1251
1251
|
"default": "class extends ae{constructor(){super(...arguments),this.size=\"md\",this.color=\"dark\"}render(){var e=\"\",t=\"\";return e=\"sm\"==this.size?\"16px\":\"md\"==this.size?\"24px\":\"lg\"==this.size?\"32px\":\"xl\"==this.size?\"48px\":this.size,t=\"dark\"==this.color?\"#163052\":\"light\"==this.color?\"#ffffff\":this.color,j` <svg class=\"spinner\" style=${`width: ${e}; height: ${e}; color: ${t}`} viewBox=\"0 0 44 44\" role=\"status\" aria-label=\"Loading\" > <circle class=\"circle\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"4\" /> </svg> `}}"
|
|
1252
1252
|
},
|
|
1253
1253
|
{
|
|
@@ -1316,7 +1316,7 @@
|
|
|
1316
1316
|
"kind": "js",
|
|
1317
1317
|
"name": "KRAccordion",
|
|
1318
1318
|
"declaration": {
|
|
1319
|
-
"name": "
|
|
1319
|
+
"name": "be",
|
|
1320
1320
|
"module": "dist/krubble-components.bundled.min.js"
|
|
1321
1321
|
}
|
|
1322
1322
|
},
|
|
@@ -1468,7 +1468,7 @@
|
|
|
1468
1468
|
"kind": "js",
|
|
1469
1469
|
"name": "KRSpinner",
|
|
1470
1470
|
"declaration": {
|
|
1471
|
-
"name": "
|
|
1471
|
+
"name": "bt",
|
|
1472
1472
|
"module": "dist/krubble-components.bundled.min.js"
|
|
1473
1473
|
}
|
|
1474
1474
|
},
|
|
@@ -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'; this._state = 'idle'; this._stateText = ''; this._dropdownOpened = false; this._handleHostClick = (e) => { if (this.options.length) { e.stopPropagation(); this._toggleDropdown(); } }; this._handleKeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (this.options.length) { this._toggleDropdown(); } else { this.click(); } } if (e.key === '
|
|
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 overflows viewport bottom if (dropdownRect.bottom > window.innerHeight) { dropdown.style.top = ''; dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px'; dropdown.style.transformOrigin = 'bottom left'; dropdown.classList.add('dropdown--above'); } else { dropdown.classList.remove('dropdown--above'); } // 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
|
],
|
|
@@ -3166,6 +3166,17 @@
|
|
|
3166
3166
|
"attribute": "icon-position",
|
|
3167
3167
|
"reflects": true
|
|
3168
3168
|
},
|
|
3169
|
+
{
|
|
3170
|
+
"kind": "field",
|
|
3171
|
+
"name": "split",
|
|
3172
|
+
"type": {
|
|
3173
|
+
"text": "boolean"
|
|
3174
|
+
},
|
|
3175
|
+
"default": "false",
|
|
3176
|
+
"description": "When true and options are provided, renders as a split button with\nseparate primary action and dropdown trigger zones.",
|
|
3177
|
+
"attribute": "split",
|
|
3178
|
+
"reflects": true
|
|
3179
|
+
},
|
|
3169
3180
|
{
|
|
3170
3181
|
"kind": "field",
|
|
3171
3182
|
"name": "_state",
|
|
@@ -3216,6 +3227,32 @@
|
|
|
3216
3227
|
"name": "_handleClickOutside",
|
|
3217
3228
|
"privacy": "private"
|
|
3218
3229
|
},
|
|
3230
|
+
{
|
|
3231
|
+
"kind": "method",
|
|
3232
|
+
"name": "_handleSplitPrimaryClick",
|
|
3233
|
+
"privacy": "private",
|
|
3234
|
+
"parameters": [
|
|
3235
|
+
{
|
|
3236
|
+
"name": "e",
|
|
3237
|
+
"type": {
|
|
3238
|
+
"text": "MouseEvent"
|
|
3239
|
+
}
|
|
3240
|
+
}
|
|
3241
|
+
]
|
|
3242
|
+
},
|
|
3243
|
+
{
|
|
3244
|
+
"kind": "method",
|
|
3245
|
+
"name": "_handleSplitTriggerClick",
|
|
3246
|
+
"privacy": "private",
|
|
3247
|
+
"parameters": [
|
|
3248
|
+
{
|
|
3249
|
+
"name": "e",
|
|
3250
|
+
"type": {
|
|
3251
|
+
"text": "MouseEvent"
|
|
3252
|
+
}
|
|
3253
|
+
}
|
|
3254
|
+
]
|
|
3255
|
+
},
|
|
3219
3256
|
{
|
|
3220
3257
|
"kind": "method",
|
|
3221
3258
|
"name": "_toggleDropdown",
|
|
@@ -3301,16 +3338,19 @@
|
|
|
3301
3338
|
}
|
|
3302
3339
|
],
|
|
3303
3340
|
"events": [
|
|
3341
|
+
{
|
|
3342
|
+
"name": "click",
|
|
3343
|
+
"type": {
|
|
3344
|
+
"text": "MouseEvent"
|
|
3345
|
+
},
|
|
3346
|
+
"description": "Fired when the button is clicked"
|
|
3347
|
+
},
|
|
3304
3348
|
{
|
|
3305
3349
|
"name": "option-select",
|
|
3306
3350
|
"type": {
|
|
3307
3351
|
"text": "CustomEvent"
|
|
3308
3352
|
},
|
|
3309
3353
|
"description": "Fired when a dropdown option is selected"
|
|
3310
|
-
},
|
|
3311
|
-
{
|
|
3312
|
-
"description": "Fired when the button is clicked",
|
|
3313
|
-
"name": "click"
|
|
3314
3354
|
}
|
|
3315
3355
|
],
|
|
3316
3356
|
"attributes": [
|
|
@@ -3384,6 +3424,15 @@
|
|
|
3384
3424
|
"default": "[]",
|
|
3385
3425
|
"description": "Dropdown options - when provided, button becomes a dropdown",
|
|
3386
3426
|
"fieldName": "options"
|
|
3427
|
+
},
|
|
3428
|
+
{
|
|
3429
|
+
"name": "split",
|
|
3430
|
+
"type": {
|
|
3431
|
+
"text": "boolean"
|
|
3432
|
+
},
|
|
3433
|
+
"default": "false",
|
|
3434
|
+
"description": "When true and options are provided, renders as a split button with\nseparate primary action and dropdown trigger zones.",
|
|
3435
|
+
"fieldName": "split"
|
|
3387
3436
|
}
|
|
3388
3437
|
],
|
|
3389
3438
|
"superclass": {
|
package/dist/button/button.d.ts
CHANGED
|
@@ -46,6 +46,11 @@ export declare class KRButton extends LitElement {
|
|
|
46
46
|
* @attr icon-position
|
|
47
47
|
*/
|
|
48
48
|
iconPosition: 'left' | 'right';
|
|
49
|
+
/**
|
|
50
|
+
* When true and options are provided, renders as a split button with
|
|
51
|
+
* separate primary action and dropdown trigger zones.
|
|
52
|
+
*/
|
|
53
|
+
split: boolean;
|
|
49
54
|
private _state;
|
|
50
55
|
private _stateText;
|
|
51
56
|
private _dropdownOpened;
|
|
@@ -55,6 +60,8 @@ export declare class KRButton extends LitElement {
|
|
|
55
60
|
private _handleHostClick;
|
|
56
61
|
private _handleKeydown;
|
|
57
62
|
private _handleClickOutside;
|
|
63
|
+
private _handleSplitPrimaryClick;
|
|
64
|
+
private _handleSplitTriggerClick;
|
|
58
65
|
private _toggleDropdown;
|
|
59
66
|
private _handleOptionClick;
|
|
60
67
|
/**
|
|
@@ -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,0BAkapB;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;IA2CvB,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
|
@@ -42,18 +42,34 @@ let KRButton = class KRButton extends LitElement {
|
|
|
42
42
|
* @attr icon-position
|
|
43
43
|
*/
|
|
44
44
|
this.iconPosition = 'left';
|
|
45
|
+
/**
|
|
46
|
+
* When true and options are provided, renders as a split button with
|
|
47
|
+
* separate primary action and dropdown trigger zones.
|
|
48
|
+
*/
|
|
49
|
+
this.split = false;
|
|
45
50
|
this._state = 'idle';
|
|
46
51
|
this._stateText = '';
|
|
47
52
|
this._dropdownOpened = false;
|
|
48
53
|
this._handleHostClick = (e) => {
|
|
54
|
+
if (this.split && this.options.length) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
49
57
|
if (this.options.length) {
|
|
50
58
|
e.stopPropagation();
|
|
51
59
|
this._toggleDropdown();
|
|
52
60
|
}
|
|
53
61
|
};
|
|
54
62
|
this._handleKeydown = (e) => {
|
|
63
|
+
if (e.key === 'Escape' && this._dropdownOpened) {
|
|
64
|
+
this._dropdownOpened = false;
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
55
67
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
56
68
|
e.preventDefault();
|
|
69
|
+
if (this.split && this.options.length) {
|
|
70
|
+
this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
57
73
|
if (this.options.length) {
|
|
58
74
|
this._toggleDropdown();
|
|
59
75
|
}
|
|
@@ -61,8 +77,11 @@ let KRButton = class KRButton extends LitElement {
|
|
|
61
77
|
this.click();
|
|
62
78
|
}
|
|
63
79
|
}
|
|
64
|
-
if (e.key === '
|
|
65
|
-
|
|
80
|
+
if (this.split && this.options.length && e.key === 'ArrowDown') {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
if (!this._dropdownOpened) {
|
|
83
|
+
this._toggleDropdown();
|
|
84
|
+
}
|
|
66
85
|
}
|
|
67
86
|
};
|
|
68
87
|
this._handleClickOutside = (e) => {
|
|
@@ -85,6 +104,20 @@ let KRButton = class KRButton extends LitElement {
|
|
|
85
104
|
this.removeEventListener('click', this._handleHostClick);
|
|
86
105
|
document.removeEventListener('click', this._handleClickOutside);
|
|
87
106
|
}
|
|
107
|
+
_handleSplitPrimaryClick(e) {
|
|
108
|
+
e.stopPropagation();
|
|
109
|
+
if (this._dropdownOpened) {
|
|
110
|
+
this._dropdownOpened = false;
|
|
111
|
+
}
|
|
112
|
+
this.dispatchEvent(new MouseEvent('click', {
|
|
113
|
+
bubbles: true,
|
|
114
|
+
composed: true,
|
|
115
|
+
}));
|
|
116
|
+
}
|
|
117
|
+
_handleSplitTriggerClick(e) {
|
|
118
|
+
e.stopPropagation();
|
|
119
|
+
this._toggleDropdown();
|
|
120
|
+
}
|
|
88
121
|
_toggleDropdown() {
|
|
89
122
|
this._dropdownOpened = !this._dropdownOpened;
|
|
90
123
|
if (this._dropdownOpened) {
|
|
@@ -197,8 +230,38 @@ let KRButton = class KRButton extends LitElement {
|
|
|
197
230
|
this.classList.toggle(`kr-button--${this.color}`, true);
|
|
198
231
|
this.classList.toggle('kr-button--small', this.size === 'small');
|
|
199
232
|
this.classList.toggle('kr-button--large', this.size === 'large');
|
|
233
|
+
this.classList.toggle('kr-button--split', this.split && !!this.options.length);
|
|
200
234
|
}
|
|
201
235
|
render() {
|
|
236
|
+
if (this.split && this.options.length) {
|
|
237
|
+
return html `
|
|
238
|
+
<div class="split-primary" @click=${(e) => this._handleSplitPrimaryClick(e)}>
|
|
239
|
+
<span class="content">
|
|
240
|
+
<slot name="icon"></slot>
|
|
241
|
+
<slot></slot>
|
|
242
|
+
</span>
|
|
243
|
+
${this._state !== 'idle'
|
|
244
|
+
? html `<span class="state-overlay">
|
|
245
|
+
${this._state === 'loading'
|
|
246
|
+
? html `<span class="spinner"></span>`
|
|
247
|
+
: this._stateText}
|
|
248
|
+
</span>`
|
|
249
|
+
: nothing}
|
|
250
|
+
</div>
|
|
251
|
+
<div class="split-divider"></div>
|
|
252
|
+
<div class="split-trigger" @click=${(e) => this._handleSplitTriggerClick(e)}>
|
|
253
|
+
<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>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="dropdown ${this._dropdownOpened ? 'dropdown--opened' : ''}">
|
|
256
|
+
${this.options.map(option => html `
|
|
257
|
+
<button
|
|
258
|
+
class="dropdown-item"
|
|
259
|
+
@click=${(e) => this._handleOptionClick(option, e)}
|
|
260
|
+
>${option.label}</button>
|
|
261
|
+
`)}
|
|
262
|
+
</div>
|
|
263
|
+
`;
|
|
264
|
+
}
|
|
202
265
|
const content = html `
|
|
203
266
|
<span class="content">
|
|
204
267
|
<slot name="icon"></slot>
|
|
@@ -498,6 +561,154 @@ KRButton.styles = css `
|
|
|
498
561
|
width: 22px;
|
|
499
562
|
height: 22px;
|
|
500
563
|
}
|
|
564
|
+
|
|
565
|
+
/* ========================
|
|
566
|
+
Split Button
|
|
567
|
+
======================== */
|
|
568
|
+
|
|
569
|
+
:host(.kr-button--split) {
|
|
570
|
+
padding: 0;
|
|
571
|
+
pointer-events: none;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.split-primary,
|
|
575
|
+
.split-trigger {
|
|
576
|
+
display: inline-flex;
|
|
577
|
+
align-items: center;
|
|
578
|
+
justify-content: center;
|
|
579
|
+
height: 100%;
|
|
580
|
+
cursor: pointer;
|
|
581
|
+
pointer-events: auto;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.split-primary {
|
|
585
|
+
padding: 0 16px 0 22px;
|
|
586
|
+
border-radius: 20px 0 0 20px;
|
|
587
|
+
position: relative;
|
|
588
|
+
flex: 1;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.split-trigger {
|
|
592
|
+
padding: 0 14px 0 8px;
|
|
593
|
+
border-radius: 0 20px 20px 0;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.split-trigger .caret {
|
|
597
|
+
margin: 0;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.split-divider {
|
|
601
|
+
width: 1px;
|
|
602
|
+
height: 100%;
|
|
603
|
+
flex-shrink: 0;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.dropdown {
|
|
607
|
+
pointer-events: auto;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
/* Split: zone hover — flat primary */
|
|
611
|
+
:host(.kr-button--flat.kr-button--primary) .split-primary:hover,
|
|
612
|
+
:host(.kr-button--flat.kr-button--primary) .split-trigger:hover {
|
|
613
|
+
background: #0e1f35;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
/* Split: zone hover — flat secondary */
|
|
617
|
+
:host(.kr-button--flat.kr-button--secondary) .split-primary:hover,
|
|
618
|
+
:host(.kr-button--flat.kr-button--secondary) .split-trigger:hover {
|
|
619
|
+
background: #e5e7eb;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
/* Split: zone hover — flat danger */
|
|
623
|
+
:host(.kr-button--flat.kr-button--danger) .split-primary:hover,
|
|
624
|
+
:host(.kr-button--flat.kr-button--danger) .split-trigger:hover {
|
|
625
|
+
background: #b91c1c;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
/* Split: zone hover — outline primary */
|
|
629
|
+
:host(.kr-button--outline.kr-button--primary) .split-primary:hover,
|
|
630
|
+
:host(.kr-button--outline.kr-button--primary) .split-trigger:hover {
|
|
631
|
+
background: rgba(22, 48, 82, 0.05);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/* Split: zone hover — outline secondary */
|
|
635
|
+
:host(.kr-button--outline.kr-button--secondary) .split-primary:hover,
|
|
636
|
+
:host(.kr-button--outline.kr-button--secondary) .split-trigger:hover {
|
|
637
|
+
background: #f9fafb;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
/* Split: zone hover — outline danger */
|
|
641
|
+
:host(.kr-button--outline.kr-button--danger) .split-primary:hover,
|
|
642
|
+
:host(.kr-button--outline.kr-button--danger) .split-trigger:hover {
|
|
643
|
+
background: rgba(219, 38, 39, 0.05);
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
/* Split: divider colors — flat variants */
|
|
647
|
+
:host(.kr-button--flat.kr-button--primary) .split-divider {
|
|
648
|
+
background: rgba(255, 255, 255, 0.3);
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
:host(.kr-button--flat.kr-button--secondary) .split-divider {
|
|
652
|
+
background: rgba(0, 0, 0, 0.15);
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
:host(.kr-button--flat.kr-button--danger) .split-divider {
|
|
656
|
+
background: rgba(255, 255, 255, 0.3);
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
/* Split: divider colors — outline variants */
|
|
660
|
+
:host(.kr-button--outline.kr-button--primary) .split-divider {
|
|
661
|
+
background: #163052;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
:host(.kr-button--outline.kr-button--secondary) .split-divider {
|
|
665
|
+
background: #d1d5db;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
:host(.kr-button--outline.kr-button--danger) .split-divider {
|
|
669
|
+
background: rgb(219, 38, 39);
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
/* Split: size small */
|
|
673
|
+
:host(.kr-button--split.kr-button--small) .split-primary {
|
|
674
|
+
padding: 0 12px 0 16px;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
:host(.kr-button--split.kr-button--small) .split-trigger {
|
|
678
|
+
padding: 0 10px;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
/* Split: size large */
|
|
682
|
+
:host(.kr-button--split.kr-button--large) .split-primary {
|
|
683
|
+
padding: 0 18px 0 24px;
|
|
684
|
+
border-radius: 30px 0 0 30px;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
:host(.kr-button--split.kr-button--large) .split-trigger {
|
|
688
|
+
padding: 0 16px;
|
|
689
|
+
border-radius: 0 30px 30px 0;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
/* Split: disabled */
|
|
693
|
+
:host([disabled]) .split-primary,
|
|
694
|
+
:host([disabled]) .split-trigger {
|
|
695
|
+
cursor: not-allowed;
|
|
696
|
+
pointer-events: none;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
/* Split: loading/success/error — overlay in primary zone only */
|
|
700
|
+
:host(.kr-button--split.kr-button--loading) .split-primary .content,
|
|
701
|
+
:host(.kr-button--split.kr-button--success) .split-primary .content,
|
|
702
|
+
:host(.kr-button--split.kr-button--error) .split-primary .content {
|
|
703
|
+
visibility: hidden;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
:host(.kr-button--split.kr-button--loading) .split-trigger,
|
|
707
|
+
:host(.kr-button--split.kr-button--success) .split-trigger,
|
|
708
|
+
:host(.kr-button--split.kr-button--error) .split-trigger {
|
|
709
|
+
pointer-events: none;
|
|
710
|
+
opacity: 0.6;
|
|
711
|
+
}
|
|
501
712
|
`;
|
|
502
713
|
__decorate([
|
|
503
714
|
property({ type: String, reflect: true })
|
|
@@ -523,6 +734,9 @@ __decorate([
|
|
|
523
734
|
__decorate([
|
|
524
735
|
property({ type: String, reflect: true, attribute: 'icon-position' })
|
|
525
736
|
], KRButton.prototype, "iconPosition", void 0);
|
|
737
|
+
__decorate([
|
|
738
|
+
property({ type: Boolean, reflect: true })
|
|
739
|
+
], KRButton.prototype, "split", void 0);
|
|
526
740
|
__decorate([
|
|
527
741
|
state()
|
|
528
742
|
], KRButton.prototype, "_state", void 0);
|
|
@@ -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;;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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"}
|