@aquera/nile-elements 0.0.80 → 0.0.81

package/dist/src/internal/drag.js

@@ -0,0 +1,28 @@
+/** Begins listening for dragging. */
+export function drag(container, options) {
+    function move(pointerEvent) {
+        const dims = container.getBoundingClientRect();
+        const defaultView = container.ownerDocument.defaultView;
+        const offsetX = dims.left + defaultView.pageXOffset;
+        const offsetY = dims.top + defaultView.pageYOffset;
+        const x = pointerEvent.pageX - offsetX;
+        const y = pointerEvent.pageY - offsetY;
+        if (options?.onMove) {
+            options.onMove(x, y);
+        }
+    }
+    function stop() {
+        document.removeEventListener('pointermove', move);
+        document.removeEventListener('pointerup', stop);
+        if (options?.onStop) {
+            options.onStop();
+        }
+    }
+    document.addEventListener('pointermove', move, { passive: true });
+    document.addEventListener('pointerup', stop);
+    // If an initial event is set, trigger the first drag immediately
+    if (options?.initialEvent instanceof PointerEvent) {
+        move(options.initialEvent);
+    }
+}
+//# sourceMappingURL=drag.js.map

package/dist/src/internal/drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag.js","sourceRoot":"","sources":["../../../src/internal/drag.ts"],"names":[],"mappings":"AAaA,qCAAqC;AACrC,MAAM,UAAU,IAAI,CAAC,SAAsB,EAAE,OAA8B;IACzE,SAAS,IAAI,CAAC,YAA0B;QACtC,MAAM,IAAI,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;QAC/C,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,WAAY,CAAC;QACzD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC;QACpD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,WAAW,CAAC;QACnD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,GAAG,OAAO,CAAC;QACvC,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,GAAG,OAAO,CAAC;QAEvC,IAAI,OAAO,EAAE,MAAM,EAAE;YACnB,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACtB;IACH,CAAC;IAED,SAAS,IAAI;QACX,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAClD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAEhD,IAAI,OAAO,EAAE,MAAM,EAAE;YACnB,OAAO,CAAC,MAAM,EAAE,CAAC;SAClB;IACH,CAAC;IAED,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAE7C,iEAAiE;IACjE,IAAI,OAAO,EAAE,YAAY,YAAY,YAAY,EAAE;QACjD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;KAC5B;AACH,CAAC","sourcesContent":["interface DragOptions {\n  /** Callback that runs as dragging occurs. */\n  onMove: (x: number, y: number) => void;\n  /** Callback that runs when dragging stops. */\n  onStop: () => void;\n  /**\n   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This\n   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial \"click\" to activate\n   * a drag (e.g. positioning a handle initially at the click target).\n   */\n  initialEvent: PointerEvent;\n}\n\n/** Begins listening for dragging. */\nexport function drag(container: HTMLElement, options?: Partial<DragOptions>) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    if (options?.onMove) {\n      options.onMove(x, y);\n    }\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n\n    if (options?.onStop) {\n      options.onStop();\n    }\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n\n  // If an initial event is set, trigger the first drag immediately\n  if (options?.initialEvent instanceof PointerEvent) {\n    move(options.initialEvent);\n  }\n}\n"]}

package/dist/src/internal/math.d.ts

@@ -0,0 +1,2 @@
+/** Ensures a number stays within a minimum and maximum value */
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/src/internal/math.js

@@ -0,0 +1,12 @@
+/** Ensures a number stays within a minimum and maximum value */
+export function clamp(value, min, max) {
+    const noNegativeZero = (n) => (Object.is(n, -0) ? 0 : n);
+    if (value < min) {
+        return noNegativeZero(min);
+    }
+    if (value > max) {
+        return noNegativeZero(max);
+    }
+    return noNegativeZero(value);
+}
+//# sourceMappingURL=math.js.map

