@aquera/nile-elements 0.0.118 → 0.0.120

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
 import { LitElement, html, property, customElement } from 'lit-element';
 import styles from './nile-slide-toggle.css';
 import NileElement from '../internal/nile-element';
@@ -8,11 +8,18 @@ import { classMap } from 'lit/directives/class-map.js';
 export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   @property({ type: String }) label = '';
+
   @property({ type: String }) sublabel = '';
 
+  @property({ type: String, }) textPosition:'left' | 'right' = 'right';
+
   @property({ type: Boolean, reflect: true }) isChecked = false;
 
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
+
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
@@ -22,6 +29,7 @@ export class NileSlideToggle extends NileElement {
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
+    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')
   }
 
   disconnectedCallback() {
@@ -44,9 +52,16 @@ export class NileSlideToggle extends NileElement {
         class=${classMap({
           'nile-slide-toggle': true,
           'nile-slide--disabled': this.disabled,
+          'nile-slide-toggle--reverse':this.textPosition=='left'
         })}
       >
-        <label class="nile-slide-toggle__switch">
+        <label 
+        class="${classMap({
+          'nile-slide-toggle__switch':true,
+          'nile-slide-toggle__switch--left':this.textPosition=='right',
+          'nile-slide-toggle__switch--right':this.textPosition=='left',
+        })}"
+        class="nile-slide-toggle__switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}

package/src/nile-split-panel/nile-split-panel.test.ts

@@ -0,0 +1,7 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-split-panel'
+import NileSplitPanel from './nile-split-panel';
+
+describe('NileSplitPanel',()=>{
+	
+})

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

@@ -43,6 +43,8 @@ export class NileSplitPanel extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private cachedPositionInPixels: number;
   private resizeObserver: ResizeObserver;
   private size: number;

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

