@aquera/nile-elements 0.0.99 → 0.0.100

package/package.json

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

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

@@ -45,7 +45,7 @@ export class NileCalendar extends NileElement {
 
   @property({ type: Boolean }) range = false;
 
-  @property({ type: String }) type = 'absolute';
+  @property({ type: String, reflect: true }) type :'absolute' | 'relative' = 'absolute';
 
   @property({ type: String }) selectedUnit: string;
 
@@ -157,7 +157,7 @@ export class NileCalendar extends NileElement {
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
-            <nile-tab-group centered @nile-tab-show="${this.onTypeChange}">
+            <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
               <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
               <nile-tab slot="nav" panel="relative">Relative</nile-tab>
             </nile-tab-group>
@@ -759,6 +759,7 @@ export class NileCalendar extends NileElement {
 
   onTypeChange(event: CustomEvent) {
     this.type = event.detail.value;
+    this.emit('nile-type-change', { value: this.type })
   }
   getUTCDate(dateStr:any){
    return  new Date(

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

@@ -35,8 +35,11 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean }) range = false;
 
-  @property({ type: Boolean, attribute: 'hide-time-zone' }) hideTimeZone =
-    false;
+  @property({ type: Boolean }) open = false;
+
+  @property({ type: Boolean, attribute: 'hide-time-zone' }) hideTimeZone = false;
+
+  @property({ type: String, reflect: true }) type :'absolute' | 'relative' = 'absolute';
 
   @property({ type: Boolean, attribute: 'showManualInputs' })
   showManualInputs = false;
@@ -55,9 +58,10 @@ export class NileDatePicker extends NileElement {
    */
   render(): TemplateResult {
     return html`
-      <nile-dropdown part="dd-base" .hoist="${true}" distance="6" exportparts="base">
+      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
         <slot slot="trigger" part="trigger" name="trigger"></slot>
         <nile-calendar
+        	.type="${this.type}"
           value="${this.value}"
           .range="${this.range}"
           @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"

package/src/nile-icon/icons/svg/code-generator.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTE1MzJfMjIxMzkpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1Ljc5NDEgOC4xMDI5M0wxMS45NjQ3IDYuODI2NDZDMTAuNjQ2OSA2LjM4NzE3IDkuNjEyNzggNS4zNTMwNCA5LjE3MzQ5IDQuMDM1MTlMNy44OTcwNSAwLjIwNTg2OEw2LjYyMDYyIDQuMDM1MThDNi4xODEzMyA1LjM1MzA0IDUuMTQ3MjEgNi4zODcxNyAzLjgyOTM2IDYuODI2NDZMMCA4LjEwMjkzTDMuODI5MyA5LjM3OTMzQzUuMTQ3MTkgOS44MTg2MSA2LjE4MTMzIDEwLjg1MjggNi42MjA2MiAxMi4xNzA2TDcuODk3MDUgMTZMOS4xNzM0OCAxMi4xNzA2QzkuNjEyNzcgMTAuODUyOCAxMC42NDY5IDkuODE4NjEgMTEuOTY0OCA5LjM3OTMzTDE1Ljc5NDEgOC4xMDI5M1pNMTIuMzA1IDguMTAyOTFMMTEuNjE1OCA3Ljg3MzE5QzkuOTY4NTIgNy4zMjQwNyA4LjY3NTg3IDYuMDMxNDIgOC4xMjY3NiA0LjM4NDFMNy44OTcwNSAzLjY5NDk3TDcuNjY3MzUgNC4zODQxQzcuMTE4MjQgNi4wMzE0MiA1LjgyNTU5IDcuMzI0MDcgNC4xNzgyNyA3Ljg3MzE5TDMuNDg5MTIgOC4xMDI5MUw0LjE3ODIgOC4zMzI2QzUuODI1NTYgOC44ODE3IDcuMTE4MjQgMTAuMTc0NCA3LjY2NzM1IDExLjgyMTdMNy44OTcwNSAxMi41MTA5TDguMTI2NzUgMTEuODIxN0M4LjY3NTg2IDEwLjE3NDQgOS45Njg1NSA4Ljg4MTcgMTEuNjE1OSA4LjMzMjZMMTIuMzA1IDguMTAyOTFaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMy44MjIzIDBMMTQuMDE3OCAwLjU4NjUzOUMxNC4yMzc1IDEuMjQ1NDcgMTQuNzU0NSAxLjc2MjUzIDE1LjQxMzQgMS45ODIxOEwxNiAyLjE3NzdMMTUuNDEzNSAyLjM3MzJDMTQuNzU0NSAyLjU5Mjg0IDE0LjIzNzUgMy4xMDk5MSAxNC4wMTc4IDMuNzY4ODZMMTMuODIyMyA0LjM1NTM5TDEzLjYyNjggMy43Njg4NkMxMy40MDcyIDMuMTA5OTEgMTIuODkwMSAyLjU5Mjg0IDEyLjIzMTEgMi4zNzMyTDExLjY0NDYgMi4xNzc3TDEyLjIzMTIgMS45ODIxOEMxMi44OTAxIDEuNzYyNTMgMTMuNDA3MiAxLjI0NTQ3IDEzLjYyNjggMC41ODY1MzhMMTMuODIyMyAwWiIgZmlsbD0iYmxhY2siLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF8xMTUzMl8yMjEzOSI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/guide-01.ts

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

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

@@ -77,6 +77,7 @@ export { default as clockrewind } from './clock-rewind';
 export { default as clock } from './clock';
 export { default as close } from './close';
 export { default as cloud01 } from './cloud-01';
+export { default as codegenerator } from './code-generator';
 export { default as collapse1 } from './collapse-1';
 export { default as collapse } from './collapse';
 export { default as color } from './color';
@@ -237,6 +238,7 @@ export { default as groupanalysisicon } from './group-analysis-icon';
 export { default as group } from './group';
 export { default as groupby } from './groupby';
 export { default as groups } from './groups';
+export { default as guide01 } from './guide-01';
 export { default as guide } from './guide';
 export { default as handtool } from './handtool';
 export { default as headeractions } from './header-actions';
@@ -328,6 +330,7 @@ export { default as notification } from './notification';
 export { default as notificationadd } from './notificationadd';
 export { default as notificationadded } from './notificationadded';
 export { default as notscheduled } from './notscheduled';
+export { default as npl } from './npl';
 export { default as null } from './null';
 export { default as number } from './number';
 export { default as numberinput } from './numberinput';

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

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTE1MzJfMjIxMTkpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuNSAwLjVIMTUuNVYxNS41SDAuNVYwLjVaTTEuNSAxLjVWMTQuNUgxNC41VjEuNUgxLjVaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMS42OTA2IDYuMzUyNTRWNy42MzU3NEgxMi4wNDUxQzEyLjMyODMgNy42MzU3NCAxMi41MjY1IDcuNTg3ODkgMTIuNjM5OCA3LjQ5MjE5QzEyLjc1NSA3LjM5NjQ4IDEyLjgxMjcgNy4yMzA0NyAxMi44MTI3IDYuOTk0MTRDMTIuODEyNyA2Ljc1NzgxIDEyLjc1NSA2LjU5MTggMTIuNjM5OCA2LjQ5NjA5QzEyLjUyNjUgNi40MDAzOSAxMi4zMjgzIDYuMzUyNTQgMTIuMDQ1MSA2LjM1MjU0SDExLjY5MDZaTTEwLjgyNjMgNS42MjU5OEgxMi4wMTI5QzEyLjYxNjQgNS42MjU5OCAxMy4wNSA1LjczMzQgMTMuMzEzNiA1Ljk0ODI0QzEzLjU3OTMgNi4xNjMwOSAxMy43MTIxIDYuNTExNzIgMTMuNzEyMSA2Ljk5NDE0QzEzLjcxMjEgNy40NzY1NiAxMy41NzkzIDcuODI1MiAxMy4zMTM2IDguMDQwMDRDMTMuMDUgOC4yNTQ4OCAxMi42MTY0IDguMzYyMyAxMi4wMTI5IDguMzYyM0gxMS42OTA2VjEwSDEwLjgyNjNWNS42MjU5OFoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTcuMDY5MTEgMTBWNS42MjU5OEg3LjkzMzM3VjkuMjM4MjhIOS43ODJWMTBINy4wNjkxMVoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTIuNTc1ODIgNS42MjU5OEgzLjUwNDUzTDQuNzIzMjggOC44MDQ2OVY1LjYyNTk4SDUuNDg1VjEwSDQuNTYyMTVMMy4zMzc1NCA2LjgyMTI5VjEwSDIuNTc1ODJWNS42MjU5OFoiIGZpbGw9ImJsYWNrIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMTE1MzJfMjIxMTkiPjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=";

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

@@ -470,6 +470,7 @@ export const styles = css`
 
   .input__password {
     font-family: 'disc';
+    letter-spacing: 2px;
   }
 
   .input__non-printable {

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

@@ -15,7 +15,7 @@ import { query, state } from 'lit/decorators.js';
 import { scrollIntoView } from '../internal/scroll';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
 import type NileTab from '../nile-tab/nile-tab';
 import type NileTabPanel from '../nile-tab-panel/nile-tab-panel';
 
@@ -66,9 +66,11 @@ export class NileTabGroup extends NileElement {
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
 
+  /** The placement of the tabs. */
+  @property({ reflect: true, attribute: 'value', type: String }) activeTabName: string = '';
 
   /** Track for showing Indicators and Background. */
-  @property({ type: Boolean, reflect: true,attribute:'no-track'}) noTrack = false;
+  @property({ type: Boolean, reflect: true, attribute:'no-track'}) noTrack = false;
 
   /**
    * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
@@ -109,17 +111,18 @@ export class NileTabGroup extends NileElement {
 
     // After the first update...
     this.updateComplete.then(() => {
+      this.setActiveTab(this.getActiveTab(), { emitEvents: false });
+      this.syncIndicator();
+
       this.syncTabsAndPanels();
       this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
       this.resizeObserver.observe(this.nav);
-
       // Wait for tabs and tab panels to be registered
       whenAllDefined.then(() => {
         // Set initial tab state when the tabs become visible
         const intersectionObserver = new IntersectionObserver((entries, observer) => {
             if (entries[0].intersectionRatio > 0) {
               this.setAriaLabels();
-            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
               observer.unobserve(entries[0].target);
             }
         });
@@ -133,6 +136,14 @@ export class NileTabGroup extends NileElement {
     this.resizeObserver.unobserve(this.nav);
   }
 
+  protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    if(_changedProperties.has('activeTabName')){
+      const tab=this.getActiveTab()
+      if(!tab) return;
+      this.setActiveTab(tab, {scrollBehavior: 'smooth' });
+    }
+  }
+
   private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {
     const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="nav"]')!;
 
@@ -148,7 +159,7 @@ export class NileTabGroup extends NileElement {
   }
 
   private getActiveTab() {
-    return this.tabs.find(el => el.active);
+    return this.tabs.find(el => el.panel==this.activeTabName) ?? this.tabs[0];
   }
 
   private handleClick(event: MouseEvent) {
@@ -162,7 +173,7 @@ export class NileTabGroup extends NileElement {
     }
 
     if (tab !== null) {
-      this.setActiveTab(tab, { scrollBehavior: 'smooth' });
+      this.activeTabName=tab.panel
     }
   }
 
@@ -179,7 +190,7 @@ export class NileTabGroup extends NileElement {
     // Activate a tab
     if (['Enter', ' '].includes(event.key)) {
       if (tab !== null) {
-        this.setActiveTab(tab, { scrollBehavior: 'smooth' });
+        this.activeTabName=tab.panel
         event.preventDefault();
       }
     }
@@ -219,7 +230,7 @@ export class NileTabGroup extends NileElement {
         this.tabs[index].focus({ preventScroll: true });
 
         if (this.activation === 'auto') {
-          this.setActiveTab(this.tabs[index], { scrollBehavior: 'smooth' });
+          this.activeTabName=this.tabs[index].panel
         }
 
         if (['top', 'bottom'].includes(this.placement)) {
@@ -252,7 +263,6 @@ export class NileTabGroup extends NileElement {
   }
 
   private setActiveTab(tab: NileTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {
-
     options = {
       emitEvents: true,
       scrollBehavior: 'auto',
@@ -264,7 +274,6 @@ export class NileTabGroup extends NileElement {
       const previousTab = this.activeTab;
       this.activeTab = tab;
 
-
       // Sync active tab and panel
       this.tabs.map(el => (el.active = el === this.activeTab));
       this.panels.map(el => (el.active = el.name === this.activeTab?.panel));
@@ -340,7 +349,7 @@ export class NileTabGroup extends NileElement {
   private syncTabsAndPanels() {
     this.tabs = this.getAllTabs({ includeDisabled: false });
     this.panels = this.getAllPanels();
-    this.syncIndicator();
+    // this.syncIndicator();
 
     this.tabs.forEach((tab:any) => {
       tab.centered = this.centered;
@@ -379,7 +388,7 @@ export class NileTabGroup extends NileElement {
     const tab = this.tabs.find(el => el.panel === panel);
 
     if (tab) {
-      this.setActiveTab(tab, { scrollBehavior: 'smooth' });
+      this.activeTabName=tab.panel;
     }
   }