package/dist/src/internal/math.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"math.js","sourceRoot":"","sources":["../../../src/internal/math.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,MAAM,UAAU,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAC3D,MAAM,cAAc,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjE,IAAI,KAAK,GAAG,GAAG,EAAE;QACf,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,IAAI,KAAK,GAAG,GAAG,EAAE;QACf,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC","sourcesContent":["/** Ensures a number stays within a minimum and maximum value */\nexport function clamp(value: number, min: number, max: number) {\n  const noNegativeZero = (n: number) => (Object.is(n, -0) ? 0 : n);\n\n  if (value < min) {\n    return noNegativeZero(min);\n  }\n\n  if (value > max) {\n    return noNegativeZero(max);\n  }\n\n  return noNegativeZero(value);\n}\n"]}

package/dist/src/nile-empty-state/nile-empty-state.test.d.ts

@@ -0,0 +1 @@
+import './nile-empty-state';

package/dist/src/nile-empty-state/nile-empty-state.test.js

@@ -0,0 +1,63 @@
+import { fixture, html, expect } from "@open-wc/testing";
+import './nile-empty-state';
+describe('NileEmptyState', () => {
+    it('renders correctly with default properties', async () => {
+        const el = await fixture(html `<nile-empty-state></nile-empty-state>`);
+        expect(el.size).to.equal('md');
+        expect(el.variant).to.equal('tonal');
+        expect(el.icon).to.equal('error');
+        expect(el.grayscale).to.be.false;
+        expect(el.text).to.equal('Empty State');
+        expect(el.subText).to.equal('No Data');
+    });
+    it('should reflect properties to attributes', async () => {
+        const iconName = "action";
+        const el = await fixture(html `
+          <nile-empty-state size="sm" variant="flat" icon=${iconName} grayscale text="Test state text" sub-text="Test sub text"></nile-empty-state>
+        `);
+        expect(el.getAttribute('size')).to.equal('sm');
+        expect(el.getAttribute('variant')).to.equal('flat');
+        expect(el.getAttribute('icon')).to.equal(iconName);
+        expect(el.hasAttribute('grayscale')).to.be.true;
+        expect(el.getAttribute('text')).to.equal('Test state text');
+        expect(el.getAttribute('sub-text')).to.equal('Test sub text');
+    });
+    it('should render different sizes correctly', async () => {
+        const sizes = ['sm', 'md', 'lg'];
+        for (const size of sizes) {
+            const el = await fixture(html `<nile-empty-state size="${size}"></nile-empty-state>`);
+            const container = el.shadowRoot.querySelector('.empty-state');
+            expect(container.classList.contains(`empty-state--${size}`)).to.be.true;
+        }
+    });
+    it('should render different variants correctly', async () => {
+        const variants = ['flat', 'content', 'tonal'];
+        for (const variant of variants) {
+            const el = await fixture(html `<nile-empty-state variant="${variant}"></nile-empty-state>`);
+            const container = el.shadowRoot.querySelector(`.empty-state__body--${variant}`);
+            expect(container).to.exist;
+        }
+    });
+    it('should render text properties correctly', async () => {
+        const sampleText = 'Custom Text';
+        const sampleSubText = "Custom SubText";
+        const el = await fixture(html `
+          <nile-empty-state text=${sampleText} sub-text=${sampleSubText}></nile-empty-state>
+        `);
+        const textEl = el.shadowRoot.querySelector('.empty-state__text');
+        const subTextEl = el.shadowRoot.querySelector('.empty-state__subtext');
+        expect(textEl.textContent).to.equal(sampleText);
+        expect(subTextEl.textContent).to.equal(sampleSubText);
+    });
+    it('should render slot content', async () => {
+        const el = await fixture(html `
+          <nile-empty-state>
+            <div class="slot-content">Slot Content</div>
+          </nile-empty-state>
+        `);
+        const slotContent = el.querySelector('.slot-content');
+        expect(slotContent).to.exist;
+        expect(slotContent.textContent).to.equal('Slot Content');
+    });
+});
+//# sourceMappingURL=nile-empty-state.test.js.map

