kempo-ui 0.4.19 → 0.4.21

package/src/components/tableControls/PageSelect.js

@@ -1,101 +0,0 @@
-import TableControl from './TableControl.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class PageSelect extends TableControl {
-	static properties = {
-		...TableControl.properties
-	};
-
-	constructor() {
-		super({
-			maxWidth: null
-		});
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.onTableEvent('pageChange pageSizeChange pageCountChanged recordsSet', this.handleTableUpdate);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if(this.table){
-			this.table.removeEventListener('pageChange', this.handleTableUpdate);
-			this.table.removeEventListener('pageSizeChange', this.handleTableUpdate);
-			this.table.removeEventListener('pageCountChanged', this.handleTableUpdate);
-			this.table.removeEventListener('recordsSet', this.handleTableUpdate);
-		}
-	}
-
-	/*
-		Event Handlers
-	*/
-
-	handleTableUpdate = () => {
-		this.requestUpdate();
-	};
-
-	handleSelectChange = e => {
-		if(this.table){
-			this.table.setPage(parseInt(e.target.value));
-		}
-	};
-
-	/*
-		Getters
-	*/
-
-	get currentPage() {
-		return this.table ? this.table.getCurrentPage() : 1;
-	}
-
-	get totalPages() {
-		return this.table ? this.table.getTotalPages() : 1;
-	}
-
-	/*
-		Rendering Logic
-	*/
-
-	render() {
-		if(!this.table){
-			return html`<div>No table found</div>`;
-		}
-
-		const options = [];
-		for(let i = 1; i <= this.totalPages; i++){
-			options.push(html`<option value="${i}" ?selected="${i === this.currentPage}">Page ${i}</option>`);
-		}
-		
-		return html`
-			<div class="page-select">
-				<select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages <= 1}">
-					${options}
-				</select>
-				<label> out of ${this.totalPages}</label>
-			</div>
-		`;
-	}
-
-	static styles = css`
-		${TableControl.styles}
-		
-		.page-select {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-			white-space: nowrap;
-		}
-		
-		label {
-			padding: 0;
-			margin: 0;
-		}
-	`;
-}
-
-customElements.define('k-tc-page-select', PageSelect);

package/src/components/tableControls/PageSize.js

@@ -1,68 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-
-export default class PageSize extends TableControl {
-	constructor() {
-		super({
-			maxWidth: null
-		});
-		this.pageChangeHandler = () => this.requestUpdate();
-		this.pageSizeChangeHandler = () => this.requestUpdate();
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.onTableEvent('pageChange', this.pageChangeHandler);
-		this.onTableEvent('pageSizeChange', this.pageSizeChangeHandler);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if(this.table){
-			this.table.removeEventListener('pageChange', this.pageChangeHandler);
-			this.table.removeEventListener('pageSizeChange', this.pageSizeChangeHandler);
-		}
-	}
-
-	/*
-		Event Handlers
-	*/
-
-	handleChange = e => {
-		if(this.table){
-			this.table.setPageSize(parseInt(e.target.value));
-		}
-	};
-
-	/*
-		Utility Functions
-	*/
-
-	get currentPageSize() {
-		return this.table ? this.table.getPageSize() : 10;
-	}
-
-	get pageSizeOptions() {
-		return this.table ? this.table.pageSizeOptions : [10, 25, 50, 100, 500];
-	}
-
-	/*
-		Rendering Logic
-	*/
-
-	render() {
-		return html`
-			<select class="no-btn ph b r" @change="${this.handleChange}">
-				${this.pageSizeOptions.map(size => 
-					html`<option value="${size}" ?selected="${size === this.currentPageSize}">${size} per page</option>`
-				)}
-			</select>
-		`;
-	}
-}
-
-customElements.define('k-tc-page-size', PageSize);

package/src/components/tableControls/PrevPage.js

