@kodaris/krubble-components 1.0.44 → 1.0.45
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 +8 -8
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +17 -2
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +17 -2
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +32 -32
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +17 -2
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +2 -2
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
{
|
|
211
211
|
"kind": "variable",
|
|
212
212
|
"name": "KRButton",
|
|
213
|
-
"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 === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; } }; 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); } _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.left = hostRect.left + 'px'; dropdown.style.minWidth = hostRect.width + 'px'; //
|
|
213
|
+
"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 === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; } }; 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); } _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'; } // 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); } } /** * 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'); } render() { 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; } }",
|
|
214
214
|
"description": "A customizable button component."
|
|
215
215
|
},
|
|
216
216
|
{
|
|
@@ -569,7 +569,7 @@
|
|
|
569
569
|
},
|
|
570
570
|
{
|
|
571
571
|
"kind": "variable",
|
|
572
|
-
"name": "
|
|
572
|
+
"name": "le",
|
|
573
573
|
"default": "r` :host, *, *::before, *::after { box-sizing: border-box; } :host { /* Primary */ --kr-primary: rgb(22, 48, 82); --kr-primary-hover: rgb(16, 36, 62); --kr-primary-text: #ffffff; /* Accent */ --kr-accent: #BEEA4E; --kr-accent-hover: #a8d43a; --kr-accent-text: #000000; /* Text */ --kr-text: #000000; --kr-text-muted: #4b5563; --kr-text-disabled: #9ca3af; /* Borders */ --kr-border: #e5e7eb; } `"
|
|
574
574
|
},
|
|
575
575
|
{
|
|
@@ -585,7 +585,7 @@
|
|
|
585
585
|
{
|
|
586
586
|
"kind": "variable",
|
|
587
587
|
"name": "ze",
|
|
588
|
-
"default": "class extends re{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\"!==e.key&&\" \"!==e.key||(e.preventDefault(),this.options.length?this._toggleDropdown():this.click()),\"Escape\"===e.key&&this._dropdownOpened&&(this._dropdownOpened=!1)},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)}_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.left=t.left+\"px\",e.style.minWidth=t.width+\"px\";e.getBoundingClientRect().right>window.innerWidth&&(e.style.left=\"\",e.style.right=window.innerWidth-t.right+\"px\")}}))}_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))}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)}render(){const e=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>`:U} ${\"idle\"!==this._state?B`<span class=\"state-overlay\"> ${\"loading\"===this._state?B`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} ${this.options.length?B` <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>B` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `:U} `;return this.href?B`<a class=\"link\" href=${this.href} target=${this.target||U}>${e}</a>`:e}}"
|
|
588
|
+
"default": "class extends re{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\"!==e.key&&\" \"!==e.key||(e.preventDefault(),this.options.length?this._toggleDropdown():this.click()),\"Escape\"===e.key&&this._dropdownOpened&&(this._dropdownOpened=!1)},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)}_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\"),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))}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)}render(){const e=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>`:U} ${\"idle\"!==this._state?B`<span class=\"state-overlay\"> ${\"loading\"===this._state?B`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} ${this.options.length?B` <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>B` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `:U} `;return this.href?B`<a class=\"link\" href=${this.href} target=${this.target||U}>${e}</a>`:e}}"
|
|
589
589
|
},
|
|
590
590
|
{
|
|
591
591
|
"kind": "variable",
|
|
@@ -683,12 +683,12 @@
|
|
|
683
683
|
},
|
|
684
684
|
{
|
|
685
685
|
"kind": "variable",
|
|
686
|
-
"name": "
|
|
686
|
+
"name": "nt"
|
|
687
687
|
},
|
|
688
688
|
{
|
|
689
689
|
"kind": "variable",
|
|
690
690
|
"name": "at",
|
|
691
|
-
"default": "class extends re{constructor(){super(...arguments),this.files=[],this.emptyMessage=\"No files\"}_handleFileClick(e){this.dispatchEvent(new CustomEvent(\"file-click\",{bubbles:!0,composed:!0,detail:{file:e}})),e.url&&
|
|
691
|
+
"default": "class extends re{constructor(){super(...arguments),this.files=[],this.emptyMessage=\"No files\"}_handleFileClick(e){this.dispatchEvent(new CustomEvent(\"file-click\",{bubbles:!0,composed:!0,detail:{file:e}})),e.url&&nt.open({src:e.url,name:e.name})}_handleDownload(e){this.dispatchEvent(new CustomEvent(\"download\",{bubbles:!0,composed:!0,detail:{file:e}})),e.url&&fetch(e.url).then((e=>e.blob())).then((t=>{const i=URL.createObjectURL(t),o=document.createElement(\"a\");o.href=i,o.download=e.name||\"file\",o.click(),URL.revokeObjectURL(i)}))}_handleDelete(e){this.dispatchEvent(new CustomEvent(\"delete\",{bubbles:!0,composed:!0,detail:{file:e}}))}_getExtension(e){return e.split(\".\").pop()?.toLowerCase()||\"\"}_getExtClass(e){return[\"pdf\"].includes(e)?\"file-list__ext--pdf\":[\"doc\",\"docx\",\"rtf\",\"txt\"].includes(e)?\"file-list__ext--doc\":[\"xls\",\"xlsx\",\"csv\"].includes(e)?\"file-list__ext--xls\":[\"zip\",\"rar\",\"7z\",\"gz\",\"tar\"].includes(e)?\"file-list__ext--zip\":[\"jpg\",\"jpeg\",\"png\",\"gif\",\"webp\",\"svg\",\"bmp\"].includes(e)?\"file-list__ext--img\":\"file-list__ext--default\"}_getExtIcon(e){return[\"jpg\",\"jpeg\",\"png\",\"gif\",\"webp\",\"svg\",\"bmp\"].includes(e)?B`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86-3 3.87L9 13.14 6 17h12l-3.86-5.14z\"/></svg>`:[\"pdf\"].includes(e)?B`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z\"/></svg>`:[\"doc\",\"docx\",\"rtf\",\"txt\"].includes(e)?B`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm2-6h8v2H8v-2zm0-4h8v2H8v-2zm0 8h5v2H8v-2z\"/></svg>`:[\"xls\",\"xlsx\",\"csv\"].includes(e)?B`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 2v3H5V5h14zm0 5v4H5v-4h14zM5 19v-3h14v3H5zm2-8h4v2H7v-2zm0 5h4v2H7v-2z\"/></svg>`:[\"zip\",\"rar\",\"7z\",\"gz\",\"tar\"].includes(e)?B`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10zm-8-4h2v2h-2v-2zm0-4h2v2h-2v-2zm-2 2h2v2h-2v-2z\"/></svg>`:B`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z\"/></svg>`}render(){return this.files.length?B` <div class=\"file-list\"> ${this.files.map((e=>{const t=this._getExtension(e.name),i=e.meta||e.date||\"\";return B` <div class=\"file-list__item\"> <div class=\"file-list__ext ${this._getExtClass(t)}\">${this._getExtIcon(t)}</div> <div class=\"file-list__info\"> <a class=\"file-list__name\" @click=${()=>this._handleFileClick(e)}>${e.name}</a> ${i?B`<div class=\"file-list__meta\">${i}</div>`:\"\"} </div> <div class=\"file-list__actions\"> <svg class=\"file-list__action\" @click=${()=>this._handleDownload(e)} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" title=\"Download\"><path d=\"M19 9h-4V3H9v6H5l7 7 7-7zm-8 2V5h2v6h1.17L12 13.17 9.83 11H11zm-6 7h14v2H5v-2z\"/></svg> <svg class=\"file-list__action file-list__action--delete\" @click=${()=>this._handleDelete(e)} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" title=\"Delete\"><path d=\"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z\"/></svg> </div> </div> `}))} </div> `:B`<div class=\"file-list__empty\">${this.emptyMessage}</div>`}}"
|
|
692
692
|
},
|
|
693
693
|
{
|
|
694
694
|
"kind": "variable",
|
|
@@ -809,7 +809,7 @@
|
|
|
809
809
|
"kind": "js",
|
|
810
810
|
"name": "KRFilePreview",
|
|
811
811
|
"declaration": {
|
|
812
|
-
"name": "
|
|
812
|
+
"name": "nt",
|
|
813
813
|
"module": "dist/krubble-components.bundled.min.js"
|
|
814
814
|
}
|
|
815
815
|
},
|
|
@@ -897,7 +897,7 @@
|
|
|
897
897
|
"kind": "js",
|
|
898
898
|
"name": "krBaseCSS",
|
|
899
899
|
"declaration": {
|
|
900
|
-
"name": "
|
|
900
|
+
"name": "le",
|
|
901
901
|
"module": "dist/krubble-components.bundled.min.js"
|
|
902
902
|
}
|
|
903
903
|
}
|
|
@@ -1334,7 +1334,7 @@
|
|
|
1334
1334
|
{
|
|
1335
1335
|
"kind": "variable",
|
|
1336
1336
|
"name": "KRButton",
|
|
1337
|
-
"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 === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; } }; 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); } _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.left = hostRect.left + 'px'; dropdown.style.minWidth = hostRect.width + 'px'; //
|
|
1337
|
+
"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 === 'Escape' && this._dropdownOpened) { this._dropdownOpened = false; } }; 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); } _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'; } // 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); } } /** * 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'); } render() { 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; } }",
|
|
1338
1338
|
"description": "A customizable button component."
|
|
1339
1339
|
}
|
|
1340
1340
|
],
|
|
@@ -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,0BA+PpB;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;IAGxC,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,CAKtB;IAEF,OAAO,CAAC,cAAc,CAYpB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,eAAe;
|
|
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,0BA+PpB;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;IAGxC,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,CAKtB;IAEF,OAAO,CAAC,cAAc,CAYpB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,eAAe;IAwCvB,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,KAAK;IAML,OAAO,CAAC,kBAAkB;cAOP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWzD,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/button/button.js
CHANGED
|
@@ -94,13 +94,28 @@ let KRButton = class KRButton extends LitElement {
|
|
|
94
94
|
if (dropdown) {
|
|
95
95
|
const hostRect = this.getBoundingClientRect();
|
|
96
96
|
dropdown.style.top = hostRect.bottom + 4 + 'px';
|
|
97
|
+
dropdown.style.bottom = '';
|
|
97
98
|
dropdown.style.left = hostRect.left + 'px';
|
|
99
|
+
dropdown.style.right = '';
|
|
98
100
|
dropdown.style.minWidth = hostRect.width + 'px';
|
|
99
|
-
|
|
101
|
+
dropdown.style.transformOrigin = 'top left';
|
|
100
102
|
const dropdownRect = dropdown.getBoundingClientRect();
|
|
103
|
+
// Open above if dropdown overflows viewport bottom
|
|
104
|
+
if (dropdownRect.bottom > window.innerHeight) {
|
|
105
|
+
dropdown.style.top = '';
|
|
106
|
+
dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
|
|
107
|
+
dropdown.style.transformOrigin = 'bottom left';
|
|
108
|
+
}
|
|
109
|
+
// Align right if dropdown overflows viewport right
|
|
101
110
|
if (dropdownRect.right > window.innerWidth) {
|
|
102
111
|
dropdown.style.left = '';
|
|
103
112
|
dropdown.style.right = window.innerWidth - hostRect.right + 'px';
|
|
113
|
+
if (dropdownRect.bottom > window.innerHeight) {
|
|
114
|
+
dropdown.style.transformOrigin = 'bottom right';
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
dropdown.style.transformOrigin = 'top right';
|
|
118
|
+
}
|
|
104
119
|
}
|
|
105
120
|
}
|
|
106
121
|
});
|
|
@@ -381,7 +396,7 @@ KRButton.styles = css `
|
|
|
381
396
|
padding: 8px 0;
|
|
382
397
|
z-index: 10000;
|
|
383
398
|
display: none;
|
|
384
|
-
transform-origin: top;
|
|
399
|
+
transform-origin: top left;
|
|
385
400
|
}
|
|
386
401
|
|
|
387
402
|
.dropdown--opened {
|
|
@@ -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;;QAkQL;;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;QAGhC,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,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,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,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,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC/C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,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;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -527,13 +527,28 @@ let KRButton = class KRButton extends i$2 {
|
|
|
527
527
|
if (dropdown) {
|
|
528
528
|
const hostRect = this.getBoundingClientRect();
|
|
529
529
|
dropdown.style.top = hostRect.bottom + 4 + 'px';
|
|
530
|
+
dropdown.style.bottom = '';
|
|
530
531
|
dropdown.style.left = hostRect.left + 'px';
|
|
532
|
+
dropdown.style.right = '';
|
|
531
533
|
dropdown.style.minWidth = hostRect.width + 'px';
|
|
532
|
-
|
|
534
|
+
dropdown.style.transformOrigin = 'top left';
|
|
533
535
|
const dropdownRect = dropdown.getBoundingClientRect();
|
|
536
|
+
// Open above if dropdown overflows viewport bottom
|
|
537
|
+
if (dropdownRect.bottom > window.innerHeight) {
|
|
538
|
+
dropdown.style.top = '';
|
|
539
|
+
dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
|
|
540
|
+
dropdown.style.transformOrigin = 'bottom left';
|
|
541
|
+
}
|
|
542
|
+
// Align right if dropdown overflows viewport right
|
|
534
543
|
if (dropdownRect.right > window.innerWidth) {
|
|
535
544
|
dropdown.style.left = '';
|
|
536
545
|
dropdown.style.right = window.innerWidth - hostRect.right + 'px';
|
|
546
|
+
if (dropdownRect.bottom > window.innerHeight) {
|
|
547
|
+
dropdown.style.transformOrigin = 'bottom right';
|
|
548
|
+
}
|
|
549
|
+
else {
|
|
550
|
+
dropdown.style.transformOrigin = 'top right';
|
|
551
|
+
}
|
|
537
552
|
}
|
|
538
553
|
}
|
|
539
554
|
});
|
|
@@ -814,7 +829,7 @@ KRButton.styles = i$5 `
|
|
|
814
829
|
padding: 8px 0;
|
|
815
830
|
z-index: 10000;
|
|
816
831
|
display: none;
|
|
817
|
-
transform-origin: top;
|
|
832
|
+
transform-origin: top left;
|
|
818
833
|
}
|
|
819
834
|
|
|
820
835
|
.dropdown--opened {
|