package/dist/src/nile-empty-state/nile-empty-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-empty-state.test.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAC,IAAI,EAAC,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,oBAAoB,CAAC;AAG5B,QAAQ,CAAC,gBAAgB,EAAC,GAAE,EAAE;IAC1B,EAAE,CAAC,2CAA2C,EAAC,KAAK,IAAG,EAAE;QACrD,MAAM,EAAE,GAAC,MAAM,OAAO,CAAiB,IAAI,CAAA,uCAAuC,CAAC,CAAA;QACnF,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC/B,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACjC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACxC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,QAAQ,GAAC,QAAQ,CAAA;QACvB,MAAM,EAAE,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA;4DACO,QAAQ;SAC3D,CAAC,CAAC;QACH,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC/C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;QAC5D,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,KAAK,GAA6B,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,EAAE,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA,2BAA2B,IAAI,uBAAuB,CAAC,CAAC;YACrG,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,cAAc,CAAE,CAAC;YAChE,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;SACzE;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,QAAQ,GAAwC,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;QACnF,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;YAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA,8BAA8B,OAAO,uBAAuB,CAAC,CAAC;YAC3G,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,OAAO,EAAE,CAAE,CAAC;YAClF,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;SAC5B;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,UAAU,GAAC,aAAa,CAAA;QAC9B,MAAM,aAAa,GAAC,gBAAgB,CAAA;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA;mCAClB,UAAU,aAAa,aAAa;SAC9D,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAE,CAAC;QACnE,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAE,CAAC;QACzE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAChD,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA;;;;SAI5C,CAAC,CAAC;QACH,MAAM,WAAW,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;QACvD,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACT,CAAC,CAAC,CAAA","sourcesContent":["import { fixture,html,expect } from \"@open-wc/testing\";\nimport './nile-empty-state';\nimport { NileEmptyState } from \"./nile-empty-state\";\n\ndescribe('NileEmptyState',()=>{\n    it('renders correctly with default properties',async ()=>{\n        const el=await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`)\n        expect(el.size).to.equal('md');\n        expect(el.variant).to.equal('tonal');\n        expect(el.icon).to.equal('error');\n        expect(el.grayscale).to.be.false;\n        expect(el.text).to.equal('Empty State');\n        expect(el.subText).to.equal('No Data');\n    })\n\n    it('should reflect properties to attributes', async () => {\n        const iconName=\"action\"\n        const el = await fixture<NileEmptyState>(html`\n          <nile-empty-state size=\"sm\" variant=\"flat\" icon=${iconName} grayscale text=\"Test state text\" sub-text=\"Test sub text\"></nile-empty-state>\n        `);\n        expect(el.getAttribute('size')).to.equal('sm');\n        expect(el.getAttribute('variant')).to.equal('flat');\n        expect(el.getAttribute('icon')).to.equal(iconName);\n        expect(el.hasAttribute('grayscale')).to.be.true;\n        expect(el.getAttribute('text')).to.equal('Test state text');\n        expect(el.getAttribute('sub-text')).to.equal('Test sub text');\n      });\n\n      it('should render different sizes correctly', async () => {\n        const sizes:Array<'sm' | 'md' | 'lg' >= ['sm', 'md', 'lg'];\n        for (const size of sizes) {\n          const el = await fixture<NileEmptyState>(html`<nile-empty-state size=\"${size}\"></nile-empty-state>`);\n          const container = el.shadowRoot!.querySelector('.empty-state')!;\n          expect(container.classList.contains(`empty-state--${size}`)).to.be.true;\n        }\n      });\n\n      it('should render different variants correctly', async () => {\n        const variants :Array<'flat' | 'content' | 'tonal' >= ['flat', 'content', 'tonal'];\n        for (const variant of variants) {\n          const el = await fixture<NileEmptyState>(html`<nile-empty-state variant=\"${variant}\"></nile-empty-state>`);\n          const container = el.shadowRoot!.querySelector(`.empty-state__body--${variant}`)!;\n          expect(container).to.exist;\n        }\n      });\n\n      it('should render text properties correctly', async () => {\n        const sampleText='Custom Text'\n        const sampleSubText=\"Custom SubText\"\n        const el = await fixture<NileEmptyState>(html`\n          <nile-empty-state text=${sampleText} sub-text=${sampleSubText}></nile-empty-state>\n        `);\n        const textEl = el.shadowRoot!.querySelector('.empty-state__text')!;\n        const subTextEl = el.shadowRoot!.querySelector('.empty-state__subtext')!;\n        expect(textEl.textContent).to.equal(sampleText);\n        expect(subTextEl.textContent).to.equal(sampleSubText);\n      });\n\n      it('should render slot content', async () => {\n        const el = await fixture<NileEmptyState>(html`\n          <nile-empty-state>\n            <div class=\"slot-content\">Slot Content</div>\n          </nile-empty-state>\n        `);\n        const slotContent = el.querySelector('.slot-content')!;\n        expect(slotContent).to.exist;\n        expect(slotContent.textContent).to.equal('Slot Content');\n      });\n})"]}