@@ -1,65 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class PrevPage extends TableControl {
-	constructor() {
-		super();
-		this.pageChangeHandler = () => this.requestUpdate();
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-
-	connectedCallback() {
-		super.connectedCallback();
-		if(this.table){
-			this.table.addEventListener('pageChange', this.pageChangeHandler);
-		}
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if(this.table){
-			this.table.removeEventListener('pageChange', this.pageChangeHandler);
-		}
-	}
-
-	/*
-		Event Handlers
-	*/
-
-	handleClick = () => {
-		if(this.table){
-			this.table.prevPage();
-		}
-	};
-
-	/*
-		Utility Functions
-	*/
-
-	get isDisabled() {
-		if(!this.table) return true;
-		return this.table.getCurrentPage() === 1;
-	}
-
-	/*
-		Rendering Logic
-	*/
-
-	render() {
-		return html`
-			<button 
-				class="no-btn icon-btn" 
-				?disabled="${this.isDisabled}"
-				@click="${this.handleClick}"
-			>
-				<k-icon name="chevron" direction="left"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-prev-page', PrevPage);

package/src/components/tableControls/Search.js

@@ -1,56 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-import debounce from '../../utils/debounce.js';
-
-export default class Search extends TableControl {
-	/* Properties */
-	static properties = {
-		searchTerm: { type: String }
-	};
-
-	/*
-		Constructor
-	*/
-	constructor() {
-		super({ maxWidth: 200 });
-		this.debouncedSearch = debounce(this.performSearch, 200);
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleInput = (e) => {
-		this.searchTerm = e.target.value;
-		this.debouncedSearch();
-	};
-
-	/*
-		Methods
-	*/
-	performSearch = () => {
-		if(!this.table) return;
-
-		if(!this.searchTerm || this.searchTerm.length < 3){
-			this.table.showAllRecords();
-		} else {
-			this.table.search(this.searchTerm);
-		}
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<input
-				type="search"
-				placeholder="Search"
-				class="px pyh"
-				.value="${this.searchTerm || ''}"
-				@input="${this.handleInput}"
-			/>
-		`;
-	}
-}
-
-customElements.define('k-tc-search', Search);

package/src/components/tableControls/ShowAll.js

@@ -1,34 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class ShowAll extends TableControl {
-	/*
-		Constructor
-	*/
-	constructor() {
-		super({ maxWidth: 40 });
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleShowAll = () => {
-		if(this.table){
-			this.table.showAllRecords();
-		}
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<button class="no-btn icon-btn" @click="${this.handleShowAll}">
-				<k-icon name="show"></k-icon>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-show-all', ShowAll);

package/src/components/tableControls/TableControl.js

@@ -1,103 +0,0 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class TableControl extends ShadowComponent {
-	/* Properties */
-	static properties = {
-		maxWidth: { type: Number, reflect: true, attribute: 'max-width' }
-	};
-
-	/*
-		Constructor
-	*/
-	constructor({
-		maxWidth = 40
-	} = {}) {
-		super();
-		this.maxWidth = maxWidth;
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if(changedProperties.has('maxWidth')){
-			if(this.maxWidth){
-				this.style.setProperty('--max-width', `${this.maxWidth}px`);
-			} else {
-				this.style.removeProperty('--max-width');
-			}
-		}
-	}
-
-	firstUpdated() {
-		if(this.maxWidth){
-			this.style.setProperty('--max-width', `${this.maxWidth}px`);
-		} else {
-			this.style.removeProperty('--max-width');
-		}
-	}
-
-	/*
-		Getters for Table Integration
-	*/
-	get table() {
-		if (this.getRootNode() instanceof ShadowRoot) {
-			return this.getRootNode().host.closest('k-table');
-		} else {
-			return this.closest('k-table');
-		}
-	}
-
-	get record() {
-		if (this.getRootNode() instanceof ShadowRoot) {
-			const $record = this.closest('.record');
-			if ($record) {
-				const index = $record.dataset.index;
-				if (index !== undefined) {
-					return this.table.records[index];
-				}
-			}
-		}
-		return false;
-	}
-
-	/*
-		Table Event Handling
-	*/
-	async onTableEvent(eventNames, handler) {
-		// Wait for k-table to be defined before trying to find it
-		await customElements.whenDefined('k-table');
-		
-		if(this.table){
-			const events = eventNames.split(' ');
-			events.forEach(eventName => {
-				this.table.addEventListener(eventName, handler);
-			});
-			this.requestUpdate(); // Force update after table is found
-		}
-	}
-
-	/*
-		Styles
-	*/
-	static styles = css`
-		:host {
-			display: inline-flex;
-		}
-		
-		.icon-btn {
-			display: inline-flex !important;
-			align-items: center;
-			justify-content: center;
-			width: 40px;
-			height: 40px;
-		}
-		.icon-btn:disabled {
-			opacity: 0.6;
-		}
-	`;
-}
-
-customElements.define('k-table-control', TableControl);

package/tasks/0006-create-pagination-component.md

@@ -1,136 +0,0 @@
-# 0006 - Create Pagination Component
-
-## Status: Complete
-
-## Dependency
-None
-
-## References
-[styles](file:///c:\Users\dusti\.copilot\skills\styles\SKILL.md) - global skill for properly styling the component
-[component-code](file:///c:\Users\dusti\.copilot\skills\component-code\SKILL.md) - global skill for coding kempo-ui components
-[MarkdownEditor](../src/components/MarkdownEditor.js) - similar component pattern with control variants and preconfigured controls showing how to structure controls, make them interact with the primary component, and implement preconfigured control combinations
-
-## Current State
-
-No pagination component exists yet. Pagination functionality is not available to users.
-
-## Aceptance Criteria
-
-A new Pagination component should be created that:
-- Acts as a UI interface component placed under content
-- Does not manage the actual content being paginated
-- Accepts attributes for total number of items, items per page, and current page number
-- Calculates total number of pages from total items and items per page
-- Displays and tracks the current page number
-- Exposes public methods: `nextPage()`, `previousPage()`
-- Allows direct page assignment via the `page` property with automatic clamping
-- Emits `page-change` event when the user navigates to a different page
-- Emits `items-per-page-change` event when the items-per-page configuration changes
-- Has separate control components for common pagination controls (like HtmlEditor pattern)
-- Includes preconfigured control variants for common use cases
-
-### In-Scope
-- `src/components/pagination.js` - main component
-- `src/components/pagination-controls-*.js` - control component variants
-- `docs-src/components/pagination.page.html` - documentation page
-- `tests/components/pagination.test.js` - component tests
-
-### Out of Scope
-- Modifications to existing components
-- Backend pagination logic or data fetching
-- Content management or rendering within the pagination component itself
-
-## Task Details
-
-1. Set up the Pagination component using the component-setup skill
-2. Implement the base Pagination component with:
-   - Attributes: `totalItems` (total number of items), `itemsPerPage` (items per page), and `page` (current page)
-   - Getter properties: `totalPages` (calculated from totalItems and itemsPerPage)
-   - `page` property with automatic clamping to [1, totalPages] range
-   - Internal tracking of current page (default to page 1)
-   - Display of page information (e.g., "Page 3 of 10")
-   - Public methods: `nextPage()`, `previousPage()` (automatically clamped)
-   - `page-change` event emission when user navigates (not fired on auto-resets)
-   - `items-per-page-change` event emission when items-per-page changes
-   - Event detail includes full pagination state
-3. Create pagination control component variants following the HtmlEditor control pattern
-4. Create preconfigured pagination control combinations
-5. Write component tests covering all functionality
-6. Create documentation page with examples
-7. Update `llms.txt` with new component
-
-## Testing / Validation Plan
-
-- Verify component renders correctly with various page counts and items per page values
-- Test direct page assignment (`el.page = n`) sets the correct page with automatic clamping
-- Test `nextPage()` increments page and disables when at last page
-- Test `previousPage()` decrements page and disables when at first page
-- Verify `page-change` event fires only when user navigates (not on auto-resets)
-- Verify `items-per-page-change` event fires when itemsPerPage changes
-- Verify event details include full pagination state
-- Verify control components render and function correctly
-- Verify preconfigured controls work as expected
-- Test with browser DevTools to confirm no console errors
-
-### Testing / Validation Results
-
-#### LLM Validation Results
-
-##### Component renders correctly with various page counts and items per page
-
-**PASS.** The documentation page shows `<k-pagination>` working at 100 total items / 10 per page (10 pages) and 47 total items / 10 per page (5 pages). The `totalPages` getter returns the correct ceiling division in both cases. The page info text ("Page 1 of 10", "Page 1 of 5") reflects the correct state.
-
-![Top of docs page — basic usage and With Controls](0006-create-pagination-component/screenshot-01-top.png)
-![Controls sections — Simple and Full preconfigured](0006-create-pagination-component/screenshot-02-controls.png)
-
-##### setPage() sets the correct page and emits event
-
-**PASS.** The `page` property can be set directly (e.g. `el.page = 3`) and automatically clamps out-of-range values to [1, totalPages]. The `page-change` event fires only when the page actually changes (not during auto-resets). The event detail includes `{ currentPage, totalPages, itemsPerPage, totalItems }`.
-
-##### nextPage() increments page and disables when at last page
-
-**PASS.** In the live demo, clicking Next advanced cards from Items 1–10 (page 1) to Items 11–20 (page 2). On the last page (page 5, Items 41–47), the Next and Last buttons are correctly disabled.
-
-![Live demo page 1 — Items 1–10](0006-create-pagination-component/screenshot-04-live-demo-page1.png)
-![Live demo page 2 — Items 11–20 after clicking Next](0006-create-pagination-component/screenshot-05-live-demo-page2.png)
-![Live demo last page — Items 41–47, Next/Last buttons disabled](0006-create-pagination-component/screenshot-06-live-demo-last-page.png)
-
-##### previousPage() decrements page and disables when at first page
-
-**PASS.** On page 1, the Previous and First buttons are disabled (confirmed in screenshots). Unit tests verify previousPage() decrements correctly and is a no-op at page 1.
-
-##### Events are properly emitted on all page changes
-
-**PASS.** The `page-change` event fires when the user navigates (via direct page assignment, `nextPage()`, or `previousPage()`), but NOT when the page auto-resets due to configuration changes. The `items-per-page-change` event fires when `itemsPerPage` changes. The live demo re-renders cards on every `page-change` event. Unit tests (all 2157 pass) verify both events fire correctly and do NOT fire inappropriately.
-
-##### Control components render and function correctly
-
-**PASS.** All six original controls (`k-pg-first`, `k-pg-prev`, `k-pg-page-info`, `k-pg-next`, `k-pg-last`, `k-pg-items-per-page`) plus two new controls (`k-pg-goto-page`, `k-pg-count`) render and respond to pagination state. Icons use `chevron` and `chevron-line` with the `direction` attribute for correct orientation.
-
-![Goto Page and All Controls sections](0006-create-pagination-component/screenshot-03-preconfigured.png)
-
-##### Preconfigured controls work as expected
-
-**PASS.** `controls="simple"` renders prev/page-info/next. `controls="full"` renders first/prev/page-info/next/last/items-per-page. All control modules are dynamically imported automatically when the `controls` attribute is set.
-
-##### No console errors
-
-**PASS.** The only 404s logged are for icon files at the relative `./icons/` path (e.g. `/components/icons/chevron.svg`) — this is the expected first-attempt behavior of the Icon component's fallback lookup system, which then succeeds at `/icons/chevron.svg`. The same pattern appears on every page of the docs. No JavaScript errors or unexpected failures.
-
-##### Unit tests
-
-**PASS.** All 2157 tests pass (includes 25+ Pagination-specific tests covering page navigation, clamping, direct assignment, event separation, and control rendering).
-
-```
-=== Test Summary ====
-Total Tests: 2157
-Passed: 2157
-Failed: 0
-
-All tests passed!
-```
-
-![JS Reference table](0006-create-pagination-component/screenshot-07-js-reference.png)
-
-#### User Validation Results
-I (Dustin Poissant) have validated this is all working as expected (see notes above).