@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

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

@@ -0,0 +1,102 @@
+/**
+* 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';
+/**
+ * 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;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .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 , var(--ng-colors-bg-quaternary));
+    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+  }
+
+  :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,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFxB,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';\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    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\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 , var(--ng-colors-bg-quaternary));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-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, var(--ng-componentcolors-utility-brand-50));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\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.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

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

@@ -0,0 +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';\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"]}

package/dist/src/nile-stepper/index.js

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

package/dist/src/nile-stepper/index.js.map

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

package/dist/src/nile-stepper/nile-stepper.css.js

@@ -0,0 +1,36 @@
+/**
+* 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';
+/**
+ * Stepper CSS
+ */
+export const styles = css `
+	*{
+		box-sizing:border-box;
+	}
+	:host {
+		display:block;
+		height:100%;
+		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+	}
+	.nile-stepper--horizontal{
+		display:flex;
+		align-items:center;
+		padding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+	}
+
+	.nile-stepper--vertical{
+		height:100%;
+		display:flex;
+		flex-direction:column;
+		padding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-stepper.css.js.map

package/dist/src/nile-stepper/nile-stepper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,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';\n\n/**\n * Stepper CSS\n */\nexport const styles = css`\n\t*{\n\t\tbox-sizing:border-box;\n\t}\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t\tpadding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n\t}\n\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tpadding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n\t}\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,168 @@
+/**
+ * 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 { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-stepper.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import { classMap } from 'lit/directives/class-map.js';
+import { updateItemsInManualMode } from './stepper-utils';
+/**
+ * Nile stepper component.
+ *
+ * @tag nile-stepper
+ *
+ */
+let NileStepper = class NileStepper extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.isVertical = false;
+        this.contentBelow = false;
+        this.currentStep = 0;
+        this.completedStep = 0;
+        this.size = 'lg';
+        this.icon = 'tick';
+        this.manual = false;
+        /* #endregion */
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('currentStep') || changedProperties.has('completedStep') || changedProperties.has('manual')) {
+            this.updateItems();
+        }
+    }
+    handleCurrentStepChanges() {
+        this.updateItems();
+        this.emit('nile-current-change', { value: this.currentStep });
+    }
+    handleCompletedStepChanges() {
+        this.updateItems();
+        this.emit('nile-completed-change', { value: this.completedStep });
+    }
+    updateItems() {
+        const items = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];
+        if (!items.length)
+            return;
+        const haveFlex = items.length < 3;
+        if (this.manual) {
+            // Manual mode: use inline properties from each item
+            updateItemsInManualMode(items, {
+                icon: this.icon,
+                size: this.size,
+                contentBelow: this.contentBelow,
+                manual: this.manual,
+                isVertical: this.isVertical
+            }, haveFlex);
+        }
+        else {
+            // Automatic mode: use currentStep and completedStep properties
+            const current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;
+            const calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;
+            const completed = this.completedStep > items.length ? 0 : this.completedStep;
+            items.forEach((el, index) => {
+                // set item is complete and is current values
+                if (index + 1 < current) {
+                    el.isComplete = true;
+                    el.isCurrent = false;
+                }
+                else if (index + 1 == current) {
+                    if (index + 1 <= calculatedCompleted)
+                        el.isComplete = true;
+                    else
+                        el.isComplete = false;
+                    el.isCurrent = true;
+                }
+                else {
+                    if (index + 1 <= calculatedCompleted)
+                        el.isComplete = true;
+                    else
+                        el.isComplete = false;
+                    el.isCurrent = false;
+                }
+                // Reset and set isLast and isFirst
+                el.isFirst = false;
+                el.isLast = false;
+                if (index == 0)
+                    el.isFirst = true;
+                if (index == items.length - 1)
+                    el.isLast = true;
+                // setting default values
+                el.currentStepValue = current;
+                el.calculatedCompletedStepValue = calculatedCompleted;
+                el.completedStepValue = completed;
+                el.icon = this.icon;
+                el.size = this.size;
+                el.value = index + 1;
+                el.contentBelow = this.contentBelow;
+                el.isManualMode = this.manual;
+                if (index == 0 || index == items.length - 1) {
+                    el.haveFlex = haveFlex;
+                }
+            });
+        }
+    }
+    /**
+     * The styles for nile-stepper
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<div part="stepper" class=${classMap({
+            'nile-stepper': true,
+            'nile-stepper--horizontal': !this.isVertical,
+            'nile-stepper--vertical': this.isVertical
+        })}>
+				<slot
+					@slotchange=${this.updateItems}
+				></slot>
+			</div>
+			`;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'vertical' })
+], NileStepper.prototype, "isVertical", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true, reflect: true })
+], NileStepper.prototype, "contentBelow", void 0);
+__decorate([
+    property({ type: Number, attribute: true, reflect: true })
+], NileStepper.prototype, "currentStep", void 0);
+__decorate([
+    property({ type: Number, attribute: true, reflect: true })
+], NileStepper.prototype, "completedStep", void 0);
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], NileStepper.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: true, reflect: true })
+], NileStepper.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true, reflect: true })
+], NileStepper.prototype, "manual", void 0);
+__decorate([
+    watch('currentStep')
+], NileStepper.prototype, "handleCurrentStepChanges", null);
+__decorate([
+    watch('completedStep')
+], NileStepper.prototype, "handleCompletedStepChanges", null);
+NileStepper = __decorate([
+    customElement('nile-stepper')
+], NileStepper);
+export { NileStepper };
+export default NileStepper;
+//# sourceMappingURL=nile-stepper.js.map

package/dist/src/nile-stepper/nile-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-stepper.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.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, html, CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-stepper.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { updateItemsInManualMode } from './stepper-utils';\n\n\n/**\n * Nile stepper component.\n *\n * @tag nile-stepper\n *\n */\n@customElement('nile-stepper')\nexport class NileStepper extends NileElement {\n\n\t@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;\n\t@property({ type: Boolean, attribute: true, reflect:true }) contentBelow: boolean = false;\n\t@property({ type: Number, attribute: true, reflect:true }) currentStep: number = 0;\n\t@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;\n\t@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'lg' = 'lg';\n\t@property({ type: String, attribute: true, reflect:true  }) icon: string = 'tick';\n\t@property({ type: Boolean, attribute: true, reflect:true }) manual: boolean = false;\n\n\tprotected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{\n    super.update(changedProperties);\n\t\tif(changedProperties.has('currentStep') || changedProperties.has('completedStep') || changedProperties.has('manual')){\n\t\t\tthis.updateItems();\n\t\t}\n\t}\n\n\t@watch('currentStep')\n\thandleCurrentStepChanges() {\n\t\tthis.updateItems();\n\t\tthis.emit('nile-current-change', { value: this.currentStep });\n\t}\n\n\t@watch('completedStep')\n\thandleCompletedStepChanges() {\n\t\tthis.updateItems()\n\t\tthis.emit('nile-completed-change', { value: this.completedStep });\n\t}\n\t\n\tprivate updateItems() {\n\t\tconst items: any = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];\n\t\tif (!items.length) return;\n\t\tconst haveFlex = items.length < 3;\n\n\t\tif (this.manual) {\n\t\t\t// Manual mode: use inline properties from each item\n\t\t\tupdateItemsInManualMode(items, {\n\t\t\t\ticon: this.icon,\n\t\t\t\tsize: this.size,\n\t\t\t\tcontentBelow: this.contentBelow,\n\t\t\t\tmanual: this.manual,\n\t\t\t\tisVertical: this.isVertical\n\t\t\t}, haveFlex);\n\t\t} else {\n\t\t\t// Automatic mode: use currentStep and completedStep properties\n\t\t\tconst current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;\n\t\t\tconst calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;\n\t\t\tconst completed = this.completedStep > items.length ? 0 : this.completedStep;\n\n\t\t\titems.forEach((el: any, index: number) => {\n\t\t\t\t// set item is complete and is current values\n\t\t\t\tif (index + 1 < current) {\n\t\t\t\t\tel.isComplete = true;\n\t\t\t\t\tel.isCurrent = false;\n\t\t\t\t}\n\t\t\t\telse if (index + 1 == current) {\n\t\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\t\telse el.isComplete = false;\n\t\t\t\t\tel.isCurrent = true;\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\t\telse el.isComplete = false;\n\t\t\t\t\tel.isCurrent = false;\n\t\t\t\t}\n\n\t\t\t\t// Reset and set isLast and isFirst\n\t\t\t\tel.isFirst = false;\n\t\t\t\tel.isLast = false;\n\t\t\t\tif (index == 0) el.isFirst = true;\n\t\t\t\tif (index == items.length - 1) el.isLast = true;\n\n\t\t\t\t// setting default values\n\t\t\t\tel.currentStepValue = current;\n\t\t\t\tel.calculatedCompletedStepValue = calculatedCompleted;\n\t\t\t\tel.completedStepValue = completed;\n\n\t\t\t\tel.icon = this.icon;\n\t\t\t\tel.size = this.size;\n\t\t\t\tel.value = index + 1;\n\t\t\t\tel.contentBelow = this.contentBelow;\n\t\t\t\tel.isManualMode = this.manual;\n\t\t\t\tif (index == 0 || index == items.length - 1) {\n\t\t\t\t\tel.haveFlex = haveFlex;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * The styles for nile-stepper\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div part=\"stepper\" class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}>\n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepper;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper': NileStepper;\n\t}\n}\n"]}