package/dist/src/nile-hero/nile-hero.test.d.ts

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

package/dist/src/nile-hero/nile-hero.test.js

@@ -0,0 +1,42 @@
+import { fixture, html, expect } from '@open-wc/testing';
+import './nile-hero';
+describe('NileHero', () => {
+    it('renders correctly with default properties', async () => {
+        const el = await fixture(html `
+		<nile-hero icon="error" hero-text="Test Hero">
+            <nile-page-header
+                heading="I am heading"
+                sub-heading="I am subheading"
+            ></nile-page-header>
+        </nile-hero>`);
+        expect(el.getAttribute('icon')).to.equal('error');
+        expect(el.hasAttribute('collapse')).to.be.false;
+        expect(el.getAttribute('img-src')).to.equal('');
+        expect(el.getAttribute('hero-text')).to.equal('Test Hero');
+        expect(el).shadowDom.to.equalSnapshot();
+    });
+    it('checks for collapsed state', async () => {
+        const el = await fixture(html `<nile-hero></nile-hero>`);
+        el.collapse = true;
+        await el.updateComplete;
+        expect(el.collapse).to.be.true;
+        el.collapse = true;
+        await el.updateComplete;
+        const heroContainer = el.shadowRoot?.querySelector('.hero__container');
+        expect(heroContainer?.classList.contains('hero__container--collapsed')).to.be.true;
+    });
+    it('should render slot content', async () => {
+        const el = await fixture(html `
+      <nile-hero>
+            <nile-page-header
+                heading="I am heading"
+                sub-heading="I am subheading"
+            ></nile-page-header>
+      </nile-hero>
+    `);
+        await el.updateComplete;
+        const NilePageHeader = el.querySelector('nile-page-header');
+        expect(NilePageHeader).to.exist;
+    });
+});
+//# sourceMappingURL=nile-hero.test.js.map

package/dist/src/nile-hero/nile-hero.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-hero.test.js","sourceRoot":"","sources":["../../../src/nile-hero/nile-hero.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAY,MAAM,kBAAkB,CAAC;AACnE,OAAO,aAAa,CAAC;AAGrB,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA;;;;;;qBAMtB,CAAC,CAAC;QACnB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC3D,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAClE,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC;QACnB,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC/B,EAAE,CAAC,QAAQ,GAAC,IAAI,CAAC;QACjB,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,aAAa,GAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACrF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA;;;;;;;KAOtC,CAAC,CAAC;QACH,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,cAAc,GAAG,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;QAC7D,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAA","sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-hero';\nimport { NileHero } from './nile-hero';\n\ndescribe('NileHero', () => {\n  it('renders correctly with default properties', async () => {\n    const el = await fixture<NileHero>(html`\n\t\t<nile-hero icon=\"error\" hero-text=\"Test Hero\">\n            <nile-page-header\n                heading=\"I am heading\"\n                sub-heading=\"I am subheading\"\n            ></nile-page-header>\n        </nile-hero>`);\n    expect(el.getAttribute('icon')).to.equal('error');\n    expect(el.hasAttribute('collapse')).to.be.false;\n    expect(el.getAttribute('img-src')).to.equal('');\n    expect(el.getAttribute('hero-text')).to.equal('Test Hero');\n    expect(el).shadowDom.to.equalSnapshot();\n  });\n\n  it('checks for collapsed state', async () => {\n    const el = await fixture<NileHero>(html`<nile-hero></nile-hero>`);\n    el.collapse = true;\n    await el.updateComplete;\n    expect(el.collapse).to.be.true;\n    el.collapse=true;\n    await el.updateComplete;\n    const heroContainer=el.shadowRoot?.querySelector('.hero__container');\n    expect(heroContainer?.classList.contains('hero__container--collapsed')).to.be.true;\n  });\n\n  it('should render slot content', async () => {\n    const el = await fixture<NileHero>(html`\n      <nile-hero>\n            <nile-page-header\n                heading=\"I am heading\"\n                sub-heading=\"I am subheading\"\n            ></nile-page-header>\n      </nile-hero>\n    `);\n    await el.updateComplete;\n    const NilePageHeader = el.querySelector('nile-page-header')!;\n    expect(NilePageHeader).to.exist;\n  });\n})\n"]}

