@aquera/nile-elements 0.0.109 → 0.0.111

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -16,6 +16,8 @@ import type { CSSResultGroup } from 'lit';
 export class NileAutoComplete extends NileElement {
 
   static styles: CSSResultGroup = styles;
+  
+  protected override BUBBLES: boolean=false;
 
   // Define component properties
   @property({ type: Boolean }) isDropdownOpen: boolean = false;
@@ -110,7 +112,7 @@ export class NileAutoComplete extends NileElement {
           ? html`
               <nile-menu @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
                 ${this.menuItems.map(
-                  (item: unknown)  => html`
+                  (item: any)  => html`
                     <nile-menu-item value=${item}>${item}</nile-menu-item>
                   `
                 )}

package/src/nile-avatar/nile-avatar.ts

@@ -35,6 +35,8 @@ export class NileAvatar extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   /** Gives the url to the Avatar */
   @property({ type: String, reflect: true }) src = '';
 

package/src/nile-badge/nile-badge.ts

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

package/src/nile-breadcrumb/nile-breadcrumb.ts

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

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

@@ -32,6 +32,8 @@ export class NileBreadcrumbItem extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @state() private isLast = false;
 
   /* #endregion */

package/src/nile-button/nile-button.ts

@@ -38,6 +38,8 @@ import NileElement from '../internal/nile-element';
 export class NileButton extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly formControlController = new FormControlController(this, {
     form: input => {
       // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query

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

@@ -27,6 +27,8 @@ export class NileButtonToggle extends NileElement {
 		return [styles];
 	}
 
+  protected override BUBBLES: boolean=false;
+
   @property({ type: Boolean, reflect: true })
   active = false;
 

package/src/nile-button-toggle-group/nile-button-toggle-group.ts

@@ -26,6 +26,8 @@ export class NileButtonToggleGroup extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @queryAll('nile-button-toggle') private toggles!: NodeListOf<NileButtonToggle>;
 
   @query('slot:not([name])') private defaultSlot!: HTMLSlotElement;

package/src/nile-calendar/nile-calendar.ts

@@ -37,13 +37,15 @@ export class NileCalendar extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @query('nile-dropdown') dropdown: NileDropdown;
 
   @property({ type: String, attribute: 'value' }) valueAttribute: | string | null = null;
 
   @property({ type: String, attribute:true, reflect:true }) allowedDates: string = JSON.stringify({});
 
-  @property({ type: Boolean }) range = false;
+  @property({ type: Boolean, reflect: true }) range = false;
 
   @property({ type: Boolean, attribute: true, reflect:true }) hideTypes = false;
 
@@ -103,6 +105,7 @@ export class NileCalendar extends NileElement {
       this.valueAttribute = newValue;
       this.initializeValue();
     } 
+    super.attributeChangedCallback(name, _old, newValue);
   }
 
   @watch('allowedDates')
@@ -157,7 +160,6 @@ export class NileCalendar extends NileElement {
           base__range:this.range,
         })}
       >
