@aquera/nile-elements 0.0.38 → 0.0.39

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

@@ -1,11 +1,11 @@
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import {  query } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
 import type NileMenuItem from '../nile-menu-item/nile-menu-item';
-import {styles} from './nile-menu.css';
+import { styles } from './nile-menu.css';
 
 /**
  * An nile-menu element.
@@ -22,6 +22,13 @@ import {styles} from './nile-menu.css';
 @customElement('nile-menu')
 export class NileMenu extends NileElement {
   static styles: CSSResultGroup = styles;
+  @state() searchValue: string = '';
+  @state() searchWidth: number = 0;
+
+  @property({ type: Boolean, reflect: true }) searchEnabled = false;
+  @property({ type: Boolean }) showNoResults: boolean = false;
+
+  @property({ type: String }) noResultsMessage: string = 'No results found';
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -43,7 +50,7 @@ export class NileMenu extends NileElement {
       item.checked = !item.checked;
     }
 
-    this.emit('nile-select', { value :item.value });
+    this.emit('nile-select', { value: item.value });
   }
 
   private handleKeyDown(event: KeyboardEvent) {
@@ -113,19 +120,23 @@ export class NileMenu extends NileElement {
   private isMenuItem(item: HTMLElement) {
     return (
       item.tagName.toLowerCase() === 'nile-menu-item' ||
-      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')
+      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(
+        item.getAttribute('role') ?? ''
+      )
     );
   }
 
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
-    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {
-      if ( !this.isMenuItem(el)) {
-      // if (el.inert || !this.isMenuItem(el)) {
-        return false;
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (el: HTMLElement) => {
+        if (!this.isMenuItem(el)) {
+          // if (el.inert || !this.isMenuItem(el)) {
+          return false;
+        }
+        return true;
       }
-      return true;
-    }) as NileMenuItem[];
+    ) as NileMenuItem[];
   }
 
   /**
@@ -149,15 +160,51 @@ export class NileMenu extends NileElement {
     });
   }
 
+  private handleSearchChange(e: any) {
+    let items = this.getAllItems();
+    let counter = 0;
+    items.map(curr_item => {
+      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);
+      if (
+        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())
+      ) {
+        curr_item.style.display = 'block';
+        counter++;
+      } else {
+        curr_item.style.display = 'none';
+      }
+    });
+    this.showNoResults = counter === 0;
+  }
+
   render() {
     return html`
-      <slot
-        @slotchange=${this.handleSlotChange}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-        @mousedown=${this.handleMouseDown}
-      ></slot>
-  `;
+      <div>
+          ${this.searchEnabled
+            ? html` <nile-input
+                size="medium"
+                clearable
+                style=${this.searchWidth
+                  ? `width: ${this.searchWidth}px;`
+                  : 'width: 100%;'}
+                .value=${this.searchValue}
+                placeholder="Search..."
+                @nile-input=${this.handleSearchChange}
+              >
+                <nile-icon name="search" slot="suffix"> </nile-icon>
+              </nile-input>`
+            : html``}
+        ${this.showNoResults
+          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
+          : ''}
+        <slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+          @mousedown=${this.handleMouseDown}
+        ></slot>
+      </div>
+    `;
   }
 }
 export default NileMenu;

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

@@ -42,7 +42,7 @@ export const styles = css`
     line-height: 1.8;
     letter-spacing: normal;
     color: hsl(240 5.3% 26.1%);
-    padding: 0.25rem 0.25rem;
+    padding : 12px 0;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;

package/src/nile-popover/index.ts

@@ -0,0 +1 @@
+export {NilePopover} from './nile-popover';

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Popover CSS
+ */
+export const styles = css`
+  :host {
+    box-sizing: 'border-box';
+  }
+
+  .popover__title {
+    display: block;
+    color: var(--Dark-Normal, var(--Color-Text-Default, #000));
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: Colfax;
+    font-size: var(--nile-type-scale-4);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--nile-type-scale-4); /* 100% */
+    letter-spacing: 0.2px;
+  }
+
+  .popover__box {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-width: 352px;
+    gap: var(--nile-type-scale-4);
+    padding: var(--nile-type-scale-4);
+    border-radius: var(--nile-radius-base-standard);
+    background-color:var(--nile-colors-white-base);
+  }
+
+  .popover__action {
+    align-self: end;
+    display: inline;
+  }
+
+  nile-popup {
+    --arrow-size: 18px;
+    --arrow-color: #ffff;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,138 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import { styles } from './nile-popover.css';
+import type NilePopup from '../nile-popup/nile-popup';
+import { string } from '../nile-icon/icons/svg';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popover
+ *
+ */
+@customElement('nile-popover')
+export class NilePopover extends LitElement {
+  /**
+   * The styles for Popover
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip
+   * inside of the viewport.
+   */
+  @property() placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'top';
+
+  /** The distance in pixels from which to offset the popover away from its target. */
+  @property({ type: Number }) distance = 18;
+
+  /** Gives the title to the popover */
+  @property({ type: String }) title = '';
+
+  @state() private isShow = false;
+
+  @property({ attribute: 'arrow-placement' }) arrowPlacement:
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'anchor' = 'anchor';
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleDocumentClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.handleDocumentClick);
+  }
+
+  private handleClick = () => {
+    this.isShow = !this.isShow;
+  };
+
+  private handleDocumentClick = () => {
+    if (this.isShow) {
+      this.isShow = !this.isShow;
+    }
+  };
+
+  public render(): TemplateResult {
+    return html`
+      <nile-popup
+        active
+        ?arrow="${this.title ? this.isShow : false}"
+        distance="${this.distance}"
+        placement="${this.placement}"
+        @click=${(e: Event) => e.stopPropagation()}
+        arrowPlacement="${this.arrowPlacement}"
+        flip
+        shift
+      >
+        <slot
+          slot="anchor"
+          name="anchor"
+          aria-describedby="tooltip"
+          @click=${this.handleClick}
+        ></slot>
+        ${this.title && this.isShow
+          ? html` <div
+              part="popover"
+              class="popover__box"
+            >
+              <slot name="title" class="popover__title">${this.title}</slot>
+              <slot></slot>
+              <slot name="action" class="popover__action"> </slot>
+            </div>`
+          : html``}
+      </nile-popup>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NilePopover;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-popover': NilePopover;
+  }
+}

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

