@kodaris/krubble-components 1.0.28 → 1.0.31
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/breaking-changes.json +6 -0
- package/custom-elements.json +90 -65
- package/dist/button/button.d.ts +7 -1
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +45 -5
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +53 -12
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +174 -138
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +53 -12
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +167 -131
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/dist/tabs/tab.d.ts +3 -3
- package/dist/tabs/tab.d.ts.map +1 -1
- package/dist/tabs/tab.js +5 -4
- package/dist/tabs/tab.js.map +1 -1
- package/dist/tabs/tabs.d.ts +2 -2
- package/dist/tabs/tabs.js +3 -3
- package/package.json +9 -3
- package/postinstall.cjs +30 -0
package/custom-elements.json
CHANGED
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
{
|
|
187
187
|
"kind": "variable",
|
|
188
188
|
"name": "KRButton",
|
|
189
|
-
"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 = []; 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'; // Align right if dropdown overflows viewport const dropdownRect = dropdown.getBoundingClientRect(); if (dropdownRect.right > window.innerWidth) { dropdown.style.left = ''; dropdown.style.right = window.innerWidth - hostRect.right + 'px'; } } }); } } _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 ` <slot></slot> ${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; } }",
|
|
189
|
+
"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'; // Align right if dropdown overflows viewport const dropdownRect = dropdown.getBoundingClientRect(); if (dropdownRect.right > window.innerWidth) { dropdown.style.left = ''; dropdown.style.right = window.innerWidth - hostRect.right + 'px'; } } }); } } _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; } }",
|
|
190
190
|
"description": "A customizable button component."
|
|
191
191
|
},
|
|
192
192
|
{
|
|
@@ -276,13 +276,13 @@
|
|
|
276
276
|
{
|
|
277
277
|
"kind": "variable",
|
|
278
278
|
"name": "KRTabGroup",
|
|
279
|
-
"default": "class KRTabGroup extends i$2 { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return A; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return b `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return b ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => b ` <button class=${e$1({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.
|
|
279
|
+
"default": "class KRTabGroup extends i$2 { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return A; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return b `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return b ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => b ` <button class=${e$1({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.label}</span> ${tab.badge ? b `<span class=\"label-badge\" style=${o$1({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : A} ${tab.dismissible ? b ` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${(e) => this._handleTabDismiss(tab, e)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/></svg> </button> ` : A} </button> `)} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId || ''}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `; } }",
|
|
280
280
|
"description": "A tabbed navigation component for switching between content sections."
|
|
281
281
|
},
|
|
282
282
|
{
|
|
283
283
|
"kind": "variable",
|
|
284
284
|
"name": "KRTab",
|
|
285
|
-
"default": "class KRTab extends i$2 { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display
|
|
285
|
+
"default": "class KRTab extends i$2 { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display label for the tab */ this.label = ''; /** * Badge text displayed next to label (e.g. notification count) */ this.badge = ''; /** * Badge background color */ this.badgeBackground = ''; /** * Badge text color */ this.badgeColor = ''; /** * Whether the tab is disabled */ this.disabled = false; /** * Whether the tab can be dismissed/closed */ this.dismissible = false; /** * Whether this tab is currently active (set by parent) */ this.active = false; } /** * Gets the icon element from the icon slot (if any) */ getIconElement() { return this.querySelector('[slot=\"icon\"]'); } render() { console.log('tab render'); return b `<slot></slot>`; } }",
|
|
286
286
|
"description": "A tab for the kr-tab-group component."
|
|
287
287
|
},
|
|
288
288
|
{
|
|
@@ -505,38 +505,38 @@
|
|
|
505
505
|
},
|
|
506
506
|
{
|
|
507
507
|
"kind": "variable",
|
|
508
|
-
"name": "
|
|
508
|
+
"name": "le",
|
|
509
509
|
"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; } `"
|
|
510
510
|
},
|
|
511
511
|
{
|
|
512
512
|
"kind": "variable",
|
|
513
|
-
"name": "
|
|
514
|
-
"default": "class extends
|
|
513
|
+
"name": "ge",
|
|
514
|
+
"default": "class extends re{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return H` <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> `}}"
|
|
515
515
|
},
|
|
516
516
|
{
|
|
517
517
|
"kind": "variable",
|
|
518
|
-
"name": "
|
|
519
|
-
"default": "class extends
|
|
518
|
+
"name": "$e",
|
|
519
|
+
"default": "class extends re{constructor(){super(...arguments),this.type=\"info\",this.title=\"\",this.dismissible=!1,this.visible=!0}_handleDismiss(){this.visible=!1,this.dispatchEvent(new CustomEvent(\"dismiss\",{bubbles:!0,composed:!0}))}render(){const e={info:H`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/></svg>`,success:H`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/></svg>`,warning:H`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/></svg>`,error:H`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/></svg>`};return H` <div class=${ke({alert:!0,[\"alert--\"+this.type]:!0,\"alert--has-header\":!!this.title,\"alert--hidden\":!this.visible})} role=\"alert\" > ${e[this.type]} <div class=\"content\"> ${this.title?H`<h4 class=\"header\">${this.title}</h4>`:U} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible?H` <button class=\"dismiss\" type=\"button\" aria-label=\"Dismiss alert\" @click=${this._handleDismiss} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"> <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/> </svg> </button> `:U} </div> `}}"
|
|
520
520
|
},
|
|
521
521
|
{
|
|
522
522
|
"kind": "variable",
|
|
523
|
-
"name": "
|
|
524
|
-
"default": "class extends
|
|
523
|
+
"name": "Se",
|
|
524
|
+
"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=H` <span class=\"content\"> <slot name=\"icon\"></slot> <slot></slot> </span> ${this.options.length?H`<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?H`<span class=\"state-overlay\"> ${\"loading\"===this._state?H`<span class=\"spinner\"></span>`:this._stateText} </span>`:U} ${this.options.length?H` <div class=\"dropdown ${this._dropdownOpened?\"dropdown--opened\":\"\"}\"> ${this.options.map((e=>H` <button class=\"dropdown-item\" @click=${t=>this._handleOptionClick(e,t)} >${e.label}</button> `))} </div> `:U} `;return this.href?H`<a class=\"link\" href=${this.href} target=${this.target||U}>${e}</a>`:e}}"
|
|
525
525
|
},
|
|
526
526
|
{
|
|
527
527
|
"kind": "variable",
|
|
528
|
-
"name": "
|
|
529
|
-
"default": "class extends
|
|
528
|
+
"name": "Oe",
|
|
529
|
+
"default": "class extends re{constructor(){super(...arguments),this.language=\"html\",this.code=\"\",this.activeTab=\"preview\",this.copied=!1,this.highlightedCode=\"\"}connectedCallback(){super.connectedCallback(),requestAnimationFrame((()=>{this.code||(this.code=this.innerHTML.trim().replace(/=\"\"(?=[\\s>])/g,\"\")),this.querySelectorAll(\"script\").forEach((e=>{const t=document.createElement(\"script\");t.textContent=e.textContent,e.replaceWith(t)})),this.code&&window.hljs&&window.hljs.getLanguage(this.language)?this.highlightedCode=window.hljs.highlight(this.code,{language:this.language}).value:this.highlightedCode=this.code.replace(/&/g,\"&\").replace(/</g,\"<\").replace(/>/g,\">\")}))}activateTab(e){this.activeTab=e}copyCode(){this.code&&navigator.clipboard.writeText(this.code).then((()=>{this.copied=!0,setTimeout((()=>{this.copied=!1}),2e3)}))}render(){return H` <div class=\"tabs\"> <button class=${ke({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.activateTab(\"preview\")} > Preview </button> <button class=${ke({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.activateTab(\"code\")} > Code </button> <button class=${ke({copy:!0,\"copy--success\":this.copied})} @click=${this.copyCode} title=${this.copied?\"Copied!\":\"Copy code\"} > ${this.copied?H`<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`:H`<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`} </button> </div> <div class=${ke({panel:!0,\"panel--active\":\"preview\"===this.activeTab,\"panel--preview\":!0})}> <slot></slot> </div> <div class=${ke({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"panel--code\":!0})}> <pre class=\"code\"><code>${Ae(this.highlightedCode)}</code></pre> </div> `}}"
|
|
530
530
|
},
|
|
531
531
|
{
|
|
532
532
|
"kind": "variable",
|
|
533
|
-
"name": "
|
|
534
|
-
"default": "class extends
|
|
533
|
+
"name": "Te",
|
|
534
|
+
"default": "class extends re{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(e){const t=document.querySelector(\"kr-context-menu\");t&&t.remove();const i=document.createElement(\"kr-context-menu\");return document.body.appendChild(i),i.show(e)}async show(e){this.items=e.items,this.style.left=`${e.x}px`,this.style.top=`${e.y}px`,await this.updateComplete;const t=this.getBoundingClientRect();return t.right>window.innerWidth&&(this.style.left=e.x-t.width+\"px\"),t.bottom>window.innerHeight&&(this.style.top=e.y-t.height+\"px\"),requestAnimationFrame((()=>{document.addEventListener(\"click\",this.boundHandleOutsideClick),document.addEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.addEventListener(\"keydown\",this.boundHandleKeyDown)})),new Promise((e=>{this.resolvePromise=e}))}handleOutsideClick(e){this.contains(e.target)||this.close(null)}handleKeyDown(e){\"Escape\"===e.key&&this.close(null)}handleItemClick(e){e.disabled||e.divider||this.close(e)}close(e){document.removeEventListener(\"click\",this.boundHandleOutsideClick),document.removeEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.removeEventListener(\"keydown\",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(e),this.resolvePromise=null),this.remove()}render(){return H` <div class=\"menu\"> ${this.items.map((e=>e.divider?H`<div class=\"menu__divider\"></div>`:H` <button class=\"menu__item\" ?disabled=${e.disabled} @click=${()=>this.handleItemClick(e)} > ${e.icon?H`<span class=\"menu__item-icon\">${e.icon}</span>`:null} ${e.label} </button> `))} </div> `}}"
|
|
535
535
|
},
|
|
536
536
|
{
|
|
537
537
|
"kind": "class",
|
|
538
538
|
"description": "",
|
|
539
|
-
"name": "
|
|
539
|
+
"name": "De",
|
|
540
540
|
"members": [
|
|
541
541
|
{
|
|
542
542
|
"kind": "method",
|
|
@@ -579,63 +579,63 @@
|
|
|
579
579
|
{
|
|
580
580
|
"kind": "field",
|
|
581
581
|
"name": "_promise",
|
|
582
|
-
"default": "new Promise(e=>{this._resolvePromise=e})"
|
|
582
|
+
"default": "new Promise((e=>{this._resolvePromise=e}))"
|
|
583
583
|
}
|
|
584
584
|
]
|
|
585
585
|
},
|
|
586
586
|
{
|
|
587
587
|
"kind": "variable",
|
|
588
588
|
"name": "Ie",
|
|
589
|
-
"default": "class extends
|
|
589
|
+
"default": "class extends re{constructor(){super(...arguments),this._dialogRef=null,this._contentElement=null,this._handleDocumentKeyDown=e=>{\"Escape\"===e.key&&this._dialogRef?.close(void 0)}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"keydown\",this._handleDocumentKeyDown)}static open(e,t){const i=document.querySelector(\"kr-dialog\");i&&i.remove();const o=new De,s=document.createElement(\"kr-dialog\");o.setDialogElement(s),s._dialogRef=o;const r=new e;return r.dialogRef=o,t?.data&&(r.data=t.data),s._contentElement=r,document.body.appendChild(s),document.addEventListener(\"keydown\",s._handleDocumentKeyDown),o}_handleBackdropClick(e){e.target.classList.contains(\"backdrop\")&&this._dialogRef?.close(void 0)}render(){return H` <div class=\"backdrop\" @click=${this._handleBackdropClick}></div> <div class=\"dialog\"> ${this._contentElement} </div> `}}"
|
|
590
590
|
},
|
|
591
591
|
{
|
|
592
592
|
"kind": "variable",
|
|
593
|
-
"name": "
|
|
593
|
+
"name": "He"
|
|
594
594
|
},
|
|
595
595
|
{
|
|
596
596
|
"kind": "variable",
|
|
597
|
-
"name": "
|
|
598
|
-
"default": "class extends
|
|
597
|
+
"name": "We",
|
|
598
|
+
"default": "class extends re{constructor(){super(...arguments),this.justified=!1,this.size=\"medium\"}updated(e){e.has(\"activeTabId\")&&this._updateActiveTab()}firstUpdated(){this._updateActiveTab()}_getTabs(){return Array.from(this.querySelectorAll(\"kr-tab\"))}_updateActiveTab(){const e=this._getTabs();0!==e.length&&(this.activeTabId||(this.activeTabId=e[0]?.id),e.forEach((e=>{e.active=e.id===this.activeTabId})),this.requestUpdate())}_handleTabClick(e){e.disabled||(this.activeTabId=e.id,this.dispatchEvent(new CustomEvent(\"tab-change\",{detail:{activeTabId:e.id},bubbles:!0,composed:!0})))}_handleTabDismiss(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(\"tab-dismiss\",{detail:{tabId:e.id},bubbles:!0,composed:!0}))}_handleKeyDown(e){const t=this._getTabs().filter((e=>!e.disabled)),i=t.findIndex((e=>e.id===this.activeTabId));let o=-1;switch(e.key){case\"ArrowLeft\":o=i>0?i-1:t.length-1;break;case\"ArrowRight\":o=i<t.length-1?i+1:0;break;case\"Home\":o=0;break;case\"End\":o=t.length-1}if(o>=0){e.preventDefault();const i=t[o];this.activeTabId=i.id,this.dispatchEvent(new CustomEvent(\"tab-change\",{detail:{activeTabId:i.id},bubbles:!0,composed:!0}));const s=this.shadowRoot?.querySelectorAll(\".label\"),r=Array.from(s||[]).find((e=>e.getAttribute(\"data-tab-id\")===i.id));r?.focus()}}_renderTabIcon(e){const t=e.getIconElement();if(!t)return U;const i=t.cloneNode(!0);return i.removeAttribute(\"slot\"),H`<span class=\"label-icon\">${i}</span>`}render(){return H` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((e=>H` <button class=${ke({label:!0,\"label--active\":e.id===this.activeTabId,\"label--justified\":this.justified})} role=\"tab\" data-tab-id=${e.id} aria-selected=${e.id===this.activeTabId} aria-controls=${`panel-${e.id}`} tabindex=${e.id===this.activeTabId?0:-1} ?disabled=${e.disabled} @click=${()=>this._handleTabClick(e)} > ${this._renderTabIcon(e)} <span>${e.label}</span> ${e.badge?H`<span class=\"label-badge\" style=${Ne({backgroundColor:e.badgeBackground,color:e.badgeColor})}>${e.badge}</span>`:U} ${e.dismissible?H` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${t=>this._handleTabDismiss(e,t)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/></svg> </button> `:U} </button> `))} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId||\"\"}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `}}"
|
|
599
599
|
},
|
|
600
600
|
{
|
|
601
601
|
"kind": "variable",
|
|
602
|
-
"name": "
|
|
603
|
-
"default": "class extends
|
|
602
|
+
"name": "Ze",
|
|
603
|
+
"default": "class extends re{constructor(){super(...arguments),this.id=\"\",this.label=\"\",this.badge=\"\",this.badgeBackground=\"\",this.badgeColor=\"\",this.disabled=!1,this.dismissible=!1,this.active=!1}getIconElement(){return this.querySelector('[slot=\"icon\"]')}render(){return console.log(\"tab render\"),H`<slot></slot>`}}"
|
|
604
604
|
},
|
|
605
605
|
{
|
|
606
606
|
"kind": "variable",
|
|
607
|
-
"name": "
|
|
608
|
-
"default": "class extends ne{constructor(){super(...arguments),this._scrollStyle=\"overlay\",this._data=[],this._dataState=\"idle\",this._page=1,this._pageSize=50,this._totalItems=0,this._totalPages=0,this._searchQuery=\"\",this._canScrollLeft=!1,this._canScrollRight=!1,this._canScrollHorizontal=!1,this._columnPickerOpen=!1,this._displayedColumns=[],this._resizing=null,this._resizeObserver=null,this._searchPositionLocked=!1,this._def={columns:[]},this.def={columns:[]},this._handleClickOutsideColumnPicker=e=>{if(!this._columnPickerOpen)return;const t=e.composedPath(),i=this.shadowRoot?.querySelector(\".column-picker-wrapper\");i&&!t.includes(i)&&(this._columnPickerOpen=!1)},this._handleResizeMove=e=>{if(!this._resizing)return;const t=this._def.columns.find(e=>e.id===this._resizing.columnId);if(t){const i=this._resizing.startWidth+(e.clientX-this._resizing.startX);t.width=`${Math.min(900,Math.max(50,i))}px`,this.requestUpdate()}},this._handleResizeEnd=()=>{this._resizing=null,document.removeEventListener(\"mousemove\",this._handleResizeMove),document.removeEventListener(\"mouseup\",this._handleResizeEnd)}}connectedCallback(){super.connectedCallback(),this.classList.toggle(\"kr-table--scroll-overlay\",\"overlay\"===this._scrollStyle),this.classList.toggle(\"kr-table--scroll-edge\",\"edge\"===this._scrollStyle),this._fetch(),this._initRefresh(),document.addEventListener(\"click\",this._handleClickOutsideColumnPicker),this._resizeObserver=new ResizeObserver(()=>{this._searchPositionLocked=!1,this._updateSearchPosition()}),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._refreshTimer),document.removeEventListener(\"click\",this._handleClickOutsideColumnPicker),this._resizeObserver?.disconnect()}willUpdate(e){e.has(\"def\")&&(this._def={...this.def,columns:this.def.columns.map(e=>\"actions\"===e.type?{...e,label:e.label??\"\",sticky:\"right\",resizable:!1}:{...e})},this._displayedColumns=this._def.displayedColumns||this._def.columns.map(e=>e.id),this._fetch(),this._initRefresh())}updated(e){this._updateScrollFlags(),this._syncSlottedContent()}_syncSlottedContent(){const e=this.getDisplayedColumns().filter(e=>e.render);e.length&&(this.querySelectorAll('[slot^=\"cell-\"]').forEach(e=>e.remove()),this._data.forEach((t,i)=>{e.forEach(e=>{const o=e.render(t),s=\"string\"==typeof o?o:\"\";if(s){const t=document.createElement(\"span\");t.slot=`cell-${i}-${e.id}`,\"actions\"===e.type&&(t.style.display=\"flex\",t.style.gap=\"8px\"),t.innerHTML=s,this.appendChild(t)}})}))}refresh(){this._fetch()}goToPrevPage(){this._page>1&&(this._page--,this._fetch())}goToNextPage(){this._page<this._totalPages&&(this._page++,this._fetch())}goToPage(e){e>=1&&e<=this._totalPages&&(this._page=e,this._fetch())}_fetch(){if(!this._def.dataSource)return;let e;switch(this._dataState=\"loading\",this._def.dataSource.mode){case\"opensearch\":throw Error(\"Opensearch not supported yet\");case\"db\":e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&this._def.columns.filter(e=>e.searchable).forEach(t=>{e.queryFields.push({name:t.id,operation:\"CONTAINS\",value:this._searchQuery,and:!1})});break;default:e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&e.queryFields.push({name:\"_text_\",operation:\"IS\",value:Je(this._searchQuery)})}this._def.dataSource.fetch(e).then(e=>{switch(this._def.dataSource?.mode){case\"opensearch\":throw Error(\"Opensearch not supported yet\");case\"db\":{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size;break}default:{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size}}this._dataState=\"success\",this._updateSearchPosition()}).catch(e=>{this._dataState=\"error\",Ve.show({message:e instanceof Error?e.message:\"Failed to load data\",type:\"error\"})})}_initRefresh(){clearInterval(this._refreshTimer),this._def.refreshInterval&&this._def.refreshInterval>0&&(this._refreshTimer=window.setInterval(()=>{this._fetch()},this._def.refreshInterval))}_handleSearch(e){const t=e.target;this._searchQuery=t.value,this._page=1,this._fetch()}_getGridTemplateColumns(){return this.getDisplayedColumns().map(e=>e.width?e.width:\"actions\"===e.type?\"max-content\":\"minmax(80px, auto)\").join(\" \")}_updateSearchPosition(){if(this._searchPositionLocked)return;const e=this.shadowRoot?.querySelector(\".search\"),t=e?.querySelector(\".search-field\");e&&t&&(e.style.justifyContent=\"center\",t.style.marginLeft=\"\",requestAnimationFrame(()=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect().left-i.left;e.style.justifyContent=\"flex-start\",t.style.marginLeft=`${o}px`,this._searchPositionLocked=!0}))}_toggleColumnPicker(){this._columnPickerOpen=!this._columnPickerOpen}_toggleColumn(e){this._displayedColumns.includes(e)?this._displayedColumns=this._displayedColumns.filter(t=>t!==e):this._displayedColumns=[...this._displayedColumns,e]}getDisplayedColumns(){return this._displayedColumns.map(e=>this._def.columns.find(t=>t.id===e)).sort((e,t)=>\"actions\"===e.type&&\"actions\"!==t.type?1:\"actions\"!==e.type&&\"actions\"===t.type?-1:0)}_handleScroll(e){const t=e.target;this._canScrollLeft=t.scrollLeft>0,this._canScrollRight=t.scrollLeft<t.scrollWidth-t.clientWidth-1}_updateScrollFlags(){const e=this.shadowRoot?.querySelector(\".content\");e&&(this._canScrollLeft=e.scrollLeft>0,this._canScrollRight=e.scrollWidth>e.clientWidth&&e.scrollLeft<e.scrollWidth-e.clientWidth-1,this._canScrollHorizontal=e.scrollWidth>e.clientWidth),this.classList.toggle(\"kr-table--scroll-left-available\",this._canScrollLeft),this.classList.toggle(\"kr-table--scroll-right-available\",this._canScrollRight),this.classList.toggle(\"kr-table--scroll-horizontal-available\",this._canScrollHorizontal),this.classList.toggle(\"kr-table--sticky-left\",this.getDisplayedColumns().some(e=>\"left\"===e.sticky)),this.classList.toggle(\"kr-table--sticky-right\",this.getDisplayedColumns().some(e=>\"right\"===e.sticky))}_handleResizeStart(e,t){e.preventDefault();const i=this.shadowRoot?.querySelector(`.header-cell[data-column-id=\"${t}\"]`);this._resizing={columnId:t,startX:e.clientX,startWidth:i?.offsetWidth||200},document.addEventListener(\"mousemove\",this._handleResizeMove),document.addEventListener(\"mouseup\",this._handleResizeEnd)}_handleAction(e){e.href||this.dispatchEvent(new CustomEvent(\"action\",{detail:{action:e.id},bubbles:!0,composed:!0}))}_renderCellContent(e,t,i){const o=t[e.id];if(e.render)return V`<slot name=\"cell-${i}-${e.id}\"></slot>`;if(null==o)return\"\";switch(e.type){case\"number\":return\"number\"==typeof o?o.toLocaleString():String(o);case\"currency\":return\"number\"==typeof o?o.toLocaleString(\"en-US\",{style:\"currency\",currency:\"USD\"}):String(o);case\"date\":{let e;if(o instanceof Date)e=o;else if(\"string\"==typeof o&&/^\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}/.test(o)){const t=o.replace(/(\\d{2}:\\d{2}:\\d{2}):(\\d+)$/,\"$1.$2\").replace(\" \",\"T\")+\"Z\";e=new Date(t)}else e=new Date(o);return e.toLocaleString(void 0,{year:\"numeric\",month:\"short\",day:\"numeric\",hour:\"numeric\",minute:\"2-digit\"})}case\"boolean\":return!0===o?\"Yes\":!1===o?\"No\":\"\";default:return String(o)}}_getHeaderCellClasses(e,t){return{\"header-cell\":!0,\"header-cell--align-center\":\"center\"===e.align,\"header-cell--align-right\":\"right\"===e.align,\"header-cell--sticky-left\":\"left\"===e.sticky,\"header-cell--sticky-left-last\":\"left\"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>\"left\"===e.sticky),\"header-cell--sticky-right\":\"right\"===e.sticky,\"header-cell--sticky-right-first\":\"right\"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>\"right\"===e.sticky)}}_getCellClasses(e,t){return{cell:!0,\"cell--actions\":\"actions\"===e.type,\"cell--align-center\":\"center\"===e.align,\"cell--align-right\":\"right\"===e.align,\"cell--sticky-left\":\"left\"===e.sticky,\"cell--sticky-left-last\":\"left\"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>\"left\"===e.sticky),\"cell--sticky-right\":\"right\"===e.sticky,\"cell--sticky-right-first\":\"right\"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>\"right\"===e.sticky)}}_getCellStyle(e,t){const i={};if(\"left\"===e.sticky){let e=0;for(let i=0;i<t;i++){const t=this.getDisplayedColumns()[i];\"left\"===t.sticky&&(e+=parseInt(t.width||\"0\",10))}i.left=`${e}px`}if(\"right\"===e.sticky){let e=0;for(let i=t+1;i<this.getDisplayedColumns().length;i++){const t=this.getDisplayedColumns()[i];\"right\"===t.sticky&&(e+=parseInt(t.width||\"0\",10))}i.right=`${e}px`}return i}_renderPagination(){const e=(this._page-1)*this._pageSize+1,t=Math.min(this._page*this._pageSize,this._totalItems);return V` <div class=\"pagination\"> <span class=\"pagination-icon ${1===this._page?\"pagination-icon--disabled\":\"\"}\" @click=${this.goToPrevPage} > <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/></svg> </span> <span class=\"pagination-info\">${e}-${t} of ${this._totalItems}</span> <span class=\"pagination-icon ${this._page===this._totalPages?\"pagination-icon--disabled\":\"\"}\" @click=${this.goToNextPage} > <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg> </span> </div> `}_renderHeader(){return!this._def.title&&!this._def.actions?.length&&this._totalPages<=1?N:V` <div class=\"header\"> <div class=\"title\">${this._def.title??\"\"}</div> ${\"db\"!==this._def.dataSource?.mode||this._def.columns.some(e=>e.searchable)?V` <div class=\"search\"> <!-- TODO: Saved views dropdown <div class=\"views\"> <span>Default View</span> <svg 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=\"search-field\"> <svg class=\"search-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\"/></svg> <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" .value=${this._searchQuery} @input=${this._handleSearch} /> </div> </div> `:V`<div class=\"search\"></div>`} <div class=\"tools\"> ${this._renderPagination()} <span class=\"refresh\" title=\"Refresh\" @click=${()=>this.refresh()}> <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z\"/></svg> </span> <div class=\"column-picker-wrapper\"> <span class=\"header-icon\" title=\"Columns\" @click=${this._toggleColumnPicker}> <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M121-280v-400q0-33 23.5-56.5T201-760h559q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H201q-33 0-56.5-23.5T121-280Zm79 0h133v-400H200v400Zm213 0h133v-400H413v400Zm213 0h133v-400H626v400Z\"/></svg> </span> <div class=\"column-picker ${this._columnPickerOpen?\"open\":\"\"}\"> ${[...this._def.columns].filter(e=>\"actions\"!==e.type).sort((e,t)=>(e.label??e.id).localeCompare(t.label??t.id)).map(e=>V` <div class=\"column-picker-item\" @click=${()=>this._toggleColumn(e.id)}> <div class=\"column-picker-checkbox ${this._displayedColumns.includes(e.id)?\"checked\":\"\"}\"> <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg> </div> <span class=\"column-picker-label\">${e.label??e.id}</span> </div> `)} </div> </div> ${1===this._def.actions?.length?V` <kr-button class=\"actions\" .href=${this._def.actions[0].href} .target=${this._def.actions[0].target} @click=${()=>this._handleAction(this._def.actions[0])} > ${this._def.actions[0].label} </kr-button> `:this._def.actions?.length?V` <kr-button class=\"actions\" .options=${this._def.actions.map(e=>({id:e.id,label:e.label}))} @option-select=${e=>this._handleAction({id:e.detail.id,label:e.detail.label})} > Actions </kr-button> `:N} </div> </div> `}_renderStatus(){return\"loading\"===this._dataState&&0===this._data.length?V`<div class=\"status\">Loading...</div>`:\"error\"===this._dataState&&0===this._data.length?V`<div class=\"status status--error\">Error loading data</div>`:0===this._data.length?V`<div class=\"status\">No data available</div>`:N}_renderTable(){return V` <div class=\"wrapper\"> <div class=\"overlay-left\"></div> <div class=\"overlay-right\"></div> ${this._renderStatus()} <div class=\"content\" @scroll=${this._handleScroll}> <div class=\"table\" style=\"grid-template-columns: ${this._getGridTemplateColumns()}\"> <div class=\"header-row\"> ${this.getDisplayedColumns().map((e,t)=>V` <div class=${we(this._getHeaderCellClasses(e,t))} style=${Fe(this._getCellStyle(e,t))} data-column-id=${e.id} >${e.label??e.id}${!1!==e.resizable?V`<div class=\"header-cell__resize\" @mousedown=${t=>this._handleResizeStart(t,e.id)} ></div>`:N}</div> `)} </div> ${this._data.map((e,t)=>V` <div class=\"row\"> ${this.getDisplayedColumns().map((i,o)=>V` <div class=${we(this._getCellClasses(i,o))} style=${Fe(this._getCellStyle(i,o))} data-column-id=${i.id} > ${this._renderCellContent(i,e,t)} </div> `)} </div> `)} </div> </div> </div> `}render(){return this._def.columns.length?V` ${this._renderHeader()} ${this._renderTable()} `:V`<slot></slot>`}}"
|
|
607
|
+
"name": "Je",
|
|
608
|
+
"default": "class extends re{constructor(){super(...arguments),this._scrollStyle=\"overlay\",this._data=[],this._dataState=\"idle\",this._page=1,this._pageSize=50,this._totalItems=0,this._totalPages=0,this._searchQuery=\"\",this._canScrollLeft=!1,this._canScrollRight=!1,this._canScrollHorizontal=!1,this._columnPickerOpen=!1,this._displayedColumns=[],this._resizing=null,this._resizeObserver=null,this._searchPositionLocked=!1,this._def={columns:[]},this.def={columns:[]},this._handleClickOutsideColumnPicker=e=>{if(!this._columnPickerOpen)return;const t=e.composedPath(),i=this.shadowRoot?.querySelector(\".column-picker-wrapper\");i&&!t.includes(i)&&(this._columnPickerOpen=!1)},this._handleResizeMove=e=>{if(!this._resizing)return;const t=this._def.columns.find((e=>e.id===this._resizing.columnId));if(t){const i=this._resizing.startWidth+(e.clientX-this._resizing.startX);t.width=`${Math.min(900,Math.max(50,i))}px`,this.requestUpdate()}},this._handleResizeEnd=()=>{this._resizing=null,document.removeEventListener(\"mousemove\",this._handleResizeMove),document.removeEventListener(\"mouseup\",this._handleResizeEnd)}}connectedCallback(){super.connectedCallback(),this.classList.toggle(\"kr-table--scroll-overlay\",\"overlay\"===this._scrollStyle),this.classList.toggle(\"kr-table--scroll-edge\",\"edge\"===this._scrollStyle),this._fetch(),this._initRefresh(),document.addEventListener(\"click\",this._handleClickOutsideColumnPicker),this._resizeObserver=new ResizeObserver((()=>{this._searchPositionLocked=!1,this._updateSearchPosition()})),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._refreshTimer),document.removeEventListener(\"click\",this._handleClickOutsideColumnPicker),this._resizeObserver?.disconnect()}willUpdate(e){e.has(\"def\")&&(this._def={...this.def,columns:this.def.columns.map((e=>\"actions\"===e.type?{...e,label:e.label??\"\",sticky:\"right\",resizable:!1}:{...e}))},this._displayedColumns=this._def.displayedColumns||this._def.columns.map((e=>e.id)),this._fetch(),this._initRefresh())}updated(e){this._updateScrollFlags(),this._syncSlottedContent()}_syncSlottedContent(){const e=this.getDisplayedColumns().filter((e=>e.render));e.length&&(this.querySelectorAll('[slot^=\"cell-\"]').forEach((e=>e.remove())),this._data.forEach(((t,i)=>{e.forEach((e=>{const o=e.render(t),s=\"string\"==typeof o?o:\"\";if(s){const t=document.createElement(\"span\");t.slot=`cell-${i}-${e.id}`,\"actions\"===e.type&&(t.style.display=\"flex\",t.style.gap=\"8px\"),t.innerHTML=s,this.appendChild(t)}}))})))}refresh(){this._fetch()}goToPrevPage(){this._page>1&&(this._page--,this._fetch())}goToNextPage(){this._page<this._totalPages&&(this._page++,this._fetch())}goToPage(e){e>=1&&e<=this._totalPages&&(this._page=e,this._fetch())}_fetch(){if(!this._def.dataSource)return;let e;switch(this._dataState=\"loading\",this._def.dataSource.mode){case\"opensearch\":throw Error(\"Opensearch not supported yet\");case\"db\":e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&this._def.columns.filter((e=>e.searchable)).forEach((t=>{e.queryFields.push({name:t.id,operation:\"CONTAINS\",value:this._searchQuery,and:!1})}));break;default:e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&e.queryFields.push({name:\"_text_\",operation:\"IS\",value:Ge(this._searchQuery)})}this._def.dataSource.fetch(e).then((e=>{switch(this._def.dataSource?.mode){case\"opensearch\":throw Error(\"Opensearch not supported yet\");case\"db\":{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size;break}default:{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size}}this._dataState=\"success\",this._updateSearchPosition()})).catch((e=>{this._dataState=\"error\",He.show({message:e instanceof Error?e.message:\"Failed to load data\",type:\"error\"})}))}_initRefresh(){clearInterval(this._refreshTimer),this._def.refreshInterval&&this._def.refreshInterval>0&&(this._refreshTimer=window.setInterval((()=>{this._fetch()}),this._def.refreshInterval))}_handleSearch(e){const t=e.target;this._searchQuery=t.value,this._page=1,this._fetch()}_getGridTemplateColumns(){return this.getDisplayedColumns().map((e=>e.width?e.width:\"actions\"===e.type?\"max-content\":\"minmax(80px, auto)\")).join(\" \")}_updateSearchPosition(){if(this._searchPositionLocked)return;const e=this.shadowRoot?.querySelector(\".search\"),t=e?.querySelector(\".search-field\");e&&t&&(e.style.justifyContent=\"center\",t.style.marginLeft=\"\",requestAnimationFrame((()=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect().left-i.left;e.style.justifyContent=\"flex-start\",t.style.marginLeft=`${o}px`,this._searchPositionLocked=!0})))}_toggleColumnPicker(){this._columnPickerOpen=!this._columnPickerOpen}_toggleColumn(e){this._displayedColumns.includes(e)?this._displayedColumns=this._displayedColumns.filter((t=>t!==e)):this._displayedColumns=[...this._displayedColumns,e]}getDisplayedColumns(){return this._displayedColumns.map((e=>this._def.columns.find((t=>t.id===e)))).sort(((e,t)=>\"actions\"===e.type&&\"actions\"!==t.type?1:\"actions\"!==e.type&&\"actions\"===t.type?-1:0))}_handleScroll(e){const t=e.target;this._canScrollLeft=t.scrollLeft>0,this._canScrollRight=t.scrollLeft<t.scrollWidth-t.clientWidth-1}_updateScrollFlags(){const e=this.shadowRoot?.querySelector(\".content\");e&&(this._canScrollLeft=e.scrollLeft>0,this._canScrollRight=e.scrollWidth>e.clientWidth&&e.scrollLeft<e.scrollWidth-e.clientWidth-1,this._canScrollHorizontal=e.scrollWidth>e.clientWidth),this.classList.toggle(\"kr-table--scroll-left-available\",this._canScrollLeft),this.classList.toggle(\"kr-table--scroll-right-available\",this._canScrollRight),this.classList.toggle(\"kr-table--scroll-horizontal-available\",this._canScrollHorizontal),this.classList.toggle(\"kr-table--sticky-left\",this.getDisplayedColumns().some((e=>\"left\"===e.sticky))),this.classList.toggle(\"kr-table--sticky-right\",this.getDisplayedColumns().some((e=>\"right\"===e.sticky)))}_handleResizeStart(e,t){e.preventDefault();const i=this.shadowRoot?.querySelector(`.header-cell[data-column-id=\"${t}\"]`);this._resizing={columnId:t,startX:e.clientX,startWidth:i?.offsetWidth||200},document.addEventListener(\"mousemove\",this._handleResizeMove),document.addEventListener(\"mouseup\",this._handleResizeEnd)}_handleAction(e){e.href||this.dispatchEvent(new CustomEvent(\"action\",{detail:{action:e.id},bubbles:!0,composed:!0}))}_renderCellContent(e,t,i){const o=t[e.id];if(e.render)return H`<slot name=\"cell-${i}-${e.id}\"></slot>`;if(null==o)return\"\";switch(e.type){case\"number\":return\"number\"==typeof o?o.toLocaleString():String(o);case\"currency\":return\"number\"==typeof o?o.toLocaleString(\"en-US\",{style:\"currency\",currency:\"USD\"}):String(o);case\"date\":{let e;if(o instanceof Date)e=o;else if(\"string\"==typeof o&&/^\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2}/.test(o)){const t=o.replace(/(\\d{2}:\\d{2}:\\d{2}):(\\d+)$/,\"$1.$2\").replace(\" \",\"T\")+\"Z\";e=new Date(t)}else e=new Date(o);return e.toLocaleString(void 0,{year:\"numeric\",month:\"short\",day:\"numeric\",hour:\"numeric\",minute:\"2-digit\"})}case\"boolean\":return!0===o?\"Yes\":!1===o?\"No\":\"\";default:return String(o)}}_getHeaderCellClasses(e,t){return{\"header-cell\":!0,\"header-cell--align-center\":\"center\"===e.align,\"header-cell--align-right\":\"right\"===e.align,\"header-cell--sticky-left\":\"left\"===e.sticky,\"header-cell--sticky-left-last\":\"left\"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some((e=>\"left\"===e.sticky)),\"header-cell--sticky-right\":\"right\"===e.sticky,\"header-cell--sticky-right-first\":\"right\"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some((e=>\"right\"===e.sticky))}}_getCellClasses(e,t){return{cell:!0,\"cell--actions\":\"actions\"===e.type,\"cell--align-center\":\"center\"===e.align,\"cell--align-right\":\"right\"===e.align,\"cell--sticky-left\":\"left\"===e.sticky,\"cell--sticky-left-last\":\"left\"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some((e=>\"left\"===e.sticky)),\"cell--sticky-right\":\"right\"===e.sticky,\"cell--sticky-right-first\":\"right\"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some((e=>\"right\"===e.sticky))}}_getCellStyle(e,t){const i={};if(\"left\"===e.sticky){let e=0;for(let i=0;i<t;i++){const t=this.getDisplayedColumns()[i];\"left\"===t.sticky&&(e+=parseInt(t.width||\"0\",10))}i.left=`${e}px`}if(\"right\"===e.sticky){let e=0;for(let i=t+1;i<this.getDisplayedColumns().length;i++){const t=this.getDisplayedColumns()[i];\"right\"===t.sticky&&(e+=parseInt(t.width||\"0\",10))}i.right=`${e}px`}return i}_renderPagination(){const e=(this._page-1)*this._pageSize+1,t=Math.min(this._page*this._pageSize,this._totalItems);return H` <div class=\"pagination\"> <span class=\"pagination-icon ${1===this._page?\"pagination-icon--disabled\":\"\"}\" @click=${this.goToPrevPage} > <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/></svg> </span> <span class=\"pagination-info\">${e}-${t} of ${this._totalItems}</span> <span class=\"pagination-icon ${this._page===this._totalPages?\"pagination-icon--disabled\":\"\"}\" @click=${this.goToNextPage} > <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg> </span> </div> `}_renderHeader(){return!this._def.title&&!this._def.actions?.length&&this._totalPages<=1?U:H` <div class=\"header\"> <div class=\"title\">${this._def.title??\"\"}</div> ${\"db\"!==this._def.dataSource?.mode||this._def.columns.some((e=>e.searchable))?H` <div class=\"search\"> <!-- TODO: Saved views dropdown <div class=\"views\"> <span>Default View</span> <svg 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=\"search-field\"> <svg class=\"search-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\"/></svg> <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" .value=${this._searchQuery} @input=${this._handleSearch} /> </div> </div> `:H`<div class=\"search\"></div>`} <div class=\"tools\"> ${this._renderPagination()} <span class=\"refresh\" title=\"Refresh\" @click=${()=>this.refresh()}> <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z\"/></svg> </span> <div class=\"column-picker-wrapper\"> <span class=\"header-icon\" title=\"Columns\" @click=${this._toggleColumnPicker}> <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M121-280v-400q0-33 23.5-56.5T201-760h559q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H201q-33 0-56.5-23.5T121-280Zm79 0h133v-400H200v400Zm213 0h133v-400H413v400Zm213 0h133v-400H626v400Z\"/></svg> </span> <div class=\"column-picker ${this._columnPickerOpen?\"open\":\"\"}\"> ${[...this._def.columns].filter((e=>\"actions\"!==e.type)).sort(((e,t)=>(e.label??e.id).localeCompare(t.label??t.id))).map((e=>H` <div class=\"column-picker-item\" @click=${()=>this._toggleColumn(e.id)}> <div class=\"column-picker-checkbox ${this._displayedColumns.includes(e.id)?\"checked\":\"\"}\"> <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg> </div> <span class=\"column-picker-label\">${e.label??e.id}</span> </div> `))} </div> </div> ${1===this._def.actions?.length?H` <kr-button class=\"actions\" .href=${this._def.actions[0].href} .target=${this._def.actions[0].target} @click=${()=>this._handleAction(this._def.actions[0])} > ${this._def.actions[0].label} </kr-button> `:this._def.actions?.length?H` <kr-button class=\"actions\" .options=${this._def.actions.map((e=>({id:e.id,label:e.label})))} @option-select=${e=>this._handleAction({id:e.detail.id,label:e.detail.label})} > Actions </kr-button> `:U} </div> </div> `}_renderStatus(){return\"loading\"===this._dataState&&0===this._data.length?H`<div class=\"status\">Loading...</div>`:\"error\"===this._dataState&&0===this._data.length?H`<div class=\"status status--error\">Error loading data</div>`:0===this._data.length?H`<div class=\"status\">No data available</div>`:U}_renderTable(){return H` <div class=\"wrapper\"> <div class=\"overlay-left\"></div> <div class=\"overlay-right\"></div> ${this._renderStatus()} <div class=\"content\" @scroll=${this._handleScroll}> <div class=\"table\" style=\"grid-template-columns: ${this._getGridTemplateColumns()}\"> <div class=\"header-row\"> ${this.getDisplayedColumns().map(((e,t)=>H` <div class=${ke(this._getHeaderCellClasses(e,t))} style=${Ne(this._getCellStyle(e,t))} data-column-id=${e.id} >${e.label??e.id}${!1!==e.resizable?H`<div class=\"header-cell__resize\" @mousedown=${t=>this._handleResizeStart(t,e.id)} ></div>`:U}</div> `))} </div> ${this._data.map(((e,t)=>H` <div class=\"row\"> ${this.getDisplayedColumns().map(((i,o)=>H` <div class=${ke(this._getCellClasses(i,o))} style=${Ne(this._getCellStyle(i,o))} data-column-id=${i.id} > ${this._renderCellContent(i,e,t)} </div> `))} </div> `))} </div> </div> </div> `}render(){return this._def.columns.length?H` ${this._renderHeader()} ${this._renderTable()} `:H`<slot></slot>`}}"
|
|
609
609
|
},
|
|
610
610
|
{
|
|
611
611
|
"kind": "variable",
|
|
612
|
-
"name": "
|
|
613
|
-
"default": "class extends
|
|
612
|
+
"name": "tt",
|
|
613
|
+
"default": "class extends re{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,H` <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> `}}"
|
|
614
614
|
},
|
|
615
615
|
{
|
|
616
616
|
"kind": "variable",
|
|
617
|
-
"name": "
|
|
618
|
-
"default": "class extends
|
|
617
|
+
"name": "ot",
|
|
618
|
+
"default": "class extends re{constructor(){super(...arguments),this.color=\"dark\"}render(){let e=\"\",t=\"\";return e=\"dark\"===this.color?\"#163052\":\"light\"===this.color?\"#ffffff\":this.color,t=this.trackColor?this.trackColor:\"light\"===this.color?\"#ffffff4d\":\"#0000001a\",H` <div class=\"progress-bar\" style=${`background: ${t}`} role=\"status\" aria-label=\"Loading\" > <div class=\"fill\" style=${`background: ${e}`}></div> </div> `}}"
|
|
619
619
|
},
|
|
620
620
|
{
|
|
621
621
|
"kind": "variable",
|
|
622
|
-
"name": "
|
|
623
|
-
"default": "class extends
|
|
622
|
+
"name": "at",
|
|
623
|
+
"default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"\",this.type=\"text\",this.required=!1,this.disabled=!1,this.readonly=!1,this.autocomplete=\"\",this.hint=\"\",this._touched=!1,this._dirty=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._dirty=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),this.addEventListener(\"invalid\",this._handleInvalid)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(\"invalid\",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has(\"required\")||e.has(\"value\"))&&this._updateValidity()}_updateValidity(){this._input&&this._internals.setValidity(this._input.validity,this._input.validationMessage)}_handleInput(e){this.value=e.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._input.validity,this._input.validationMessage)}_handleChange(e){this.value=e.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._input.validity,this._input.validationMessage)}render(){let e=\"\";return this._touched&&this._input&&!this._input.validity.valid&&(e=this._input.validationMessage),H` <div class=\"wrapper\"> ${this.label?H` <label for=\"input\"> ${this.label} ${this.required?H`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:\"\"} <input id=\"input\" class=${ke({\"input--invalid\":this._touched&&this._input&&!this._input.validity.valid})} type=${this.type} name=${this.name} .value=${nt(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} minlength=${st(this.minlength)} maxlength=${st(this.maxlength)} pattern=${st(this.pattern)} autocomplete=${st(this.autocomplete||void 0)} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} /> ${e?H`<div class=\"validation-message\">${e}</div>`:this.hint?H`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> `}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}}"
|
|
624
624
|
},
|
|
625
625
|
{
|
|
626
626
|
"kind": "variable",
|
|
627
|
-
"name": "
|
|
628
|
-
"default": "class extends
|
|
627
|
+
"name": "ct",
|
|
628
|
+
"default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"Select an option\",this.disabled=!1,this.required=!1,this.readonly=!1,this.hint=\"\",this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._close()},this._handleKeyDown=e=>{if(!this._isOpen)return;const t=Array.from(this.querySelectorAll(\"kr-select-option\"));switch(e.key){case\"Escape\":this._close(),this._triggerElement?.focus();break;case\"ArrowDown\":if(e.preventDefault(),t.some((e=>!e.disabled))){let e=this._highlightedIndex+1;for(;e<t.length&&t[e]?.disabled;)e++;e<t.length&&(this._highlightedIndex=e)}break;case\"ArrowUp\":e.preventDefault();{let e=this._highlightedIndex-1;for(;e>=0&&t[e]?.disabled;)e--;e>=0&&(this._highlightedIndex=e)}break;case\"Enter\":e.preventDefault(),this._highlightedIndex>=0&&this._highlightedIndex<t.length&&this._selectOption(t[this._highlightedIndex])}},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),document.addEventListener(\"click\",this._handleOutsideClick),document.addEventListener(\"keydown\",this._handleKeyDown),this.addEventListener(\"invalid\",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has(\"required\")||e.has(\"value\"))&&this._updateValidity()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"click\",this._handleOutsideClick),document.removeEventListener(\"keydown\",this._handleKeyDown),this.removeEventListener(\"invalid\",this._handleInvalid)}_toggle(){if(!this.disabled&&!this.readonly)if(this._isOpen)this._close();else{this._isOpen=!0;const e=Array.from(this.querySelectorAll(\"kr-select-option\"));this._highlightedIndex=e.findIndex((e=>e.value===this.value)),requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(\".select-dropdown\");if(e){const t=this._triggerElement.getBoundingClientRect();e.style.top=t.bottom+4+\"px\",e.style.left=t.left+\"px\",e.style.width=t.width+\"px\"}}))}}_close(){this._isOpen=!1,this._highlightedIndex=-1}_selectOption(e){e.disabled||(this.value=e.value,this._internals.setFormValue(this.value),this._updateValidity(),this.dispatchEvent(new Event(\"change\",{bubbles:!0,composed:!0})),this._close(),this._triggerElement?.focus())}_handleBlur(){this._touched=!0,this._updateValidity()}_updateValidity(){this.required&&!this.value?this._internals.setValidity({valueMissing:!0},\"Please select an option\",this._triggerElement):this._internals.setValidity({})}render(){const e=Array.from(this.querySelectorAll(\"kr-select-option\")),t=e.find((e=>e.value===this.value))?.label;return H` <div class=\"wrapper\"> ${this.label?H` <label> ${this.label} ${this.required?H`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:U} <div class=\"select-wrapper\"> <button class=${ke({\"select-trigger\":!0,\"select-trigger--open\":this._isOpen,\"select-trigger--invalid\":this._touched&&this.required&&!this.value})} type=\"button\" ?disabled=${this.disabled} aria-haspopup=\"listbox\" aria-expanded=${this._isOpen} @click=${this._toggle} @blur=${this._handleBlur} > <span class=${ke({\"select-value\":!0,\"select-placeholder\":!t})}> ${t||this.placeholder} </span> <svg class=${ke({\"chevron-icon\":!0,\"select-icon\":!0,\"select-icon--open\":this._isOpen})} viewBox=\"0 0 24 24\" fill=\"currentColor\" > <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\"/> </svg> </button> <div class=${ke({\"select-dropdown\":!0,hidden:!this._isOpen})} role=\"listbox\"> <div class=\"select-options\"> ${0===e.length?H`<div class=\"select-empty\">No options available</div>`:e.map(((e,t)=>{const i=e.value===this.value;return H` <div class=${ke({\"select-option\":!0,\"select-option--selected\":i,\"select-option--disabled\":e.disabled,\"select-option--highlighted\":t===this._highlightedIndex})} role=\"option\" aria-selected=${i} @click=${()=>this._selectOption(e)} @mouseenter=${()=>this._highlightedIndex=t} > ${e.label} ${i?H`<svg class=\"chevron-icon select-check\" viewBox=\"0 0 20 20\" fill=\"currentColor\"> <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" /> </svg>`:U} </div> `}))} </div> </div> </div> ${this._touched&&this.required&&!this.value?H`<div class=\"validation-message\">Please select an option</div>`:this.hint?H`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> <div class=\"options-slot\"> <slot @slotchange=${()=>this.requestUpdate()}></slot> </div> `}focus(){this._triggerElement?.focus()}blur(){this._triggerElement?.blur()}}"
|
|
629
629
|
},
|
|
630
630
|
{
|
|
631
631
|
"kind": "variable",
|
|
632
|
-
"name": "
|
|
633
|
-
"default": "class extends
|
|
632
|
+
"name": "pt",
|
|
633
|
+
"default": "class extends re{constructor(){super(...arguments),this.value=\"\",this.disabled=!1}get label(){return this.textContent?.trim()||\"\"}render(){return H`<slot></slot>`}}"
|
|
634
634
|
},
|
|
635
635
|
{
|
|
636
636
|
"kind": "variable",
|
|
637
|
-
"name": "
|
|
638
|
-
"default": "class extends
|
|
637
|
+
"name": "ft",
|
|
638
|
+
"default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"\",this.required=!1,this.disabled=!1,this.readonly=!1,this.rows=3,this.autocomplete=\"\",this.hint=\"\",this._touched=!1,this._dirty=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._dirty=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),this.addEventListener(\"invalid\",this._handleInvalid)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(\"invalid\",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has(\"required\")||e.has(\"value\"))&&this._updateValidity()}_updateValidity(){this._textarea&&this._internals.setValidity(this._textarea.validity,this._textarea.validationMessage)}_handleInput(e){this.value=e.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._textarea.validity,this._textarea.validationMessage)}_handleChange(e){this.value=e.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._textarea.validity,this._textarea.validationMessage)}render(){let e=\"\";return this._touched&&this._textarea&&!this._textarea.validity.valid&&(e=this._textarea.validationMessage),H` <div class=\"wrapper\"> ${this.label?H` <label for=\"textarea\"> ${this.label} ${this.required?H`<span class=\"required\" aria-hidden=\"true\">*</span>`:U} </label> `:U} <textarea id=\"textarea\" class=${ke({\"textarea--invalid\":this._touched&&this._textarea&&!this._textarea.validity.valid})} name=${this.name} .value=${nt(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} rows=${this.rows} cols=${st(this.cols)} minlength=${st(this.minlength)} maxlength=${st(this.maxlength)} autocomplete=${st(this.autocomplete||void 0)} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} ></textarea> ${e?H`<div class=\"validation-message\">${e}</div>`:this.hint?H`<div class=\"hint\">${this.hint}</div>`:U} </div> `}focus(){this._textarea?.focus()}blur(){this._textarea?.blur()}select(){this._textarea?.select()}}"
|
|
639
639
|
}
|
|
640
640
|
],
|
|
641
641
|
"exports": [
|
|
@@ -659,7 +659,7 @@
|
|
|
659
659
|
"kind": "js",
|
|
660
660
|
"name": "KRAccordion",
|
|
661
661
|
"declaration": {
|
|
662
|
-
"name": "
|
|
662
|
+
"name": "ge",
|
|
663
663
|
"module": "dist/krubble-components.bundled.min.js"
|
|
664
664
|
}
|
|
665
665
|
},
|
|
@@ -667,7 +667,7 @@
|
|
|
667
667
|
"kind": "js",
|
|
668
668
|
"name": "KRAlert",
|
|
669
669
|
"declaration": {
|
|
670
|
-
"name": "
|
|
670
|
+
"name": "$e",
|
|
671
671
|
"module": "dist/krubble-components.bundled.min.js"
|
|
672
672
|
}
|
|
673
673
|
},
|
|
@@ -675,7 +675,7 @@
|
|
|
675
675
|
"kind": "js",
|
|
676
676
|
"name": "KRButton",
|
|
677
677
|
"declaration": {
|
|
678
|
-
"name": "
|
|
678
|
+
"name": "Se",
|
|
679
679
|
"module": "dist/krubble-components.bundled.min.js"
|
|
680
680
|
}
|
|
681
681
|
},
|
|
@@ -683,7 +683,7 @@
|
|
|
683
683
|
"kind": "js",
|
|
684
684
|
"name": "KRCodeDemo",
|
|
685
685
|
"declaration": {
|
|
686
|
-
"name": "
|
|
686
|
+
"name": "Oe",
|
|
687
687
|
"module": "dist/krubble-components.bundled.min.js"
|
|
688
688
|
}
|
|
689
689
|
},
|
|
@@ -691,7 +691,7 @@
|
|
|
691
691
|
"kind": "js",
|
|
692
692
|
"name": "KRContextMenu",
|
|
693
693
|
"declaration": {
|
|
694
|
-
"name": "
|
|
694
|
+
"name": "Te",
|
|
695
695
|
"module": "dist/krubble-components.bundled.min.js"
|
|
696
696
|
}
|
|
697
697
|
},
|
|
@@ -707,7 +707,7 @@
|
|
|
707
707
|
"kind": "js",
|
|
708
708
|
"name": "KRDialogRef",
|
|
709
709
|
"declaration": {
|
|
710
|
-
"name": "
|
|
710
|
+
"name": "De",
|
|
711
711
|
"module": "dist/krubble-components.bundled.min.js"
|
|
712
712
|
}
|
|
713
713
|
},
|
|
@@ -715,7 +715,7 @@
|
|
|
715
715
|
"kind": "js",
|
|
716
716
|
"name": "KRProgressBar",
|
|
717
717
|
"declaration": {
|
|
718
|
-
"name": "
|
|
718
|
+
"name": "ot",
|
|
719
719
|
"module": "dist/krubble-components.bundled.min.js"
|
|
720
720
|
}
|
|
721
721
|
},
|
|
@@ -723,7 +723,7 @@
|
|
|
723
723
|
"kind": "js",
|
|
724
724
|
"name": "KRSelectField",
|
|
725
725
|
"declaration": {
|
|
726
|
-
"name": "
|
|
726
|
+
"name": "ct",
|
|
727
727
|
"module": "dist/krubble-components.bundled.min.js"
|
|
728
728
|
}
|
|
729
729
|
},
|
|
@@ -731,7 +731,7 @@
|
|
|
731
731
|
"kind": "js",
|
|
732
732
|
"name": "KRSelectOption",
|
|
733
733
|
"declaration": {
|
|
734
|
-
"name": "
|
|
734
|
+
"name": "pt",
|
|
735
735
|
"module": "dist/krubble-components.bundled.min.js"
|
|
736
736
|
}
|
|
737
737
|
},
|
|
@@ -739,7 +739,7 @@
|
|
|
739
739
|
"kind": "js",
|
|
740
740
|
"name": "KRSnackbar",
|
|
741
741
|
"declaration": {
|
|
742
|
-
"name": "
|
|
742
|
+
"name": "He",
|
|
743
743
|
"module": "dist/krubble-components.bundled.min.js"
|
|
744
744
|
}
|
|
745
745
|
},
|
|
@@ -747,7 +747,7 @@
|
|
|
747
747
|
"kind": "js",
|
|
748
748
|
"name": "KRSpinner",
|
|
749
749
|
"declaration": {
|
|
750
|
-
"name": "
|
|
750
|
+
"name": "tt",
|
|
751
751
|
"module": "dist/krubble-components.bundled.min.js"
|
|
752
752
|
}
|
|
753
753
|
},
|
|
@@ -755,7 +755,7 @@
|
|
|
755
755
|
"kind": "js",
|
|
756
756
|
"name": "KRTab",
|
|
757
757
|
"declaration": {
|
|
758
|
-
"name": "
|
|
758
|
+
"name": "Ze",
|
|
759
759
|
"module": "dist/krubble-components.bundled.min.js"
|
|
760
760
|
}
|
|
761
761
|
},
|
|
@@ -763,7 +763,7 @@
|
|
|
763
763
|
"kind": "js",
|
|
764
764
|
"name": "KRTabGroup",
|
|
765
765
|
"declaration": {
|
|
766
|
-
"name": "
|
|
766
|
+
"name": "We",
|
|
767
767
|
"module": "dist/krubble-components.bundled.min.js"
|
|
768
768
|
}
|
|
769
769
|
},
|
|
@@ -771,7 +771,7 @@
|
|
|
771
771
|
"kind": "js",
|
|
772
772
|
"name": "KRTable",
|
|
773
773
|
"declaration": {
|
|
774
|
-
"name": "
|
|
774
|
+
"name": "Je",
|
|
775
775
|
"module": "dist/krubble-components.bundled.min.js"
|
|
776
776
|
}
|
|
777
777
|
},
|
|
@@ -779,7 +779,7 @@
|
|
|
779
779
|
"kind": "js",
|
|
780
780
|
"name": "KRTextField",
|
|
781
781
|
"declaration": {
|
|
782
|
-
"name": "
|
|
782
|
+
"name": "at",
|
|
783
783
|
"module": "dist/krubble-components.bundled.min.js"
|
|
784
784
|
}
|
|
785
785
|
},
|
|
@@ -787,7 +787,7 @@
|
|
|
787
787
|
"kind": "js",
|
|
788
788
|
"name": "KRTextareaField",
|
|
789
789
|
"declaration": {
|
|
790
|
-
"name": "
|
|
790
|
+
"name": "ft",
|
|
791
791
|
"module": "dist/krubble-components.bundled.min.js"
|
|
792
792
|
}
|
|
793
793
|
},
|
|
@@ -795,7 +795,7 @@
|
|
|
795
795
|
"kind": "js",
|
|
796
796
|
"name": "krBaseCSS",
|
|
797
797
|
"declaration": {
|
|
798
|
-
"name": "
|
|
798
|
+
"name": "le",
|
|
799
799
|
"module": "dist/krubble-components.bundled.min.js"
|
|
800
800
|
}
|
|
801
801
|
}
|
|
@@ -1152,7 +1152,7 @@
|
|
|
1152
1152
|
{
|
|
1153
1153
|
"kind": "variable",
|
|
1154
1154
|
"name": "KRButton",
|
|
1155
|
-
"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 = []; 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'; // Align right if dropdown overflows viewport const dropdownRect = dropdown.getBoundingClientRect(); if (dropdownRect.right > window.innerWidth) { dropdown.style.left = ''; dropdown.style.right = window.innerWidth - hostRect.right + 'px'; } } }); } } _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 ` <slot></slot> ${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; } }",
|
|
1155
|
+
"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'; // Align right if dropdown overflows viewport const dropdownRect = dropdown.getBoundingClientRect(); if (dropdownRect.right > window.innerWidth) { dropdown.style.left = ''; dropdown.style.right = window.innerWidth - hostRect.right + 'px'; } } }); } } _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; } }",
|
|
1156
1156
|
"description": "A customizable button component."
|
|
1157
1157
|
}
|
|
1158
1158
|
],
|
|
@@ -1491,7 +1491,7 @@
|
|
|
1491
1491
|
{
|
|
1492
1492
|
"kind": "variable",
|
|
1493
1493
|
"name": "KRTab",
|
|
1494
|
-
"default": "class KRTab extends LitElement { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display
|
|
1494
|
+
"default": "class KRTab extends LitElement { constructor() { super(...arguments); /** * Unique identifier for the tab */ this.id = ''; /** * Display label for the tab */ this.label = ''; /** * Badge text displayed next to label (e.g. notification count) */ this.badge = ''; /** * Badge background color */ this.badgeBackground = ''; /** * Badge text color */ this.badgeColor = ''; /** * Whether the tab is disabled */ this.disabled = false; /** * Whether the tab can be dismissed/closed */ this.dismissible = false; /** * Whether this tab is currently active (set by parent) */ this.active = false; } /** * Gets the icon element from the icon slot (if any) */ getIconElement() { return this.querySelector('[slot=\"icon\"]'); } render() { console.log('tab render'); return html `<slot></slot>`; } }",
|
|
1495
1495
|
"description": "A tab for the kr-tab-group component."
|
|
1496
1496
|
}
|
|
1497
1497
|
],
|
|
@@ -1513,7 +1513,7 @@
|
|
|
1513
1513
|
{
|
|
1514
1514
|
"kind": "variable",
|
|
1515
1515
|
"name": "KRTabGroup",
|
|
1516
|
-
"default": "class KRTabGroup extends LitElement { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return nothing; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return html `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return html ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => html ` <button class=${classMap({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.
|
|
1516
|
+
"default": "class KRTabGroup extends LitElement { constructor() { super(...arguments); /** * Whether tabs should stretch to fill the full width evenly */ this.justified = false; /** * Size of the tabs: 'small' | 'medium' | 'large' */ this.size = 'medium'; } updated(changes) { if (changes.has('activeTabId')) { this._updateActiveTab(); } } firstUpdated() { this._updateActiveTab(); } _getTabs() { return Array.from(this.querySelectorAll('kr-tab')); } _updateActiveTab() { const tabs = this._getTabs(); if (tabs.length === 0) return; if (!this.activeTabId) { this.activeTabId = tabs[0]?.id; } tabs.forEach((tab) => { tab.active = tab.id === this.activeTabId; }); this.requestUpdate(); } _handleTabClick(tab) { if (tab.disabled) return; this.activeTabId = tab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: tab.id }, bubbles: true, composed: true, })); } _handleTabDismiss(tab, e) { e.stopPropagation(); this.dispatchEvent(new CustomEvent('tab-dismiss', { detail: { tabId: tab.id }, bubbles: true, composed: true, })); } _handleKeyDown(e) { const enabledTabs = this._getTabs().filter((t) => !t.disabled); const currentIndex = enabledTabs.findIndex((t) => t.id === this.activeTabId); let newIndex = -1; switch (e.key) { case 'ArrowLeft': newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1; break; case 'ArrowRight': newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0; break; case 'Home': newIndex = 0; break; case 'End': newIndex = enabledTabs.length - 1; break; } if (newIndex >= 0) { e.preventDefault(); const newTab = enabledTabs[newIndex]; this.activeTabId = newTab.id; this.dispatchEvent(new CustomEvent('tab-change', { detail: { activeTabId: newTab.id }, bubbles: true, composed: true, })); const tabButtons = this.shadowRoot?.querySelectorAll('.label'); const targetButton = Array.from(tabButtons || []).find((btn) => btn.getAttribute('data-tab-id') === newTab.id); targetButton?.focus(); } } _renderTabIcon(tab) { const iconElement = tab.getIconElement(); if (!iconElement) return nothing; // Clone the icon element to render in the header const clonedIcon = iconElement.cloneNode(true); clonedIcon.removeAttribute('slot'); return html `<span class=\"label-icon\">${clonedIcon}</span>`; } render() { return html ` <div class=\"header\" role=\"tablist\" @keydown=${this._handleKeyDown}> ${this._getTabs().map((tab) => html ` <button class=${classMap({ label: true, 'label--active': tab.id === this.activeTabId, 'label--justified': this.justified, })} role=\"tab\" data-tab-id=${tab.id} aria-selected=${tab.id === this.activeTabId} aria-controls=${`panel-${tab.id}`} tabindex=${tab.id === this.activeTabId ? 0 : -1} ?disabled=${tab.disabled} @click=${() => this._handleTabClick(tab)} > ${this._renderTabIcon(tab)} <span>${tab.label}</span> ${tab.badge ? html `<span class=\"label-badge\" style=${styleMap({ backgroundColor: tab.badgeBackground, color: tab.badgeColor })}>${tab.badge}</span>` : nothing} ${tab.dismissible ? html ` <button class=\"label-dismiss\" type=\"button\" aria-label=\"Close tab\" @click=${(e) => this._handleTabDismiss(tab, e)} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"12\" height=\"12\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/></svg> </button> ` : nothing} </button> `)} </div> <div class=\"content\" role=\"tabpanel\" aria-labelledby=${this.activeTabId || ''}> <slot @slotchange=${this._updateActiveTab}></slot> </div> `; } }",
|
|
1517
1517
|
"description": "A tabbed navigation component for switching between content sections."
|
|
1518
1518
|
}
|
|
1519
1519
|
],
|
|
@@ -1763,8 +1763,12 @@
|
|
|
1763
1763
|
"name": "KRButton",
|
|
1764
1764
|
"slots": [
|
|
1765
1765
|
{
|
|
1766
|
-
"description": "The button content",
|
|
1766
|
+
"description": "The button content (text)",
|
|
1767
1767
|
"name": ""
|
|
1768
|
+
},
|
|
1769
|
+
{
|
|
1770
|
+
"description": "Optional icon to display alongside the button text",
|
|
1771
|
+
"name": "icon"
|
|
1768
1772
|
}
|
|
1769
1773
|
],
|
|
1770
1774
|
"members": [
|
|
@@ -1840,6 +1844,17 @@
|
|
|
1840
1844
|
"description": "Dropdown options - when provided, button becomes a dropdown",
|
|
1841
1845
|
"attribute": "options"
|
|
1842
1846
|
},
|
|
1847
|
+
{
|
|
1848
|
+
"kind": "field",
|
|
1849
|
+
"name": "iconPosition",
|
|
1850
|
+
"type": {
|
|
1851
|
+
"text": "'left' | 'right'"
|
|
1852
|
+
},
|
|
1853
|
+
"default": "'left'",
|
|
1854
|
+
"description": "Position of the icon relative to the text content.",
|
|
1855
|
+
"attribute": "icon-position",
|
|
1856
|
+
"reflects": true
|
|
1857
|
+
},
|
|
1843
1858
|
{
|
|
1844
1859
|
"kind": "field",
|
|
1845
1860
|
"name": "_state",
|
|
@@ -1978,6 +1993,16 @@
|
|
|
1978
1993
|
}
|
|
1979
1994
|
],
|
|
1980
1995
|
"attributes": [
|
|
1996
|
+
{
|
|
1997
|
+
"name": "icon-position",
|
|
1998
|
+
"type": {
|
|
1999
|
+
"text": "'left' | 'right'"
|
|
2000
|
+
},
|
|
2001
|
+
"default": "'left'",
|
|
2002
|
+
"description": "Position of the icon relative to the text content.",
|
|
2003
|
+
"fieldName": "iconPosition",
|
|
2004
|
+
"attribute": "icon-position"
|
|
2005
|
+
},
|
|
1981
2006
|
{
|
|
1982
2007
|
"name": "variant",
|
|
1983
2008
|
"type": {
|
|
@@ -3524,13 +3549,13 @@
|
|
|
3524
3549
|
},
|
|
3525
3550
|
{
|
|
3526
3551
|
"kind": "field",
|
|
3527
|
-
"name": "
|
|
3552
|
+
"name": "label",
|
|
3528
3553
|
"type": {
|
|
3529
3554
|
"text": "string"
|
|
3530
3555
|
},
|
|
3531
3556
|
"default": "''",
|
|
3532
|
-
"description": "Display
|
|
3533
|
-
"attribute": "
|
|
3557
|
+
"description": "Display label for the tab",
|
|
3558
|
+
"attribute": "label"
|
|
3534
3559
|
},
|
|
3535
3560
|
{
|
|
3536
3561
|
"kind": "field",
|
|
@@ -3539,7 +3564,7 @@
|
|
|
3539
3564
|
"text": "string"
|
|
3540
3565
|
},
|
|
3541
3566
|
"default": "''",
|
|
3542
|
-
"description": "Badge text displayed next to
|
|
3567
|
+
"description": "Badge text displayed next to label (e.g. notification count)",
|
|
3543
3568
|
"attribute": "badge"
|
|
3544
3569
|
},
|
|
3545
3570
|
{
|
|
@@ -3615,13 +3640,13 @@
|
|
|
3615
3640
|
"fieldName": "id"
|
|
3616
3641
|
},
|
|
3617
3642
|
{
|
|
3618
|
-
"name": "
|
|
3643
|
+
"name": "label",
|
|
3619
3644
|
"type": {
|
|
3620
3645
|
"text": "string"
|
|
3621
3646
|
},
|
|
3622
3647
|
"default": "''",
|
|
3623
|
-
"description": "Display
|
|
3624
|
-
"fieldName": "
|
|
3648
|
+
"description": "Display label for the tab",
|
|
3649
|
+
"fieldName": "label"
|
|
3625
3650
|
},
|
|
3626
3651
|
{
|
|
3627
3652
|
"name": "badge",
|
|
@@ -3629,7 +3654,7 @@
|
|
|
3629
3654
|
"text": "string"
|
|
3630
3655
|
},
|
|
3631
3656
|
"default": "''",
|
|
3632
|
-
"description": "Badge text displayed next to
|
|
3657
|
+
"description": "Badge text displayed next to label (e.g. notification count)",
|
|
3633
3658
|
"fieldName": "badge"
|
|
3634
3659
|
},
|
|
3635
3660
|
{
|