kempo-ui 0.4.19 → 0.4.21

package/tests/components/{codeEditorControls → controls}/EditorTheme.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/EditorTheme.js';
+import '../../../src/components/controls/EditorTheme.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-editor-theme slot="toolbar-top-right"></k-cec-editor-theme>
+			<kc-editor-theme slot="toolbar-top-right"></kc-editor-theme>
 		</k-code-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-code-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-cec-editor-theme');
+	const control = container.querySelector('kc-editor-theme');
 	return { container, editor, control };
 };
 
@@ -33,7 +33,7 @@ export default {
 
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Should find parent k-code-editor');
 		}

package/tests/components/{tableControls → controls}/ExportControls.browser-test.js

@@ -1,5 +1,5 @@
-import '../../../src/components/tableControls/ExportCSV.js';
-import '../../../src/components/tableControls/ExportJson.js';
+import '../../../src/components/controls/TcExportCSV.js';
+import '../../../src/components/controls/TcExportJson.js';
 import '../../../src/components/Table.js';
 
 const sampleRecords = [
@@ -50,9 +50,9 @@ export default {
 		ExportCSV Tests
 	*/
 	'ExportCSV: should render export button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('ExportCSV should render button');
@@ -70,21 +70,9 @@ export default {
 		pass('ExportCSV renders correctly');
 	},
 
-	'ExportCSV: should have default maxWidth of 136': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
-		
-		if(control.maxWidth !== 136){
-			cleanup(container);
-			fail(`Expected maxWidth 136, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('ExportCSV has default maxWidth of 136');
-	},
 
 	'ExportCSV: should have getCSV method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		if(typeof control.getCSV !== 'function'){
 			cleanup(container);
@@ -97,7 +85,7 @@ export default {
 	},
 
 	'ExportCSV: should have export method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		if(typeof control.export !== 'function'){
 			cleanup(container);
@@ -110,7 +98,7 @@ export default {
 	},
 
 	'ExportCSV: getCSV should return CSV string': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		
@@ -125,7 +113,7 @@ export default {
 	},
 
 	'ExportCSV: CSV should have header row': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		const lines = csv.split('\n');
@@ -142,7 +130,7 @@ export default {
 	},
 
 	'ExportCSV: CSV should have data rows': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		const lines = csv.split('\n').filter(l => l.trim());
@@ -159,7 +147,7 @@ export default {
 	},
 
 	'ExportCSV: CSV should contain record data': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		
@@ -178,7 +166,7 @@ export default {
 		container.innerHTML = `
 			<k-table>
 				<div slot="controls">
-					<k-tc-export-csv></k-tc-export-csv>
+					<kc-tc-export-csv></kc-tc-export-csv>
 				</div>
 			</k-table>
 		`;
@@ -194,7 +182,7 @@ export default {
 		});
 		await table.updateComplete;
 		
-		const control = container.querySelector('k-tc-export-csv');
+		const control = container.querySelector('kc-tc-export-csv');
 		await control.updateComplete;
 		
 		const csv = control.getCSV();
@@ -211,7 +199,7 @@ export default {
 	},
 
 	'ExportCSV: should return empty string without table': async ({pass, fail}) => {
-		const control = document.createElement('k-tc-export-csv');
+		const control = document.createElement('kc-tc-export-csv');
 		document.body.appendChild(control);
 		await control.updateComplete;
 		
@@ -231,9 +219,9 @@ export default {
 		ExportJson Tests
 	*/
 	'ExportJson: should render export button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
+		const { container, control } = await createTableWithControl('kc-tc-export-json');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('ExportJson should render button');
@@ -251,21 +239,9 @@ export default {
 		pass('ExportJson renders correctly');
 	},
 
-	'ExportJson: should have default maxWidth of 136': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
-		
-		if(control.maxWidth !== 136){
-			cleanup(container);
-			fail(`Expected maxWidth 136, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('ExportJson has default maxWidth of 136');
-	},
 
 	'ExportJson: should have export method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
+		const { container, control } = await createTableWithControl('kc-tc-export-json');
 		
 		if(typeof control.export !== 'function'){
 			cleanup(container);
@@ -278,10 +254,10 @@ export default {
 	},
 
 	'ExportJson: should display Export JSON text': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
+		const { container, control } = await createTableWithControl('kc-tc-export-json');
 		
-		const btn = control.shadowRoot.querySelector('button');
-		if(!btn.textContent.includes('Export JSON')){
+		const btn = control;
+		if(!btn.shadowRoot.textContent.includes('Export JSON')){
 			cleanup(container);
 			fail('Button should display "Export JSON" text');
 			return;
@@ -292,10 +268,10 @@ export default {
 	},
 
 	'ExportCSV: should display Export CSV text': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
-		const btn = control.shadowRoot.querySelector('button');
-		if(!btn.textContent.includes('Export CSV')){
+		const btn = control;
+		if(!btn.shadowRoot.textContent.includes('Export CSV')){
 			cleanup(container);
 			fail('Button should display "Export CSV" text');
 			return;

package/tests/components/{tableControls → controls}/FieldSortHide.browser-test.js

@@ -1,4 +1,4 @@
-import '../../../src/components/tableControls/FieldSortHide.js';
+import '../../../src/components/controls/TcFieldSortHide.js';
 import '../../../src/components/Table.js';
 import '../../../src/components/Dialog.js';
 
@@ -19,7 +19,7 @@ const createTableWithFieldSortHide = async () => {
 	container.innerHTML = `
 		<k-table>
 			<div slot="controls">
-				<k-tc-field-sort-hide></k-tc-field-sort-hide>
+				<kc-tc-field-sort-hide></kc-tc-field-sort-hide>
 			</div>
 		</k-table>
 	`;
@@ -32,7 +32,7 @@ const createTableWithFieldSortHide = async () => {
 	});
 	await table.updateComplete;
 	
-	const control = container.querySelector('k-tc-field-sort-hide');
+	const control = container.querySelector('kc-tc-field-sort-hide');
 	await control.updateComplete;
 	
 	return { container, table, control };
@@ -53,7 +53,7 @@ export default {
 	'FieldSortHide: should render button': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('FieldSortHide should render button');
@@ -71,18 +71,6 @@ export default {
 		pass('FieldSortHide renders correctly');
 	},
 
-	'FieldSortHide: should have default maxWidth of 40': async ({pass, fail}) => {
-		const { container, control } = await createTableWithFieldSortHide();
-		
-		if(control.maxWidth !== 40){
-			cleanup(container);
-			fail(`Expected maxWidth 40, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('FieldSortHide has default maxWidth of 40');
-	},
 
 	/*
 		Method Tests
@@ -119,7 +107,7 @@ export default {
 	'FieldSortHide: should open dialog on click': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -138,7 +126,7 @@ export default {
 	'FieldSortHide: dialog should contain sortable component': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -159,7 +147,7 @@ export default {
 	'FieldSortHide: dialog should have sortable items for each field': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -180,7 +168,7 @@ export default {
 	'FieldSortHide: each field should have visibility checkbox': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -201,7 +189,7 @@ export default {
 	'FieldSortHide: checkboxes should be checked for visible fields': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -227,7 +215,7 @@ export default {
 		table.hideField('age');
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -248,7 +236,7 @@ export default {
 	'FieldSortHide: sortable items should have data-field attribute': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -271,7 +259,7 @@ export default {
 	'FieldSortHide: should display field labels': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -292,7 +280,7 @@ export default {
 	'FieldSortHide: unchecking checkbox should hide field': async ({pass, fail}) => {
 		const { container, table, control } = await createTableWithFieldSortHide();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -322,7 +310,7 @@ export default {
 		table.hideField('age');
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));

package/tests/components/{tableControls → controls}/Filters.browser-test.js

@@ -1,4 +1,4 @@
-import '../../../src/components/tableControls/Filters.js';
+import '../../../src/components/controls/TcFilters.js';
 import '../../../src/components/Table.js';
 import '../../../src/components/Dialog.js';
 
@@ -20,7 +20,7 @@ const createTableWithFilters = async () => {
 	container.innerHTML = `
 		<k-table>
 			<div slot="controls">
-				<k-tc-filters></k-tc-filters>
+				<kc-tc-filters></kc-tc-filters>
 			</div>
 		</k-table>
 	`;
@@ -33,7 +33,7 @@ const createTableWithFilters = async () => {
 	});
 	await table.updateComplete;
 	
-	const control = container.querySelector('k-tc-filters');
+	const control = container.querySelector('kc-tc-filters');
 	await control.updateComplete;
 	
 	return { container, table, control };
@@ -54,7 +54,7 @@ export default {
 	'Filters: should render filter button': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('Filters should render button');
@@ -72,18 +72,6 @@ export default {
 		pass('Filters renders correctly');
 	},
 
-	'Filters: should have default maxWidth of 40': async ({pass, fail}) => {
-		const { container, control } = await createTableWithFilters();
-		
-		if(control.maxWidth !== 40){
-			cleanup(container);
-			fail(`Expected maxWidth 40, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('Filters has default maxWidth of 40');
-	},
 
 	/*
 		Method Tests
@@ -120,7 +108,7 @@ export default {
 	'Filters: should open dialog on click': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -139,7 +127,7 @@ export default {
 	'Filters: dialog should have filter field select': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -160,7 +148,7 @@ export default {
 	'Filters: dialog should have condition select': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -181,7 +169,7 @@ export default {
 	'Filters: dialog should have filter value input': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -202,7 +190,7 @@ export default {
 	'Filters: dialog should have add filter button': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -229,7 +217,7 @@ export default {
 	'Filters: dialog should show "No Current Filters" when empty': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -250,7 +238,7 @@ export default {
 	'Filters: should have all condition options': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -282,7 +270,7 @@ export default {
 	'Filters: should show field options from table': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -308,7 +296,7 @@ export default {
 		table.addFilter('name', 'contains', 'Alice');
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -333,7 +321,7 @@ export default {
 		table.addFilter('name', 'contains', 'Alice');
 		await table.updateComplete;
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));
@@ -356,7 +344,7 @@ export default {
 	'Filters: contains should be default condition': async ({pass, fail}) => {
 		const { container, control } = await createTableWithFilters();
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		btn.click();
 		
 		await new Promise(resolve => setTimeout(resolve, 100));

package/tests/components/{codeEditorControls → controls}/FindReplace.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/FindReplace.js';
+import '../../../src/components/controls/FindReplace.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-find-replace slot="toolbar-top-left"></k-cec-find-replace>
+			<kc-find-replace slot="toolbar-top-left"></kc-find-replace>
 		</k-code-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-code-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-cec-find-replace');
+	const control = container.querySelector('kc-find-replace');
 	return { container, editor, control };
 };
 
@@ -20,12 +20,12 @@ const cleanup = container => {
 };
 
 export default {
-	'should create element with button': async ({pass, fail}) => {
+	'should have button role': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		if(!control.shadowRoot.querySelector('button')){
+		if(control.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('Should render a button');
+			return fail('Should have role="button"');
 		}
 		cleanup(container);
 		pass();
@@ -33,7 +33,7 @@ export default {
 
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Should find parent k-code-editor');
 		}
@@ -46,7 +46,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.openFind = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call editor.openFind() on click');

package/tests/components/{codeEditorControls → controls}/FoldAll.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/FoldAll.js';
+import '../../../src/components/controls/FoldAll.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-fold-all slot="toolbar-top-left"></k-cec-fold-all>
+			<kc-fold-all slot="toolbar-top-left"></kc-fold-all>
 		</k-code-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-code-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-cec-fold-all');
+	const control = container.querySelector('kc-fold-all');
 	return { container, editor, control };
 };
 
@@ -20,12 +20,12 @@ const cleanup = container => {
 };
 
 export default {
-	'should create element with button': async ({pass, fail}) => {
+	'should have button role': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		if(!control.shadowRoot.querySelector('button')){
+		if(control.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('Should render a button');
+			return fail('Should have role="button"');
 		}
 		cleanup(container);
 		pass();
@@ -33,7 +33,7 @@ export default {
 
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Should find parent k-code-editor');
 		}
@@ -56,7 +56,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.foldAll = () => { called = true; return editor; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call editor.foldAll()');
@@ -74,10 +74,10 @@ export default {
 		await control.updateComplete;
 		editor.foldAll = () => editor;
 		editor.unfoldAll = () => { return editor; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		let called = false;
 		editor.unfoldAll = () => { called = true; return editor; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call editor.unfoldAll()');