@@ -1,174 +1,12 @@
-// import { fixture, expect, html } from "@open-wc/testing"
-// import './nile-stepper';
-// import { NileStepper } from "./nile-stepper";
-// import { NileStepperItem } from "../nile-stepper-item";
-// import { NileVerticalStepperItem } from "../nile-vertical-stepper-item";
-// describe('NileStepper', () => {
-//     it('should have default properties in NileStepper', async () => {
-//         const stepper = await fixture<NileStepper>(html`<nile-stepper></nile-stepper>`);
-//         expect(stepper.isVertical).to.be.false;
-//         expect(stepper.contentBelow).to.be.false;
-//         expect(stepper.currentStep).to.equal(0);
-//         expect(stepper.completedStep).to.equal(0);
-//         expect(stepper.size).to.equal('md');
-//         expect(stepper.icon).to.equal('tick');
-//     });
-
-//     it('should reflect properties to attributes in NileStepper', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper vertical contentBelow current-step="1" completed-step="2" size="lg" icon="check"></nile-stepper>
-//     `);
-//         expect(stepper.getAttribute('vertical')).to.equal('');
-//         expect(stepper.getAttribute('contentBelow')).to.equal('');
-//         expect(stepper.getAttribute('current-step')).to.equal('1');
-//         expect(stepper.getAttribute('completed-step')).to.equal('2');
-//         expect(stepper.getAttribute('size')).to.equal('lg');
-//         expect(stepper.getAttribute('icon')).to.equal('check');
-//     });
-
-//     it('should render vertical stepper correctly', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper vertical>
-//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
-//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
-//         </nile-stepper>
-//         `);
-//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
-//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
-//     });
-
-//     it('should update NileStepperItems when NileStepper properties change', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper>
-//         <nile-stepper-item></nile-stepper-item>
-//         <nile-stepper-item></nile-stepper-item>
-//         <nile-stepper-item></nile-stepper-item>
-//         </nile-stepper>
-//     `);
-//         stepper.currentStep = 2;
-//         stepper.completedStep = 3;
-//         await stepper.updateComplete;
-//         const items = stepper.querySelectorAll('nile-stepper-item');
-//         expect(items[0].isComplete).to.be.true;
-//         expect(items[1].isCurrent).to.be.true;
-//         expect(items[2].isComplete).to.be.true;
-//     });
-
-//     it('should render stepper with content below items correctly', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper content-below>
-//         <nile-stepper-item title="Step 1" subtitle="Subtitle 1"></nile-stepper-item>
-//         <nile-stepper-item title="Step 2" subtitle="Subtitle 2"></nile-stepper-item>
-//         </nile-stepper>
-//     `);
-//         const items = stepper.querySelectorAll('nile-stepper-item');
-//         expect(items[0].contentBelow).to.be.true;
-//         expect(items[1].contentBelow).to.be.true;
-//     });
-
-//     // CUSTOM ICONS NOT SUPPORTED YET IGNORE TEST CASE
-//     // it('should render stepper items with correct icons', async () => {
-//     //     const stepper = await fixture<NileStepper>(html`
-//     //     <nile-stepper icon="star">
-//     //     <nile-stepper-item></nile-stepper-item>
-//     //     <nile-stepper-item></nile-stepper-item>
-//     //     </nile-stepper>
-//     // `);
-//     //     const items = stepper.querySelectorAll('nile-stepper-item');
-//     //     expect(items[0].icon).to.equal('star');
-//     //     expect(items[1].icon).to.equal('star');
-//     // });
-
-//     it('should emit events when currentStep changes', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper current-step="1" completed-step="4">
-//             <nile-stepper-item></nile-stepper-item>
-//             <nile-stepper-item></nile-stepper-item>
-//             <nile-stepper-item></nile-stepper-item>
-//             <nile-stepper-item></nile-stepper-item>
-//         </nile-stepper>
-//     `);
-//         const items = stepper.querySelectorAll('nile-stepper-item');
-//         let currentChangeEvent: CustomEvent | null = null;
-//         stepper.addEventListener('nile-current-change', (event) => {
-//             currentChangeEvent = event as CustomEvent;
-//         });
-//         stepper.currentStep = 2;
-//         await stepper.updateComplete;
-//         expect(currentChangeEvent).to.exist;
-//         expect(currentChangeEvent!.detail.value).to.equal(2);
-//         expect(items[1].isCurrent).to.equal(true);
-//         expect(items[0].isComplete).to.equal(true);
-//     });
-
-//     it('should emit events when completedStep changes', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper completed-step="1"></nile-stepper>
-//     `);
-//         let completedChangeEvent: CustomEvent | null = null;
-//         stepper.addEventListener('nile-completed-change', (event) => {
-//             completedChangeEvent = event as CustomEvent;
-//         });
-//         stepper.completedStep = 2;
-//         await stepper.updateComplete;
-//         expect(completedChangeEvent).to.exist;
-//         expect(completedChangeEvent!.detail.value).to.equal(2);
-//     });
-
-//     it('should render slot content inside stepper', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper current-step="2">
-//         <nile-stepper-item title="Step 1"></nile-stepper-item>
-//         <nile-stepper-item title="Step 2"></nile-stepper-item>
-//         </nile-stepper>
-//     `);
-//         const items = stepper.querySelectorAll('nile-stepper-item');
-//         expect(items.length).to.equal(2);
-//         expect(items[0].title).to.equal('Step 1');
-//         expect(items[1].title).to.equal('Step 2');
-//         expect(items[1].isCurrent).to.equal(true);
-//     });
-// })
-
-// describe('NileVerticalStepperItem', () => {
-//     it('should render vertical stepper correctly', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//         <nile-stepper vertical>
-//         <nile-stepper-item></nile-stepper-item>
-//         <nile-stepper-item></nile-stepper-item>
-//         </nile-stepper>
-//     `);
-//         const container = stepper.shadowRoot!.querySelector('.nile-stepper')!;
-//         expect(container.classList.contains('nile-stepper--vertical')).to.be.true;
-//     });
-
-//     it('should update NileVerticalStepperItems when NileStepper properties change', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//           <nile-stepper vertical>
-//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
-//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
-//             <nile-vertical-stepper-item></nile-vertical-stepper-item>
-//           </nile-stepper>
-//         `);
-//         stepper.currentStep = 2;
-//         stepper.completedStep = 3;
-//         await stepper.updateComplete;
-//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
-//         expect(items[0].isComplete).to.be.true;
-//         expect(items[1].isCurrent).to.be.true;
-//         expect(items[2].isComplete).to.be.true;
-//     });
-
-//     it('should render slot content inside vertical stepper', async () => {
-//         const stepper = await fixture<NileStepper>(html`
-//           <nile-stepper vertical>
-//             <nile-vertical-stepper-item title="Step 1"></nile-vertical-stepper-item>
-//             <nile-vertical-stepper-item title="Step 2"></nile-vertical-stepper-item>
-//           </nile-stepper>
-//         `);
-//         const items = stepper.querySelectorAll('nile-vertical-stepper-item');
-//         expect(items.length).to.equal(2);
-//         expect(items[0].title).to.equal('Step 1');
-//         expect(items[1].title).to.equal('Step 2');
-//     });
-// })
+import { fixture, expect, html } from "@open-wc/testing"
+import './nile-stepper';
+import { NileStepper } from "./nile-stepper";
+import { NileStepperItem } from "../nile-stepper-item";
+import { NileVerticalStepperItem } from "../nile-vertical-stepper-item";
+
+import "./nile-stepper";
+import "../nile-stepper-item/nile-stepper-item";
+import "../nile-vertical-stepper-item/nile-vertical-stepper-item";
+
+describe('NileStepper', () => {
+})

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

