@aquera/nile-elements 0.0.109 → 0.0.110

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/internal/nile-element.ts

@@ -1,15 +1,18 @@
 import { LitElement } from 'lit';
 
 export default class NileElement extends LitElement {
+  protected BUBBLES: boolean = true;
+  protected COMPOSED: boolean = true;
+  protected CANCELABLE: boolean = false;
 
   /** Emits a custom event with more convenient defaults. */
-  emit(name: string, detail?: any, bubbles: boolean = true, composed: boolean = true, cancelable: boolean = false) {
+  emit(name: string, detail?: any, bubbles?: boolean , composed?: boolean, cancelable?: boolean) {
     const event = new CustomEvent(
       name, 
       {
-        bubbles,
-        cancelable,
-        composed,
+        bubbles: bubbles ?? this.BUBBLES,
+        cancelable: cancelable ?? this.CANCELABLE,
+        composed: composed ?? this.COMPOSED,
         detail
       }
     );

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

@@ -43,7 +43,7 @@ export class NileCalendar extends NileElement {
 
   @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 +103,7 @@ export class NileCalendar extends NileElement {
       this.valueAttribute = newValue;
       this.initializeValue();
     } 
+    super.attributeChangedCallback(name, _old, newValue);
   }
 
   @watch('allowedDates')
@@ -157,7 +158,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-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-popover/nile-popover.ts

@@ -11,6 +11,7 @@ import {
   property,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-popover.css';
@@ -59,6 +60,8 @@ export class NilePopover extends NileElement {
   /** Gives the title to the popover */
   @property({ type: String }) title = '';
 
+  @property({type:Boolean }) open = false;
+  
   @property({type:Boolean, attribute:'open'}) isShow = false;
 
   @property({ attribute: 'arrow-placement' }) arrowPlacement:
@@ -96,29 +99,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 +141,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-select/nile-select.ts

@@ -97,6 +97,8 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
+  // protected override BUBBLES=false;
+
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['nile-blur', 'nile-input'],
   });
@@ -382,8 +384,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 +520,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 +562,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 +621,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 +1332,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', {