npm - @aquera/nile-elements - Versions diffs - 0.0.118 → 0.0.120 - Mend

@aquera/nile-elements 0.0.118 → 0.0.120

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.

Files changed (376) hide show

package/dist/src/nile-select/nile-select.test.js ADDED Viewed

@@ -0,0 +1,247 @@
+import { expect, fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
+import './nile-select'; // Assuming the component is registered and imported
+import '../nile-option/nile-option';
+import '../nile-input/nile-input';
+import '../nile-popup/nile-popup';
+import '../nile-tag/nile-tag';
+import '../nile-checkbox/nile-checkbox';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
+const keyboardEvent = new KeyboardEvent('keydown', {
+    code: 'Enter',
+    key: 'Enter',
+    charCode: 13,
+    keyCode: 13,
+    view: window,
+    bubbles: true
+});
+const mouseUpEvent = new MouseEvent("mouseup", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+});
+describe('NileSelect Component', () => {
+    it('should render the placeholder when no value is selected', async () => {
+        const el = await fixture(html `<nile-select placeholder="Select an option..."></nile-select>`);
+        const displayInput = el.shadowRoot?.querySelector('.select__display-input');
+        expect(displayInput?.placeholder).to.equal('Select an option...');
+    });
+    it('should open the dropdown when clicked', async () => {
+        const el = await fixture(html `
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        const popup = el.shadowRoot?.querySelector('.select');
+        expect(popup?.classList.contains('select--open')).to.be.true;
+    });
+    it('should close the dropdown when clicked again', async () => {
+        const el = await fixture(html `
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        // Open dropdown first
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        expect(el.open).to.be.true;
+        // Click again to close dropdown
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should update the display label when an option is selected', async () => {
+        const el = await fixture(html `
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        // Select the first option
+        const option1 = el.querySelector('nile-option[value="option1"]');
+        option1?.dispatchEvent(mouseUpEvent);
+        await elementUpdated(el);
+        const displayInput = el.shadowRoot?.querySelector('.select__display-input');
+        expect(displayInput?.value).to.equal('Option 1');
+    });
+    it('should handle multi-select and show selected tags', async () => {
+        const el = await fixture(html `
+      <nile-select multiple>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+        <nile-option value="option3">Option 3</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        // Select multiple options
+        const option1 = el.querySelector('nile-option[value="option1"]');
+        const option2 = el.querySelector('nile-option[value="option2"]');
+        option1?.dispatchEvent(mouseUpEvent);
+        option2?.dispatchEvent(mouseUpEvent);
+        await elementUpdated(el);
+        // Check if the tags are displayed
+        const tags = el.shadowRoot?.querySelectorAll('nile-tag');
+        expect(tags?.length).to.equal(2);
+        expect(tags?.[0].textContent?.trim()).to.equal('Option 1');
+        expect(tags?.[1].textContent?.trim()).to.equal('Option 2');
+    });
+    it('should clear selected value when clear button is clicked', async () => {
+        const el = await fixture(html `
+      <nile-select clearable>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        // Select an option
+        const option1 = el.querySelector('nile-option[value="option1"]');
+        option1?.click();
+        await elementUpdated(el);
+        // Clear the selected value
+        const clearButton = el.shadowRoot?.querySelector('.select__clear');
+        clearButton?.click();
+        await elementUpdated(el);
+        const displayInput = el.shadowRoot?.querySelector('.select__display-input');
+        expect(displayInput?.value).to.be.empty;
+    });
+    it('should emit nile-change event when value changes', async () => {
+        const el = await fixture(html `
+      <nile-select>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+        const listener = oneEvent(el, 'nile-change');
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        const option1 = el.querySelector('nile-option[value="option1"]');
+        option1?.dispatchEvent(mouseUpEvent);
+        const event = await listener;
+        expect(event.detail.value).to.equal('option1');
+    });
+    it('should not open when disabled', async () => {
+        const el = await fixture(html `
+      <nile-select disabled>
+        <nile-option value="option1">Option 1</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        const popup = el.shadowRoot?.querySelector('.select');
+        expect(popup?.classList.contains('select--open')).to.be.false;
+    });
+    it('should display the search bar if searchEnabled is true', async () => {
+        const el = await fixture(html `
+      <nile-select searchEnabled>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector("div.select__combobox");
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        const searchBar = el.shadowRoot?.querySelector('.select__search');
+        expect(searchBar).to.exist;
+    });
+    it('should show "No results found" when searching for an invalid query', async () => {
+        const el = await fixture(html `
+      <nile-select searchEnabled>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector('.select__combobox');
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await elementUpdated(el);
+        // Simulate typing an invalid search query
+        const searchInput = el.shadowRoot?.querySelector('.select__search nile-input');
+        if (searchInput) {
+            searchInput.value = 'invalid';
+            searchInput.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'invalid' } }));
+        }
+        await elementUpdated(el);
+        const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+        expect(noResultsMessage).to.exist;
+        expect(noResultsMessage?.textContent?.trim()).to.equal('No results found');
+    });
+    it('should allow selecting multiple options, display the selected count, and clear selections when clear button is clicked', async () => {
+        const el = await fixture(html `
+      <nile-select multiple clearable>
+        <nile-option value="1">Option 1</nile-option>
+        <nile-option value="2">Option 2</nile-option>
+        <nile-option value="3">Option 3</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector('.select__combobox');
+        const options = el.querySelectorAll('nile-option');
+        const displayInput = el.shadowRoot?.querySelector('.select__display-input');
+        // Open the dropdown
+        combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        await el.updateComplete;
+        // Select the first two options
+        options[0].dispatchEvent(mouseUpEvent);
+        options[1].dispatchEvent(mouseUpEvent);
+        await el.updateComplete;
+        // Verify the display label reflects the number of selected options
+        expect(displayInput?.value).to.equal('2 selected');
+        // Check that the clearable button is visible
+        const clearButton = el.shadowRoot?.querySelector('.select__clear');
+        console.log(clearButton);
+        expect(clearButton).to.exist;
+        // Click the clear button
+        clearButton?.click();
+        await el.updateComplete;
+        // Verify the display label is cleared and placeholder is shown
+        expect(displayInput?.value).to.equal('');
+        // Verify that no options are selected
+        expect(Array.from(options).every(option => !option.selected)).to.be.true;
+    });
+    it('should allow selecting multiple options, clearing selections, and handling backspace to deselect the last selected option', async () => {
+        const el = await fixture(html `
+      <nile-select multiple clearable>
+        <nile-option value="option1">Option 1</nile-option>
+        <nile-option value="option2">Option 2</nile-option>
+        <nile-option value="option3">Option 3</nile-option>
+      </nile-select>
+    `);
+        const combobox = el.shadowRoot?.querySelector('div.select__combobox');
+        const options = el.querySelectorAll('nile-option');
+        const displayInput = el.shadowRoot?.querySelector('.select__display-input');
+        const clearButton = el.shadowRoot?.querySelector('.select__clear');
+        // Open the dropdown and select three options
+        combobox?.click();
+        await el.updateComplete;
+        options[0].dispatchEvent(mouseUpEvent);
+        options[1].dispatchEvent(mouseUpEvent);
+        options[2].dispatchEvent(mouseUpEvent);
+        await el.updateComplete;
+        // Verify that three options are selected
+        expect(displayInput?.value).to.equal('3 selected');
+        expect(Array.from(options).every(option => option.selected)).to.be.true;
+        // // Reopen dropdown, select three options again
+        // combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown
+        // await el.updateComplete;
+        // options[0].dispatchEvent(mouseUpEvent);
+        // options[1].dispatchEvent(mouseUpEvent);
+        options[2].dispatchEvent(mouseUpEvent);
+        await el.updateComplete;
+        // Verify only the first two options are selected
+        expect(options[0].selected).to.be.true;
+        expect(options[1].selected).to.be.true;
+        expect(options[2].selected).to.be.false;
+        // Verify display label reflects two selected options
+        expect(displayInput?.value).to.equal('2 selected');
+    });
+});
+//# sourceMappingURL=nile-select.test.js.map

package/dist/src/nile-select/nile-select.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nile-select.test.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';\nimport './nile-select'; // Assuming the component is registered and imported\nimport NileSelect from './nile-select';\nimport { NileOption } from '../nile-option';\nimport { NileInput } from '../nile-input';\nimport '../nile-option/nile-option';\nimport '../nile-input/nile-input';\nimport '../nile-popup/nile-popup';\nimport '../nile-tag/nile-tag';\nimport '../nile-checkbox/nile-checkbox';\n\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\nconst keyboardEvent = new KeyboardEvent('keydown', {\n code: 'Enter',\n key: 'Enter',\n charCode: 13,\n keyCode: 13,\n view: window,\n bubbles: true\n});\n\nconst mouseUpEvent = new MouseEvent(\"mouseup\", {\n bubbles: true,\n cancelable: true,\n view: window\n});\n\ndescribe('NileSelect Component', () => {\n \n it('should render the placeholder when no value is selected', async () => {\n const el = await fixture<NileSelect>(html`<nile-select placeholder=\"Select an option...\"></nile-select>`);\n const displayInput = el.shadowRoot?.querySelector<HTMLInputElement>('.select__display-input');\n expect(displayInput?.placeholder).to.equal('Select an option...');\n });\n\n it('should open the dropdown when clicked', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select>\n <nile-option value=\"option1\">Option 1</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n const popup = el.shadowRoot?.querySelector('.select');\n expect(popup?.classList.contains('select--open')).to.be.true;\n });\n\n it('should close the dropdown when clicked again', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select>\n <nile-option value=\"option1\">Option 1</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n\n // Open dropdown first\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n expect(el.open).to.be.true;\n\n // Click again to close dropdown\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n expect(el.open).to.be.false;\n });\n\n it('should update the display label when an option is selected', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select>\n <nile-option value=\"option1\">Option 1</nile-option>\n <nile-option value=\"option2\">Option 2</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n // Select the first option\n const option1 = el.querySelector<NileOption>('nile-option[value=\"option1\"]');\n option1?.dispatchEvent(mouseUpEvent);\n await elementUpdated(el);\n\n const displayInput = el.shadowRoot?.querySelector<HTMLInputElement>('.select__display-input');\n expect(displayInput?.value).to.equal('Option 1');\n });\n\n it('should handle multi-select and show selected tags', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select multiple>\n <nile-option value=\"option1\">Option 1</nile-option>\n <nile-option value=\"option2\">Option 2</nile-option>\n <nile-option value=\"option3\">Option 3</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n // Select multiple options\n const option1 = el.querySelector<NileOption>('nile-option[value=\"option1\"]');\n const option2 = el.querySelector<NileOption>('nile-option[value=\"option2\"]');\n \n option1?.dispatchEvent(mouseUpEvent);\n option2?.dispatchEvent(mouseUpEvent);\n await elementUpdated(el);\n\n // Check if the tags are displayed\n const tags = el.shadowRoot?.querySelectorAll('nile-tag');\n expect(tags?.length).to.equal(2);\n expect(tags?.[0].textContent?.trim()).to.equal('Option 1');\n expect(tags?.[1].textContent?.trim()).to.equal('Option 2');\n });\n\n it('should clear selected value when clear button is clicked', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select clearable>\n <nile-option value=\"option1\">Option 1</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n // Select an option\n const option1 = el.querySelector<NileOption>('nile-option[value=\"option1\"]');\n option1?.click();\n await elementUpdated(el);\n\n // Clear the selected value\n const clearButton = el.shadowRoot?.querySelector<HTMLButtonElement>('.select__clear');\n clearButton?.click();\n await elementUpdated(el);\n\n const displayInput = el.shadowRoot?.querySelector<HTMLInputElement>('.select__display-input');\n expect(displayInput?.value).to.be.empty;\n });\n\n it('should emit nile-change event when value changes', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select>\n <nile-option value=\"option1\">Option 1</nile-option>\n <nile-option value=\"option2\">Option 2</nile-option>\n </nile-select>\n `);\n\n const listener = oneEvent(el, 'nile-change');\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n const option1 = el.querySelector<NileOption>('nile-option[value=\"option1\"]');\n option1?.dispatchEvent(mouseUpEvent);\n \n const event = await listener;\n expect(event.detail.value).to.equal('option1');\n });\n\n it('should not open when disabled', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select disabled>\n <nile-option value=\"option1\">Option 1</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n const popup = el.shadowRoot?.querySelector('.select');\n expect(popup?.classList.contains('select--open')).to.be.false;\n });\n\n it('should display the search bar if searchEnabled is true', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select searchEnabled>\n <nile-option value=\"option1\">Option 1</nile-option>\n <nile-option value=\"option2\">Option 2</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>(\"div.select__combobox\");\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n const searchBar = el.shadowRoot?.querySelector('.select__search');\n expect(searchBar).to.exist;\n });\n\n it('should show \"No results found\" when searching for an invalid query', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select searchEnabled>\n <nile-option value=\"option1\">Option 1</nile-option>\n <nile-option value=\"option2\">Option 2</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>('.select__combobox');\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await elementUpdated(el);\n\n // Simulate typing an invalid search query\n const searchInput = el.shadowRoot?.querySelector<NileInput>('.select__search nile-input');\n if (searchInput) {\n searchInput.value = 'invalid';\n searchInput.dispatchEvent(new CustomEvent('nile-input',{detail:{value:'invalid'}}));\n }\n await elementUpdated(el);\n\n const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');\n expect(noResultsMessage).to.exist;\n expect(noResultsMessage?.textContent?.trim()).to.equal('No results found');\n });\n\n\n it('should allow selecting multiple options, display the selected count, and clear selections when clear button is clicked', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select multiple clearable>\n <nile-option value=\"1\">Option 1</nile-option>\n <nile-option value=\"2\">Option 2</nile-option>\n <nile-option value=\"3\">Option 3</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>('.select__combobox');\n const options = el.querySelectorAll('nile-option');\n const displayInput = el.shadowRoot?.querySelector<NileInput>('.select__display-input');\n\n // Open the dropdown\n combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n await el.updateComplete;\n\n // Select the first two options\n options[0].dispatchEvent(mouseUpEvent);\n options[1].dispatchEvent(mouseUpEvent);\n await el.updateComplete;\n\n // Verify the display label reflects the number of selected options\n expect(displayInput?.value).to.equal('2 selected');\n\n // Check that the clearable button is visible\n const clearButton = el.shadowRoot?.querySelector<HTMLElement>('.select__clear');\n console.log(clearButton)\n expect(clearButton).to.exist;\n\n // Click the clear button\n clearButton?.click();\n await el.updateComplete;\n\n // Verify the display label is cleared and placeholder is shown\n expect(displayInput?.value).to.equal('');\n\n // Verify that no options are selected\n expect(Array.from(options).every(option => !option.selected)).to.be.true;\n });\n\n it('should allow selecting multiple options, clearing selections, and handling backspace to deselect the last selected option', async () => {\n const el = await fixture<NileSelect>(html`\n <nile-select multiple clearable>\n <nile-option value=\"option1\">Option 1</nile-option>\n <nile-option value=\"option2\">Option 2</nile-option>\n <nile-option value=\"option3\">Option 3</nile-option>\n </nile-select>\n `);\n\n const combobox = el.shadowRoot?.querySelector<HTMLElement>('div.select__combobox');\n const options = el.querySelectorAll('nile-option');\n const displayInput = el.shadowRoot?.querySelector<NileInput>('.select__display-input');\n const clearButton = el.shadowRoot?.querySelector<HTMLButtonElement>('.select__clear');\n\n // Open the dropdown and select three options\n combobox?.click();\n await el.updateComplete;\n \n options[0].dispatchEvent(mouseUpEvent);\n options[1].dispatchEvent(mouseUpEvent);\n options[2].dispatchEvent(mouseUpEvent);\n await el.updateComplete;\n\n // Verify that three options are selected\n expect(displayInput?.value).to.equal('3 selected');\n expect(Array.from(options).every(option => option.selected)).to.be.true;\n\n // // Reopen dropdown, select three options again\n // combobox?.dispatchEvent(keyboardEvent); // Simulate click to open the dropdown\n // await el.updateComplete;\n\n // options[0].dispatchEvent(mouseUpEvent);\n // options[1].dispatchEvent(mouseUpEvent);\n options[2].dispatchEvent(mouseUpEvent);\n await el.updateComplete;\n\n // Verify only the first two options are selected\n expect(options[0].selected).to.be.true;\n expect(options[1].selected).to.be.true;\n expect(options[2].selected).to.be.false;\n\n // Verify display label reflects two selected options\n expect(displayInput?.value).to.equal('2 selected');\n });\n\n});\n"]}

package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js CHANGED Viewed

@@ -1,8 +1,20 @@
 import { css } from 'lit';
 export default css `
+  :host{
+    --slide-toggle-width:auto;
+    display:inline-block;
+    width:var(--slide-toggle-width);
+  }
   .nile-slide-toggle {
     display: inline-flex;
     align-items: baseline;
+    justify-content:space-between;
+    width:100%;
+  }
+  .nile-slide-toggle--reverse{
+    flex-direction:row-reverse;
   }
   .nile-slide-toggle__switch {
@@ -12,24 +24,33 @@ export default css `
     width: 36px;
     height: 20px;
     line-height: 22px;
+  }
+  .nile-slide-toggle__switch--left{
     margin-right: 8px;
   }
+  .nile-slide-toggle__switch--right{
+    margin-left: 8px;
+  }
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    font-size: 14px;
-    color: var(--nile-colors-gray-light-mode-700);
+    gap: 2px;
     font-family: var(--nile-font-family-serif);
-    font-size: 14px;
+    letter-spacing: 0.2px;
     font-style: normal;
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
     font-weight: 500;
     line-height: 20px;
-    letter-spacing: 0.2px;
-    gap: 2px;
   }
   .nile-slide-toggle__sublabel {
+    font-family: var(--nile-font-family-serif);
+    letter-spacing: 0.2px;
+    font-style: normal;
     color: var(--nile-colors-gray-light-mode-600);
     font-size: 12px;
     font-weight: 400;

package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GjB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n .nile-slide-toggle {\n display: inline-flex;\n align-items: baseline;\n }\n\n .nile-slide-toggle__switch {\n flex: 0 0 auto;\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n line-height: 22px;\n margin-right: 8px;\n }\n\n .nile-slide-toggle__label {\n display: flex;\n flex-direction: column;\n ~~font-size~~: ~~14px~~;\n ~~color: var(--nile-colors-gray-light-mode-700);\n~~ font-family: var(--nile-font-family-serif);\n ~~font~~-~~size~~: ~~14px~~;\n font-style: normal;\n ~~font-weight~~: ~~500~~;\n ~~line~~-~~height~~: ~~20px~~;\n ~~letter~~-~~spacing~~: ~~0.2px~~;\n ~~gap~~: ~~2px~~;\n }\n\n .nile-slide-toggle__sublabel {\n color: var(--nile-colors-gray-light-mode-600);\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n\n .nile-slide-toggle__switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .nile-slide-toggle__slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nile-slide-toggle-color-background-inactive);\n transition: 0.4s;\n border-radius: 34px;\n }\n\n .nile-slide-toggle__slider:active {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:focus {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:before {\n position: absolute;\n content: '';\n height: 16px;\n width: 16px;\n bottom: 2px;\n left: 2px;\n background-color: var(--nile-slide-toggle-color-indicator);\n transition: 0.4s;\n border-radius: 50%;\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n background-color: var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n transform: translateX(16px);\n }\n\n .nile-slide-toggle__slider.round {\n border-radius: 20px;\n }\n\n .nile-slide-toggle__slider.round:before {\n border-radius: 50%;\n }\n\n .nile-slide--disabled .nile-slide-toggle__slider {\n background-color: #f2f4f7;\n }\n\n .nile-slide--disabled .nile-slide-toggle__switch {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n .nile-slide--disabled\n .nile-slide-toggle__switch\n input:checked\n + .nile-slide-toggle__slider {\n background-color: #f2f4f7;\n }\n`;\n"]}
1	+ {"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host{\n --slide-toggle-width:auto;\n display:inline-block;\n width:var(--slide-toggle-width);\n }\n\n .nile-slide-toggle {\n display: inline-flex;\n align-items: baseline;\n justify-content:space-between;\n width:100%;\n }\n\n .nile-slide-toggle--reverse{\n flex-direction:row-reverse;\n }\n\n .nile-slide-toggle__switch {\n flex: 0 0 auto;\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n line-height: 22px;\n }\n\n .nile-slide-toggle__switch--left{\n margin-right: 8px;\n }\n\n .nile-slide-toggle__switch--right{\n margin-left: 8px;\n }\n\n .nile-slide-toggle__label {\n display: flex;\n flex-direction: column;\n gap: 2px;\n font-family: var(--nile-font-family-serif);\n letter-spacing: 0.2px;\n font-style: normal;\n color: var(--nile-colors-dark-900);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n\n .nile-slide-toggle__sublabel {\n font-family: var(--nile-font-family-serif);\n letter-spacing: 0.2px;\n font-style: normal;\n color: var(--nile-colors-gray-light-mode-600);\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n\n .nile-slide-toggle__switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .nile-slide-toggle__slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nile-slide-toggle-color-background-inactive);\n transition: 0.4s;\n border-radius: 34px;\n }\n\n .nile-slide-toggle__slider:active {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:focus {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:before {\n position: absolute;\n content: '';\n height: 16px;\n width: 16px;\n bottom: 2px;\n left: 2px;\n background-color: var(--nile-slide-toggle-color-indicator);\n transition: 0.4s;\n border-radius: 50%;\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n background-color: var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n transform: translateX(16px);\n }\n\n .nile-slide-toggle__slider.round {\n border-radius: 20px;\n }\n\n .nile-slide-toggle__slider.round:before {\n border-radius: 50%;\n }\n\n .nile-slide--disabled .nile-slide-toggle__slider {\n background-color: #f2f4f7;\n }\n\n .nile-slide--disabled .nile-slide-toggle__switch {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n .nile-slide--disabled\n .nile-slide-toggle__switch\n input:checked\n + .nile-slide-toggle__slider {\n background-color: #f2f4f7;\n }\n`;\n"]}

package/dist/src/nile-slide-toggle/nile-slide-toggle.d.ts CHANGED Viewed

@@ -2,9 +2,12 @@ import { CSSResultGroup } from 'lit';
 import NileElement from '../internal/nile-element';
 export declare class NileSlideToggle extends NileElement {
     static styles: CSSResultGroup;
+    protected BUBBLES: boolean;
     label: string;
     sublabel: string;
+    textPosition: 'left' | 'right';
     isChecked: boolean;
+    fullWidth: boolean;
     disabled: boolean;
     helpText: string;
     errorMessage: string;

package/dist/src/nile-slide-toggle/nile-slide-toggle.js CHANGED Viewed

@@ -6,9 +6,12 @@ import { classMap } from 'lit/directives/class-map.js';
 let NileSlideToggle = class NileSlideToggle extends NileElement {
     constructor() {
         super(...arguments);
+        this.BUBBLES = false;
         this.label = '';
         this.sublabel = '';
+        this.textPosition = 'right';
         this.isChecked = false;
+        this.fullWidth = false;
         this.disabled = false;
         this.helpText = '';
         this.errorMessage = '';
@@ -16,6 +19,7 @@ let NileSlideToggle = class NileSlideToggle extends NileElement {
     connectedCallback() {
         super.connectedCallback();
         this.emit('nile-init');
+        this.style.setProperty('--slide-toggle-width', this.fullWidth ? '100%' : 'auto');
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -34,9 +38,16 @@ let NileSlideToggle = class NileSlideToggle extends NileElement {
         class=${classMap({
             'nile-slide-toggle': true,
             'nile-slide--disabled': this.disabled,
+            'nile-slide-toggle--reverse': this.textPosition == 'left'
         })}
       >
-        <label class="nile-slide-toggle__switch">
+        <label
+        class="${classMap({
+            'nile-slide-toggle__switch': true,
+            'nile-slide-toggle__switch--left': this.textPosition == 'right',
+            'nile-slide-toggle__switch--right': this.textPosition == 'left',
+        })}"
+        class="nile-slide-toggle__switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}
@@ -69,9 +80,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileSlideToggle.prototype, "sublabel", void 0);
+__decorate([
+    property({ type: String, })
+], NileSlideToggle.prototype, "textPosition", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSlideToggle.prototype, "isChecked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSlideToggle.prototype, "fullWidth", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSlideToggle.prototype, "disabled", void 0);

package/dist/src/nile-slide-toggle/nile-slide-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slide-toggle.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.ts"],"names":[],"mappings":";AACA,OAAO,EAAc,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGhD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;~~QAGuB~~,UAAK,GAAG,EAAE,CAAC;~~QACX~~,aAAQ,GAAG,EAAE,CAAC;~~QAEE~~,cAAS,GAAG,KAAK,CAAC;QAElB,aAAQ,GAAG,KAAK,CAAC;QAER,aAAQ,GAAG,EAAE,CAAC;QAEV,iBAAY,GAAG,EAAE,CAAC;~~IAsD7E~~,CAAC;~~IApDC~~,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;~~IACzB~~,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAC,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAC,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IACvD,CAAC;IAEM,MAAM;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAEzD,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,mBAAmB,EAAE,IAAI;YACzB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;~~SACtC~~,CAAC~~;;;;;uBAKa~~,IAAI,CAAC,SAAS;sBACf,IAAI,CAAC,WAAW;;;;;kBAKpB,IAAI,CAAC,KAAK;sDAC0B,IAAI,CAAC,QAAQ;;;QAG3D,WAAW;YACX,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,yBAAyB;YACrE,CAAC,CAAC,EAAE;QACJ,eAAe;YACf,CAAC,CAAC,IAAI,CAAA;;iBAEG,IAAI,CAAC,YAAY;;WAEvB;YACH,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;~~AAhEa~~,sBAAM,GAAmB,MAAM,CAAC;~~AAElB~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAY;~~AACX~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;~~AAEE~~;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AAElB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAER;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAe;AAEV;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAmB;~~AAZhE~~,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,~~CAkE3B~~;~~SAlEY~~,eAAe","sourcesContent":["import { CSSResultGroup } from 'lit';\nimport { LitElement, html, property, customElement } from 'lit-element';\nimport styles from './nile-slide-toggle.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n@customElement('nile-slide-toggle')\nexport class NileSlideToggle extends NileElement {\n public static styles: CSSResultGroup = styles;\n\n @property({ type: String }) label = '';\n @property({ type: String }) sublabel = '';\n\n @property({ type: Boolean, reflect: true }) isChecked = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n toggleValue() {\n this.isChecked = !this.isChecked;\n this.emit('change',{ checked: this.isChecked });\n this.emit('nile-change',{ checked: this.isChecked });\n }\n\n public render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n class=${classMap({\n 'nile-slide-toggle': true,\n 'nile-slide--disabled': this.disabled,\n })}\n >\n <label class=\"nile-slide-toggle__switch\">\n <input\n type=\"checkbox\"\n .checked=${this.isChecked}\n @change=${this.toggleValue}\n />\n <span class=\"nile-slide-toggle__slider\"></span>\n </label>\n <span class=\"nile-slide-toggle__label\">\n <span>${this.label}</span>\n <span class=\"nile-slide-toggle__sublabel\">${this.sublabel}</span>\n </span>\n </div>\n ${hasHelpText\n ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-slide-toggle.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, PropertyValues } from 'lit';\nimport { LitElement, html, property, customElement } from 'lit-element';\nimport styles from './nile-slide-toggle.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n@customElement('nile-slide-toggle')\nexport class NileSlideToggle extends NileElement {\n public static styles: CSSResultGroup = styles;\n\n protected override BUBBLES: boolean=false;\n\n @property({ type: String }) label = '';\n\n @property({ type: String }) sublabel = '';\n\n @property({ type: String, }) textPosition:'left' \| 'right' = 'right';\n\n @property({ type: Boolean, reflect: true }) isChecked = false;\n\n @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n toggleValue() {\n this.isChecked = !this.isChecked;\n this.emit('change',{ checked: this.isChecked });\n this.emit('nile-change',{ checked: this.isChecked });\n }\n\n public render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n class=${classMap({\n 'nile-slide-toggle': true,\n 'nile-slide--disabled': this.disabled,\n 'nile-slide-toggle--reverse':this.textPosition=='left'\n })}\n >\n <label \n class=\"${classMap({\n 'nile-slide-toggle__switch':true,\n 'nile-slide-toggle__switch--left':this.textPosition=='right',\n 'nile-slide-toggle__switch--right':this.textPosition=='left',\n })}\"\n class=\"nile-slide-toggle__switch\">\n <input\n type=\"checkbox\"\n .checked=${this.isChecked}\n @change=${this.toggleValue}\n />\n <span class=\"nile-slide-toggle__slider\"></span>\n </label>\n <span class=\"nile-slide-toggle__label\">\n <span>${this.label}</span>\n <span class=\"nile-slide-toggle__sublabel\">${this.sublabel}</span>\n </span>\n </div>\n ${hasHelpText\n ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n"]}

package/dist/src/nile-split-panel/nile-split-panel.d.ts CHANGED Viewed

@@ -29,6 +29,7 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class NileSplitPanel extends NileElement {
     static styles: CSSResultGroup;
+    protected BUBBLES: boolean;
     private cachedPositionInPixels;
     private resizeObserver;
     private size;

package/dist/src/nile-split-panel/nile-split-panel.js CHANGED Viewed

@@ -36,6 +36,7 @@ import { watch } from '../internal/watch';
 let NileSplitPanel = class NileSplitPanel extends NileElement {
     constructor() {
         super(...arguments);
+        this.BUBBLES = false;
         /**
          * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
          * container's initial size.

package/dist/src/nile-split-panel/nile-split-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-split-panel.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-split-panel.css';\nimport NileElement from '../internal/nile-element';\n\n\nimport { clamp } from '../internal/math';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { drag } from '../internal/drag';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/\n @summary Split panels display two adjacent panels, allowing the user to reposition them.\n \n @event nile-reposition - Emitted when the divider's position changes.\n \n @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n \n @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n \n @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n /\n@customElement('nile-split-panel')\nexport class NileSplitPanel extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n private cachedPositionInPixels: number;\n private resizeObserver: ResizeObserver;\n private size: number;\n\n @query('.divider') divider: HTMLElement;\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @property({ type: Number, reflect: true }) position = 50;\n\n /* The current position of the divider from the primary panel's edge in pixels. /\n @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @property() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @property() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));\n this.updateComplete.then(() => this.resizeObserver.observe(this));\n\n this.detectSize();\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n private detectSize() {\n const { width, height } = this.getBoundingClientRect();\n this.size = this.vertical ? height : width;\n }\n\n private percentageToPixels(value: number) {\n return this.size (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private handleDrag(event: PointerEvent) {\n const isRtl = false;\n\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n if (event.cancelable) {\n event.preventDefault();\n }\n\n drag(this, {\n onMove: (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach(value => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (isRtl && !this.vertical) {\n snapPoint = this.size - snapPoint;\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n\n this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);\n },\n initialEvent: event\n });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n let newPosition = this.position;\n const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if ((event.key === 'ArrowLeft' && !this.vertical) \|\| (event.key === 'ArrowUp' && this.vertical)) {\n newPosition -= incr;\n }\n\n if ((event.key === 'ArrowRight' && !this.vertical) \|\| (event.key === 'ArrowDown' && this.vertical)) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.position = clamp(newPosition, 0, 100);\n }\n }\n\n private handleResize(entries: ResizeObserverEntry[]) {\n const { width, height } = entries[0].contentRect;\n this.size = this.vertical ? height : width;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n }\n }\n\n @watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.emit('nile-reposition');\n }\n\n @watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n @watch('vertical')\n handleVerticalChange() {\n this.detectSize();\n }\n\n render() {\n const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';\n const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';\n const isRtl = false;\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n if (isRtl && !this.vertical) {\n this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n } else {\n this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n }\n } else {\n if (isRtl && !this.vertical) {\n this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n }\n\n // Unset the alt grid template property\n this.style[gridTemplateAlt] = '';\n\n return html`\n <slot name=\"start\" part=\"panel start\" class=\"start\"></slot>\n\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex=${ifDefined(this.disabled ? undefined : '0')}\n role=\"separator\"\n aria-valuenow=${this.position}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-label=\"resize\"\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleDrag}\n @touchstart=${this.handleDrag}\n >\n <slot name=\"divider\"></slot>\n </div>\n\n <slot name=\"end\" part=\"panel end\" class=\"end\"></slot>\n `;\n }\n}\n\nexport default NileSplitPanel;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-split-panel': NileSplitPanel;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-split-panel.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-split-panel.css';\nimport NileElement from '../internal/nile-element';\n\n\nimport { clamp } from '../internal/math';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { drag } from '../internal/drag';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/\n @summary Split panels display two adjacent panels, allowing the user to reposition them.\n \n @event nile-reposition - Emitted when the divider's position changes.\n \n @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n \n @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n \n @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n /\n@customElement('nile-split-panel')\nexport class NileSplitPanel extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n protected override BUBBLES: boolean=false;\n\n private cachedPositionInPixels: number;\n private resizeObserver: ResizeObserver;\n private size: number;\n\n @query('.divider') divider: HTMLElement;\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @property({ type: Number, reflect: true }) position = 50;\n\n /* The current position of the divider from the primary panel's edge in pixels. /\n @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @property() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @property() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));\n this.updateComplete.then(() => this.resizeObserver.observe(this));\n\n this.detectSize();\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n private detectSize() {\n const { width, height } = this.getBoundingClientRect();\n this.size = this.vertical ? height : width;\n }\n\n private percentageToPixels(value: number) {\n return this.size (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private handleDrag(event: PointerEvent) {\n const isRtl = false;\n\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n if (event.cancelable) {\n event.preventDefault();\n }\n\n drag(this, {\n onMove: (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach(value => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (isRtl && !this.vertical) {\n snapPoint = this.size - snapPoint;\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n\n this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);\n },\n initialEvent: event\n });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n let newPosition = this.position;\n const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if ((event.key === 'ArrowLeft' && !this.vertical) \|\| (event.key === 'ArrowUp' && this.vertical)) {\n newPosition -= incr;\n }\n\n if ((event.key === 'ArrowRight' && !this.vertical) \|\| (event.key === 'ArrowDown' && this.vertical)) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.position = clamp(newPosition, 0, 100);\n }\n }\n\n private handleResize(entries: ResizeObserverEntry[]) {\n const { width, height } = entries[0].contentRect;\n this.size = this.vertical ? height : width;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n }\n }\n\n @watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.emit('nile-reposition');\n }\n\n @watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n @watch('vertical')\n handleVerticalChange() {\n this.detectSize();\n }\n\n render() {\n const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';\n const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';\n const isRtl = false;\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n if (isRtl && !this.vertical) {\n this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n } else {\n this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n }\n } else {\n if (isRtl && !this.vertical) {\n this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n }\n\n // Unset the alt grid template property\n this.style[gridTemplateAlt] = '';\n\n return html`\n <slot name=\"start\" part=\"panel start\" class=\"start\"></slot>\n\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex=${ifDefined(this.disabled ? undefined : '0')}\n role=\"separator\"\n aria-valuenow=${this.position}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-label=\"resize\"\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleDrag}\n @touchstart=${this.handleDrag}\n >\n <slot name=\"divider\"></slot>\n </div>\n\n <slot name=\"end\" part=\"panel end\" class=\"end\"></slot>\n `;\n }\n}\n\nexport default NileSplitPanel;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-split-panel': NileSplitPanel;\n }\n}\n"]}

package/dist/src/nile-split-panel/nile-split-panel.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './nile-split-panel';

package/dist/src/nile-split-panel/nile-split-panel.test.js ADDED Viewed

@@ -0,0 +1,4 @@
+import './nile-split-panel';
+describe('NileSplitPanel', () => {
+});
+//# sourceMappingURL=nile-split-panel.test.js.map

package/dist/src/nile-split-panel/nile-split-panel.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nile-split-panel.test.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.test.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAA;AAG3B,QAAQ,CAAC,gBAAgB,EAAC,GAAE,EAAE;AAE9B,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture, html, oneEvent } from '@open-wc/testing';\nimport './nile-split-panel'\nimport NileSplitPanel from './nile-split-panel';\n\ndescribe('NileSplitPanel',()=>{\n\t\n})"]}

package/dist/src/nile-stepper/nile-stepper.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ import NileElement from '../internal/nile-element';
  *
  */
 export declare class NileStepper extends NileElement {
+    protected BUBBLES: boolean;
     isVertical: boolean;
     contentBelow: boolean;
     currentStep: number;

package/dist/src/nile-stepper/nile-stepper.js CHANGED Viewed

@@ -20,6 +20,7 @@ import { classMap } from 'lit/directives/class-map.js';
 let NileStepper = class NileStepper extends NileElement {
     constructor() {
         super(...arguments);
+        this.BUBBLES = false;
         this.isVertical = false;
         this.contentBelow = false;
         this.currentStep = 0;