@@ -22,6 +22,8 @@ import { classMap } from 'lit/directives/class-map.js';
 @customElement('nile-stepper')
 export class NileStepper extends NileElement {
 
+  protected override BUBBLES: boolean=false;
+
 	@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;
 	@property({ type: Boolean, attribute: 'content-below', reflect:true }) contentBelow: boolean = false;
 	@property({ type: Number, attribute: 'currentStep', reflect:true }) currentStep: number = 0;

package/src/nile-tab/nile-tab.ts

@@ -38,6 +38,8 @@ let id = 0;
 export class NileTab extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly attrId = ++id;
   private readonly componentId = `nile-tab-${this.attrId}`;
 

package/src/nile-tab-group/nile-tab-group.ts

@@ -50,6 +50,8 @@ export class NileTabGroup extends NileElement {
 
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private activeTab?: NileTab;
   private mutationObserver: MutationObserver;
   private resizeObserver: ResizeObserver;

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

@@ -50,6 +50,8 @@ export class NileTableBody extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   /* #endregion */
 
   /* #region Methods */

package/src/nile-tag/nile-tag.ts

@@ -45,6 +45,8 @@ import type { CSSResultGroup } from 'lit';
 export class NileTag extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   /** The tag's theme variant. */
   @property({ reflect: true }) variant:
     | 'primary'

package/src/nile-textarea/nile-textarea.test.ts

@@ -1,6 +1,6 @@
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import './nile-textarea.js';
-import { NileTextarea } from './nile-textarea.js';
+import { NileTextarea } from './nile-textarea';
 
 describe('<nile-textarea>', () => {
   it('should render the default properties correctly', async () => {

package/src/nile-textarea/nile-textarea.ts

@@ -44,6 +44,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export class NileTextarea extends NileElement  {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private resizeObserver: ResizeObserver;
 

package/src/nile-toast/nile-toast.ts

@@ -56,6 +56,8 @@ const toastStack = Object.assign(document.createElement('div'), {
 export class NileToast extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private autoHideTimeout: number;
   private readonly hasSlotController = new HasSlotController(
     this,

package/src/nile-tooltip/nile-tooltip.ts

@@ -38,6 +38,8 @@ export class NileTooltip extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   private hoverTimeout: number;
   // private readonly localize = new LocalizeController(this);
 

package/src/nile-tree/nile-tree.test.ts

@@ -0,0 +1,9 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import NileTree from './nile-tree';
+import { NileTreeItem } from '../nile-tree-item';
+import '../nile-tree-item/nile-tree-item';
+import './nile-tree';
+
+describe("NileTree",()=>{
+	
+})

package/src/nile-tree/nile-tree.ts

@@ -80,6 +80,8 @@ export class NileTree extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
   @query('slot[name=expand-icon]') expandedIconSlot: HTMLSlotElement;
   @query('slot[name=collapse-icon]') collapsedIconSlot: HTMLSlotElement;