@@ -121,4 +121,9 @@ export const styles = css`
     font-size: var(--nile-type-scale-3);
     margin-top: 2px;
   }
+  .radio__label_border {
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid var(--Neutral-Normal, #E5E9EB);
+  }
 `;

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

@@ -48,6 +48,9 @@ export class NileRadio extends NileElement {
   /** Disables the radio. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** The radio's labelborder. */
+  @property({ type: Boolean, reflect: true }) islabelborder = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleBlur = this.handleBlur.bind(this);
@@ -129,6 +132,7 @@ export class NileRadio extends NileElement {
           'radio--disabled': this.disabled,
           'radio--focused': this.hasFocus,
           'radio--medium': this.size === 'medium',
+          'radio__label_border':this.islabelborder
         })}
       >
         <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">

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

@@ -8,7 +8,7 @@ export default css`
 
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: 1.3rem !important;
+    margin-right: 24px !important;
   }
 
   .form-control {

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

@@ -70,6 +70,9 @@ export class NileRadioGroup extends NileElement {
 
   @property({ attribute: 'error-message' }) errorMessage = '';
 
+  /** The radio's labelborder for whole gp. */
+  @property({ type: Boolean, reflect: true }) islabelborder = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -176,9 +179,14 @@ export class NileRadioGroup extends NileElement {
   private handleSlotChange() {
     const radios = this.getAllRadios();
 
-    radios.forEach(radio => (radio.checked = radio.value === this.value));
-
-    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'nile-radio-button');
+    radios.forEach(radio => {
+      radio.checked = radio.value === this.value;
+      if (this.islabelborder) {
+        radio.islabelborder=true;
+      }
+    });
+    const nile_radio_check='nile-radio-button';
+    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === nile_radio_check);
 
     if (!radios.some(radio => radio.checked)) {
       if (this.hasButtonGroup) {

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

@@ -37,6 +37,7 @@ import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -152,6 +153,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) optionsLoading = false;
 
+  @property({ type: Boolean, reflect: true }) noWidthSync = false;
+
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
@@ -1055,7 +1058,7 @@ export class NileSelect extends NileElement implements NileFormControl {
             distance="6"
             flip
             shift
-            sync="width"
+            sync=${ifDefined(!this.noWidthSync ? 'width' : undefined)}
             auto-size="vertical"
             auto-size-padding="10"
           >
@@ -1261,6 +1264,7 @@ export class NileSelect extends NileElement implements NileFormControl {
 
               ${this.multiple
                 ? html` <div
+                    part="footer"
                     class="select__footer"
                     @click="${this.handleFooterClick}"
                   >

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

@@ -19,6 +19,9 @@ export const styles = css`
   .pointer-cursor {
     cursor: pointer;
   }
+  .pointer-cursor-not-allowed {
+    cursor: default;
+  }
 
   .switcher__label {
     display: flex;
@@ -36,6 +39,7 @@ export const styles = css`
   switcher-object-mapper:hover {
     display: flex;
   }
+
   .switcher-icon-container.current {
     background: var(--nile-colors-primary-100);
   }
@@ -54,7 +58,7 @@ export const styles = css`
 
   .switcher-inline > :nth-child(2) {
     flex: 1;
-    overflow: hidden;
+    min-width: 0;
   }
 
   .switcher-icons-container {
@@ -105,6 +109,14 @@ export const styles = css`
   .switcher-object-mapper--noborder::part(base) {
     border: none;
   }