package/dist/src/nile-split-panel/index.d.ts

@@ -0,0 +1 @@
+export { NileSplitPanel } from './nile-split-panel';

package/dist/src/nile-split-panel/index.js

@@ -0,0 +1,2 @@
+export { NileSplitPanel } from './nile-split-panel';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-split-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-split-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileSplitPanel } from './nile-split-panel';"]}

package/dist/src/nile-split-panel/nile-split-panel.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * SplitPanel CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-split-panel/nile-split-panel.css.js

@@ -0,0 +1,99 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * SplitPanel CSS
+ */
+export const styles = css `
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    box-sizing: border-box;
+    --divider-width: 4px;
+    --divider-hit-area: 12px;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-split-panel.css.js.map

package/dist/src/nile-split-panel/nile-split-panel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-split-panel.css.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 {css} from 'lit-element';\n\n/**\n * SplitPanel CSS\n */\nexport const styles = css`\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    box-sizing: border-box;\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\n  }\n\n  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--nile-colors-blue-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,78 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+export declare class NileSplitPanel extends NileElement {
+    static styles: CSSResultGroup;
+    private cachedPositionInPixels;
+    private resizeObserver;
+    private size;
+    divider: HTMLElement;
+    /**
+     * 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.
+     */
+    position: number;
+    /** The current position of the divider from the primary panel's edge in pixels. */
+    positionInPixels: number;
+    /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+    vertical: boolean;
+    /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+    disabled: boolean;
+    /**
+     * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+     * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+     * host element is resized.
+     */
+    primary?: 'start' | 'end';
+    /**
+     * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
+     * `"100px 50%"`.
+     */
+    snap?: string;
+    /** How close the divider must be to a snap point until snapping occurs. */
+    snapThreshold: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private detectSize;
+    private percentageToPixels;
+    private pixelsToPercentage;
+    private handleDrag;
+    private handleKeyDown;
+    private handleResize;
+    handlePositionChange(): void;
+    handlePositionInPixelsChange(): void;
+    handleVerticalChange(): void;
+    render(): TemplateResult<1>;
+}
+export default NileSplitPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-split-panel': NileSplitPanel;
+    }
+}

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