-      ${this.hideTypes}
         <div class=${classMap({
           "calendar-config":true,
           "hidden": !this.range || (this.range && this.hideTypes)

package/src/nile-card/nile-card.ts

@@ -29,6 +29,8 @@ import { CSSResultGroup } from 'lit';
 export class NileCard extends NileElements {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(this, 'footer');
 
   render() {

package/src/nile-checkbox/nile-checkbox.ts

@@ -59,6 +59,8 @@ export class NileCheckbox extends NileElement {
   }
  
   static styles: CSSResultGroup = styles;
+
+  protected override BUBBLES: boolean=false;
  
   @query('input[type="checkbox"]') input: HTMLInputElement;
  
@@ -117,15 +119,8 @@ export class NileCheckbox extends NileElement {
   private handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
-    this.dispatchEvent(
-      new CustomEvent('valueChange', {
-        composed: true,
-        bubbles: true,
-        detail: {
-          checked: this.checked,
-        },
-      })
-    );
+    this.emit('nile-change',{checked: this.checked})
+    this.emit('valueChange',{checked: this.checked})
   }
  
   private handleBlur() {

package/src/nile-chip/nile-chip.ts

@@ -28,6 +28,8 @@ export class NileChip extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+  
+  protected override BUBBLES: boolean=false;
 
   private readonly hasSlotController = new HasSlotController(
     this,

package/src/nile-code-editor/nile-code-editor.ts

@@ -48,6 +48,8 @@ const TIME_OUT_DURATION=200;
  */
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
+
+  protected override BUBBLES: boolean=false;
   
   @query('.code-mirror') codeEditor: HTMLInputElement;
 

package/src/nile-content-editor/nile-content-editor.ts

@@ -31,6 +31,8 @@ export class NileContentEditor extends NileElement {
  * @event nile-change - Emitted when the control's value changes.  
  */
 
+  protected override BUBBLES: boolean=false;
+
   @property() value: string = '';
 
   @property() options: Array<any>;

package/src/nile-date-picker/nile-date-picker.ts

@@ -33,6 +33,8 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @property({ type: Boolean }) range = false;
 
   @property({ type: Boolean }) hideTypes = false;
@@ -67,10 +69,8 @@ export class NileDatePicker extends NileElement {
         	.type="${this.type}"
           value="${this.value}"
           .range="${this.range}"
-          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
-          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
-          @nile-changed="${(e:CustomEvent)=>e.stopPropagation()}"
           @nile-change="${this.handleChanged}"
+          @nile-type-change="${(e:CustomEvent)=>this.emit('nile-type-change',e.detail)}"
           .allowedDates="${this.allowedDates}"
           .hideDurationFields="${this.hideDurationFields}"
           .showManualInputs="${this.showManualInputs}"
@@ -80,7 +80,6 @@ export class NileDatePicker extends NileElement {
   }
 
   handleChanged(event: CustomEvent) {
-    event.stopPropagation()
     this.emit('nile-changed', event.detail);
     this.emit('nile-change', event.detail);
     if (this.dropdown) {

package/src/nile-dialog/nile-dialog.ts

@@ -14,7 +14,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
 import { HasSlotController } from '../internal/slot';
-import { html } from 'lit';
+import { html,nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';
 import { waitForEvent } from '../internal/event';
@@ -32,7 +32,9 @@ import NileElement from '../internal/nile-element';
 export class NileDialog extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  private readonly hasSlotController = new HasSlotController(this, 'footer');
+  protected override BUBBLES: boolean=false;
+
+  private readonly hasSlotController = new HasSlotController(this, 'footer','sublabel','label');
   private modal: Modal;
   private originalTrigger: HTMLElement | null;
 
@@ -303,13 +305,15 @@ export class NileDialog extends NileElement {
                     <slot name="label">
                       ${this.label?.length
                         ? this.label
-                        : String.fromCharCode(65279)}
-                    </slot>
-                    <slot name="sublabel">
-                      ${this.sublabel?.length
-                        ? this.sublabel
-                        : String.fromCharCode(65279)}
+                        : nothing}
                     </slot>
+                    ${this.sublabel || this.hasSlotController.test('sublabel')?html`
+                      <slot name="sublabel">
+                        ${this.sublabel?.length
+                          ? this.sublabel
+                          : nothing}
+                      </slot>
+                      `:''}
                   </h2>
                   <div part="header-actions" class="dialog__header-actions">
                     <slot name="header-actions"></slot>

package/src/nile-drawer/nile-drawer.ts

@@ -81,6 +81,8 @@ export class NileDrawer extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(this, 'footer');
   private modal: Modal;
   private originalTrigger: HTMLElement | null;

package/src/nile-empty-state/nile-empty-state.ts

@@ -28,6 +28,8 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   @property() size: 'sm' | 'md' | 'lg' = 'md';
 
   @property() variant:

package/src/nile-icon/icons/svg/index.ts

@@ -354,6 +354,7 @@ export { default as ouanalysisicon } from './ou-analysis-icon';
 export { default as override } from './override';
 export { default as palette } from './palette';
 export { default as palletemenu } from './palletemenu';
+export { default as paperclip } from './paperclip';
 export { default as partner } from './partner';
 export { default as partners } from './partners';
 export { default as pause } from './pause';

package/src/nile-icon/icons/svg/paperclip.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuMzM4NyA2LjM1Nzk3TDcuMDc5NTggMTEuNjE3MUM1Ljg4MzYgMTIuODEzMSAzLjk0NDUzIDEyLjgxMzEgMi43NDg1NSAxMS42MTcxQzEuNTUyNTcgMTAuNDIxMSAxLjU1MjU3IDguNDgyMDMgMi43NDg1NSA3LjI4NjA1TDguMDA3NjUgMi4wMjY5NUM4LjgwNDk3IDEuMjI5NjMgMTAuMDk3NyAxLjIyOTYyIDEwLjg5NSAyLjAyNjk1QzExLjY5MjMgMi44MjQyNyAxMS42OTIzIDQuMTE2OTggMTAuODk1IDQuOTE0M0w1Ljg0MjE0IDkuOTY3MTdDNS40NDM0OCAxMC4zNjU4IDQuNzk3MTIgMTAuMzY1OCA0LjM5ODQ2IDkuOTY3MTdDMy45OTk4IDkuNTY4NTEgMy45OTk4IDguOTIyMTUgNC4zOTg0NiA4LjUyMzQ5TDguODMyNjEgNC4wODkzNCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon-button/nile-icon-button.ts

@@ -44,6 +44,8 @@ import NileElement from '../internal/nile-element';
 export class NileIconButton extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
 
   @state() private hasFocus = false;

package/src/nile-input/nile-input.ts

@@ -37,6 +37,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export class NileInput extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['nile-blur', 'nile-input'],
   });

package/src/nile-link/nile-link.ts

@@ -30,6 +30,8 @@ export class NileLink extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(
     this,
     '[default]',
@@ -96,7 +98,7 @@ export class NileLink extends NileElement {
           'link--disabled': this.disabled,
           link__button: this.button,
         })}
-        ?disabled=${ifDefined(this.disabled)}
+        .disabled=${this.disabled}
         title=${
           this
             .title /* An empty title prevents browser validation tooltips from appearing on hover */

package/src/nile-list/nile-list.ts

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

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

@@ -40,6 +40,8 @@ export class NileListItem extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
+
+  protected override BUBBLES: boolean=false;
   @property({ type: String, attribute: 'icon-name' }) iconName = '';
   @property({ type: Number, attribute: 'icon-size' }) iconSize = 14;
 

package/src/nile-menu/nile-menu.ts

@@ -23,6 +23,9 @@ import { HasSlotController } from '../internal/slot';
 @customElement('nile-menu')
 export class NileMenu extends NileElement {
   static styles: CSSResultGroup = styles;
+
+  protected override BUBBLES: boolean=false;
+  
   @state() searchValue: string = '';
   @state() searchWidth: number = 0;
 

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

@@ -48,6 +48,9 @@ import type { CSSResultGroup } from 'lit';
 export class NileMenuItem extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+  protected override COMPOSED: boolean=false;
+
   private cachedTextLabel: string;
 
   @query('slot:not([name])') defaultSlot: HTMLSlotElement;
@@ -92,11 +95,7 @@ export class NileMenuItem extends NileElement {
     // When the label changes, emit a slotchange event so parent controls see it
     if (textLabel !== this.cachedTextLabel) {
       this.cachedTextLabel = textLabel;
-      this.emit('slotchange', {
-        bubbles: true,
-        composed: false,
-        cancelable: false,
-      });
+      this.emit('slotchange');
     }
   }
 

package/src/nile-option/nile-option.ts

@@ -44,6 +44,9 @@ import '../nile-checkbox';
 export class NileOption extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+  protected override COMPOSED: boolean=false;
+
   private cachedTextLabel: string;
 
   @query('.option__label') defaultSlot: HTMLSlotElement;
@@ -96,11 +99,7 @@ export class NileOption extends NileElement {
     // When the label changes, emit a slotchange event so parent controls see it
     if (textLabel !== this.cachedTextLabel) {
       this.cachedTextLabel = textLabel;
-      this.emit('slotchange', {
-        bubbles: true,
-        composed: false,
-        cancelable: false,
-      });
+      this.emit('slotchange');
     }
   }
 

package/src/nile-popover/nile-popover.ts

@@ -11,8 +11,9 @@ import {
   property,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-popover.css';
 import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
@@ -33,6 +34,8 @@ export class NilePopover extends NileElement {
     return [styles];
   }
 
+  protected override BUBBLES: boolean=false;
+
   /**
    * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip
    * inside of the viewport.
@@ -59,7 +62,9 @@ export class NilePopover extends NileElement {
   /** Gives the title to the popover */
   @property({ type: String }) title = '';
 
-  @property({type:Boolean, attribute:'open'}) isShow = false;
+  @property({type:Boolean }) open = false;
+  
+  @state() isShow:boolean = false;
 
   @property({ attribute: 'arrow-placement' }) arrowPlacement:
     | 'start'
@@ -96,29 +101,18 @@ export class NilePopover extends NileElement {
     document.removeEventListener('click', this.handleDocumentClick);
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('open')){
+      this.isShow=this.open;
+    }
+  }
+
   @watch('isShow')
   handleShowHide(){
     if(this.isShow)this.emit('nile-show')
     else this.emit('nile-hide')
   }
 
-  private handleClick = () => {
-    this.isShow = !this.isShow;
-    const allPopovers = document.querySelectorAll('nile-popover');
-
-    allPopovers.forEach(popover => {
-      if (popover !== this) {
-        popover.isShow = false;
-      }
-    });
-  };
-
-  private handleDocumentClick = () => {
-    if (this.isShow) {
-      this.isShow = false;
-    }
-  };
-
   public render(): TemplateResult {
     return html`
       <nile-popup
@@ -149,6 +143,23 @@ export class NilePopover extends NileElement {
     `;
   }
 
+  private handleClick = () => {
+    this.isShow = !this.isShow;
+    const allPopovers = document.querySelectorAll('nile-popover');
+
+    allPopovers.forEach(popover => {
+      if (popover !== this) {
+        popover.isShow = false;
+      }
+    });
+  };
+
+  private handleDocumentClick = () => {
+    if (this.isShow) {
+      this.isShow = false;
+    }
+  };
+
   /* #endregion */
 }
 

package/src/nile-popup/nile-popup.ts

@@ -25,6 +25,9 @@ import type { CSSResultGroup } from 'lit';
 export class NilePopup extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+  protected override COMPOSED: boolean=false;
+
   private anchorEl: Element | null;
   private cleanup: ReturnType<typeof autoUpdate> | undefined;
 

package/src/nile-radio/nile-radio.ts

@@ -81,12 +81,7 @@ export class NileRadio extends NileElement {
 
   private handleBlur() {
     this.hasFocus = false;
-    this.dispatchEvent(
-      new CustomEvent('nile-blur', {
-        bubbles: true,
-        composed: true
-      })
-    );
+    this.emit('nile-blur')
   }
 
   private handleClick() {
@@ -97,12 +92,7 @@ export class NileRadio extends NileElement {
 
   private handleFocus() {
     this.hasFocus = true;
-    this.dispatchEvent(
-      new CustomEvent('nile-focus', {
-        bubbles: true,
-        composed: true
-      })
-    );
+    this.emit('nile-focus')
   }
 
   private setInitialAttributes() {

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

@@ -28,6 +28,8 @@ import type NileRadio from '../nile-radio/nile-radio';
 export class NileRadioGroup extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private customValidityMessage = '';
 

package/src/nile-select/nile-select.ts

@@ -97,6 +97,10 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  protected override BUBBLES: boolean=false;
+
+  // protected override BUBBLES=false;
+
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['nile-blur', 'nile-input'],
   });
@@ -382,8 +386,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
         // Emit after updating
         this.updateComplete.then(() => {
-          this.emit('nile-input', { value: this.value, name: this.name });
-          this.emit('nile-change', { value: this.value, name: this.name });
+          this.nileInput({ value: this.value, name: this.name })
+          this.nileChange({ value: this.value, name: this.name })
         });
 
         if (!this.multiple) {
@@ -518,9 +522,10 @@ export class NileSelect extends NileElement implements NileFormControl {
 
       // Emit after update
       this.updateComplete.then(() => {
-        this.emit('nile-clear', { value: this.value, name: this.name });
-        this.emit('nile-input', { value: this.value, name: this.name });
-        this.emit('nile-change', { value: this.value, name: this.name });
+        const val={ value: this.multiple?this.value:'', name: this.name }
+        this.emit('nile-clear', val);
+        this.nileInput(val);
+        this.nileChange(val);
       });
     }
   }
@@ -559,8 +564,8 @@ export class NileSelect extends NileElement implements NileFormControl {
       if (this.value !== oldValue) {
         // Emit after updating
         this.updateComplete.then(() => {
-          this.emit('nile-input', { value: this.value, name: this.name });
-          this.emit('nile-change', { value: this.value, name: this.name });
+          this.nileInput({ value: this.value, name: this.name });
+          this.nileChange({ value: this.value, name: this.name });
         });
       }
 
@@ -618,8 +623,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
       // Emit after updating
       this.updateComplete.then(() => {
-        this.emit('nile-input', { value: this.value, name: this.name });
-        this.emit('nile-change', { value: this.value, name: this.name });
+        this.nileInput( { value: this.value, name: this.name });
+        this.nileChange( { value: this.value, name: this.name });
         this.emit('nile-tag-remove', { value: this.value, name: this.name,removedtagvalue:option.value });
       });
     }
@@ -1329,6 +1334,15 @@ export class NileSelect extends NileElement implements NileFormControl {
       </div>
     `;
   }
+
+  nileInput(value:any){
+    this.emit('nile-input',value)
+  }
+
+  nileChange(value:any){
+    this.emit('nile-change',value)
+  }
+
 }
 
 setDefaultAnimation('select.show', {

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

@@ -8,6 +8,8 @@ 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 = '';
 
@@ -32,6 +34,7 @@ export class NileSlideToggle extends NileElement {
   toggleValue() {
     this.isChecked = !this.isChecked;
     this.emit('change',{ checked: this.isChecked });
+    this.emit('nile-change',{ checked: this.isChecked });
   }
 
   public render() {

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;