@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

package/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts

@@ -0,0 +1,119 @@
+/**
+ * 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';
+
+/**
+ * SidebarWrapper CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+    -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));
+  }
+
+  .wrapper-box {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+  }
+
+  .wrapper-box--right {
+    flex-direction: row-reverse;
+  }
+
+  .sidebar-content {
+    display: flex;
+    height: 100%;
+  }
+
+  .body-content {
+    display: flex;
+    height: 100%;
+    background-color: var(--nile-colors-red-500);
+  }
+
+  .sidebar__content--overlay {
+    position: absolute;
+    z-index: 1000;
+  }
+
+  .sidebar__content--overlay--right {
+    right: 0;
+  }
+
+  .sidebar__content--overlay--left {
+    left: 0;
+  }
+
+  .body__content--overlay {
+    position: absolute;
+    left: 0;
+    opacity:0.5;
+    background-color:var(--nile-sidebar-wrapper-overlay-background-color);
+  }
+
+  /* For left side  */
+  .sidebar__content--overlay-open-left {
+    animation: slide-in-left 0.3s ease-in-out forwards;
+  }
+
+  .sidebar__content--overlay-closed-left {
+    animation: slide-out-left 0.3s ease-in-out forwards;
+  }
+
+  @keyframes slide-in-left {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-left {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* For right side */
+  .sidebar__content--overlay-open-right {
+    animation: slide-in-right 0.3s ease-in-out forwards;
+  }
+
+  .sidebar__content--overlay-closed-right {
+    animation: slide-out-right 0.3s ease-in-out forwards;
+  }
+
+  @keyframes slide-in-right {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-right {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-sidebar-wrapper/nile-sidebar-wrapper.ts

@@ -0,0 +1,97 @@
+/**
+ * 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 {
+  LitElement,
+  html,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { styles } from './nile-sidebar-wrapper.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * Nile sidebar-wrapper component.
+ *
+ * @tag nile-sidebar-wrapper
+ *
+ */
+@customElement('nile-sidebar-wrapper')
+export class NileSidebarWrapper extends NileElement {
+  /**
+   * The styles for nile-sidebar-wrapper
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Boolean, reflect: true }) overlaysidebar = false;
+  @property({ reflect: true }) placement: 'left' | 'right' = 'left';
+  @property({ type: Boolean, reflect: true }) isopen = false;
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    console.log(this.isopen);
+
+    return html`
+      <div
+        class=${classMap({
+          'wrapper-box': true,
+          'wrapper-box--right':
+            this.placement === 'right' && !this.overlaysidebar,
+        })}
+      >
+        <slot
+          name="sidebar-content"
+          class=${classMap({
+            'sidebar-content': true,
+            'sidebar__content--overlay': this.overlaysidebar,
+            'sidebar__content--overlay--right': this.placement === 'right',
+            'sidebar__content--overlay--left': this.placement === 'left',
+            'sidebar__content--overlay-open-left':
+              this.isopen && this.placement === 'left' && this.overlaysidebar,
+            'sidebar__content--overlay-closed-left':
+              !this.isopen && this.placement === 'left' && this.overlaysidebar,
+            'sidebar__content--overlay-open-right':
+              this.isopen && this.placement === 'right'&& this.overlaysidebar,
+            'sidebar__content--overlay-closed-right':
+              !this.isopen && this.placement === 'right' && this.overlaysidebar,
+          })}
+        >
+        </slot>
+        <slot
+          name="body-content"
+          class=${classMap({
+            'body-content': true,
+            'body__content--overlay': this.overlaysidebar && this.isopen,
+          })}
+        >
+        </slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileSidebarWrapper;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-sidebar-wrapper': NileSidebarWrapper;
+  }
+}

package/src/nile-stepper/nile-stepper.ts

@@ -11,6 +11,7 @@ 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';
 
 
 /**
@@ -28,10 +29,11 @@ export class NileStepper extends NileElement {
 	@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;
 	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'lg' = 'lg';
 	@property({ type: String, attribute: true, reflect:true  }) icon: string = 'tick';
+	@property({ type: Boolean, attribute: true, reflect:true }) manual: boolean = false;
 
 	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
     super.update(changedProperties);
-		if(changedProperties.has('currentStep') || changedProperties.has('completedStep')){
+		if(changedProperties.has('currentStep') || changedProperties.has('completedStep') || changedProperties.has('manual')){
 			this.updateItems();
 		}
 	}
@@ -53,44 +55,59 @@ export class NileStepper extends NileElement {
 		if (!items.length) return;
 		const haveFlex = items.length < 3;
 
-		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: any, index: number) => {
-			// 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;
-			}
-
-			// Set isLast and isFirst
-			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
-			if (index == 0 || index == items.length - 1) {
-				el.haveFlex = haveFlex;
-			}
-		})
+		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: any, index: number) => {
+				// 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;
+				}
+			});
+		}
 	}
 
 	/**

package/src/nile-stepper/stepper-utils.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export interface StepperConfig {
+  icon: string;
+  size: 'sm' | 'lg';
+  contentBelow: boolean;
+  manual: boolean;
+  isVertical: boolean;
+}
+
+/**
+ * Updates stepper items in manual mode
+ * @param items - Array of stepper item elements
+ * @param config - Stepper configuration
+ * @param haveFlex - Whether items should have flex layout
+ */
+export function updateItemsInManualMode(
+  items: any[],
+  config: StepperConfig,
+  haveFlex: boolean
+): void {
+  items.forEach((el: any, index: number) => {
+    el.isComplete = el.completed;
+    el.isCurrent = el.current;
+
+    el.isFirst = false;
+    el.isLast = false;
+    if (index === 0) el.isFirst = true;
+    if (index === items.length - 1) el.isLast = true;
+
+    el.currentStepValue = 0;
+    el.calculatedCompletedStepValue = 0;
+    el.completedStepValue = 0;
+
+    el.icon = config.icon;
+    el.size = config.size;
+    el.value = index + 1;
+    el.contentBelow = config.contentBelow;
+    el.isManualMode = config.manual;
+    if (index === 0 || index === items.length - 1) {
+      el.haveFlex = haveFlex;
+    }
+  });
+}

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -27,6 +27,8 @@ export class NileStepperItem extends NileElement {
 	/* Properties passed directly */
 	@property({attribute: true, reflect: true}) title: string = '';
 	@property({attribute: true, reflect: true}) subtitle: string = '';
+	@property({attribute: true, reflect: true}) completed: boolean = false;
+	@property({attribute: true, reflect: true}) current: boolean = false;
 
 	/* Properties passed to parent component: NileStepper */
 	@state() private contentBelow = false;
@@ -40,6 +42,7 @@ export class NileStepperItem extends NileElement {
 
 	@state() private isComplete = false;
 	@state() private isCurrent = false;
+	@state() private isManualMode = false;
 	@state() private currentStepValue :Number;
 	@state() private completedStepValue :Number;
 	@state() private calculatedCompletedStepValue :Number;
@@ -73,8 +76,8 @@ export class NileStepperItem extends NileElement {
 	public render(): TemplateResult {
 
 		if (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);
-		const isCurrent = this.isCurrent;
-		const isComplete = this.isComplete;
+		const isCurrent = this.isManualMode ? this.current : this.isCurrent;
+		const isComplete = this.isManualMode ? this.completed : this.isComplete;
 
 		let showCompletedIcon = false;
 		if (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;
@@ -160,4 +163,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'nile-stepper-item': NileStepperItem;
 	}
-}
+}

package/src/nile-table-body/nile-table-body.ts

@@ -25,6 +25,7 @@ import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
 import { hasResizableColumns } from '../internal/resizable-table-helper';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * nile-table-body component.
@@ -124,7 +125,7 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          style="display: ${this.bodyStyle}"
+          style=${ifDefined(this.bodyStyle ? `display: ${this.bodyStyle}` : undefined)}
           ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -20,10 +20,6 @@ export const styles = css`
     -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));
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    
   }
 
   .header__item__wrapper{

package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts

@@ -23,6 +23,8 @@ export class NileVerticalStepperItem extends NileElement {
 	/* Properties passed directly */
 	@property({attribute: true, reflect: true}) title: string = '';
 	@property({attribute: true, reflect: true}) subtitle: string = '';
+	@property({attribute: true, reflect: true}) completed: boolean = false;
+	@property({attribute: true, reflect: true}) current: boolean = false;
 
 
 	/* Properties passed to parent component: NileStepper */
@@ -37,6 +39,7 @@ export class NileVerticalStepperItem extends NileElement {
 
 	@state() private isComplete = false;
 	@state() private isCurrent = false;
+	@state() private isManualMode = false;
 	@state() private currentStepValue :Number;
 	@state() private completedStepValue :Number;
 	@state() private calculatedCompletedStepValue :Number;
@@ -62,8 +65,8 @@ export class NileVerticalStepperItem extends NileElement {
 	 */
 	public render(): TemplateResult {
 		if (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);
-		const isCurrent = this.isCurrent;
-		const isComplete = this.isComplete;
+		const isCurrent = this.isManualMode ? this.current : this.isCurrent;
+		const isComplete = this.isManualMode ? this.completed : this.isComplete;
 
 		let showCompletedIcon=false;
 		if(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;
@@ -123,4 +126,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-vertical-stepper-item': NileVerticalStepperItem;
   }
-}
+}