@aquera/nile-elements 1.0.1-beta-1.9 → 1.1.0-beta-1.0

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

@@ -38,8 +38,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
-import NileOptionGroup from '../nile-option-group/nile-option-group';
-import { GroupAttributes } from './nile-select.interface';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -182,8 +180,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   multiple = false as boolean | string;
   
 
-  @property({ attribute: true, reflect: true }) helpText = '';
-  @property({ attribute: 'help-text', reflect: true }) help_text = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
@@ -261,9 +258,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean }) enableVirtualScroll = false;
 
-  /** To enable the group header in the select */
-  @property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
-
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -309,10 +303,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
-
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -389,9 +379,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     // this.requestUpdate();
   }
 
@@ -405,9 +392,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       el.selected = false;
       el.hidden = false;
     });
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     this.value = '';
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
@@ -557,9 +541,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.showSelected = false;
       this.value = '';
       this.displayInput.focus({ preventScroll: true });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -623,9 +604,7 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
+
       this.requestUpdate();
     }
   }
@@ -663,9 +642,6 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -835,9 +811,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
       if (filteredOptions.length === 0) {
@@ -901,14 +874,8 @@ export class NileSelect extends NileElement implements NileFormControl{
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
+      // Show
       this.emit('nile-show', { value: this.value, name: this.name });
-
-      if(this.enableGroupHeader) {
-        this.getAllGroupAttributes().forEach((el: GroupAttributes) => {
-          el.element.classList.remove('nile-group-hidden');
-        });
-      }
-
       this.addOpenListeners();
 
       this.showNoResults = !this.getAllOptions()?.length;
@@ -954,46 +921,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
-  private getAllGroupAttributes() {
-    return Array.from(
-      this.querySelectorAll<NileOptionGroup>('nile-option-group[name]')
-    ).map((el: HTMLElement) => ({
-      name: el?.getAttribute('name') || '',
-      data: el?.getAttribute('data'),
-      element: el
-    }));
-  }
-
-  getUniqueGroupNames(arr: NileOption[]) {
-    return Array.from(new Set(arr.map(obj => obj?.groupName)));
-  }
-  
-  handleGroupSearchChange() {
-    const filtered = new Set(
-      this.getUniqueGroupNames(this.filterOptions(this.searchValue))
-    );
-    this.getAllGroupAttributes().forEach(({ name, element }) => {
-      element?.classList.toggle('nile-group-hidden', !filtered.has(name));
-    });
-  }
-  
-  handleGroupShowSelected() {
-    const visibleGroups = new Set<string>();
-  
-    if (this.showSelected) {
-      this.getAllOptions().forEach((option: NileOption) => {
-        if (!option.hidden) visibleGroups.add(option.groupName);
-      });
-    }
-  
-    this.getAllGroupAttributes().forEach(({ name, element }) => {
-      element?.classList.toggle(
-        'nile-group-hidden',
-        this.showSelected && !visibleGroups.has(name)
-      );
-    });
-  }
-
   /** Shows the listbox. */
   async show() {
     if (this.open || this.disabled) {
@@ -1119,7 +1046,7 @@ export class NileSelect extends NileElement implements NileFormControl{
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
-    const hasHelpText = (this.helpText || this.help_text) ? true : false;
+    const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const prefixContent = this.selectedOptions[0]
       ? this.getOptionPrefix(this.selectedOptions[0])
@@ -1313,7 +1240,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <nile-icon name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+                        <nile-icon name="close" library="system"></nile-icon>
                       </slot>
                     </button>
                   `
@@ -1332,7 +1259,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                 part="expand-icon"
                 class="select__expand-icon"
               >
-                <nile-icon library="system" name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+                <nile-icon library="system" name="arrowdown"></nile-icon>
               </slot>
             </div>
 
@@ -1361,7 +1288,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"
                     >
-                      <nile-icon name="var(--nile-icon-search, var(--ng-icon-search-lg))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="suffix"> </nile-icon>
+                      <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>
                   </div>`
                 : ``}
@@ -1370,8 +1297,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                     <span class="select__loader">
                       <nile-icon
                         class="select__loader--icon"
-                        name="var(--nile-icon-button-loading-blue, var(--ng-icon-button-loading-blue))"
-                        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                        name="button-loading-blue"
                       ></nile-icon>
                     </span>
                   `
@@ -1423,7 +1349,7 @@ export class NileSelect extends NileElement implements NileFormControl{
         </div>
 
         ${hasHelpText
-          ? html` <nile-form-help-text>${(this.helpText || this.help_text)}</nile-form-help-text> `
+          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
           : ``}
         ${hasErrorMessage
           ? html`

package/src/nile-sidebar/index.ts

@@ -28,26 +28,23 @@ export class NileSidebar extends LitElement {
   static override styles = css`
     :host {
       background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid var(--nile-colors-neutral-400);
+      border-right: 1px solid var(--nile-colors-neutral-400);      
       min-height: 100vh;
       background: var(--nile-colors-neutral-100);
       border: 1px solid var(--nile-colors-neutral-400);
-      -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));
     }
     :host([showSidebar=true]) {
       min-width: 240px;
     }
     .nile-logo {
-      margin: var(--nile-spacing-2xl);
+      margin: 24px;
       display: block;
-      margin-bottom: var(--nile-spacing-lg);
+      margin-bottom: 12px;
     }
 
     .menu-group {
-      margin-left: var(--nile-spacing-2xl);
-      margin-right: var(--nile-spacing-2xl);
+      margin-left: 24px;
+      margin-right: 24px;
     }
 
     .view-component {
@@ -58,15 +55,15 @@ export class NileSidebar extends LitElement {
     .view-component__item {
       background-color: var(--nile-colors-white-base);
       // padding: 1rem;
-      border-radius: var(--nile-radius-sm);
+      border-radius: 3px;
       border: solid 1px #eee;
     }
 
     .nile-menu__hr {
-      border-bottom: solid 1px var(--nile-colors-dark-100);
-      margin-top: var(--nile-spacing-lg) !important;
-      margin-bottom: var(--nile-spacing-lg) !important;
-      background-color: var(--nile-colors-dark-100);
+      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+      margin-top: 12px !important;
+      margin-bottom: 12px !important;
+      background-color: rgba(0, 0, 0, 0.1);
     }
 
     .nds-menu--bottom {
@@ -98,7 +95,7 @@ export class NileSidebar extends LitElement {
   }
 
   // class="nds-menu ${classMap(this.buttonClassMap)}"
-
+  
   override render() {
     return html`
       <div class="nile-menu--wrapper  ${classMap(this.buttonClassMap)}" >
@@ -111,7 +108,7 @@ export class NileSidebar extends LitElement {
               height="31.06px"
               tabindex="1"
             />
-          </a>
+          </a>          
           <div class="menu-group">
             <slot name="menu"></slot>
           </div>

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

@@ -19,11 +19,8 @@ export const styles = css`
     height: 100%;
     box-sizing: border-box;
     display: flex;
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding: 0 16px;
     flex-direction: column;
-    -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));
   }
 
   .submenu__box {
@@ -32,19 +29,19 @@ export const styles = css`
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
-    padding: var(--nile-spacing-lg) var(--nile-spacing-none);
+    padding:12px 0;
   }
 
   .sidemenu__items-list {
     display:flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
   }
 
   .footer {
     display:flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
   }
 
 `;

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts

@@ -13,29 +13,26 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --min-width: 280px;
-    -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));
   }
 
   .nile__sidebar-menu-item {
     display: flex;
     align-items: center;
-    padding: var(--nile-spacing-md);
-    gap: var(--nile-spacing-xl);
+    padding: 12px;
+    gap: 15px;
     min-width: var(--min-width);
     width: max-content;
     box-sizing: border-box;
 
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
     line-height: var(--nile-line-height-medium);
   }
 
   .nile__sidebar-menu-item:hover {
     background-color: var(--nile-colors-neutral-100);
-    border-radius: var(--nile-radius-sm);
+    border-radius: 6px;
   }
 
   .hide-sidebar-menu-items{

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

@@ -57,7 +57,6 @@ export class NileSidebarMenuItems extends NileElement {
               name="${this.iconValue}"
               aria-label="${this.iconValue}"
               size="24"
-              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>`
           : ``}
         <slot

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

@@ -13,9 +13,6 @@ import { css } from 'lit';
 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 {
@@ -36,7 +33,7 @@ export const styles = css`
   .body-content {
     display: flex;
     height: 100%;
-    background-color: var(--nile-colors-red-500);
+    background-color: red;
   }
 
   .sidebar__content--overlay {

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

@@ -5,9 +5,6 @@ export default css`
     --slide-toggle-width:auto;
     display:inline-block;
     width:var(--slide-toggle-width);
-    -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));
   }
 
   .nile-slide-toggle {
@@ -27,43 +24,43 @@ export default css`
     display: inline-block;
     width: 36px;
     height: 20px;
-    line-height: var(--nile-height-22px, var(--ng-height-20px));
+    line-height: 22px;
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-left: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    gap: 2px;
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   .nile-slide-toggle__sublabel {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
   }
 
   .nile-slide--disabled .nile-slide-toggle__label,
   .nile-slide--disabled .nile-slide-toggle__sublabel{
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500);
   }
 
   .nile-slide-toggle__switch input {
@@ -79,23 +76,17 @@ export default css`
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary));
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
-    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
+    border-radius: 34px;
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
-  }
-
-  .nile-slide-toggle__slider:hover {
-    &:not(.nile-slide--disabled) {
-      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));
-    }
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:before {
@@ -105,20 +96,17 @@ export default css`
     width: 16px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
-    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+    border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
-    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
-    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
-    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -126,15 +114,15 @@ export default css`
   }
 
   .nile-slide-toggle__slider.round {
-    border-radius: var(--nile-radius-xl, var(--ng-radius-full));
+    border-radius: 20px;
   }
 
   .nile-slide-toggle__slider.round:before {
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    border-radius: 50%;
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -146,6 +134,6 @@ export default css`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 `;

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

@@ -16,9 +16,6 @@ export const styles = css`
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--nile-colors-white-base);
     --speed: 2s;
-    -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));
 
     display: inline-flex;
     width: 1em;

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

@@ -29,9 +29,6 @@ export const styles = css`
     --max: 100%;
 
     display: grid;
-    -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));
   }
 
   .start,
@@ -45,8 +42,8 @@ export const styles = css`
     position: relative;
     align-items: center;
     justify-content: center;
-    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
     z-index: 1;
   }
 
@@ -55,8 +52,8 @@ export const styles = css`
   }
 
   :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
   }
 
   :host([disabled]) .divider {

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

@@ -17,22 +17,19 @@ export const styles = css`
 	:host {
 		display:block;
 		height:100%;
-		-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));
 	}
 	.nile-stepper--horizontal{
 		display:flex;
 		align-items:center;
-		padding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 
 	.nile-stepper--vertical{
 		height:100%;
 		display:flex;
 		flex-direction:column;
-		padding: var( --nile-spacing-spacing-3xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 `;
 
-export default [styles];
+export default [styles];