+
+  .switcher-dropdown--noborder::part(combobox) {
+    border: none;
+  }
+
+  .switcher-dropdown--noborder::part(expand-icon) {
+    display: none;
+  }
 `;
 
 export default [styles];

package/src/nile-switcher/nile-switcher.ts

@@ -66,7 +66,7 @@ export interface switchInputType {
   noborder?: boolean;
   multiLine?: boolean;
   expand?: boolean;
-  expandable?: boolean;
+  updateValue?: false;
 }
 
 export enum POSITIONS {
@@ -107,7 +107,7 @@ export class NileSwitcher extends NileElement {
 
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
-  @property({ type: Number }) current: Number = 1;
+  @property({ type: Number }) current: Number = 0;
 
   @property({ type: Object }) currentInput: switchInputType;
 
@@ -175,11 +175,15 @@ export class NileSwitcher extends NileElement {
       error,
       errorMessage,
       inputType,
+      noborder,
     } = Input;
 
     return html`<nile-select
       part="dropdown"
-      class="switcher-dropdown"
+      class=${classMap({
+        'switcher-dropdown': true,
+        'switcher-dropdown--noborder': !!noborder,
+      })}
       .placeholder=${placeholder}
       .disabled="${disabled}"
       .multiple="${multiple}"
@@ -255,8 +259,16 @@ export class NileSwitcher extends NileElement {
   }
 
   renderContentEditor(Input: switchInputType) {
-    let { options, inputType, errorMessage, type, readonly, noborder, value } =
-      Input;
+    let {
+      options,
+      inputType,
+      errorMessage,
+      type,
+      readonly,
+      noborder,
+      value,
+      updateValue,
+    } = Input;
     return html`<nile-content-editor
       class="switcher-content-editor"
       .value=${value}
@@ -264,6 +276,7 @@ export class NileSwitcher extends NileElement {
       .type=${type}
       .readonly=${readonly}
       .noborder=${noborder}
+      .updateValue=${updateValue}
       .errorMessage=${errorMessage}
       @nile-change=${(e: CustomEvent) => {
         this.handleChange(e, inputType);
@@ -315,7 +328,8 @@ export class NileSwitcher extends NileElement {
       error,
       inputType,
       noborder,
-      expandable,
+      expand,
+      updateValue,
     } = Input;
     return html`<nile-code-editor
       part="switcher-code-editor"
@@ -328,8 +342,13 @@ export class NileSwitcher extends NileElement {
         this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
       .multiline="${multiLine}"
       .value="${value}"
-      .expandable="${expandable}"
-      .customOptions="${customAutoCompletions}"
+      .readonly=${readonly}
+      .expandable="${expand}"
+      .error=${error}
+      .noborder=${noborder}
+      .updateValue=${updateValue}
+      .errorMessage=${errorMessage}
+      .customAutoCompletions="${customAutoCompletions}"
     ></nile-code-editor> `;
   }
 
@@ -380,6 +399,7 @@ export class NileSwitcher extends NileElement {
               size="16"
               class=${classMap({
                 'pointer-cursor': true,
+                'pointer-cursor-not-allowed': index === this.current,
               })}
               .name=${input.icon}
               color="#000000"
@@ -405,9 +425,8 @@ export class NileSwitcher extends NileElement {
   }
 
   singleFieldSwitcher() {
-    if (!this.currentInput) {
-      this.setCurrentInput();
-    }
+    this.setCurrentInput();
+
     return html`
       ${choose(
         this.currentInput.inputType,
@@ -450,6 +469,7 @@ export class NileSwitcher extends NileElement {
   public render(): TemplateResult {
     const hasLabelSlot = this.hasSlotController.test('label');
     const align = this.nileSwitchConfig.align;
+    const disable = this.nileSwitchConfig.disable;
     return html`<div
       part="base"
       class=${classMap({
@@ -470,7 +490,7 @@ export class NileSwitcher extends NileElement {
         </label>
           </div> `
           : ''}
-        ${this.renderIcon()}
+        ${!disable ? html`${this.renderIcon()}` : ''}
       </div>
       ${this.singleFieldSwitcher()}
     </div>`;

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

@@ -19,6 +19,11 @@ export const styles = css`
     display: inline-block;
   }
 
+  :host([centered]) {
+    flex: 1;
+    text-align: center;
+  }
+
   .tab {
     display: inline-flex;
     align-items: center;

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

@@ -55,6 +55,8 @@ export class NileTab extends NileElement {
   /** Disables the tab and prevents selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  @property({ type: Boolean, reflect: true }) centered = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'tab');
@@ -94,6 +96,7 @@ export class NileTab extends NileElement {
         part="base"
         class=${classMap({
           tab: true,
+          'tab--centered': this.centered,
           'tab--active': this.active,
           'tab--closable': this.closable,
           'tab--disabled': this.disabled

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

@@ -75,6 +75,9 @@ export class NileTabGroup extends NileElement {
   /** Disables the scroll arrows that appear when tabs overflow. */
   @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
 
+  /** Controls whether tabs are centered and have equal width */
+  @property({ type: Boolean, reflect: true }) centered = false;
+
   connectedCallback() {
     const whenAllDefined = Promise.allSettled([
       customElements.whenDefined('nile-tab'),
@@ -335,6 +338,10 @@ export class NileTabGroup extends NileElement {
     this.panels = this.getAllPanels();
     this.syncIndicator();
 
+    this.tabs.forEach((tab:any) => {
+      tab.centered = this.centered;
+    });
+
     // After updating, show or hide scroll controls as needed
     this.updateComplete.then(() => this.updateScrollControls());
   }