@@ -0,0 +1,251 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { styles } from './nile-split-panel.css';
+import NileElement from '../internal/nile-element';
+import { clamp } from '../internal/math';
+import { customElement, property, query } from 'lit/decorators.js';
+import { drag } from '../internal/drag';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+let NileSplitPanel = class NileSplitPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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.
+         */
+        this.position = 50;
+        /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+        this.vertical = false;
+        /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+        this.disabled = false;
+        /** How close the divider must be to a snap point until snapping occurs. */
+        this.snapThreshold = 12;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));
+        this.updateComplete.then(() => this.resizeObserver.observe(this));
+        this.detectSize();
+        this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.unobserve(this);
+    }
+    detectSize() {
+        const { width, height } = this.getBoundingClientRect();
+        this.size = this.vertical ? height : width;
+    }
+    percentageToPixels(value) {
+        return this.size * (value / 100);
+    }
+    pixelsToPercentage(value) {
+        return (value / this.size) * 100;
+    }
+    handleDrag(event) {
+        const isRtl = false;
+        if (this.disabled) {
+            return;
+        }
+        // Prevent text selection when dragging
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        drag(this, {
+            onMove: (x, y) => {
+                let newPositionInPixels = this.vertical ? y : x;
+                // Flip for end panels
+                if (this.primary === 'end') {
+                    newPositionInPixels = this.size - newPositionInPixels;
+                }
+                // Check snap points
+                if (this.snap) {
+                    const snaps = this.snap.split(' ');
+                    snaps.forEach(value => {
+                        let snapPoint;
+                        if (value.endsWith('%')) {
+                            snapPoint = this.size * (parseFloat(value) / 100);
+                        }
+                        else {
+                            snapPoint = parseFloat(value);
+                        }
+                        if (isRtl && !this.vertical) {
+                            snapPoint = this.size - snapPoint;
+                        }
+                        if (newPositionInPixels >= snapPoint - this.snapThreshold &&
+                            newPositionInPixels <= snapPoint + this.snapThreshold) {
+                            newPositionInPixels = snapPoint;
+                        }
+                    });
+                }
+                this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+            },
+            initialEvent: event
+        });
+    }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+            let newPosition = this.position;
+            const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
+            event.preventDefault();
+            if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
+                newPosition -= incr;
+            }
+            if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
+                newPosition += incr;
+            }
+            if (event.key === 'Home') {
+                newPosition = this.primary === 'end' ? 100 : 0;
+            }
+            if (event.key === 'End') {
+                newPosition = this.primary === 'end' ? 0 : 100;
+            }
+            this.position = clamp(newPosition, 0, 100);
+        }
+    }
+    handleResize(entries) {
+        const { width, height } = entries[0].contentRect;
+        this.size = this.vertical ? height : width;
+        // Resize when a primary panel is set
+        if (this.primary) {
+            this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+        }
+    }
+    handlePositionChange() {
+        this.cachedPositionInPixels = this.percentageToPixels(this.position);
+        this.positionInPixels = this.percentageToPixels(this.position);
+        this.emit('nile-reposition');
+    }
+    handlePositionInPixelsChange() {
+        this.position = this.pixelsToPercentage(this.positionInPixels);
+    }
+    handleVerticalChange() {
+        this.detectSize();
+    }
+    render() {
+        const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
+        const isRtl = false;
+        const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+        const secondary = 'auto';
+        if (this.primary === 'end') {
+            if (isRtl && !this.vertical) {
+                this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+            }
+            else {
+                this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+            }
+        }
+        else {
+            if (isRtl && !this.vertical) {
+                this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+            }
+            else {
+                this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+            }
+        }
+        // Unset the alt grid template property
+        this.style[gridTemplateAlt] = '';
+        return html `
+      <slot name="start" part="panel start" class="start"></slot>
+
+      <div
+        part="divider"
+        class="divider"
+        tabindex=${ifDefined(this.disabled ? undefined : '0')}
+        role="separator"
+        aria-valuenow=${this.position}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="resize"
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <slot name="divider"></slot>
+      </div>
+
+      <slot name="end" part="panel end" class="end"></slot>
+    `;
+    }
+};
+NileSplitPanel.styles = styles;
+__decorate([
+    query('.divider')
+], NileSplitPanel.prototype, "divider", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileSplitPanel.prototype, "position", void 0);
+__decorate([
+    property({ attribute: 'position-in-pixels', type: Number })
+], NileSplitPanel.prototype, "positionInPixels", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSplitPanel.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSplitPanel.prototype, "disabled", void 0);
+__decorate([
+    property()
+], NileSplitPanel.prototype, "primary", void 0);
+__decorate([
+    property()
+], NileSplitPanel.prototype, "snap", void 0);
+__decorate([
+    property({ type: Number, attribute: 'snap-threshold' })
+], NileSplitPanel.prototype, "snapThreshold", void 0);
+__decorate([
+    watch('position')
+], NileSplitPanel.prototype, "handlePositionChange", null);
+__decorate([
+    watch('positionInPixels')
+], NileSplitPanel.prototype, "handlePositionInPixelsChange", null);
+__decorate([
+    watch('vertical')
+], NileSplitPanel.prototype, "handleVerticalChange", null);
+NileSplitPanel = __decorate([
+    customElement('nile-split-panel')
+], NileSplitPanel);
+export { NileSplitPanel };
+export default NileSplitPanel;
+//# sourceMappingURL=nile-split-panel.js.map